⚡ Slik legger du til din egen shortcode i WordPress: eksempler og kode

Du trenger å vise sist oppdaterte dato for et innlegg i bunnteksten på hver artikkel. Eller sette inn et abonnementsskjema nøyaktig midt i teksten, uten kodeeditor og malgymnastikk. I WordPress er shortcodes verktøyet for dette.

En shortcode er en kort tagg i hakeparenteser: [myshortcode]. WordPress finner den i innholdet og erstatter den med resultatet av en PHP-funksjon. Du bruker standard shortcodes som [gallery] og [embed] hele tiden uten å tenke over det. Men din egen shortcode er en spak: du skriver logikken én gang, og redaktøren setter den inn hvor som helst med tre klikk.

Om 10 minutter har du laget din første fungerende shortcode: fra en tom funksjon til en tagg med attributter og omsluttet innhold. Koden er ekte, kjører på enhver moderne WordPress, og er testet på et staging-nettsted.

💡 Rask oversikt:

• add_shortcode-funksjonen: hva den aksepterer og hvordan den fungerer internt
• En grunnleggende [current_year]-shortcode, inneværende år som tekst
• En shortcode med attributter [cta text="Скачать"], en tilpasset knapp
• En shortcode med omsluttet innhold [notice]Текст[/notice], en stilet blokk
• Legge til via en plugin eller functions.php: fordeler og ulemper ved hver tilnærming
• Vanlige feil: echo i stedet for return, navnekonflikter, tomt attributt i PHP 8+

Hva add_shortcode kan gjøre og hvordan den fungerer

add_shortcode-funksjonen er den eneste standardmåten å registrere en ny shortcode i WordPress. Den aksepterer to parametere:

• $tag (string), shortcode-navnet du vil skrive i hakeparenteser. Kun bokstaver, tall og understreker. Mellomrom og spesialtegn & / < > [ ] = er forbudt; WordPress vil i stillhet nekte å registrere en slik tagg.
• $callback (callable), navnet på PHP-funksjonen som skal kjøres når shortcoden blir funnet. Denne funksjonen genererer HTML-koden som den besøkende vil se.

Funksjonens kildekode, fem linjer med logikk og to fornuftssjekker (fullstendig oppføring på developer.wordpress.org):

1
function add_shortcode( $tag, $callback ) {
2
    global $shortcode_tags;
3
 
4
    if ( '' === trim( $tag ) ) {
5
        _doing_it_wrong(
6
            __FUNCTION__,
7
            __( 'Invalid shortcode name: Empty name given.' ),
8
            '4.4.0'
9
        );
10
        return;
11
    }
12
 
13
    if ( 0 !== preg_match( '@[<>&/\[\]\x00-\x20=]@', $tag ) ) {
14
        _doing_it_wrong(
15
            __FUNCTION__,
16
            sprintf(
17
                /* translators: 1: Shortcode name, 2: Space-separated list of reserved characters. */
18
                __( 'Invalid shortcode name: %1$s. Do not use spaces or reserved characters: %2$s' ),
19
                $tag,
20
                '& / < > [ ] ='
21
            ),
22
            '4.4.0'
23
        );
24
        return;
25
    }
26
 
27
    $shortcode_tags[ $tag ] = $callback;
28
}

Hovedpoenget: $shortcode_tags, et globalt array. WordPress lagrer alle registrerte shortcodes i det. Under innholdsrendering itererer kjernen over dette arrayet og kaller den tilknyttede funksjonen for hver tagg som blir funnet. To implikasjoner følger:

• Registrer på init -hooken. Hvis du kaller add_shortcode direkte i en plugin-fil, kan den kjøre før WordPress er fullstendig initialisert. Riktig måte er å pakke den inn i en hook:

1
add_action( 'init', 'my_register_shortcodes' );
2
 
3
function my_register_shortcodes() {
4
    add_shortcode( 'mytag', 'my_shortcode_callback' );
5
}

• Et prefiks er obligatorisk. Det globale arrayet deles av alle plugins og temaet. Hvis du kaller en shortcode [button], vil din [button] i stillhet overskrive den samme shortcoden fra et skjema-plugin. Et prefiks som myplugin_ eller en unik forkortelse løser problemet. I eksemplene nedenfor bruker jeg mysite_-prefikset; i et reelt prosjekt, erstatt det med ditt eget.

Steg 1: en enkel shortcode uten parametere

Den korteste veien til en fungerende shortcode, tre linjer i barnetemaets functions.php (eller i Code Snippets-pluginen, som er tryggere og ikke går tapt ved temaoppdatering).

Legg til denne koden og lagre:

1
add_shortcode( 'mysite_current_year', 'mysite_display_current_year' );
2
 
3
function mysite_display_current_year() {
4
    return date( 'Y' );
5
}

Skriv nå [mysite_current_year] i et hvilket som helst innlegg eller side. På frontend vil inneværende år vises i stedet for shortcoden: "2026".

Hva som skjer her. mysite_display_current_year-funksjonen tar ingen argumenter, kaller PHP-funksjonen date('Y'), og returnerer en firesifret streng. WordPress setter inn denne strengen nøyaktig der shortcoden ble plassert. Ingen magi.

Hvor du bør bruke dette i praksis: årstallet i bunnteksten (© [mysite_current_year]), prosjektets alder i tekst («arbeider siden [mysite_current_year]»), automatisk oppdatering av datoer på sider for juridisk samsvar.

Steg 2: en shortcode med attributter

En shortcode uten parametere er nyttig, men den virkelige fleksibiliteten begynner med attributter. Det klassiske eksempelet, en knapp med tilpassbar tekst og lenke:

1
add_shortcode( 'mysite_cta', 'mysite_cta_button' );
2
 
3
function mysite_cta_button( $atts ) {
4
    $atts = shortcode_atts(
5
        array(
6
            'text' => 'Learn more',
7
            'url'  => '#',
8
        ),
9
        $atts,
10
        'mysite_cta'
11
    );
12
 
13
    return sprintf(
14
        '<a href="%s" class="mysite-cta-button">%s</a>',
15
        esc_url( $atts['url'] ),
16
        esc_html( $atts['text'] )
17
    );
18
}

I editoren bruker du den slik:

1
[mysite_cta text="Download plugin" url="https://example.com/myplugin/"]

Funksjonen shortcode_atts gjør tre ting samtidig: den slår sammen brukerattributter med standardverdier, filtrerer kun kjente nøkler og normaliserer en tom streng til en matrise (uten dette ville et kall til [mysite_cta] uten attributter i PHP 8+ gitt en TypeError, fordi den første parameteren i callback-funksjonen ville mottatt en tom streng i stedet for en matrise).

*Hvorfor esc_url og esc_html.* En shortcode settes inn av en redaktør, i dag er det deg, og i morgen en innholdsansvarlig uten kodetilgang. Utdataescaping sikrer mot utilsiktet XSS dersom en klammeparentes eller tag havner i text-attributten.

Steg 3: en shortcode med omsluttet innhold

Noen shortcoder omslutter et tekstfragment: [mysite_notice]Важное сообщение[/mysite_notice]. Det omsluttede innholdet ankommer callbacken som den andre parameteren, $content. Et typisk scenario, en stilisert advarselsboks:

1
add_shortcode( 'mysite_notice', 'mysite_notice_box' );
2
 
3
function mysite_notice_box( $atts, $content = null ) {
4
    $atts = shortcode_atts(
5
        array(
6
            'type' => 'info',
7
        ),
8
        $atts,
9
        'mysite_notice'
10
    );
11
 
12
    $class = 'notice-' . esc_attr( $atts['type'] );
13
 
14
    return sprintf(
15
        '<div class="mysite-notice %s"><p>%s</p></div>',
16
        $class,
17
        do_shortcode( $content )
18
    );
19
}

Legg merke til do_shortcode( $content ). Hvis redaktøren satte inn en annen shortcode inne i din shortcode (for eksempel [mysite_current_year]), vil denne wrapperen også kjøre den. Uten do_shortcode vil nestede shortcoder vises som tekst i hakeparenteser, rå [mysite_current_year] i stedet for «2026».

CSS for boksen, minimal, for å komme i gang:

1
.mysite-notice {
2
    border-left: 4px solid #2271b1;
3
    background: #f0f6fc;
4
    padding: 1em 1.2em;
5
    margin: 1.5em 0;
6
    border-radius: 4px;
7
}
8
.mysite-notice.notice-warning {
9
    border-left-color: #dba617;
10
    background: #fcf9e8;
11
}

Legg stilene til i barnetemaets style.css eller via Utseende → Tilpass → Ekstra CSS.

Steg 4: en shortcode i en plugin (OOP-tilnærming)

Når du har mer enn tre shortcoder, blir functions.php en dumpingplass. Det er på tide å flytte logikken til en separat plugin, og helst inn i en klasse. Her er et mini-plugin-skjelett med én shortcode:

1
<?php
2
/**
3
 * Plugin Name:  MySite Shortcodes
4
 * Description:  Custom shortcodes for the site.
5
 * Version:      1.0.0
6
 * Requires PHP: 7.4
7
 */
8
 
9
defined( 'ABSPATH' ) || exit;
10
 
11
class MySite_Shortcodes {
12
 
13
    public static function init() {
14
        add_action( 'init', array( __CLASS__, 'register' ) );
15
    }
16
 
17
    public static function register() {
18
        add_shortcode( 'mysite_email', array( __CLASS__, 'email_obfuscated' ) );
19
    }
20
 
21
    public static function email_obfuscated( $atts ) {
22
        $atts = shortcode_atts(
23
            array( 'address' => '' ),
24
            $atts,
25
            'mysite_email'
26
        );
27
 
28
        if ( ! is_email( $atts['address'] ) ) {
29
            return '';
30
        }
31
 
32
        return sprintf(
33
            '<a href="mailto:%1$s">%1$s</a>',
34
            antispambot( $atts['address'], 1 )
35
        );
36
    }
37
}
38
 
39
MySite_Shortcodes::init();

Plasser denne filen i wp-content/plugins/mysite-shortcodes/mysite-shortcodes.php og aktiver pluginen i administrasjonspanelet. Shortcoden [mysite_email address="hello@example.com"] vil produsere en spam-bot-beskyttet lenke; funksjonen antispambot koder e-posttegn til HTML-entiteter.

Hvorfor en klasse, ikke et sett med funksjoner. Navnerom: tre shortcoder i en klasse vil ikke kollidere med tredjepartsfunksjoner. Pluss autoloading, pluss lesbar kode hvis pluginen vokser til et dusin shortcoder.

Teste en shortcode før publisering

Etter å ha lagt til koden, sjekk tre scenarioer:

• Shortcode uten attributter. Bare [mysite_cta], den skal rendres med standardverdier (tekst «Lær mer», lenke #).
• Shortcode med attributter. Et fullt sett med parametere, alle verdier plukkes opp og vises korrekt.
• Feil i attributter. En ugyldig e-post i [mysite_email], funksjonen returnerer stille en tom streng i stedet for å knekke siden.

Viktig: bruk aldri echo inne i en callback-funksjon. En shortcode må returnere en streng via return. Hvis du sender ut HTML med echo, vil den dukke opp ikke der shortcoden er, men helt øverst på siden, fordi WordPress kjører shortcode-rendring før innholdsutdata. Samme logikk som filtre: funksjonen leverer tilbake en verdi, og motoren selv bestemmer hvor den skal settes inn.

En annen nyanse: hvis shortcoden ikke vises (du ser [mysite_cta] som tekst, ikke en knapp), sjekk at funksjonen er registrert på init-hooken, ikke direkte i plugin-kroppen. Uten init er det ikke sikkert den globale $shortcode_tags-matrisen er klar til å ta imot nye tagger.

Shortcode i et tema vs. en plugin: hva du bør velge

Regelen: start med functions.php på et testnettsted, bygg tre shortcoder, og flytt dem deretter inn i en plugin. En temaoppdatering seks måneder senere vil ikke begrave logikken din, og du kan overføre shortcodene til et annet prosjekt på et minutt.

⁉️🤔 FAQ

Hva er forskjellen mellom en shortcode og en Gutenberg-blokk?

En shortcode er en tekst-tag i hakeparenteser som prosesseres på tjenersiden. En blokk er en visuell redigeringskomponent, en React-komponent med innstillinger i sidepanelet. Shortcodes dukket opp i WordPress 2.5 (2008), blokker i 5.0 (2018). I dag er blokker den primære måten å sette inn dynamisk innhold på, men shortcodes er fortsatt relevante: de er enklere å utvikle, krever ingen JavaScript-kunnskap og fungerer i alle editorer, inkludert Classic Editor og sidebyggere.

En shortcode er en tekst-tag som WordPress erstatter med resultatet av en PHP-funksjon når siden rendres. I motsetning til en Gutenberg-blokk har en shortcode ikke noe visuelt grensesnitt i editoren: innholdsforvalteren skriver [myshortcode] som tekst, og ser den ferdige HTML-en på frontend.

Kan jeg bruke en shortcode inne i en annen shortcode?

Ja. Hvis den ytre shortcodens callback-funksjon pakker det nestede innholdet inn i do_shortcode(), vil de indre shortcodene fungere korrekt: [notice][current_year][/notice] vil vise en stylet blokk med inneværende år. Uten do_shortcode() vil den nestede shortcoden forbli som tekst i hakeparenteser.

Nestede shortcodes prosesseres rekursivt: WordPress går gjennom strengen flere ganger til ingen uprosesserte tagger gjenstår. Men for at dette skal fungere, må den ytre shortcoden eksplisitt kalle do_shortcode($content). Ellers vil strengen [current_year] forbli som tekst i stedet for å bli til «2026».

Hvorfor virker ikke shortcoden min og vises som tekst i hakeparenteser?

Tre vanlige årsaker. For det første: add_shortcode kalles før init-hooken, flytt registreringen inn i add_action('init', ...). For det andre: en skrivefeil i tag-navnet, [my_shortcode] i editoren, men myshortcode er registrert. For det tredje: callback-funksjonen bruker echo i stedet for return, slik at utdataene havner øverst på siden og shortcode-posisjonen er tom.

Den hyppigste synderen er echo i stedet for return i callback-funksjonen. WordPress kaller shortcode-handlere før hovedinnholdet skrives ut, så resultatet av echo treffer utdatabufferen tidligere enn sideheaderen. Åpne sidekilden (Ctrl+U): hvis du ser shortcodens HTML helt øverst, før <html>, er det nøyaktig det som er problemet.

Må jeg escape shortcode-utdata?

Absolutt. En shortcode mottar attributter fra editoren, noe som betyr potensielt fra enhver bruker med forfatter- eller redaktørrettigheter. esc_html() for tekst, esc_url() for lenker, esc_attr() for HTML-attributter. Unntaket er når du med hensikt returnerer HTML-markup (som <div class="notice">). Men selv da, escape attributter inne i markupen.

Ja, escaping er obligatorisk for alt som kommer fra shortcode-attributter eller brukerinput. Selv om det bare er du som setter inn shortcodes i dag, vil en innholdsforvalter få redaktørtilgang i morgen. esc_html() for tekst, esc_url() for lenker, esc_attr() for HTML-attributter beskytter mot utilsiktet eller ondsinnet XSS.

Hvor mange shortcodes kan jeg registrere på ett nettsted?

Det finnes ingen teknisk grense: $shortcode_tags er en vanlig PHP-array, du vil treffe serverens minnegrense lenge etter sunn fornuft. I praksis, etter 15-20 egendefinerte shortcodes er det verdt å spørre: er det på tide å flytte noen av dem til Gutenberg-blokker? Behold shortcodes med unik logikk (e-postobfuskering, betinget utdata basert på rolle). For shortcodes som bare styler tekst ([highlight]), er det bedre å bruke en blokkstil eller en CSS-klasse.

Teknisk sett så mange du vil: $shortcode_tags-arrayen har ingen kunstig grense. Praktisk sett tyder mer enn 20-25 shortcodes på ett nettsted på at noe av logikken bør flyttes til blokker. Hver shortcode legger til overhead for innholdsparsing: før utdata itererer WordPress over hele arrayen av registrerte tagger og søker etter treff i innleggsteksten.

Bør jeg skrive mine egne shortcodes eller er ferdige plugins nok?

En ferdig plugin dekker de fleste typiske oppgaver: skjemaer, Contact Form 7, tabeller, TablePress, grids, enhver sidebygger. En egendefinert shortcode er nødvendig når logikken er spesifikk for ditt nettsted og ingen ferdig løsning finnes: utdata av et egendefinert felt akkurat på dette stedet på siden, datoen for neste webinar fra databasen, en personlig hilsen basert på brukerrolle.

Kort sagt: for standardfunksjonalitet, bruk en plugin og ikke kod. For unik logikk, add_shortcode + functions.php eller en mini-plugin. Koden i ethvert av eksemplene ovenfor er under ti linjer. Når du mestrer disse tre mønstrene (enkel, med attributter, med nestet innhold), vil du dekke det store flertallet av oppgavene som egendefinerte shortcodes i det hele tatt skrives for.