Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Hur man skapar en minimerbar menu i sidebar i WordPress (det enkla sättet)

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.

How to Create a Collapsible Sidebar Menu in WordPress (The Easy Way)

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.

An example of a collapsible menu.

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

Subscribe to WPBeginner

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.

A collapsible sidebar menu in WordPress.

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.

Creating a menu in the 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”.

Adding pages to your WordPress menu.

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.

Adding posts to the WordPress menu.

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”.

The collapsible menu shortcode in the WordPress dashboard.

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.

Configuring the collapsible sidebar menu.

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”.

How to add a widget to the WordPress sidebar.

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.

Example of a working collapsible 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.

Configuring the look and feel of your WordPress collapsible sidebar menu.

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”.

Placing the collapsible menu on the WordPress website.

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.

Configuring your collapsible menu in the WordPress Customizer.

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.

Add WPForms widget block

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.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

6 kommentarerLämna ett svar

  1. 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!

  2. Mrteesurez says

    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 says

      While you could try using the shortcode in other locations, even if it works it may or may not display in a useful way.

  3. Jiří Vaněk says

    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.

  4. Tamie says

    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.

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.