En utfä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 låter användare expandera och kollapsa menyn, vilket ger dem kontroll över sin webbläsarupplevelse.
Vi har märkt att många stora webbplatser, e-handelsbutiker och webbplatser med mer komplexa layouter använder den för att göra navigeringen enklare.
I den här artikeln visar vi dig hur du enkelt skapar en utfällbar sidopanelsmeny i WordPress.
Vad är en utfällbar sidopanelsmeny? (Och när ska man använda en)
De mest användarvänliga menyerna ger enkel åtkomst till alla länkar som besökare behöver. Detta kan dock vara knepigt 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, som Amazon.
Att visa varenda produktkategori i en standardmeny vore ingen bra idé. Handlare skulle troligen behöva scrolla igenom menyn för att hitta den kategori de är intresserade av.
Det är här hopfällbara menyer kommer in. Dessa menyer organiserar innehåll med en 'förälder-barn'-metod. Det betyder att om besökaren klickar på ett föräldraobjekt i en hopfällbar meny, kommer den att expandera för att visa allt barninnehåll för det föräldraobjektet.
Ett exempel på detta är nyhetskanalen Guardian, som använder en utfällbar meny för sin mobilwebbplats.
Kollapsbara sidomenyer kallas ibland även utdragbara menyer. Detta beror på att deras olika sektioner expanderar när en besökare klickar på dem.
Som standard döljer utfällbara menyer mycket innehåll och komplexitet från besökare. Detta är mycket mer användarvänligt än att skrolla igenom en lång lista med kategorier och underkategorier på din WordPress-blogg.
Med det sagt, låt oss ta en titt på hur du enkelt kan skapa en utfällbar sidofältsmeny på din WordPress-webbplats.
Hur man skapar en utfällbar sidomeny i WordPress
Du kan skapa en utfällbar sidopanelsmeny i WordPress med hjälp av pluginet Bellows Accordion Menu.
Det ger en praktisk kortkod för att placera din utfällbara meny på vilken sida, inlägg eller widgetområde som helst, inklusive din sidopanel.
Först måste du installera och aktivera pluginet Bellows Accordion Menu. Om du behöver hjälp, se vår nybörjarguide om hur man installerar ett WordPress-plugin.
🚨 Ansvarsfriskrivning: Tänk på att pluginet inte har uppdaterats med de tre senaste versionerna av WordPress. Vi testade det dock på vår webbplats och fann att det fungerar bra. För mer information, se vår guide om användningen av föråldrade WordPress-plugins.
Efter aktivering, besök sidan Utseende » Menyer i din WordPress-instrumentpanel.
Börja med att skriva ett namn för din meny i fältet 'Menynamn'. Notera att dina webbplatsbesökare inte kommer att se detta namn eftersom det endast är för din egen referens.
Du kan sedan klicka på knappen ‘Skapa meny’.
Välj sedan de sidor du vill lägga till i den utfällbara sidomenyn. Som standard visar WordPress bara dina senaste sidor.
Om du vill se en lista över alla din webbplats sidor, klicka på fliken ‘Visa alla’.
Alternativt kan du klicka på ‘Markera alla’. Detta lägger till alla dina sidor i den kollapsbara menyn.
När du är nöjd med ditt val klickar du på knappen ‘Lägg till i meny’. Du kan också välja inlägg och bloggkategorier eller lägga till anpassade länkar. För mer information, se vår guide om hur man lägger till en navigeringsmeny i WordPress.
Efter att ha lagt till alla dina olika webbsidor i menyn kan du flytta runt dem genom att dra och släppa dem. Detta ändrar ordningen som dessa sidor visas i din utfällbara meny.
Utfällbara menyer handlar om förälder-barn-relationer.
När en besökare klickar på ett föräldraobjekt i din hopfällbara meny, kommer den att expandera för att visa allt barninnehåll.
För att skapa denna relation, använd helt enkelt dra och släpp för att ordna alla dina barns sidor under deras förälder.
Hämta sedan varje barn och dra det lite åt höger. Du kan sedan släppa den här sidan. Detta kommer att indragna objektet och göra det till en undersida.
Glöm inte att klicka på knappen ‘Spara meny’ när du är klar.
Nu vill vi lägga till denna utfällbara meny i WordPress sidofält. För att göra detta kommer vi att använda några kortkoder som Bellows Accordion skapar automatiskt.
För att få kortkoden, gå till sidan Utseende » Bellows Meny från WordPress-instrumentpanelen. Om den inte redan är vald, se till att du väljer fliken ‘Visa alla’.
Du kan nu klicka på kortkodsboxen, som bör markera all kod. Kopiera nu denna kod med antingen kortkommandot Command + c eller Ctrl + c.
Nästa steg är att klistra in denna kortkod i en widget, så gå till sidan Utseende » Widgetar från adminområdet.
Detta visar alla widgetområden inom ditt nuvarande tema. De alternativ du ser kan variera, men de flesta moderna WordPress-teman har ett sidofält.
När du har hittat sidofältsområdet, klicka på det. Den här sektionen kommer nu att expandera.
För att lägga till ett block, klicka på + ikonen och börja skriva ‘Kortkod’. När det visas, välj blocket ‘Kortkod’.
Klistra nu helt enkelt in din kortkod för utfällbar meny i detta block. För att publicera din meny måste du klicka på knappen 'Uppdatera' högst upp på skärmen.
Nu, när du besöker din webbplats, bör du se en ny kollapsbar sidomeny.
Bellows Accordion-pluginet gör det också superenkelt att anpassa denna standardmeny. Du kan till exempel ändra dess färgschema för att bättre återspegla din webbplats varumärkesbyggande.
Om du vill finjustera standardmenyn, gå helt enkelt till sidan Utseende » Bellows Meny i din WordPress-instrumentpanel.
Den här menyn innehåller alla inställningar du behöver för att anpassa din utfällbara meny. Det finns många inställningar att utforska. Du kanske dock vill börja med att gå till Huvudkonfiguration » Grundläggande konfiguration.
Här kan du växla mellan flera olika menyfärger. Du kan också välja om besökare kan expandera flera undermenyer samtidigt med hjälp av inställningarna för ‘Dragspelsvikning’.
För att ändra menyns justering och bredd, klicka på fliken ‘Layout & Position’.
Om du föredrar att förhandsgranska dina ändringar i realtid kan du redigera den utfällbara sidofältsmenyn i WordPress Customizer.
För att göra detta, gå till sidan Utseende » Anpassa från adminområdet och välj fliken 'Bellows' från vänster kolumn.
Här hittar du massor av olika inställningar för ditt sidofält. Dessa inkluderar att ändra dess bredd, justering och färgen på din utfällbara sidofältsmeny.
Bonus: WordPress-sidofältsknep för maximala resultat
När du väl har skapat en hopfällbar sidofältsmeny kan du använda några andra tips för att generera fler leads med hjälp av ditt sidofält.
Till exempel kan du göra din sidofält-widget klibbig så att den är synlig på sidan även när användaren skrollar ner.
Förutom det kan du lägga till ett kontaktformulär eller en e-postanmälningsformulär i din sidopanel för att bygga din e-postlista. För att göra detta kan du använda WPForms, som är det bästa kontaktformulärpluginet på marknaden.
På WPBeginner använder vi det för att skapa kontaktformulär och årliga undersökningar, och vi älskar det. För att lära dig mer, se vår fullständiga WPForms-recension.
Du behöver bara skapa ett formulär och sedan lägga till det i ditt sidofält med hjälp av WPForms-blocket i blockmenyn.
För mer information kan du se vår handledning om hur man skapar ett kontaktformulär i WordPress.
Dessutom kan du visa dina mest populära inlägg i sidofältet, lägga till bilder, visa sociala medieikoner och visa sociala bevis. Detta kommer att uppmuntra användare att utforska din webbplats mer och öka dina konverteringar.
För fler tips kan du se vår lista över de bästa WordPress-sidofältsknepen för maximala resultat.
Videohandledning
Om du inte föredrar skriftliga instruktioner, titta bara på vår videoguide.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar en utfällbar sidomeny i WordPress. För fler tips om hur du anpassar din WordPress-webbplatsdesign kan du också gå igenom våra guider om hur du anpassar din WordPress-rubrik och de mest användbara WordPress-widgetarna för din webbplats.
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.
Mrteesurez
Tack för den här guiden, om jag förstår dig rätt, betyder det att pluginet kommer att generera en kortkod som kan placeras var som helst på webbplatsen, även inuti ett inlägg?
WPBeginner Kommentarer
Även om du kan försöka använda kortkoden på andra platser, även om den fungerar, kanske den inte visas på ett användbart sätt.
Jiří Vaněk
Jag provade det, och ja, din idé är korrekt. Det fungerar verkligen. Det är dock värt att fundera på hur du kommer att använda det i slutändan. För i mitt fall kunde jag inte hitta någon annan användning för det förutom i sidofältet. Men kanske din webbplats är annorlunda, och du hittar en användning för det. Så svaret på din fråga är ja, det fungerar som du beskrev.
Jiří Vaněk
För webbplatser som har många kategorier är detta det perfekta alternativet för att göra sidofältet tydligt. Jag har nu cirka 15 kategorier på webbplatsen och funderar på något liknande dragspel också. Tack för inspirationen.
Tamie
Tack för detta. Hur kan man justera avståndet mellan underkategorierna? Jag har många kategorier och att ha vad som ser ut som dubbelt radavstånd emellan gör menyerna väldigt långa.
WPBeginner Support
Det skulle bero på ditt specifika tema för de inställningar som krävs. Du skulle vilja börja med att kontrollera supporten för ditt specifika tema. Annars kan du använda Inspektera element för att hitta vad som behöver ändras. Vi har en guide nedan som visar hur man använder Inspektera element för att hjälpa till med detta:
https://014.leahstevensyj.workers.dev/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin