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.
💡Snabbt svar: Hur man lägger till en utfällbar sidomeny i WordPress
Det enklaste sättet att lägga till en utfällbar sidomeny är att använda pluginet Bellows Accordion Menu.
Det låter dig designa en flernivåmeny i din instrumentpanel och lägga till den i din sidomeny med en enkel kortkod.
Vad är en utfällbar sidopanelsmeny? (Och när ska man använda en)
En utfällbar sidomeny (eller expanderbar meny) är en navigeringslista som döljer underobjekt tills en besökare klickar för att visa dem. Den organiserar länkar i en 'förälder-barn'-struktur och håller din webbplatsdesign ren.
Vi rekommenderar ofta att använda utfällbara menyer för stora webbplatser eller e-handelsbutiker. Här är varför de är effektiva:
- Organisera komplexa layouter: De hjälper dig att sortera hundratals kategorier eller sidor utan att överväldiga användaren.
- Spara skärmutrymme: Genom att dölja barnobjekt håller du sidomenyn kort och prydlig.
- Förbättra mobilupplevelsen: De förhindrar mobilanvändare från att behöva skrolla igenom oändliga listor med länkar.
Till exempel använder nyhetsbyrån Guardian en utfällbar meny för sin mobilwebbplats för att hantera sina många nyhetskategorier.
Nu ska vi titta på hur du enkelt kan skapa en utfällbar sidomeny 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 som låter dig placera din utfällbara meny på vilken sida, inlägg eller widgetområde som helst, inklusive din sidofält.
Notera: Denna plugin är avsedd att användas med klassiska teman.
Steg 1: Installera och aktivera Bellows Accordion Plugin
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.
Steg 2: Skapa en ny meny
Efter aktivering, besök sidan Utseende » Menyer i din WordPress-instrumentpanel.
Skriv ett namn för din meny i fältet 'Menynamn'. Klicka sedan på knappen 'Skapa meny'.
Steg 3: Lägg till och ordna menyalternativ
Välj sedan de sidor du vill lägga till från den vänstra kolumnen och klicka på 'Lägg till i meny'.
Om du vill se en lista över alla dina webbplatsens sidor, klicka på fliken 'Visa alla'. För mer information, se vår guide om hur man lägger till en navigeringsmeny i WordPress.
För att skapa den utfällbara effekten måste du ordna objekten i ett förälder-barn-förhållande. Dra helt enkelt ett sidobjekt lite åt höger under ett föräldraobjekt.
Dra det åt höger tills du ser den streckade konturen skifta inåt. Detta bekräftar att objektet nu är ett underobjekt, som kommer att döljas tills föräldern klickas på.
Nu, när en besökare klickar på ett föräldraobjekt i din utfällbara meny, kommer den att expandera för att visa allt barninnehåll.
Glöm inte att klicka på knappen ‘Spara meny’ när du är klar.
Steg 4: Hämta kortkoden för menyn
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, vilket bör markera all kod. Kopiera nu denna kod med antingen kortkommandot Command + C eller Ctrl + C.
Steg 5: Lägg till menyn i ditt sidofält
Nu behöver vi lägga till menyn i din webbplatslayout. Gå till sidan Utseende » Widgets från WordPress adminområde.
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.
Hitta sidofältets widgetområde och klicka på '+' ikonen för att lägga till ett nytt block.
Sök efter 'Kortkod' och välj blocket.
Klistra in din kopierade kortkod i blocket och klicka på 'Uppdatera'. När du besöker din webbplats bör du se din nya utfällbara meny.
På mobila enheter visas den här sidofältet vanligtvis längst ner på sidan, där den utfällbara funktionen hjälper till att spara värdefullt vertikalt scrollutrymme.
Steg 6: Anpassa din utfällbara meny
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.
Vanliga frågor om utfällbara sidomenyer i WordPress
Här är några frågor som våra läsare ofta har ställt innan de lägger till en utfällbar sidomeny på sina webbplatser:
Hur fäller jag ihop en meny i WordPress?
Du kan fälla ihop en meny med hjälp av ett plugin som Bellows Accordion Menu. Som standard har WordPress-menyer inte den här funktionen på datorskärmar. Ett plugin lägger till den nödvändiga koden för att objekt ska expandera och döljas när de klickas på.
Hur lägger jag till en utfällbar sektion i WordPress?
Det enklaste sättet är att använda standardblocket 'Details' i WordPress. Det här blocket låter dig omsluta innehåll i en klickbar sammanfattningsrad. För mer avancerad styling inuti dina inlägg kan du använda ett dedikerat dragspelsplugin.
Hur skapar jag en neddragbar meny i WordPress?
Du kan skapa en neddragbar meny genom att gå till Utseende » Menyer i din instrumentpanel. Dra helt enkelt ett menyobjekt lite åt höger under en föräldralänk. Den här indragningen talar om för WordPress att visa det objektet i en neddragbar lista.
För mer information, ta en titt på vår handledning om att skapa en neddragbar meny i WordPress.
Hur placerar jag element sida vid sida i WordPress?
Du kan placera element sida vid sida med hjälp av Kolumnblocket. I blockredigeraren väljer du 'Kolumner' och väljer din föredragna layout. Lägg sedan helt enkelt till din text eller dina bilder i varje kolumn.
Vad är dragspelsblock-plugin för WordPress?
Ett dragspelsblock-plugin låter dig lägga till utfällbara innehållssektioner i dina inlägg. Det hjälper till att organisera långt innehåll genom att dölja text under rubriker. Användare klickar helt enkelt på rubriken för att läsa den information de behöver.
Om du vill lägga till dragspel till din webbplats, ta en titt på våra toppval för de bästa WordPress-dragspelsplugins.
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://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin