Så här addar du en shortcode i WordPress (Beginner’s Guide)

Tänk dig att kunna lägga till nya saker på din WordPress-webbplats, som bildspel, kontaktformulär eller till och med speciallistor, bara genom att skriva en enkel kod. Det är det som är kraften i kortkoder.

Du kommer att upptäcka att många WordPress-plugins och teman kan använda kortkoder för att lägga till extra funktioner på din webbplats. Många av våra läsare frågar oss hur man på bästa sätt lägger till dem i sina inlägg, sidor och sidofält.

I den här artikeln visar vi dig hur du använder kortkoder på din WordPress-webbplats, steg för steg. Vi visar dig även hur du skapar egna kortkoder om du vill vara riktigt kreativ.

Vad är shortcodes?

Shortcodes i WordPress är kodgenvägar som hjälper dig att add to dynamiskt content till WordPress posts, pages och sidebar widgetar. De visas inom hakparenteser och gillar det här:

[myshortcode]

För att bättre förstå shortcodes, låt oss ta en titt på bakgrunden till varför de lades till i första hand.

WordPress filtrerar allt innehåll för att se till att ingen använder posts och pages innehåll för att inserta skadlig kod i databasen. Det innebär att du kan skriva grundläggande HTML i dina posts, men du kan inte skriva PHP-kod.

Men vad händer om du vill köra lite custom code inuti dina posts för att visa related posts, bannerannonser, kontaktformulär, gallerier eller något annat?

Det är här Shortcode API kommer in i bilden.

I grund och botten tillåter det utvecklare att add to sin kod i en funktion och sedan registrera den funktionen med WordPress som en shortcode, så att användare enkelt kan använda den utan att ha någon kodningskunskap.

När WordPress hittar shortcoden kommer den automatiskt att runna den kod som är kopplad till den.

Låt oss se hur du enkelt kan add shortcodes till dina posts och pages i WordPress. Du kan använda länkarna under för att hoppa till din önskade metod.

Lägga till en shortcode i WordPress Posts och Pages

Först måste du editera det post och den page där du vill add to shortcoden.

Efter det måste du klicka på knappen Lägg till block ’+’ för att infoga ett Shortcode-block.

När du har lagt till Shortcode-blocket kan du helt enkelt enter din shortcode i blockinställningarna.

Shortcode kommer att tillhandahållas av olika WordPress tillägg som du kanske använder, t.ex. WPForms för kontaktformulär eller OptinMonster för e-postmarknadsföring.

Om du vill veta mer om hur du använder block kan du läsa vår Gutenberg tutorial för mer details.

Du kan nu save din post eller page och previewa dina ändringar för att se shortcoden i action.

Lägga till en shortcode i WordPress Sidebar Widgets

Du kan också använda shortcodes i WordPress sidebar widgets.

Besök bara sidan Appearance ” Widgets och lägg till ett ’Shortcode’ widgetblock i en sidebar.

Nu kan du klistra in din shortcode i widgets text area.

Glöm inte att klicka på knappen ”Update” för att spara dina inställningar för widgetar.

Efter det kan du besöka din WordPress website för att se live preview av shortcode i sidebar widget.

Lägga till en shortcode i gamla WordPress Classic Editor

Om du fortfarande använder den gamla klassiska Editorn i WordPress, så här kan du lägga till shortcodes till dina WordPress posts och pages.

Du behöver bara editera den post och page där du vill add to shortcoden. Du kan klistra in shortcoden var som helst i content editorn där du vill att den ska visas. Se bara till att shortcoden står på en egen rad.

Glöm inte att save dina ändringar. Efter det kan du previewa din post och page för att se shortcoden i action.

Lägga till en shortcode i WordPress Theme Files

Shortcodes är avsedda att användas i WordPress-poster, pages och widgets. Ibland kan du dock vilja använda en shortcode i en fil för ett WordPress theme.

WordPress gör det enkelt att göra det, men du måste editera dina WordPress theme-filer. Om du inte har gjort det förut, se vår guide om hur du copy and paste kod i WordPress.

I grund och botten kan du lägga till en shortcode till alla WordPress temamallar genom att helt enkelt lägga till följande kod:

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

WordPress kommer nu att leta efter shortcode och visa dess utdata i din template för temat.

Lägga till en shortcode i Block Theme-filer med Full-Site Editor

Om du använder ett block editor-tema är det lättare att add shortcodes i dina WordPress Theme-filer med hjälp av hela Site Editor.

Du kan komma åt detta verktyg genom att välja Appearance ” Editor från WordPress dashboard.

Du kommer att visas ditt temas hemmamall som standard, och du kan byta till andra templates genom att välja alternativet ”Templates”.

När du har valt en template kan du börja edit:a den genom att click:a i den högra rutan i editorn. Editorn kommer nu att fylla hela vyn.

Nu kan du klicka på ikonen ’+’ block inserter och search efter shortcode-blocket. Därefter drar du det helt enkelt till templaten och skriver in den shortcode du vill använda.

Glöm inte att klicka på knappen ”Save” högst upp på vyn för att spara dina ändringar.

Skapa din egen customize shortcode i WordPress

Shortcodes kan vara riktigt användbara när du vill add to dynamiskt content eller custom code i WordPress post och pages. Om du vill skapa en customize shortcode är det dock obligatoriskt med viss kodningserfarenhet.

Om du är bekväm med att skriva PHP-kod, så finns här en exempelkod som du kan använda som template:

// 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 runar lite kod och returnerar utdata. Därefter skapade vi en new shortcode med anropet ”greeting” och sa till WordPress att runna den funktion vi skapat.

Du kan lägga till den här koden i ditt temas functions.php-fil manuellt eller använda ett code snippet plugin som WPCode.

För mer details, you can see our guide to adding custom code in WordPress without breaking anything.

Följer du detta kan du add to shortcoden till dina posts, pages och widgetar med hjälp av följande kod:

[hälsar]

Den kommer att runna den funktion you skapade och visa önskad output.

Låt oss nu ta en titt på en mer praktisk användning av en shortcode.

I det här exemplet kommer vi att visa en Google Adsense-banner i en shortcode:

// 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'); 

Glöm inte att ersätta annonskoden med din egen annonskod.

Du kan nu använda shortcoden [my_ad_code] i dina posts, pages och sidebar widgets i WordPress. WordPress kommer automatiskt att runna den funktion som är kopplad till shortcoden och visa reklamkoden.

Shortcodes vs. Gutenberg Blocks

Vi får ofta frågor från användare om skillnaderna mellan shortcodes och Gutenberg blocks.

I grund och botten tillåter block dig att göra samma sak som shortcodes men på ett mer användarvänligt sätt.

Istället för att obligatoriskt lägga till en shortcode för att visa dynamiskt innehåll, allow blocks användare att lägga till dynamiskt innehåll i posts/pages med ett mer intuitivt användargränssnitt. Många populära tillägg till WordPress har gått över till att använda block istället för shortcodes eftersom de är mer nybörjarvänliga.

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

Om du vill skapa dina egna customize Gutenberg block kan du följa vår Step-by-Step tutorial om hur du skapar customize Gutenberg block i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du addar en shortcode i WordPress. Du kanske också vill se vår guide om hur du skapar ett custom WordPress theme utan att skriva någon kod och vårt expertval av de bästa drag and drop WordPress page builder plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.