Föreställ dig att du lägger till ett galleri med 20 bilder i en artikel. Utan shortcodes blir det dussintals rader HTML med omslutande element, klasser, dataattribut och miniatyrlänkar. Med en shortcode blir det en rad: [gallery]. Det var just för denna kontrast mellan rutinvolym och resultat som WordPress 2.5 introducerade shortcodes, och nästan två decennier senare är mekanismen fortfarande oumbärlig.

Problemet är att de flesta användare antingen är rädda för shortcodes som "programmerarmagi" eller kopierar dem blint utan att förstå syntaxen. Samtidigt kan en enda anpassad shortcode ersätta ett fyrtiomegabyte stort plugin eller spara en timmes rutinarbete per månad. Den här genomgången, från inbyggda [gallery] och [audio] till din egen shortcode i functions.php, ger dig fullständig kontroll över verktyget.

💡 Snabb översikt:

• Vad en shortcode är: en tagg inom hakparenteser som WordPress ersätter med resultatet av en PHP-funktion när en sida laddas.
• Inbyggda shortcodes: gallery, audio, video, caption, embed och playlist fungerar direkt efter installation av WordPress, utan plugins.
• Shortcode-parametrar: syntaxen key="value" låter dig anpassa utdata utan att ändra kod.
• Skapa din egen shortcode: från en enkel URL-ersättning till en bild-shortcode med attribut, färdig PHP-kod för functions.php.
• Shortcodes i widgets och mallar: hur du aktiverar stöd med en rad och var det är användbart.

Vad en shortcode är och hur den fungerar

En shortcode är en kort tagg inom hakparenteser som WordPress ersätter med resultatet av en PHP-funktion i det ögonblick en sida renderas. Du skriver [gallery] i redigeraren, besökarna ser ett prydligt bildrutnät. Ingen magi: bakom varje shortcode står en funktion registrerad via add_shortcode() i kärnan, temat eller pluginet.

Den viktigaste skillnaden mot statiska HTML-inlägg: en shortcode körs på serversidan. Du skickar parametrar till den, och resultatet genereras dynamiskt. Innehållet ändras, utdatan ändras, utan att manuellt redigera dussintals sidor.

Från redigerarens perspektiv finns det en nyans. Den visuella redigeraren (Gutenberg eller klassiska TinyMCE) renderar omedelbart shortcoden som en förhandsvisning, så för att arbeta med parametrar och nästlade taggar, växla till textläge. Bara där kan du se den verkliga strukturen: öppningstagg, attribut, innehåll, stängningstagg.

Inbyggda WordPress-shortcodes: vad som finns tillgängligt utan plugins

WordPress levereras med sex registrerade shortcodes. Du behöver inte aktivera eller konfigurera dem, bara infoga dem i ett inlägg och få resultat.

Den mest flexibla bland dem är [gallery]. Attributet ids låter dig ange specifika bilder via ID, även sådana som inte är kopplade till det aktuella inlägget. Attributet size anger miniatyrstorlek (thumbnail, medium, large eller full). Kombinationen av dessa två parametrar täcker de flesta scenarier som man tidigare installerade ett separat galleriplugin för.

[audio] och [video] stöder flera källor, webbläsaren väljer ett kompatibelt format. Spellistor via [playlist] sätts ihop av bilage-ID:n på liknande sätt som ett galleri, men matar ut en spelare med spårväxling.

Shortcode-parametrar: hur du styr utdata

De flesta shortcodes accepterar attribut i formatet key="value". Genom att ersätta värden ändras funktionens logik utan att du rör koden.

Ta [gallery]. Utan parametrar visar den alla inläggets bilder i standardstorlek. Lägg till specifika detaljer:

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

Nu är utdatan begränsad till tre angivna bilder, storleken är ökad till large, och rutnätet är ordnat i tre kolumner. Parametrar kan kombineras godtyckligt, de som inte anges får standardvärden.

Vissa shortcodes använder öppnings- och stängningstaggar när innehåll behöver skickas mellan dem. Exempelvis kan ett Google Maps-plugin förvänta sig en konstruktion som:

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

Stängningstaggen börjar alltid med ett snedstreck /. WordPress använder denna notation för att skilja innehåll mellan taggar från attribut inuti öppningstaggen.

Hur du skapar din egen shortcode

När du har infogat samma URL, HTML-block eller call-to-action i artiklar för tionde gången på en vecka är det dags att skriva en shortcode. Det kräver inte att du är PHP-utvecklare: den grundläggande konstruktionen ryms på tre rader.

Enkel shortcode för URL

Lägg till denna kod i slutet av ditt temas functions.php-fil (Utseende → Temaredigerare → functions.php):

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

Nu kommer [techblog] i vilket inlägg som helst automatiskt att ersättas med webbplatsens URL. Funktionen returnerar en sträng, WordPress ersätter den i stället för shortcoden.

Två kritiskt viktiga regler från den officiella dokumentationen:

• Funktionen returnerar ett värde via return, inte skickar ut via echo. Direkt utskrift bryter renderingsordningen och leder till oväntade resultat.
• Registrera shortcodes på init-hooken så att WordPress hinner ladda alla beroenden:

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

Shortcode för bild med anpassningsbara attribut

Ett lite mer komplext scenario: du vill infoga en bild och sätta bredd och höjd direkt i editorn. 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' );

Användning i editorn:

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

Funktionen shortcode_atts() slår ihop skickade attribut med standardvärden, det är det vedertagna och säkra sättet att hantera parametrar. Notera esc_url() och esc_attr(): escaping är obligatoriskt när du skriver ut användarindata på frontend. En fullständig lista över tillgängliga bildattribut finns i W3C-specifikationen.

Värt att nämna separat är attributvalidering. När du tar emot värden från editorn och stoppar in dem i HTML, kontrollera alltid datatyper. För numeriska attribut som width och height, använd intval(), detta kapar bort oavsiktliga bokstäver. För strängar, sätt en tillåten uppsättning värden via in_array(), till exempel tumnagelstorlekar (thumbnail, medium, large). På så sätt håller layouten ihop, och frontend-resultaten blir förutsägbara, även om författaren gör ett misstag i attributvärdet.

Shortcodes i textwidgets och PHP-filer

Sedan WordPress version 4.9 (november 2017) fungerar shortcodes automatiskt i textwidgets. Men om du använder ett anpassat tema utan inbyggt stöd kan du aktivera det med en rad i functions.php:

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

För att undvika automatisk infogning av <p>- och <br>-taggar runt shortcoden i en widget (WordPress autoformaterar radbrytningar), lägg också till:

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

Samma princip fungerar för PHP-mallar. Om du behöver köra en shortcode direkt i header.php eller en annan temafil, slå in den i do_shortcode():

1
echo do_shortcode( '[techblog]' );

På så sätt är samma logik tillgänglig i editorn, widgeten och mallen, utan att duplicera kod.

Escaping: hur du visar shortcode-text utan att den körs

Ibland behöver du inte köra en shortcode utan visa dess syntax för läsaren, som i den här artikeln. Om du helt enkelt skriver in [gallery] i editorn kommer WordPress omedelbart att köra den eller visa en platshållare. Det finns två sätt att undvika detta.

Dubbla hakparenteser. Den enklaste metoden, dubbla de yttre parenteserna:

1
[[gallery]]

För parade taggar dubblas den första inledande och den sista avslutande:

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

HTML-teckenkoder. I texteditorn kan du ersätta hakparenteser med deras ASCII-koder: [ istället för [ och ] istället för ]. Inmatningen [gallery] kommer att visas som texten [gallery], men körs inte.

Den första metoden är enklare och mer läsbar i källkoden, den andra är mer tillförlitlig vid komplex formatering. Välj dubbla hakparenteser för snabba redigeringar i texteditorn och ASCII-koder när shortcoden gränsar till andra hakparenteser, till exempel inuti kodblock eller metabeskrivningar. I båda fallen ser webbplatsbesökarna exakt shortcode-texten, och WordPress kör den inte.

Video: komplett genomgång av WordPress shortcodes

För dig som föredrar visuell förklaring kommer här en detaljerad handledning från Kinsta-teamet. Skaparen visar hur man skapar, felsöker och använder shortcodes i ett live-projekt, från temainstallation till frontend-utdata.

⁉️🤔 Vanliga frågor

Kan man använda shortcodes i Gutenberg?

Ja, via blocket "Shortcode" i blockinfogningspanelen. Du infogar shortcoden i blockfältet, och WordPress kör den vid rendering. Komplexa shortcodes med nästlat innehåll kan dock fungera oförutsägbart, i sådana fall är det säkrare att växla till kodredigeringsläge. Gutenberg renderar shortcodes via server-callback, så resultatet beror på om funktionen returnerar korrekt HTML. Blockteman (Full Site Editing) med theme.json kan delvis begränsa shortcode-utdata i mallar, kontrollera specifik temakompatibilitet.

Vad gör man om en shortcode inte fungerar?

Kontrollera tre typiska orsaker. Första: du infogade shortcoden i den visuella editorn, som konverterade hakparenteser till HTML-entiteter, växla till textläge och kontrollera att parenteserna är raka. Andra: pluginet som registrerar shortcoden är avaktiverat, gå till "Tillägg" och kontrollera status. Tredje: shortcode-funktionen använder echo istället för return, detta är ett utvecklarfel, utdata hamnar på fel plats på sidan. Systematisk diagnosmetod: öppna wp-config.php, aktivera WP_DEBUG och WP_DEBUG_LOG. Efter att ha laddat sidan med shortcoden, kontrollera wp-content/debug.log, där finns specifika PHP-fel som anger fil och rad.

Kan man infoga PHP-kod direkt i en shortcode?

Nej. En shortcode är en utlösare, inte en behållare för godtycklig kod. Funktionen som registrerats på serversidan via add_shortcode() körs. Om du behöver anpassad logik, skriv den i functions.php (eller i ett separat plugin) och bind den till shortcoden. Mellan hakparenteser kan du bara skicka innehåll och attribut, inte körbar kod. För säker PHP-exekvering i innehåll, utforska plugin som "Code Snippets", de låter dig hantera snippets via admin-gränssnittet utan att redigera functions.php och med skydd mot fatala fel.

Saktar shortcodes ner sajten?

I sig själva, nej. add_shortcode() registrerar bara kopplingen mellan tagg och funktion i den globala arrayen $shortcode_tags. Overhead uppstår när shortcode-funktionen utför tunga databasfrågor eller externa API-anrop vid varje sidladdning. Problemet ligger inte i shortcode-mekanismen, utan i den specifika plugin-implementationen. Riktlinje: om en sida innehåller 20+ shortcodes som var och en drar WP_Query eller wp_remote_get(), cacha resultat via Transients API. För typiska scenarier (en eller två shortcodes per sida) är prestandapåverkan försumbar.

Hur tar man bort en shortcode från utdata utan att radera den från inlägget?

Använd remove_shortcode() i functions.php. Till exempel, för att inaktivera det inbyggda galleriet: remove_shortcode( 'gallery' ). Efter detta kommer [gallery] i inläggstexten att visas som vanlig text inom hakparenteser, utan att köras. Praktiskt vid migrering till en annan lösning eller vid felsökning av konflikter. Partiell inaktivering: du kan åsidosätta en shortcode genom att registrera din egen hanterare med samma tagg via add_shortcode(). Den senast registrerade hanteraren har prioritet.

Är det värt att lära sig shortcodes 2026

Gutenberg och blockeditorn löste många uppgifter som shortcodes tidigare skrevs för: kolumner, knappar, mediainfogning, wrappers. Men shortcodes har inte försvunnit. Plugin registrerar dem fortfarande i hundratal, från prenumerationsformulär till WooCommerce-varukorgar. Och viktigast av allt, en anpassad shortcode kan ersätta ett plugin och göra exakt det ditt projekt behöver, utan att överbelasta admin med någon annans inställningar.

Om du regelbundet upprepar samma HTML-block, länk eller mall i artiklar, lägg 10 minuter på add_shortcode() i functions.php. Avkastning på investeringen: dussintals timmar per år som du inte lägger på copy-paste. Shortcodes är bakåtkompatibla, kod som skrivs idag fungerar i framtida WordPress-versioner, eftersom shortcode-API:t inte har ändrats sedan det infördes och förblir en av de mest stabila kärnkomponenterna.