⚡ Hur du lägger till din egen shortcode i WordPress: exempel och kod

Du behöver visa det senast uppdaterade datumet för ett inlägg i sidfoten på varje artikel. Eller infoga ett prenumerationsformulär exakt mitt i texten, utan kodredigerare och mallgymnastik. I WordPress är shortcodes verktyget för detta.

En shortcode är en kort tagg inom hakparenteser: [myshortcode]. WordPress hittar den i innehållet och ersätter den med resultatet från en PHP-funktion. Du använder standard-shortcodes som [gallery] och [embed] hela tiden utan att ens tänka på det. Men din egen shortcode är en hävstång: du skriver logiken en gång, och redaktören infogar den var som helst med tre klick.

På 10 minuter skapar du din första fungerande shortcode: från en tom funktion till en tagg med attribut och inneslutet innehåll. Koden är verklig, körs på alla moderna WordPress och har testats på en staging-sajt.

💡 Snabb översikt:

• Funktionen add_shortcode: vad den tar emot och hur den fungerar internt
• En grundläggande [current_year]-shortcode, aktuellt år i text
• En shortcode med attribut [cta text="Скачать"], en anpassad knapp
• En shortcode med inneslutet innehåll [notice]Текст[/notice], ett stilat block
• Lägga till via ett tillägg eller functions.php: för- och nackdelar med varje metod
• Vanliga misstag: echo istället för return, namnkonflikter, tomt attribut i PHP 8+

Vad add_shortcode kan göra och hur det fungerar

Funktionen add_shortcode är det enda standardiserade sättet att registrera en ny shortcode i WordPress. Den tar emot två parametrar:

• $tag (sträng), shortcode-namnet du skriver inom hakparenteser. Endast bokstäver, siffror och understreck. Mellanslag och specialtecken & / < > [ ] = är förbjudna; WordPress kommer tyst att vägra registrera en sådan tagg.
• $callback (anropsbar), namnet på den PHP-funktion som körs när shortcoden hittas. Denna funktion genererar den HTML som besökaren ser.

Funktionens källkod, fem rader logik och två rimlighetskontroller (fullständig kod 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
}

Den centrala punkten: $shortcode_tags, en global array. WordPress lagrar alla registrerade shortcodes i den. Under innehållsrenderingen itererar kärnan över denna array och anropar den associerade funktionen för varje tagg som hittas. Två konsekvenser följer:

• Registrera på init -hooken. Om du anropar add_shortcode direkt i en tilläggsfil kan den köras innan WordPress är fullständigt initierat. Det korrekta sättet är att slå in det i en hook:

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

• Ett prefix är obligatoriskt. Den globala arrayen delas av alla tillägg och temat. Om du namnger en shortcode [button] skriver din [button] tyst över samma shortcode från ett formulärtillägg. Ett prefix som myplugin_ eller en unik förkortning löser problemet. I exemplen nedan använder jag prefixet mysite_; i ett verkligt projekt, ersätt det med ditt eget.

Steg 1: en enkel shortcode utan parametrar

Den kortaste vägen till en fungerande shortcode, tre rader i ditt barntemas functions.php (eller i tillägget Code Snippets, vilket är säkrare och inte försvinner vid temauppdatering).

Lägg till denna kod och spara:

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

Skriv nu [mysite_current_year] i vilket inlägg eller vilken sida som helst. På frontend visas aktuellt år istället för shortcoden: "2026".

Vad som händer här. Funktionen mysite_display_current_year tar inga argument, anropar PHP-funktionen date('Y') och returnerar en fyrsiffrig sträng. WordPress infogar denna sträng exakt där shortcoden placerades. Ingen magi.

Var man tillämpar detta i praktiken: året i sidfoten (© [mysite_current_year]), projektets ålder i text ("arbetat sedan [mysite_current_year]"), automatisk uppdatering av datum på sidor för juridisk efterlevnad.

Steg 2: en shortcode med attribut

En shortcode utan parametrar är användbar, men verklig flexibilitet börjar med attribut. Det klassiska exemplet, en knapp med anpassningsbar text och en länk:

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 editorn använder du den så här:

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

Funktionen shortcode_atts gör tre saker på en gång: den slår samman användarens attribut med standardvärden, filtrerar bara kända nycklar och normaliserar en tom sträng till en array (utan den skulle ett anrop av [mysite_cta] utan attribut i PHP 8+ ge ett TypeError, eftersom den första parametern i callback-funktionen skulle få en tom sträng i stället för en array).

*Varför esc_url och esc_html.* En shortcode infogas av en redaktör, idag är det du, och imorgon en innehållsansvarig utan kodåtkomst. Output escaping skyddar mot oavsiktlig XSS om en klammer eller tagg hamnar i text-attributet.

Steg 3: en shortcode med inneslutet innehåll

Vissa shortcodes omsluter ett textfragment: [mysite_notice]Важное сообщение[/mysite_notice]. Det inneslutna innehållet kommer in i callbacken som den andra parametern, $content. Ett typiskt scenario, ett stiliserat varningsblock:

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
}

Notera do_shortcode( $content ). Om redaktören infogade en annan shortcode inuti din shortcode (till exempel [mysite_current_year]), kommer denna wrapper att köra den också. Utan do_shortcode kommer nästlade shortcodes att visas som text inom hakparenteser, rå [mysite_current_year] i stället för "2026".

CSS för blocket, minimal, för att komma igång:

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
}

Lägg till stilarna i ditt barntemas style.css eller via Utseende → Anpassa → Extra CSS.

Steg 4: en shortcode inuti ett tillägg (OOP-approach)

När du har fler än tre shortcodes förvandlas functions.php till en soptipp. Det är dags att flytta logiken till ett separat tillägg, och helst till en klass. Här är ett minitilläggsskelett med en 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();

Placera denna fil i wp-content/plugins/mysite-shortcodes/mysite-shortcodes.php och aktivera tillägget i adminpanelen. Shortcoden [mysite_email address="hello@example.com"] kommer att mata ut en spam-bot-skyddad länk; funktionen antispambot kodar e-posttecken till HTML-entiteter.

Varför en klass, inte en uppsättning funktioner. Namnrymder: tre shortcodes i en klass kommer inte att kollidera med tredjepartsfunktioner. Plus autoladdning, plus läsbar kod om tillägget växer till ett dussin shortcodes.

Testa en shortcode före publicering

Efter att du lagt till koden, kontrollera tre scenarier:

• Shortcode utan attribut. Bara [mysite_cta], den ska renderas med standardvärden (text "Läs mer", länk #).
• Shortcode med attribut. En full uppsättning parametrar, alla värden plockas upp och visas korrekt.
• Fel i attribut. En ogiltig e-postadress i [mysite_email], funktionen returnerar tyst en tom sträng i stället för att krascha sidan.

Viktigt: använd aldrig echo inuti en callback-funktion. En shortcode måste returnera en sträng via return. Om du matar ut HTML med echo kommer den inte att visas där shortcoden är, utan högst upp på sidan, eftersom WordPress kör shortcode-rendering före innehållsutmatning. Samma logik som filter: funktionen lämnar tillbaka ett värde, och motorn själv bestämmer var den ska infoga det.

En andra nyans: om shortcoden inte visas (du ser [mysite_cta] som text, inte en knapp), kontrollera att funktionen är registrerad på init-hooken, inte direkt i tilläggets brödtext. Utan init är den globala arrayen $shortcode_tags kanske inte redo att ta emot nya taggar än.

Shortcode i ett tema vs. ett tillägg: vad ska man välja

Regeln: börja med functions.php på en testsajt, bygg tre shortcodes, flytta sedan in dem i ett tillägg. En temauppdatering sex månader senare kommer inte att begrava din logik, och du kan överföra shortcodesen till ett annat projekt på en minut.

⁉️🤔 FAQ

Vad är skillnaden mellan en shortcode och ett Gutenberg-block?

En shortcode är en texttagg inom hakparenteser som bearbetas på serversidan. Ett block är en visuell redigeringskomponent, en React-komponent med inställningar i sidopanelen. Shortcodes introducerades i WordPress 2.5 (2008), block i 5.0 (2018). Idag är block det primära sättet att infoga dynamiskt innehåll, men shortcodes är fortfarande relevanta: de är enklare att utveckla, kräver ingen JavaScript-kunskap och fungerar i alla redigerare, inklusive den klassiska redigeraren och sidbyggare.

En shortcode är en texttagg som WordPress ersätter med resultatet av en PHP-funktion när sidan renderas. Till skillnad från ett Gutenberg-block har en shortcode inget visuellt gränssnitt i redigeraren: innehållsansvarig skriver [myshortcode] som text och ser den färdiga HTML-koden på frontend.

Kan jag använda en shortcode inuti en annan shortcode?

Ja. Om den yttre shortcodens callback-funktion omsluter det nästlade innehållet med do_shortcode(), kommer de inre shortcodesen att fungera korrekt: [notice][current_year][/notice] kommer att visa ett stylat block med aktuellt år. Utan do_shortcode() kommer den nästlade shortcoden att förbli som text inom hakparenteser.

Nästlade shortcodes bearbetas rekursivt: WordPress går igenom strängen flera gånger tills inga obearbetade taggar återstår. Men för att detta ska fungera måste den yttre shortcoden uttryckligen anropa do_shortcode($content). Annars kommer strängen [current_year] att stå kvar som text istället för att bli "2026".

Varför fungerar inte min shortcode och visas som text inom hakparenteser?

Tre vanliga orsaker. För det första: add_shortcode anropas före init-hooken, flytta registreringen inuti add_action('init', ...). För det andra: ett stavfel i taggnamnet, [my_shortcode] i redigeraren men myshortcode är registrerat. För det tredje: callback-funktionen använder echo istället för return, så utdatan hamnar högst upp på sidan och shortcode-platsen blir tom.

Den vanligaste boven är echo istället för return i callback-funktionen. WordPress anropar shortcode-hanterare innan huvudinnehållet skrivs ut, så resultatet från echo hamnar i utdatabufferten tidigare än sidhuvudet. Öppna sidkällan (Ctrl+U): om du ser shortcodens HTML allra högst upp, före <html>, är det precis det problemet.

Behöver jag escapa shortcode-utdata?

Absolut. En shortcode tar emot attribut från redigeraren, vilket innebär potentiellt från vilken användare som helst med författar- eller redaktörsbehörighet. esc_html() för text, esc_url() för länkar, esc_attr() för HTML-attribut. Undantaget är när du avsiktligt returnerar HTML-uppmärkning (som <div class="notice">). Men även då, escapa attribut inuti uppmärkningen.

Ja, escaping är obligatoriskt för allt som kommer från shortcode-attribut eller användarindata. Även om bara du infogar shortcodes idag, kommer en innehållsansvarig att få redaktörsåtkomst imorgon. esc_html() för text, esc_url() för länkar, esc_attr() för HTML-attribut skyddar mot oavsiktlig eller avsiktlig XSS.

Hur många shortcodes kan jag registrera på en webbplats?

Det finns ingen teknisk gräns: $shortcode_tags är en vanlig PHP-array, du når serverns minnesgräns långt senare än vad som är rimligt. I praktiken, efter 15-20 anpassade shortcodes är det värt att fråga sig: är det dags att flytta några av dem till Gutenberg-block? Behåll shortcodes med unik logik (e-postobfuskering, villkorad utdata efter roll). För shortcodes som bara stylar text ([highlight]) är det bättre att använda en blockstil eller en CSS-klass.

Tekniskt sett, så många du vill: arrayen $shortcode_tags har ingen artificiell gräns. I praktiken tyder fler än 20-25 shortcodes på en webbplats på att en del av logiken borde flyttas till block. Varje shortcode lägger till overhead vid innehållsparsning: före utdata itererar WordPress över hela arrayen av registrerade taggar och söker efter matchningar i inläggstexten.

Bör jag skriva egna shortcodes eller räcker färdiga plugins?

Ett färdigt plugin täcker de flesta typiska uppgifter: formulär, Contact Form 7, tabeller, TablePress, gridar, vilken sidbyggare som helst. En anpassad shortcode behövs när logiken är specifik för din webbplats och ingen färdig lösning finns: att mata ut ett anpassat fält precis på den här platsen på sidan, datumet för nästa webbinarium från databasen, en personlig hälsning baserad på användarroll.

Kort sagt: för standardfunktionalitet, använd ett plugin och koda inte. För unik logik, add_shortcode + functions.php eller ett mini-plugin. Koden i något av exemplen ovan är under tio rader. När du behärskar dessa tre mönster (enkelt, med attribut, med nästlat innehåll) kommer du att täcka den stora majoriteten av uppgifter som anpassade shortcodes överhuvudtaget skrivs för.