En hopfällbar sidomeny är ett utmärkt sätt att ge enkel åtkomst till viktiga länkar och innehåll samtidigt som webbplatsens design hålls ren och organiserad.
Den här funktionen gör det möjligt för användare att expandera och kollapsa menyn, vilket ger dem kontroll över sin surfupplevelse. Den är perfekt för stora webbplatser, e-handelsbutiker eller andra webbplatser med en mer komplex layout.
I den här artikeln visar vi dig hur du enkelt skapar en minimerbar menu i sidebar i WordPress.
Vad är en minimerbar sidebar menu? (Och när man ska använda en)
De mest användarvänliga menyerna ger enkel åtkomst till alla länkar som besökarna behöver. Detta kan dock vara svårt för WordPress-webbplatser som har många sidor eller en mer komplex layout.
Tänk på en stor e-handelsbutik som har massor av produktkategorier och underkategorier, till exempel Amazon.
Att displayed varje enskild produktkategori i en standardmeny skulle inte vara en bra idé. Kunderna skulle troligen behöva rulla genom menyn för att hitta den kategori de är intresserade av.
Det är här hopfällbara menyer kommer in i bilden. Dessa menyer organiserar innehåll i en ”förälder-barn”-strategi. Det innebär att om besökaren klickar på ett överordnat objekt i en hopfällbar meny kommer den att expandera för att visa allt det överordnade objektets underordnade innehåll.
Ett exempel på detta är nyhetsbyrån Guardian, som använder en hopfällbar meny för sin mobila webbplats.
Minimerade menyer i sidebar anropas ibland också som förstoringsbara menyer. Detta beror på att de olika sektionerna förstoras när en visitor klickar på dem.
Som standard döljer minimerade menyer mycket content och komplexitet för besökarna. Det här är mycket mer användarvänligt än att rulla igenom en lång lista med kategorier och underkategorier på din WordPress blogg.
Med detta sagt, låt oss ta en titt på hur du enkelt kan skapa en minimerbar sidebar menu på din WordPress site.
Video Tutorial
Om du föredrar skriftliga instruktioner är det bara att fortsätta läsa.
Så här skapar du en minimerbar menu i sidebar i WordPress
Du kan skapa en hopfällbar meny i sidofältet i WordPress med hjälp av plugin-programmet Bellows Accordion Menu.
Bellows Accordion Menu ger en praktisk shortcode för att placera din minimera menyn på någon page, post, eller widget area, inklusive din sidebar.
Först måste du installera och aktivera Bellows Accordion Menu-plugin. Om du behöver hjälp kan du läsa vår nybörjarguide om hur du installerar ett WordPress-plugin.
Disclaimer: Tänk på att plugin-programmet inte har uppdaterats med de tre senaste versionerna av WordPress. Vi har dock testat det på vår webbplats i realtid och det fungerar bra. För mer information, se vår guide om användning av föråldrade WordPress-plugins.
Efter aktivering, besök sidan Appearance ” Menus i din WordPress dashboard.
Börja med att skriva in ett namn på din meny i fältet ”Menynamn”. Observera att dina besökare inte kommer att se detta namn eftersom det endast är för din egen referens.
Du kan sedan klicka på knappen ”Create Menu”.
Därefter väljer du de pages som du vill add to i den minimerade sidebar-menyn. Som standard visar WordPress bara dina senaste pages.
Om du vill se en lista över alla pages på din website klickar du på tabben ”View All”.
Alternativt kan du clicka på ”Select All”. Detta kommer att add to all your pages till den minimerade menyn.
När du är nöjd med ditt val klickar du på knappen ”Lägg till i menyn”. Du kan också välja inlägg och bloggkategorier eller lägga till egna länkar. Mer information finns i vår guide om hur du lägger till en navigeringsmeny i WordPress.
När du har lagt till alla dina olika sidor i menyn kan du flytta runt dem genom att dra and drop dem. Detta kommer att ändra ordern som dessa pages visas i din minimera menu.
Hopfällbara menyer handlar om förälder-barn-relationer.
När en visitor klickar på ett parent item i din minimerbara menu, kommer den att förstoras för att visa allt child content.
För att skapa denna relation använder du helt enkelt drag and drop för att ordna all your childs pages under deras parent.
Ta sedan tag i varje child och dra det lite åt höger. Du kan sedan släppa den här page. Detta kommer att dra in objektet och förvandla det till en child page.
Glöm inte att klicka på knappen ”Save Menu” när du är klar.
Nu vill vi add to denna minimerade menu till sidebaren i WordPress. För att göra detta kommer vi att använda några shortcodes som Bellows Accordion skapar automatiskt.
För att hämta kortkoden går du till sidan Utseende ” Bellows Menu från WordPress instrumentpanel. Om den inte redan är vald, se till att du väljer fliken ”Visa alla”.
You can now click on the Shortcode box, which should highlight all of the code. Kopiera nu denna kod med hjälp av tangentbordsgenvägarna Command + c eller Ctrl + c.
Nästa steg är att klistra in denna shortcode i en widget, så head över till sidan Appearance ” Widgets från admin area.
Detta kommer att visa alla widgetar area i ditt nuvarande theme. De alternativ som du ser kan variera, men de flesta moderna WordPress teman utvald en sidebar.
När du har hittat sidebar area, ge den ett click. Denna section kommer nu att förstoras.
För att lägga till ett block klickar du på + ikonen och börjar skriva ”Shortcode”. När det visas väljer du blocket ”Shortcode”.
Nu klistrar du helt enkelt in din shortcode för den minimerbara menyn i detta block. För att publicera din meny måste du clicka på knappen ”Update” högst upp på din vy.
Nu, när du besöker din site, bör du se en new minimerbar sidebar menu.
Bellows Accordion plugin gör det också superenkelt att customize denna standard menu. Du kan till exempel ändra dess färgschema för att bättre återspegla din webbplats varumärke.
Om du vill tweaka standardmenyn går du helt enkelt till sidan Appearance ” Bellows Menu i WordPress dashpanel.
Denna meny har all settings you behöver för att customize din minimera meny. Det finns många Settings att utforska. Men du kanske vill börja med att gå till Huvudkonfiguration ” Grundkonfiguration.
Här kan du växla mellan flera olika menyfärger. Du kan också välja om besökarna ska kunna expandera flera undermenyer samtidigt med hjälp av inställningarna för ”Accordion Folding”.
Om du vill ändra menyns inriktning och bredd klickar du på tabben ”Layout & Position”.
Om du föredrar att förhandsgranska dina ändringar i realtid kan du redigera den hopfällbara sidofältmenyn i WordPress Customizer.
För att göra detta, head över till sidan Appearance ” Customize från admin area och välj tabben ’Bellows’ från den vänstra kolumnen.
Här hittar du många olika Settings för din sidebar. Du kan bland annat ändra bredden, inriktningen och färgen på din minimerade sidebar-meny.
Bonus: Tricks för sidebar i WordPress för att få maximalt resultat
När du har skapat en minimerbar sidebar menu kan du använda några andra tips för att generera fler leads med hjälp av din sidebar.
Till exempel kan du göra din sidebar widget sticky så att den är synlig på sidan även när användaren rullar ner.
Utöver det kan du lägga till ett kontaktformulär eller ett e-postregistreringsformulär i din sidebar för att bygga din email list. För att göra detta kan du använda WPForms, som är det bästa pluginet för kontaktformulär på marknaden.
You will simply need to create a form and then add it to your sidebar using the WPForms block in the block menu.
För mer details, you can see our tutorial on how to create a contact form in WordPress.
Dessutom kan du displayed your most popular posts in the sidebar, add images, show social media icons, and display social proof. Detta kommer att uppmuntra användarna att utforska din site mer och öka din konvertering.
För fler tips kan du se vår lista över de bästa knepen för sidebar i WordPress för att få maximalt resultat.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar en hopfällbar sidofältsmeny i WordPress. Om du vill ha fler tips om hur du redigerar din WordPress-webbplatsdesign kan du också gå igenom våra guider om hur du anpassar din WordPress-header och de mest användbara WordPress-widgetarna för din webbplats.
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.
Mrteesurez
Thanks for this guide, if I understand you correctly, that means the plugin will generate a shortcode that can be placed at anywhere in the site even inside a post ?
WPBeginner Comments
While you could try using the shortcode in other locations, even if it works it may or may not display in a useful way.
Jiří Vaněk
For websites that have many categories, this is the perfect option to make the sidebar clear. I now have about 15 categories on the site and am thinking about something similar to the accordion as well. Thanks for the inspiration.
Tamie
Thank you for this. How can you adjust the spacing between the subcategories? I have a lot of categories and having what looks like a double line space in between make the menus very long.
WPBeginner Support
It would depend on your specific theme for the settings required. You would want to start by checking with the support for your specific theme. Otherwise, you could use Inspect Element to find what needs to be modified. We have a guide below that shows how to use Inspect Element to help with this:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administratör