Hur man lägger till en kortkod i WordPress (nybörjarguide)

Vi hör ofta från användare som känner sig överväldigade av WordPress kortkoder.

Dessa små kodsnuttar kan se förvirrande ut först, men de är faktiskt en av de mest kraftfulla funktionerna i WordPress när de används korrekt.

Oavsett om du vill lägga till kontaktformulär, gallerier eller anpassade layouter, erbjuder kortkoder ett enkelt sätt att infoga komplexa funktioner utan att röra någon kod.

I den här nybörjarvänliga guiden visar vi dig exakt hur du lägger till kortkoder i WordPress, var du ska placera dem och de bästa sätten att använda dem.

Vi har brutit ner allt i enkla, lättförståeliga steg som vem som helst kan förstå, även om du är helt ny på WordPress.

Vad är kortkoder?

Kortkoder i WordPress är kodgenvägar som hjälper dig att lägga till dynamiskt innehåll i WordPress-inlägg, sidor och sidofältswidgets. De visas inom hakparenteser som detta:

[myshortcode]

För att bättre förstå kortkoder, låt oss titta på bakgrunden till varför de lades till från början.

WordPress filtrerar allt innehåll för att säkerställa att ingen använder inlägg och sidinnehåll för att infoga skadlig kod i databasen. Det innebär att du kan skriva grundläggande HTML i dina inlägg, men du kan inte skriva PHP-kod.

Men tänk om du ville köra lite anpassad kod i dina inlägg för att visa relaterade inlägg, bannerannonser, kontaktformulär, gallerier eller något annat?

Det är här Shortcode API kommer in.

I grund och botten tillåter det utvecklare att lägga sin kod inuti en funktion och sedan registrera den funktionen hos WordPress som en kortkod, så att användare enkelt kan använda den utan att ha någon kodningskunskap.

När WordPress hittar kortkoden kommer den automatiskt att köra koden som är associerad med den.

Låt oss se hur du enkelt lägger till kortkoder i dina WordPress-inlägg och sidor.

Du kan använda länkarna nedan för att hoppa till din föredragna metod:

• Lägga till en kortkod i WordPress-inlägg och sidor
• Lägga till en kortkod i WordPress sidofältswidgets
• Lägga till en kortkod i den gamla WordPress klassiska redigeraren
• Lägga till en kortkod i WordPress-temafiler
• Lägga till en kortkod i blocktemafiler med redigeraren för hela webbplatsen
• Creating Your Own Custom Shortcode in WordPress
• Kortkoder kontra Gutenberg-block
• Vanliga frågor om kortkoder

Lägga till en kortkod i WordPress-inlägg och sidor

Först måste du redigera inlägget och sidan där du vill lägga till kortkoden.

Därefter måste du klicka på knappen för att lägga till block '+ ' för att infoga ett kortkodsblock.

Efter att ha lagt till kortkodsblocket kan du helt enkelt ange din kortkod i blockinställningarna.

Kortkoden kommer att tillhandahållas av olika WordPress-plugins som du kanske använder, till exempel WPForms för kontaktformulär.

För att lära dig mer om att använda block, se vår handledning om Gutenbergs blockredigerare för mer information.

Du kan nu spara ditt inlägg eller din sida och förhandsgranska dina ändringar för att se kortkoden i aktion.

Lägga till en kortkod i WordPress sidofältswidgets

Du kan också använda kortkoder i WordPress sidofälts-widgets.

Besök helt enkelt sidan Utseende » Widgets och lägg till ett widgetblock för ‘Kortkod’ i ett sidofält.

Nu kan du klistra in din kortkod i textområdet för widgeten.

Glöm inte att klicka på knappen ‘Uppdatera’ för att spara dina widgetinställningar.

Därefter kan du besöka din WordPress-webbplats för att se förhandsgranskningen av kortkoden i sidofältswidgeten.

Lägga till en kortkod i den gamla WordPress klassiska redigeraren

Om du fortfarande använder den gamla klassiska redigeraren, kan du lägga till kortkoder direkt i innehållsområdet.

Redigera helt enkelt inlägget eller sidan och klistra in kortkoden där du vill att funktionen ska visas.

För bästa resultat rekommenderar vi att du placerar den på en egen rad, särskilt för kortkoder som lägger till stora element som formulär eller gallerier. Detta hjälper till att förhindra formateringsproblem.

Glöm inte att spara dina ändringar. Du kan sedan förhandsgranska ditt inlägg för att se kortkoden i aktion.

Lägga till en kortkod i WordPress-temafiler

Kortkoder är avsedda att användas i WordPress-inlägg, sidor och widgets. Ibland kanske du dock vill använda en kortkod inuti en WordPress-temafil.

WordPress gör det enkelt att göra det, men du måste redigera dina WordPress-temafiler. Om du inte har gjort det tidigare, se vår guide om hur du kopierar och klistrar in kod i WordPress.

I grund och botten kan du lägga till en kortkod i vilken WordPress-temamall som helst genom att helt enkelt lägga till följande kod:

<?php echo do_shortcode('[your_shortcode]'); ?>

WordPress kommer nu att leta efter kortkoden och visa dess utdata i din temamall.

Lägga till en kortkod i blocktemafiler med redigeraren för hela webbplatsen

Om du använder ett blocktema, kommer du att finna det lättare att lägga till kortkoder i dina WordPress-temafiler med hjälp av redigeraren för hela webbplatsen.

Du kan komma åt detta verktyg genom att välja Utseende » Redigerare från WordPress-instrumentpanelen.

Du kommer som standard att visas ditt temas hemmamall, och du kan växla till andra mallar genom att välja alternativet 'Mallar'.

När du har valt en mall kan du börja redigera den genom att klicka i den högra panelen i redigeraren. Redigeraren kommer nu att fylla skärmen.

Nu kan du klicka på ikonen för att infoga block (+) och söka efter kortkodsblocket. Dra det sedan helt enkelt till mallen och skriv in den kortkod du vill använda.

Glöm inte att klicka på knappen 'Spara' högst upp på skärmen för att spara dina ändringar.

Skapa din egen anpassade kortkod i WordPress

Kortkoder kan vara riktigt användbara när du vill lägga till dynamiskt innehåll eller anpassad kod inuti WordPress-inlägg och sidor. Men om du vill skapa en anpassad kortkod kräver det viss kodningserfarenhet.

Om du är bekväm med att skriva PHP-kod, här är ett exempel på kod som du kan använda som mall:

// function that runs when shortcode is called
function wpb_demo_shortcode() { 
 
// Things that you want to do.
$message = 'Hello world!'; 
 
// Output needs to be return
return $message;
}
// register shortcode
add_shortcode('greeting', 'wpb_demo_shortcode');

I den här koden skapade vi först en funktion som kör lite kod och returnerar resultatet. Därefter skapade vi en ny kortkod som heter ‘greeting’ och bad WordPress att köra funktionen vi skapade.

Du kan lägga till den här koden i ditt temas functions.php-fil manuellt eller använda ett plugin för kodavsnitt som WPCode (rekommenderas).

Vi rekommenderar det senare eftersom WPCode är det säkraste och enklaste sättet att lägga till kod på din webbplats. För att lära dig mer, se vår WPCode-recension.

För mer information kan du se vår guide till att lägga till anpassad kod i WordPress utan att bryta något.

När du har gjort det kan du lägga till den här kortkoden i dina inlägg, sidor och widgetar med följande kod:

[hälsning]

Det kommer att köra funktionen du skapade och visa önskat resultat.

Även om detta exempel är enkelt, är den verkliga kraften med kortkoder för att återanvända komplex kod.

Genom att paketera ett långt skript i en kortkod håller du ditt innehållsredigeringsverktyg rent och gör webbplatsomfattande uppdateringar mycket enklare. Du behöver bara redigera koden på ett ställe.

Praktiskt exempel: Google AdSense-kortkod

Nu ska vi titta på ett mer praktiskt exempel.

Du kan använda en kortkod för att enkelt visa en Google AdSense-banner var som helst på din webbplats.

// The shortcode function
function wpb_demo_shortcode_2() { 
 
// Advertisement code pasted inside a variable
$string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-0123456789101112"
     data-ad-slot="9876543210"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>';
 
// Ad code returned
return $string; 
 
}
// Register shortcode
add_shortcode('my_ad_code', 'wpb_demo_shortcode_2'); 

Se till att ersätta platshållarkoden för annonsen med din egen. Du kan nu använda kortkoden [my_ad_code] för att visa annonsen i vilket inlägg, sida eller widgetområde som helst.

Kortkoder kontra Gutenberg-block

Gutenberg-block och kortkoder tillåter båda att du lägger till dynamiskt innehåll på din WordPress-webbplats. Den huvudsakliga skillnaden är att block erbjuder ett visuellt gränssnitt, medan kortkoder är textbaserade utdrag som du klistrar in i ett specifikt block.

Många populära WordPress-plugins har börjat använda block istället för kortkoder. Detta beror på att block ofta är mer nybörjarvänliga och låter dig se en förhandsgranskning av det slutliga resultatet direkt i redigeringsverktyget.

Vi har sammanställt en lista över de mest användbara Gutenberg-blockplugins för WordPress som du kanske vill prova.

Om du vill skapa dina egna anpassade Gutenberg-block kan du följa vår steg-för-steg-handledning om hur man skapar anpassade Gutenberg-block i WordPress.

Vanliga frågor om kortkoder

Här på WPBeginner får vi ofta frågor om hur kortkoder fungerar. Nedan följer svar på några av de vanligaste.

Är kortkoder fortfarande relevanta med blockredigeraren?

Ja, absolut. Medan många nyare plugins använder dedikerade block, använder tusentals andra plugins fortfarande kortkoder för att låta dig lägga till funktioner i ditt innehåll. Du kommer fortfarande att finna dem användbara under lång tid, vilket är anledningen till att WordPress inkluderar ett dedikerat kortkodsblock.

Kan kortkoder sakta ner min webbplats?

En kortkod är bara så snabb som koden den kör. En välskriven kortkod från ett ansedd plugin kommer att ha minimal påverkan på din webbplats prestanda.

Dock, med att använda för många kortkoder som laddar många skript på en enda sida kan ibland orsaka en avmattning.

Hur hittar jag kortkoden för ett plugin?

De flesta plugins visar sin kortkod på sin inställningssida, i dokumentationen eller direkt i redigeringsgränssnittet. Till exempel gör WPForms det enkelt att kopiera en formulärs kortkod så fort du sparar den.

Kan jag använda kortkoder i sidbyggare som SeedProd?

Ja, alla större sidbyggare som SeedProd har ett dedikerat block eller widget för ‘Kortkod’. Du kan helt enkelt dra blocket till din layout och klistra in kortkoden du vill visa.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en kortkod i WordPress. Du kanske också vill se vår guide om hur man visar och döljer text i WordPress-inlägg med växlingseffekten och vår handledning om hur man kopierar och klistrar in i WordPress utan formateringsproblem.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.