Se for deg at du legger til et galleri med 20 bilder i en artikkel. Uten shortcodes blir det dusinvis av linjer med HTML med omslag, klasser, dataattributter og miniatyrlenker. Med en shortcode er det én linje: [gallery]. Det var nettopp for denne kontrasten mellom rutinevolum og resultater at WordPress 2.5 introduserte shortcodes, og nesten to tiår senere er mekanismen fortsatt uunnværlig.

Problemet er at de fleste brukere enten frykter shortcodes som «programmør-magi» eller kopierer dem blindt uten å forstå syntaksen. Samtidig kan én enkelt egendefinert shortcode erstatte en plugin på førti megabyte eller spare en time rutinearbeid per måned. Denne gjennomgangen, fra innebygde [gallery] og [audio] til din egen shortcode i functions.php, vil gi deg full kontroll over verktøyet.

💡 Rask oversikt:

• Hva en shortcode er: en tag i hakeparenteser som WordPress erstatter med resultatet av en PHP-funksjon når en side lastes.
• Innebygde shortcodes: gallery, audio, video, caption, embed og playlist fungerer rett etter installasjon av WordPress, uten plugins.
• Shortcode-parametere: syntaksen key="value" lar deg tilpasse utdata uten å endre kode.
• Lage din egen shortcode: fra en enkel URL-erstatning til en bilde-shortcode med attributter, klar PHP-kode for functions.php.
• Shortcodes i widgeter og maler: hvordan du aktiverer støtte med én linje og hvor det er nyttig.

Hva en shortcode er og hvordan den fungerer

En shortcode er en kort tag i hakeparenteser som WordPress erstatter med resultatet av å kjøre en PHP-funksjon i det øyeblikket en side rendres. Du skriver [gallery] i editoren, besøkende ser et ryddig bilderutenett. Ingen magi: bak hver shortcode står en funksjon registrert via add_shortcode() i kjernen, temaet eller en plugin.

Den viktigste forskjellen fra statiske HTML-innsettinger: en shortcode kjøres på serversiden. Du sender parametere til den, og resultatet genereres dynamisk. Innholdet endres, utdataene endres, uten å måtte redigere dusinvis av sider manuelt.

Fra editorens perspektiv er det en nyanse. Den visuelle editoren (Gutenberg eller klassisk TinyMCE) rendrer shortcoden umiddelbart som en forhåndsvisning, så for å jobbe med parametere og nestede tagger, bytt til tekstmodus. Bare der kan du se den virkelige strukturen: åpningstagg, attributter, innhold, avslutningstagg.

Innebygde WordPress-shortcodes: hva som er tilgjengelig uten plugins

WordPress leveres med seks registrerte shortcodes. Du trenger ikke å aktivere eller konfigurere dem, bare sett dem inn i et innlegg og få resultater.

Den mest fleksible blant dem er [gallery]. Attributtet ids lar deg spesifisere bestemte bilder etter ID, også de som ikke er tilknyttet det gjeldende innlegget. Attributtet size angir miniatyrstørrelse (thumbnail, medium, large eller full). Kombinasjonen av disse to parameterne dekker de fleste scenarioer som folk tidligere installerte en egen galleri-plugin for.

[audio] og [video] støtter flere kilder, nettleseren vil velge et kompatibelt format. Spillelister via [playlist] settes sammen av vedleggs-ID-er på samme måte som et galleri, men gir ut en spiller med sporsbytte.

Shortcode-parametere: hvordan kontrollere utdata

De fleste shortcodes aksepterer attributter i formatet key="value". Å bytte ut verdier endrer funksjonens logikk uten å gripe inn i koden.

Ta [gallery]. Uten parametere viser den alle innleggets bilder i standard størrelse. Legg til spesifikasjoner:

1
[gallery ids="12,34,56" size="large" columns="3"]

Nå er utdataene begrenset til tre spesifiserte bilder, størrelsen er økt til large, og rutenettet er ordnet i tre kolonner. Parametere kan kombineres vilkårlig, de som ikke spesifiseres får standardverdier.

Noen shortcodes bruker åpnings- og avslutningstagger når innhold må sendes mellom dem. En Google Maps-plugin kan for eksempel forvente en konstruksjon som:

1
[maps]New York, USA[/maps]

Avslutningstaggen starter alltid med en skråstrek /. WordPress bruker denne notasjonen for å skille innhold mellom tagger fra attributter inne i åpningstaggen.

Hvordan lage din egen shortcode

Når du har satt inn den samme URL-en, HTML-blokken eller handlingsfremmende oppfordringen i artikler for tiende gang på en uke, er det på tide å skrive en shortcode. Dette krever ikke at du er PHP-utvikler: den grunnleggende konstruksjonen får plass på tre linjer.

Enkel shortcode for URL

Legg til denne koden på slutten av temaets functions.php-fil (Utseende → Temaeditor → functions.php):

1
function techblog_short_url() {
2
    return 'https://techblog.sdstudio.top';
3
}
4
add_shortcode( 'techblog', 'techblog_short_url' );

Nå vil [techblog] i ethvert innlegg automatisk erstattes med nettstedets URL. Funksjonen returnerer en streng, WordPress setter den inn i stedet for shortcoden.

To kritisk viktige regler fra den offisielle dokumentasjonen:

• Funksjonen returnerer en verdi via return, ikke sender ut via echo. Direkte utskrift bryter renderingsrekkefølgen og fører til uventede resultater.
• Registrer shortcodes på init-hooken slik at WordPress får tid til å laste alle avhengigheter:

1
add_action( 'init', 'techblog_register_shortcodes' );
2
function techblog_register_shortcodes() {
3
    add_shortcode( 'techblog', 'techblog_short_url' );
4
}

Shortcode for bilde med tilpassbare attributter

Et litt mer komplekst scenario: du vil sette inn et bilde og angi bredde og høyde direkte i editoren. I functions.php:

1
function techblog_img_shortcode( $atts, $content = null ) {
2
    $atts = shortcode_atts(
3
        array(
4
            'width'  => '',
5
            'height' => '',
6
        ),
7
        $atts,
8
        'img'
9
    );
10
    return '<img src="' . esc_url( $content ) . '" width="' . esc_attr( $atts['width'] ) . '" height="' . esc_attr( $atts['height'] ) . '" alt="" />';
11
}
12
add_shortcode( 'img', 'techblog_img_shortcode' );

Bruk i editoren:

1
[img width="800" height="600"]https://example.com/photo.jpg[/img]

Funksjonen shortcode_atts() slår sammen sendte attributter med standardverdier, dette er den standard og sikre måten å håndtere parametere på. Legg merke til esc_url() og esc_attr(): escaping er obligatorisk når du skriver ut brukerinput på frontend. En fullstendig liste over tilgjengelige bildeattributter finnes i W3C-spesifikasjonen.

Separat verdt å nevne er attributtvalidering. Når du mottar verdier fra editoren og setter dem inn i HTML, sjekk alltid datatyper. For numeriske attributter som width og height, bruk intval(), dette kutter bort eventuelle bokstaver. For strenger, definer et tillatt sett med verdier via in_array(), for eksempel miniatyrstørrelser (thumbnail, medium, large). På denne måten holder layouten seg intakt, og frontend-resultatene blir forutsigbare, selv om forfatteren gjør en feil i attributtverdien.

Shortcodes i tekstwidgeter og PHP-filer

Siden WordPress-versjon 4.9 (november 2017) fungerer shortcodes automatisk i tekstwidgeter. Men hvis du bruker et tilpasset tema uten innebygd støtte, kan du aktivere det med én linje i functions.php:

1
add_filter( 'widget_text', 'do_shortcode' );

For å unngå automatisk innsetting av <p>- og <br>-tagger rundt shortcoden i en widget (WordPress autoformaterer linjeskift), legg også til:

1
add_filter( 'widget_text', 'shortcode_unautop' );

Samme prinsipp gjelder for PHP-maler. Hvis du trenger å kjøre en shortcode direkte i header.php eller en annen temafil, pakk den inn i do_shortcode():

1
echo do_shortcode( '[techblog]' );

På denne måten er samme logikk tilgjengelig i editoren, widgeten og malen, uten å duplisere kode.

Unngå kjøring: slik viser du shortcode-tekst uten at den utføres

Noen ganger trenger du ikke å kjøre en shortcode, men å vise syntaksen for leseren, slik som i denne artikkelen. Hvis du bare setter inn [gallery] i editoren, vil WordPress umiddelbart kjøre den eller vise en plassholder. Det finnes to måter å unngå dette på.

Doble hakeparenteser. Den enkleste metoden er å doble de ytre parentesene:

1
[[gallery]]

For parvise tagger dobles den første åpnings- og den siste avslutningsparentesen:

1
[[maps]New York, USA[/maps]]

HTML-tegnkoder. I teksteditoren kan du erstatte parenteser med deres ASCII-koder: [ i stedet for [ og ] i stedet for ]. Oppføringen [gallery] vil vises som teksten [gallery], men blir ikke kjørt.

Den første metoden er enklere og mer lesbar i kildekoden, den andre er mer pålitelig ved kompleks formatering. Velg doble parenteser for raske redigeringer i teksteditoren og ASCII-koder når shortcoden grenser til andre hakeparenteser, for eksempel inne i kodeblokker eller metabeskrivelser. I begge tilfeller ser de besøkende nøyaktig shortcode-teksten, og WordPress kjører den ikke.

Video: komplett gjennomgang av WordPress-shortcoder

For de som foretrekker visuell forklaring, her er en detaljert veiledning fra Kinsta-teamet. Forfatteren viser opprettelse, feilsøking og ekte eksempler på shortcoder i et live-prosjekt, fra temainstallasjon til frontend-utdata.

⁉️🤔 Ofte stilte spørsmål

Kan du bruke shortcoder i Gutenberg?

Ja, via «Shortcode»-blokken i blokkinnsettingspanelet. Du setter inn shortcoden i blokkfeltet, og WordPress kjører den under rendring. Komplekse shortcoder med nestet innhold kan imidlertid oppføre seg uforutsigbart; i slike tilfeller er det mer pålitelig å bytte til koderedigeringsmodus. Gutenberg rendrer shortcoder via server-callback, så resultatene avhenger av om funksjonen returnerer korrekt HTML. Blokk-temaer (Full Site Editing) med theme.json kan delvis begrense shortcode-utdata i maler; sjekk kompatibilitet med det spesifikke temaet.

Hva gjør du hvis en shortcode ikke virker?

Sjekk tre typiske årsaker. For det første: du satte inn shortcoden i visuell editor, som konverterte parenteser til HTML-entiteter; bytt til tekstmodus og sørg for at parentesene er rette. For det andre: plugin-en som registrerer shortcoden er deaktivert; gå til «Utvidelser» og sjekk status. For det tredje: shortcode-funksjonen bruker echo i stedet for return; dette er en utviklerfeil, utdataene vises på feil sted på siden. Systematisk diagnostikkmetode: åpne wp-config.php, aktiver WP_DEBUG og WP_DEBUG_LOG. Etter å ha lastet siden med shortcoden, sjekk wp-content/debug.log; der vil det være spesifikke PHP-feil som angir fil og linje.

Kan du sette inn PHP-kode direkte i en shortcode?

Nei. En shortcode er en utløser, ikke en beholder for vilkårlig kode. Funksjonen som er registrert på serversiden via add_shortcode() kjøres. Hvis du trenger tilpasset logikk, skriv den i functions.php (eller i en separat plugin) og bind den til shortcoden. Mellom hakeparenteser kan du bare sende innhold og attributter, ikke kjørbar kode. For sikker PHP-kjøring i innhold, utforsk utvidelser som «Code Snippets»; de lar deg administrere kodebiter gjennom admin-grensesnittet uten å redigere functions.php og med beskyttelse mot fatale feil.

Gjør shortcoder nettstedet tregere?

I seg selv, nei. add_shortcode() registrerer bare samsvaret mellom tagg og funksjon i den globale $shortcode_tags-matrisen. Overhead oppstår når shortcode-funksjonen utfører tunge databasespørringer eller eksterne API-kall ved hver sideinnlasting. Problemet ligger ikke i shortcode-mekanismen, men i den spesifikke plugin-implementeringen. Retningslinje: hvis en side inneholder 20+ shortcoder som hver trekker WP_Query eller wp_remote_get(), bør du cache resultatene via Transients API. For typiske scenarioer (én eller to shortcoder per side) er ytelsespåvirkningen ubetydelig liten.

Hvordan fjerner du en shortcode fra utdata uten å slette den fra innlegget?

Bruk remove_shortcode() i functions.php. For eksempel, for å deaktivere det innebygde galleriet: remove_shortcode( 'gallery' ). Etter dette vil [gallery] i innleggsteksten vises som vanlig tekst i hakeparenteser, uten kjøring. Dette er nyttig ved migrering til en annen løsning eller feilsøking av konflikter. Delvis deaktivering: du kan overstyre en shortcode ved å registrere din egen behandler med samme tagg via add_shortcode(). Den sist registrerte behandleren har prioritet.

Er det verdt å lære shortcoder i 2026

Gutenberg og blokk-editoren løste mange oppgaver som shortcoder tidligere ble skrevet for: kolonner, knapper, mediainnsetting, omslag. Men shortcoder har ikke forsvunnet. Utvidelser registrerer dem fortsatt i hundretalls, fra abonnementsskjemaer til WooCommerce-handlekurver. Og viktigst av alt, én tilpasset shortcode kan erstatte en utvidelse og gjøre nøyaktig det prosjektet ditt trenger, uten å overbelaste admin med andres innstillinger.

Hvis du regelmessig gjentar den samme HTML-blokken, lenken eller malen i artikler, bruk 10 minutter på add_shortcode() i functions.php. Avkastning på investeringen: dusinvis av timer per år som du ikke bruker på kopiering og liming. Shortcoder er bakoverkompatible; kode skrevet i dag vil fungere i fremtidige WordPress-versjoner, fordi shortcode-API-et ikke har endret seg siden det dukket opp og forblir et av de mest stabile kjerneelementene.