Vill du använda shortcodes i ditt WordPress theme?
Normalt kommer du att använda shortcodes inuti content areas som gillar posts, pages, eller sidebar widgets. Men ibland kanske du vill add to en shortcode inuti ditt WordPress theme.
I den här artikeln visar vi dig hur du enkelt kan add to valfri shortcode i ditt WordPress theme.
Varför använda shortcodes i your WordPress Themes?
Shortcodes kan add to all slags funktioner till din website, inklusive image galleries, forms, social media feeds, och mycket mer.
WordPress kommer med några built-in shortcodes, men det finns också många populära tillägg till WordPress som addar shortcodes till din site.
Till exempel har WPForms användarvänliga block, men det ger också shortcodes så att du kan add formulär till andra områden på din website.
För det mesta kommer du att add shortcodes inuti content areas som gillar posts och pages.
För att lära dig mer, vänligen se vår kompletta guide om hur du lägger till en shortcode i WordPress.
Men ibland kanske du vill använda en shortcode i filerna för ditt WordPress theme.
Detta allow you to add dynamic elements to areas you can’t edit using the standard WordPress post editor, such as your archive page. Det är också ett enkelt sätt att använda samma shortcode på flera pages.
Du kan till exempel add a shortcode to your theme’s Page or Post template.
Med detta i åtanke, låt oss se hur du kan använda shortcodes i ditt WordPress theme. Använd bara snabblänkarna under för att hoppa direkt till den metod du vill använda:
Metod 1: Använda Site Editor för hela webbplatsen (endast Block Themes)
Det enklaste sättet att använda shortcodes i ditt WordPress theme är genom att använda hela Site Editor. Detta allow you to add a Shortcode block to any part of your website.
Den här metoden fungerar dock bara med blockbaserade themes som gillar Hestia Pro. Om du ej använder ett theme som är aktiverat med block måste du använda en annan metod.
För att komma igång, heada över till Appearance ” Editor i WordPress dashpanelen.
Som standard visar hela Site Editor ditt temas hemmamall, men du kan lägga till shortcodes till vilken template som helst.
För att se alla tillgängliga alternativ, select ”Templates”.
Du kan nu clicka på den template som du vill edit.
Som ett exempel kommer vi att add a shortcode to the 404 page template, men stegen kommer att vara exakt desamma oavsett vilken template you väljer.
WordPress kommer nu att visa en preview av templates.
För att add to en shortcode, gå vidare och click på den lilla penna iconen.
När du har gjort det klickar du på den blå ”+” icon i det övre vänstra hörnet.
I sökfältet måste du skriva in ”Shortcode”.
När det rätta blocket appear, drag and drop det på templates.
Du kan nu antingen klistra in eller skriva in den shortcode som du vill använda.
Därefter går du vidare och klickar på knappen ”Save”.
Nu är det bara att besöka din WordPress blogg för att se shortcoden i action.
Metod 2: Edit Your WordPress Theme Files (fungerar med alla WordPress Theme)
You can also add shortcodes to your WordPress theme by editing the theme files. Denna metod är mer avancerad, men den fungerar med alla WordPress teman.
Om du inte har lagt till kod på din site tidigare kan du kontrollera vår Step-by-Step guide om hur du copy and paste kod i WordPress.
Du kan ändra de enskilda theme-filerna direkt, men det gör det svårt att updating your WordPress theme utan att förlora customize. Av denna anledning rekommenderar vi att du åsidosätter temafilerna genom att skapa ett barntema.
Om du skapar ett custom theme kan du add to eller ändra koden i dina befintliga theme-filer.
När du redigerar dina temafiler kan du inte add to shortcoden i samma format som du använder med standard content areas. Istället för att se shortcodens utdata kommer du att se själva shortcoden på vyn.
Detta händer eftersom WordPress inte kör shortcodes inuti temats templates. Istället måste du uttryckligen berätta för WordPress att köra shortcoden med hjälp av do_shortcode-funktionen.
För mer information, vänligen se vår guide om hur du enkelt kan lägga till custom code.
Här är ett exempel på den kod som du ska add till filerna i ditt WordPress theme:
echo do_shortcode('[gallery]');
Ersätt bara ”gallery” med den shortcode du vill använda.
Om du ej är säker på var du ska add to shortcoden, vänligen se vår guide för nybörjare till mall-hierarkin i WordPress.
Om du lägger till en shortcode med extra parametrar måste du använda ett något annorlunda code snippet.
Tänk dig att du har skapat ett kontaktformulär med hjälp av WPForms. I det här fallet måste du använda WPForms standard shortcode plus formulärets ID:n:
echo do_shortcode("[wpforms id='92']");
Felsökning: Vad du ska göra när do_shortcode inte fungerar
Ibland kan du lägga till en shortcode i en theme-fil, men kodens utdata visas inte på din WordPress website. Detta innebär vanligtvis att shortcoden är beroende av ett WordPress plugin eller någon annan kod på din website.
Om do_shortcode-funktionen inte fungerar, se till att pluginet som tillhandahåller shortcode är installerat och aktiverat genom att gå till Tillägg ” Installerade tillägg.
I Följer image, WPForms är installerat men deactivate, så echo do_shortcode koden kommer inte att fungera.
Du kan också kontrollera om en shortcode är available genom att lägga till funktionen shortcode_exists() i filen index.php.
I följande snippet kontrollerar vi om WPForms-snippet är tillgängligt för användning på vår website:
if ( shortcode_exists( 'wpforms' )) {
echo do_shortcode("[[wpforms id='147']]");
}
Om du fortfarande inte ser shortcode-utmatningen på din webbplats, försök sedan att cleara WordPress-cachen, eftersom du kanske ser en outdated version av din webbplats.
Metod 3: Skapa din egen WordPress Theme (helt anpassningsbar)
Ett annat alternativ är att skapa ett customize WordPress theme. Det här är en mer avancerad metod, men den allow you to add as many shortcodes as you want to any area of your WordPress theme. Du kan också göra andra ändringar för att skapa exakt de funktioner och den design du vill ha.
Förr i tiden behövde du vanligtvis följa en komplicerad tutorial eller skriva anpassad kod för att bygga ett custom WordPress theme. Men nu kan du skapa ett custom theme utan att skriva en enda rad kod med SeedProd.
SeedProd är den bästa WordPress page bu ilder och kommer också med en theme builder, tillsammans med hela site kit och templates. This allows you to design your own themes using drag and drop.
För Step-by-Step instruktioner, vänligen se vår guide om hur du skapar ett custom WordPress theme (utan någon kod).
När du har skapat ett theme kan du add shortcodes till alla delar av din WordPress website genom att gå till SeedProd ” Theme Builder.
Här hittar du den template där du vill använda shortcoden.
Sedan håller du bara musen över den templates och klickar på ”Edit Design” när den visas.
Detta kommer att öppna templates i SeedProd’s theme builder.
I menyn till vänster rullar du till section ”Advanced”. Här hittar du blocket Shortcode och drar det till din layout.
I Live Preview klickar du helt enkelt för att selecta Shortcode blocket.
You can now add your shortcode to the ”Shortcode” box.
Som standard visar SeedProd inte shortcode-utmatningen i live preview.
För att se din shortcode i action, click on the ”Show Shortcode Option” toggle.
Efter det kanske du vill lägga till lite styling till shortcode-utgången genom att välja tabben ”Avancerat”.
Här kan du ändra avståndet, lägga till customize CSS och till och med lägga till CSS-animeringseffekter.
När du är nöjd med hur page ser ut klickar du bara på knappen ”Save”.
Därefter väljer du ”Publicera” för att göra shortcode live.
You can now visit your website to see the custom shortcode in action.
Vi hoppas att denna tutorial hjälpte dig att lära dig hur du använder shortcodes i dina WordPress teman. Du kanske också vill kontrollera vår guide om hur man skapar en landing page i WordPress och våra expertval av de mest användbara widgetarna för din site.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
Is there a way to create a shortcode myself, rather than just inserting one that’s already created by a plugin? Let me give an example. I create a piece of code that I don’t necessarily want to insert everywhere as PHP code. Can I turn that code into a shortcode, which I then simply insert in the desired location, and the entire PHP code hidden within that shortcode gets executed there?
WPBeginner Support says
We have a guide on creating your own shortcode that you would want to take a look at below:
https://www.wpbeginner.com/wp-tutorials/how-to-add-a-shortcode-in-wordpress/
Administratör
Jiří Vaněk says
Thank you very much for the link; I’ll go check out the article. I have several codes that I would like to turn into shortcodes to make my work easier. Thank you for the link to the article, and also for your work and assistance.
pankaj says
I deleted contact form 7 and it is giving error like this [contact-form-7 404 ”Not Found”] I don’t want to use the form again but want to remove this error I don’t know where to find that code or shortcode in template file
Sonik says
hi,
I have written a shortcode of a gallery plugin in wordpress visual editor, but it is not executing the shortcode, instead it displays the shortcode as it is written.
like if I write [test attr=’hello’], it echoes the same on webpage, not executing.
Thanks.
Michael says
This is a fantastic post, thank you, I am just exploring shortcuts now for a website I am doing
Art says
It doesn’t work in customizr theme. Anyone facing this issue?
Art says
Ok. managed to fix. Turned out the parentheses were breaking it.
Original:
Changed to:
DavidA says
Hello, I have two wordpress blogs on multisite.
Do you know, how to use the shortcode on the website 1 from the website 2 ?
Thx
WPBeginner Support says
You can create a Network Wide Plugin and then both blogs can use the shortcode.
Administratör
Riaz Kahn says
Thanks, Its Working Well.
Dean says
Sorry here is the code:
CODE: ——————————————————————————————
echo do_shortcode(”[tabset tab1=”tab 1 title” tab2=”tab 2 title”]
[tab]tab 1 content[/tab]
[tab]tab 2 content[/tab]
[/tabset]”);
—————————————————————————————————-
Michael Atkins says
It may be more efficient to use the method outlined by Konstantin Kovshenin at http://kovshenin.com/2013/dont-do_shortcode/
Nate Rouch says
That’s good information. I’ve been searching for a way to simply add these, I appreciate it.
Tim says
Great info. Thanks! However, it’s not working for me in WordPress 3.5.1 using the Avada theme.
Do you need to add anything to functions.php for the code above to work? Could this be a theme-specific issue? Thanks, just learning wordpress templating.
Editorial Staff says
Sounds like a theme specific issue. do_shortcode works just fine.
http://codex.wordpress.org/Function_Reference/do_shortcode
Administratör
Anthony says
thanks loads man! this saved me hours of internet searching
Tyron says
This is a great little tip. How would this work if your content needs to be wrapped in a shortcode?
Like [shortcode-name]Content here[/shortcode-name].
Jonathon Harris says
Tyron,
This a late answer as I’m just seeing it, but to include wrapped content, you could do the following:
echo do_shortcode(’[example_shortcode]’.$text_to_be_wrapped_in_shortcode.'[/example_shortcode]’);
Cheers,
J
pratik.chourdia says
Wow.. worked
thanks
Homepage Kasugai says
sfg
Homepage Kasugai says
This is exactly what I was looking for. Helpful. Thank you.
krushna says
yes..i am also interested to know ..where to write the code. if there will be example that wud be great.
Editorial Staff says
You add it anywhere you want to display the shortcode in your theme files. It can be in your sidebar, footer, or wherever you want.
Administratör
aminraisy says
can we add it after product description in the page of a product in woocommerce ?
WPBeginner Support says
Yes sure
Keith Davis says
Hi boys
Where do you add the code…
What file do you add it to and where abouts in the file?
My theme already uses shortcodes but it would still be interesting to know.
Jim says
I came across the need for this just the other day – to add a shortcode outside of the loop. Thanks!