Vill du lära dig hur du använder shortcodes i dina widgetar i sidebar i WordPress?
Du kan add shortcodes till valfri page eller post med hjälp av blocket Shortcode. Men om du vill använda samma kod på hela din site kan det vara lättare att add to den till en widget i sidebar istället.
I den här artikeln visar vi dig hur du använder shortcodes i sidebaren i WordPress.
Varför använda shortcodes i dina sidebar widgets i WordPress?
Shortcodes allow you to add advanced content and features to your website, including contact forms, tables, random quotes, and much more. WordPress levereras med flera built-in shortcodes men vissa plugins add to också sina egna shortcodes.
Du kan add shortcodes till vilken page eller post som helst med hjälp av WordPress editor och built-in Shortcode block. Men om du vill använda en shortcode på hela din site är det ofta vettigt att add to den till sidebaren.
Du kan till exempel visa Instagram-foton i sidebaren WordPress med hjälp av en shortcode som tillhandahålls av Smash Balloon Instagram Feed.
Detta content kommer sedan att visas på hela din WordPress website, så du behöver inte lägga till det på varje page och post manuellt. Detta kan save you massor av tid och ansträngning och hjälper till att hålla designen på din site konsekvent.
Med detta i åtanke, låt oss titta på några olika sätt att add to och använda shortcodes i WordPress sidebar widgets. Använd bara snabblänkarna under för att hoppa direkt till den metod du vill använda.
Metod 1: Lägga till shortcode till WordPress Block Widget Editor (Classic Themes)
De flesta gratis och betalda klassiska WordPress teman kommer med widget-klara sidebar. Med detta i åtanke kan du ofta helt enkelt add to en Shortcode widget till din websites sidebar.
Först går du till appearance ” Widgets i adminpanelen. Här ser du alla de olika area där du kan add widgetar i WordPress, inklusive sidebar.
Klicka bara på knappen ”+ Add Block” och börja skriva in ”Shortcode”.
När det högra blocket dyker upp drar du det till sidebaren i WordPress.
You can now add your shortcode to the block.
När du har slutfört, glöm inte att clicka på ”Update” för att göra ändringarna live.
Nu kan du besöka din WordPress blogg eller website för att se shortcoden i action.
Metod 2. Lägga till shortcode till hela Site Editor (Block Themes)
Om du använder ett Block Editor-tema kan du lägga till en shortcode till sidebaren med hjälp av Full Site Editor. I din WordPress dashboard, gå till Themes ” Editor.
Du kommer nu att se några inställningar för att edit your block theme.
För att editera ditt temas sidebar behöver du vanligtvis klicka på menyn ”Patterns”.
Nu rullar du ner till ”Template Parts”.
Det är här du hittar ditt block temas standard templates delar, såsom headers, footers och sidebars. Klassiska teman kategoriserar vanligtvis dessa element som widgetar areas.
Precis som klassiska teman kan ditt block theme ha eller ej ha en sidebar template-del. I så fall kan du behöva skapa en själv. Du kan läsa vår guide för nybörjare till WordPress Full Site Editing om hur du gör det.
När du har locationat din sidebar, clickar du bara på den.
Därefter klickar du bara på knappen ”Edit”.
Detta tar dig till block editor för att editera sidebaren.
Nu, precis som när du använder block editor, kan du klicka på knappen ”+ Add Block” var som helst.
Därefter väljer du blocket ”Shortcode”.
När du är klar, lägg bara till shortcode som du normalt skulle göra.
Sedan klickar du på ”Save” för att göra dina ändringar officiella.
Metod 3: Använda den anpassade HTML-widgeten (mer customize)
Ibland kanske du vill visa annat content tillsammans med shortcoden. RafflePress kan till exempel add to en tävling eller giveaway till din sidebar med hjälp av en shortcode. För att dra ännu mer uppmärksamhet till tävlingen kanske du vill visa en heading ovanför tävlingen.
Istället för att skapa separata Shortcode- och Heading-block kan du helt enkelt add to shortcode och text till ett Custom HTML-block.
Detta hjälper dig att ordna olika content i en snygg layout. Du kan också styla blocket med HTML, så att du kan kontrollera exakt hur det ser ut i sidebaren.
För mer detaljer, se vår kompletta RafflePress review.
Custom HTML-blocket stöder inte shortcodes som standard, men du kan enkelt ändra detta genom att lägga till customize-kod i WordPress. När du har lagt till den här koden kan du använda shortcodes i alla Custom HTML-block på hela din WordPress website.
Ofta hittar du guider med instruktioner för att add to custom kod till din sites functions.php-fil. Detta rekommenderas dock inte eftersom eventuella error i koden kan orsaka vanliga WordPress-fel, eller till och med förstöra din site helt.
Det är där WPCode kommer in i bilden.
Detta gratis plugin gör det enkelt att add to custom CSS, PHP, HTML, och mer till WordPress, utan att sätta din site i riskzonen. Ännu bättre, det kommer med ett bibliotek med färdiga snippets inklusive kod som allow you att använda shortcodes i textwidgets.
Till att börja med måste du installera och aktivera WPCode. För mer information kan du läsa vår Step-by-Step guide om hur du installerar ett tillägg till WordPress.
Efter det, gå till Code Snippets ” Add Snippet i WordPress dashpanelen. Du kan nu börja skriva in ”shortcode”.
När det dyker upp, hoverar du musen över följande snippet: ”Aktivera körning av shortcode i textwidgets.
You can then go ahead and click on ”Använd snippet”.
Detta kommer att öppna snippet i WPCode editor. WPCode konfigurerar inställningarna för snippet åt dig, så du kan helt enkelt clicka på ”Inaktiverad”-knappen så att den blir blå.
När du har gjort det klickar du på ”Update” för att göra snippet live.
Nu kan du add a shortcode till vilken text widget som helst.
Gå bara till Appearance ” Widgets och skriv ’Custom HTML’ i sökfältet.
När det högra blocket appear drar du det till sidebaren på din website.
När det är gjort kan du add your HTML och shortcode till blocket.
När du är nöjd med hur widgeten är konfigurerad klickar du på ”Update”.
Nu om du besöker din website, ser du shortcode och custom HTML live.
VANLIGA FRÅGOR: Använda shortcodes i widgetar i sidebar i WordPress
Oavsett vilket theme du använder bör du kunna add shortcodes till sidebaren med hjälp av någon av metoderna ovan.
Men om du behöver extra hjälp, här är några av de vanligaste frågorna om att lägga till shortcodes i sidebaren.
Hur ändrar jag var widgeten för sidebar visas?
Sidebarens location styrs av your WordPress theme. Om du inte är nöjd med sidebarens position kan du eventuellt ändra den med hjälp av temats inställningar.
Många WordPress teman låter dig välja mellan olika layouts. Ofta innebär det att sidebaren visas på olika sidor av vyn.
Du kan gå till WordPress Theme Customize eller Full Site Editor för att se de tillgängliga sidebar-områdena.
Hur addar jag en sidebar till mitt tema i WordPress?
Om ditt tema inte har ett sidebar kan du skapa ett barntema och sedan add to ett sidebar med hjälp av kod.
Du kan läsa vår guide om hur du lägger till custom headers, footers och sidebars i WordPress för mer information.
Om du ej är bekväm med att skriva kod, kan du också skapa ett custom WordPress theme med hjälp av ett tillägg som SeedProd. Du kan använda detta populära page builders plugin för att designa ditt eget theme och sidebar med hjälp av en enkel drag and drop editor.
För Step-by-Step instruktioner, vänligen se vår guide om hur du skapar ett customize WordPress theme utan någon kod.
Hur använder jag en annan shortcode på varje post eller page?
Ibland kanske du vill använda olika shortcodes på några av dina posts och pages. Till exempel kanske du vill visa de mest populära posterna på din archive page och visa annonser på din homepage.
För mer information, vänligen se vår guide om hur du visar olika sidebar för varje post och page i WordPress.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt kan add shortcodes till dina widgets i sidebar i WordPress. Du kanske också vill se vår guide om hur du skapar en landing page med WordPress eller vårt expertval av de bästa tilläggen för sociala medier.
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!
Mrteesurez says
Do you mean, in the last method, that I can add shortcodes in the original HTML widget box and make it runs well just like shortcode widget box ?
WPBeginner Support says
For now you should be able to
Administratör
Ralph says
Shortcodes are one of the best things in wordpress. They save so much time when we only have to change the code in 1 place and everywhere else updates on its own. I love them!
I was using adinsterter for years, but it is limited to 20 shortcodes in the free version. I will definitely switch to wordpress method now when I know about it.
WPBeginner Support says
Glad you found it helpful
Administratör
Arkanum says
Thanks! For me it’s work
WPBeginner Support says
Glad our guide helped
Administratör
Zdenko Zec says
Hi there. I have tried it on my website developed localhost but it is not working. I have tried both with the text widget and by adding the filter to the functions.php and using the Custome HTML. Can you please share your thoughts about that? Cheers
WPBeginner Support says
You may want to ensure the shortcode you’re using is a working shortcode.
Administratör
Thanks a lot!! says
Great post! thank you very much
WPBeginner Support says
You’re welcome
Administratör
Muhammad Zeeshan says
Hi
Good morning
Actually i want to show only text of the post on a specific page,how can i do this?
WPBeginner Support says
For what it sounds like you’re wanting, you may want to take a look at:
https://www.wpbeginner.com/plugins/how-to-insert-wordpress-page-content-to-another-page-or-post/
Administratör
Rahul says
Last night i have install an Plugin for shortcode. But i could not use it. But now i’m success
WPBeginner Support says
Glad our article could help
Administratör
Ahmer says
This is very good and informative post about how to use shortcodes.
I was looking for such article.
Shortcodes really make difference in blogs and many people don’t know how to use them properly.
MikeL says
The custom code option only works in the widget text CONTENT area, but not the TITLE area.
nicole says
where do you go to actually create the shortcodes?? Im looking for where to find the settings shown in this screenshot:
Neville says
Hi there,
I have experience in website development, but am new to WooCommerce. I am building a website for a client, based on the Avada WP theme (5.6.1). This is under development:
You will see that there is a carousel on the Home page, but I have been looking without success for a plugin to replace this which will allow me to display variable products in gallery/grid style. Needs to work with Woocommerce product variations, e.g. price, category, brief description. Add to Cart also would be ideal.
I am wondering if shortcodes could be used to create this?
If so, how could they be added to replace the carousel?
Thanks.
Neville
Brendan says
Hi,
I tried using the shortcode widget as you suggested but I am still unable to align the widgets at the footer side by side rather than on top of each other.
Are you able to help please?
Thank you!
Brendan
lukman says
It.is.not.working
Mathiew Burkett says
Hello
I have created the Site Specific Plugin and activated the plugin.
I am trying to get a shortcode to work in a different area where a shortcode will not currently work with my Theme.
I am using the Socrates 3.08 version theme.
Here is a link to a screenshot that I created that shows the two places that I have circled with a red circle where I need a shortcode to work and I right clicked on the area where I need to add the plugin and inspected it to find the code in the area of my theme where I am trying to get a shortcode to work at and added the screenshot of the code also.
Would someone tell me if there is a function that I could add to the site specific plugin that will get a shortcode to work in the two areas that I have circled.
Gurpreet Singh Saini says
Thanks its working.
Bilal says
yes, its working.
A WP Life says
Hi There,
User reported after new WordPress update 4.5.3.
Shortcode not working in text widget..
Our plugin is
Need help, thanks in advance.
A WP Life
WPBeginner Support says
Please report the conflict to plugin author.
Administratör
Vinicius says
Thanks!
Monuruzzaman Milon says
Really Awesome I love your all blog post. Because I’m learning about wordpress theme development .Really it’s help for me about add_filter hook.
Thanks,
Alfredo says
Thank you so much.
Arra Referees says
Thank You for this. Life Saver. Was using a plugin (GCAL) with a special sidebar widget but wouldn’t allow me to add a link to the calendar beneath it without delving into code. Simply adding this and using the short code really did the business. Many Thanks. Working in 4.1.1
Manuel Meurer says
Awesome tip, still works great in WordPress 4.0!
cob-web says
This saved my day – thanks!
slim shady says
will it interpret [ ]everything as a shortcode?
WPBeginner Support says
No only if a shortcode is registered. For example if you dont have a shortcode [apples] then it will display as it is.
Administratör
firoz says
I want to shortcode in the sidebar
queenofthehivemomof5 says
I tried putting it at the bottom of the fuctions PHP template within the php tags and am still getting the RAW code wrapped around my shortcode. The shortcode is displaying it just shows [raw] [/raw] on either side of it.
Any other suggestions? Thanks in advance!
wpbeginner says
@queenofthehivemomof5 You need to paste it in between the php tags and make sure it is not part of any other funciton… so it is best to place it at the bottom.
queenofthehivemomof5 says
Is there a certain part of the fuctions.php file I should paste it into? It does not appear to be working for me. I get my shortcode output but it is surrounded by ”Raw”
[raw][/raw]TAB 1TAB 2TAB 3[raw][/raw]Tab content 1[raw] [raw] [raw][/raw] (something like that)
edward.caissie says
This line of code can be added to a plugin that has a shortcode and it will do the same thing, too … although adding the line of code to the functions.php file of a Child-Theme would be a more future-proof method.