Hur man använder kortkoder i dina WordPress-teman

Vi har använt kortkoder i WordPress-teman i flera år, och de har blivit en standarddel av hur vi bygger webbplatser.

De löser ett enkelt problem: hur man lägger till samma funktionalitet på flera platser utan att duplicera kod eller göra dina temafiler svårare att hantera.

Kortkoder låter dig skapa enkla, återanvändbara kodavsnitt som fungerar var som helst på din webbplats.

Oavsett om du behöver visa anpassat innehåll, lägga till formulär eller skapa interaktiva element, ger kortkoder ett rent sätt att lägga till den funktionaliteten och använda den där den behövs.

I den här guiden visar vi hur du använder kortkoder i dina teman med olika metoder.

Varför använda kortkoder i dina WordPress-teman?

Kortkoder kan lägga till alla möjliga funktioner på din webbplats, inklusive bildgallerier, formulär, sociala medieflöden och mycket mer.

WordPress levereras med några inbyggda kortkoder, men det finns också många populära WordPress-plugins som lägger till kortkoder på din webbplats.

Till exempel har WPForms lättanvända block, men det erbjuder också kortkoder så att du kan lägga till formulär i andra delar av din webbplats.

Oftast lägger du till kortkoder i innehållsområden som inlägg och sidor.

För att lära dig mer, se vår kompletta guide om hur man lägger till en kortkod i WordPress.

Ibland kan du dock vilja använda en kortkod inuti dina WordPress temafiler.

Detta gör att du kan lägga till dynamiska element i områden som du inte kan redigera med den vanliga WordPress-inläggsredigeraren, som din arkivsida. Det är också ett enkelt sätt att använda samma kortkod på flera sidor.

Till exempel kan du lägga till en kortkod i ditt temas sida eller inläggsmall.

Med det i åtanke, låt oss se hur du kan använda kortkoder i ditt WordPress-tema. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda:

• Metod 1: Använda redigeraren för hela webbplatsen (endast blockteman)
• Metod 2: Redigera dina WordPress-temafiler (fungerar med alla WordPress-teman)
• Metod 3: Lägga till kortkod med en sidbyggare (anpassade teman)

Metod 1: Använda redigeraren för hela webbplatsen (endast blockteman)

Det enklaste sättet att lägga till en WordPress-kortkod i ditt tema är att använda redigeraren för hela webbplatsen. Detta gör att du kan lägga till ett kortkodsblock var som helst på din webbplats.

Denna metod fungerar dock bara med blockbaserade teman som Hestia Pro. Om du inte använder ett blockaktiverat tema måste du använda en annan metod.

För att komma igång, gå till Utseende » Redigerare i WordPress-instrumentpanelen.

Som standard visar redigeraren för hela webbplatsen ditt temas startsidesmall, men du kan lägga till kortkoder i vilken mall som helst.

För att se alla tillgängliga alternativ, välj 'Mallar'.

Du kan nu klicka på den anpassade sidmallen du vill redigera.

Som ett exempel lägger vi till en kortkod i 404-sidmallen, men stegen kommer att vara exakt desamma oavsett vilken mall du väljer.

WordPress kommer nu att visa en förhandsgranskning av mallen.

För att lägga till en kortkod, klicka på den lilla pennikonen.

När det är gjort, klicka på det blå ikonen '+' i det övre vänstra hörnet av blockredigeraren.

I sökfältet behöver du skriva in 'Kortkod'.

När rätt block visas, dra och släpp det på temamallen.

Du kan nu antingen klistra in eller skriva kortkoden som du vill använda.

Klicka sedan på knappen ‘Spara’.

Besök nu helt enkelt din WordPress-blogg för att se kortkoden i aktion.

Metod 2: Redigera dina WordPress-temafiler (fungerar med alla WordPress-teman)

Du kan också lägga till kortkoder i ditt WordPress-tema genom att redigera temafiler. Den här metoden är mer avancerad, men den fungerar med både klassiska och blockteman.

Om du inte har lagt till kod på din webbplats tidigare, kolla in vår steg-för-steg-guide om hur man kopierar och klistrar in kod i WordPress.

Du kan ändra de enskilda temafilerna direkt, men det gör det svårt att uppdatera ditt WordPress-tema utan att förlora anpassningar. Av denna anledning rekommenderar vi att du åsidosätter temafilerna genom att skapa ett barn-tema.

Om du skapar ett anpassat tema kan du lägga till eller ändra koden i dina befintliga temafiler.

När du redigerar dina temafiler kan du inte lägga till kortkoden i samma format som du använder med standardinnehållsområden. Istället för att se kortkodens utdata, kommer du att se själva kortkoden på skärmen.

Detta händer eftersom WordPress inte exekverar kortkoder inuti temamallar. Istället måste du explicit tala om för WordPress att köra kortkoden med funktionen do_shortcode.

För mer information, se vår guide om hur man enkelt lägger till anpassad kod.

Här är ett exempel på koden du kommer att lägga till i dina WordPress-temafiler:

echo do_shortcode('[gallery]');

Ersätt helt enkelt 'gallery' med den kortkod du vill använda.

Om du är osäker på var du ska lägga till kortkoden, se då vår nybörjarguide till WordPress mallhierarki.

Om du lägger till en kortkod med extra parametrar, då behöver du använda ett lite annorlunda kodavsnitt.

Föreställ dig att du har skapat ett kontaktformulär med WPForms. I det här fallet behöver du använda den vanliga WPForms-kortkoden plus formulärets ID:

echo do_shortcode("[wpforms id='92']");

Felsökning: Vad du ska göra när do_shortcode inte fungerar

Ibland kanske du lägger till en kortkod i en temafil, men kodens utdata visas inte på din WordPress-webbplats. Detta betyder vanligtvis att kortkoden är beroende av ett WordPress-plugin eller någon annan kod på din webbplats.

Om funktionen do_shortcode inte fungerar, se till att pluginet som tillhandahåller kortkoden är installerat och aktiverat genom att gå till Plugins » Installera plugins.

I följande bild är WPForms installerat men inaktiverat, så koden echo do_shortcode fungerar inte.

Du kan också kontrollera om en kortkod är tillgänglig genom att lägga till funktionen shortcode_exists() i din index.php-fil.

I följande utdrag kontrollerar vi om WPForms-utdraget är tillgängligt att använda på vår webbplats:

if ( shortcode_exists( 'wpforms' ))  {
  echo do_shortcode("[[wpforms id='147']]");
}

Om du fortfarande inte ser kortkodens utdata på din webbplats, försök att rensa WordPress-cachen, eftersom du kanske ser en föråldrad version av din webbplats.

Metod 3: Lägga till kortkod med en sidbyggare (anpassade teman)

Ett annat alternativ är att skapa ett anpassat WordPress-tema. Detta är en mer avancerad metod, men den låter dig lägga till så många kortkoder du vill till vilket område som helst i ditt WordPress-tema. Du kan också göra andra ändringar för att skapa exakt de funktioner och den design du vill ha.

Tidigare behövde du vanligtvis följa en komplicerad handledning eller skriva anpassad kod för att bygga ett anpassat WordPress-tema. Nu kan du dock skapa ett anpassat tema utan att skriva en enda rad kod med hjälp av SeedProd.

SeedProd är den bästa WordPress-sidbyggaren och kommer också med en temabyggare, tillsammans med hela webbplatskit och mallar. Det låter dig designa dina egna teman med en dra-och-släpp-redigerare.

Flera av våra partner varumärken har designat hela sina webbplatser med det, och deras team älskade hur nybörjarvänligt och okomplicerat det är att använda.

För steg-för-steg-instruktioner, se vår guide om hur man skapar ett anpassat WordPress-tema (utan kod).

Efter att ha skapat ett tema kan du lägga till kortkoder i vilken del som helst av din WordPress-webbplats genom att gå till SeedProd » Temabyggare.

Här hittar du mallen där du vill använda kortkoden.

Håll sedan bara muspekaren över den mallen och klicka på 'Redigera design' när den visas.

Detta öppnar mallen i SeedProd's temabyggare.

I menyn till vänster, scrolla till sektionen 'Avancerat'. Här hittar du Shortcode-blocket och drar det till din layout.

I förhandsgranskningen i realtid, klicka helt enkelt för att välja kortkodsblocket.

Du kan nu lägga till din kortkod i rutan 'Kortkod'.

Som standard visar SeedProd inte kortkodens utdata i liveförhandsgranskningen.

För att se din kortkod i aktion, klicka på växlingsknappen 'Visa kortkodsalternativ'.

Därefter kanske du vill lägga till lite styling till kortkodens utdata genom att välja fliken 'Avancerat'.

Här kan du ändra avstånd, lägga till anpassad CSS och till och med lägga till CSS-animationseffekter.

När du är nöjd med hur sidan ser ut, klicka bara på knappen 'Spara'.

Därefter, välj 'Publicera' för att göra kortkoden live.

Du kan nu besöka din webbplats för att se den anpassade kortkoden i aktion.

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du använder WordPress kortkoder i dina teman. Du kanske också vill kolla in vår guide om hur man skapar en landningssida i WordPress och vår ultimata guide till de mest effektiva designelementen för WordPress.

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.