Hur man skapar en rullgardinsmeny i WordPress (nybörjarguide)

Vill du skapa en rullgardinsmeny i WordPress?

En rullgardinsmeny visar en lista med länkar när du för muspekaren över ett menyalternativ. Du kan använda dessa menyer för att visa många alternativ på en liten yta och hjälpa besökare att hitta vad de letar efter genom att organisera länkar i kategorier.

I den här nybörjarguide visar vi dig hur du skapar en ned meny i WordPress.

Varför använda rullgardinsmenyer i WordPress?

WordPress levereras med ett inbyggt system för menyhantering som låter dig enkelt lägga till navigeringsmenyer på din webbplats.

Navigeringsmenyer är länkar till din webbplats viktigaste sidor och visas vanligtvis i en rad bredvid din webbplats logotyp.

Om du startar en WordPress-blogg eller skapar en webbplats med bara några få sidor, kan det vara vettigt att skapa din meny som en enda rad. Besökare kan då se alla dina viktiga sidor på ett ögonblick.

Men om du driver en onlinebutik eller en stor webbplats, kan du ha mycket innehåll. Att lägga till alla dessa länkar i menyn kan vara överväldigande och få din webbplats att se rörig ut.

Rullgardinsmenyer löser detta problem genom att bara visa menyalternativ när en besökare för muspekaren över föräldraobjektet. De låter dig också organisera ditt innehåll i ämnen, kategorier eller grupper. Du kan till och med lägga till titlar i dina menyer.

Liknande vertikala navigeringsmenyer, de är perfekta för att visa mycket innehåll på en liten yta.

Med det sagt, låt oss ta en titt på hur du enkelt kan skapa WordPress-rullgardinsmenyer och sedan lägga till dem på din webbplats.

Videohandledning

Prenumerera på WPBeginner

Om du inte gillar videon eller behöver mer instruktioner, fortsätt bara att läsa.

Steg 1: Välja ett tema med stöd för rullgardinsmenyer

WordPress levereras med ett inbyggt system för menyhantering, men hur dessa menyer ser ut varierar beroende på ditt WordPress-tema.

Nästan alla WordPress-teman stöder nedrullningsbara menyer som standard. Vissa teman kanske dock inte har korrekt stöd för nedrullningsbara menyer. Till att börja med måste du se till att ditt tema stöder nedrullningsbara menyer.

Hur vet du om ditt tema stöder rullgardinsnavigering?

Om du laddade ner temat från det officiella WordPress-arkivet, besök sedan tematens sida och klicka på knappen ‘Förhandsgranska’ för att se en live-demo.

Du kan sedan kontrollera om demon inkluderar en rullgardinsmeny.

Om du använder ett premium WordPress-tema kan utvecklaren ha en live-demo på sin webbplats. Du kan också kontrollera temats dokumentation för mer information.

Om du fortfarande är osäker kan du alltid be utvecklaren om hjälp. För mer om detta ämne, se vår guide om hur man korrekt ber om WordPress-support och får den.

Om ditt WordPress-tema inte stöder rullgardinsmenyer, behöver du hitta ett tema som gör det. För massor av tips, se vår guide om hur du väljer det perfekta WordPress-temat.

För att hjälpa dig har vi här några utmärkta teman som stöder rullgardinsmenyer:

• Astra – Ett multipurpose WordPress-tema som levereras med flera startplatser och massor av funktioner.
• StudioPress-teman – Byggda ovanpå Genesis-temats ramverk, dessa professionella teman bör hjälpa din webbplats att laddas snabbare.
• OceanWP – Ett populärt WordPress-tema som passar för alla typer av webbplatser.
• Ultra – Drivs av Themify builder, detta dra-och-släpp WordPress-tema kommer med vackra mallar och flexibla temainställningar.
• Divi – Ett populärt tema från Elegant Themes som använder Divi sidbyggare och kommer med massor av dra-och-släpp-funktioner, inklusive rullgardinsmenyer.

Med det sagt, låt oss titta på hur man skapar en nedrullningsbar WordPress-meny.

Steg 2: Skapa en navigeringsmeny i WordPress

Låt oss börja med att skapa en enkel meny.

Om du redan har skapat en navigeringsmeny på din webbplats kan du hoppa över till nästa steg.

För att komma igång, gå till Utseende » Menyer i WordPress-instrumentpanelen och klicka sedan på länken 'Skapa en ny meny'.

Notera: Om du istället ser Utseende » Redigerare, betyder det att ditt tema stöder fullständig webbplatsredigering (FSE). I så fall kan du hoppa vidare till FSE-avsnittet nedan.

Därefter behöver du skriva in ett namn för navigeringsmenyn.

Detta är bara för din referens, så du kan använda vad som helst som hjälper dig att identifiera menyn i WordPress adminområde.

Efter att ha skrivit in en titel i fältet 'Menynamn', klicka på 'Skapa meny'. WordPress kommer nu att skapa en tom meny åt dig.

Därefter behöver du lägga till topplänkarna i navigeringsmenyn. Dessa är objekten som kommer att visas i den översta raden av din rullgardinsmeny och fungera som föräldrar till alla andra inlägg och sidor.

I kolumnen till vänster, markera helt enkelt rutan bredvid varje sida du vill lägga till. Klicka sedan på knappen 'Lägg till i meny'.

Dessa sidor kommer nu att visas i kolumnen till höger under 'Menystruktur'.

Du kan också välja blogginlägg, kategorier eller lägga till anpassade länkar. För mer detaljerade instruktioner, se vår guide om hur man lägger till en navigeringsmeny i WordPress.

Steg 3: Lägga till underelement i en meny

Därefter behöver vi lägga till underelement som kommer att visas inuti rullgardinsmenyn. Du kan lägga till ett underelement under valfritt befintligt menyobjekt.

I den här guiden visar vi hur du lägger till ämneskategorier under ett menyalternativ 'Blogg', men stegen kommer att vara liknande oavsett vilket innehåll du lägger till.

I kolumnen till vänster, välj helt enkelt alla sidor du vill lägga till som underobjekt och klicka sedan på knappen 'Lägg till i meny'. Dina objekt kommer nu att visas i kolumnen till höger.

Som standard visas dock alla dessa länkar som vanliga menyalternativ, vilket innebär att de kommer att läggas till i den översta raden.

Vi måste göra dem till underordnade objekt till en förälder istället.

För att göra detta, dra och släpp helt enkelt ett menyalternativ och placera det under den önskade föräldern. Flytta det sedan bara lite åt höger, så blir det ett underordnat objekt.

Upprepa nu bara denna process för varje underobjekt som du vill visa i rullgardinsmenyn.

När du är nöjd med hur menyn är inställd, glöm inte att klicka på knappen 'Spara meny' för att lagra dina ändringar.

Steg 4: Publicera din rullgardinsmeny

Om du redigerar en meny som redan är live på din webbplats, kommer besökare att se dina ändringar direkt.

Om du däremot skapar en ny meny måste du välja en plats för den menyn.

Varje WordPress-tema har sina egna menyplatser, som du hittar i avsnittet 'Menyinställningar' på skärmens högra sida. Markera helt enkelt rutan bredvid den plats du vill använda och klicka sedan på knappen 'Spara meny'.

Alternativt kan du lägga till anpassade navigeringsmenyer i ditt WordPress-tema.

När det är gjort kan du besöka din webbplats för att se rullgardinsmenyn i aktion.

Hur man skapar en rullgardinsmeny med hjälp av Full-Site Editor

Om du använder ett blockbaserat tema som Hestia Pro, kan du lägga till en rullgardinsmeny i valfri del av din webbplats med hjälp av redigeraren för hela webbplatsen.

För att komma igång, gå bara till Teman » Redigerare i WordPress-instrumentpanelen.

Som standard visar redigeraren för hela webbplatsen ditt temas hemmamall.

För att lägga till en rullgardinsmeny i en annan del av din webbplats, klicka på antingen 'Mallar' eller 'Mönster'.

Redigeraren visar nu en lista över alla mallar eller mallkomponenter som utgör ditt WordPress-tema.

Gå helt enkelt vidare och klicka på området där du vill lägga till rullgardinsmenyn. Om du till exempel skapar en huvudnavigeringsmeny, vill du vanligtvis välja malldelen Header.

WordPress kommer nu att visa en förhandsgranskning av mallen eller malldelen.

För att redigera den här mallen, klicka på den lilla pennikonen.

När det är klart, klicka på det blå ikonen '+' i det övre vänstra hörnet.

I sökfältet som visas, skriv in ‘Navigation’.

När rätt block visas, dra och släpp det på din design.

Klicka nu helt enkelt för att välja det blocket, och du kommer att se alla olika inställningar du kan använda för att anpassa navigeringsblocket.

Till exempel kan du ändra layouten, redigera visningsinställningarna, ändra färgen på texten och bakgrunden samt justera teckenstorleken.

För att lägga till sidorna på toppnivå i din meny, klicka helt enkelt på '+' -knappen.

I popup-fönstret som visas, börja skriva in titeln eller URL:en för sidan du vill lägga till. När rätt sida visas, klicka för att lägga till den i menyn.

Upprepa helt enkelt denna process för att lägga till alla toppnivåobjekt i rullgardinsmenyn.

När det är gjort kan du lägga till en undermeny till vilket föräldraobjekt som helst.

I menyn till höger, klicka på den prickade ikonen bredvid föräldraobjektet. Välj sedan ‘Lägg till undermeny-länk.’

I popup-fönstret som visas, skriv in titeln eller URL:en till sidan som du vill visa i rullgardinsmenyn.

När rätt sida visas, klicka för att lägga till den som ett undermenyobjekt.

Upprepa nu helt enkelt dessa steg för alla objekt du vill visa i rullgardinsmenyn.

När du är nöjd med hur menyn är inställd, klicka på 'Spara' för att lagra dina ändringar.

Nu, om du besöker din webbplats, kommer du att se rullgardinsmenyn i aktion.

Tips för att skapa interaktiva rullgardinsmenyer

Navigeringsmenyer är viktiga eftersom de är den första platsen besökare kommer att gå till för att hitta intressant innehåll eller specifik information.

Att använda dem korrekt hjälper besökare att hitta runt på din webbplats. Det hjälper dig också att få fler konverteringar och försäljningar samtidigt som du ökar dina sidvisningar och minskar din avvisningsfrekvens.

Med det i åtanke, här är några tips för att skapa hjälpsamma och användarvänliga rullgardinsmenyer.

1. Skapa flernivå nedrullningsbara menyer

I den här guiden visade vi hur du skapar en översta rad och en uppsättning underobjekt. Du kan dock också lägga till ett underobjekt under ett annat underobjekt för att skapa flernivåers rullgardinsmenyer.

Detta kan vara användbart för webbplatser som har mycket innehåll eller många olika innehållskategorier.

Till exempel, om du driver en onlinebutik, kan du ha en kategori 'Elektronik' och en underkategori 'Bärbara datorer'. Du kan dock också ha ytterligare underkategorier, som 'Apple bärbara datorer' eller 'Väskor och fodral för bärbara datorer'.

I det här fallet kan det vara vettigt att skapa en flernivå rullgardinsmeny. För att göra detta, dra helt enkelt en sida under ett underelement och flytta den något åt höger.

2. Skapa flera rullgardinsmenyer

Du kan skapa så många rullgardinsmenyer som du vill och sedan visa dem på olika områden på din webbplats. Du kan till exempel skapa en rullgardinsmeny som bara visar produktkategorier.

Detta är utmärkt för dina produktsidor, men du kanske också vill skapa en unik rullgardinsmeny för din startsida så att shoppare kan hitta olika områden på din webbplats, som kontaktformuläret och bloggen.

Skapa helt enkelt en ny rullgardinsmeny genom att följa samma process som beskrivs ovan, och använd sedan inställningarna för ‘Plats’ för att styra var denna rullgardinsmeny visas på din webbplats.

3. Skapa menyer med en liveförhandsgranskning

Om det blir för komplicerat att skapa din rullgardinsmeny i instrumentpanelen kan du byta till WordPress anpassningsverktyg. Gå helt enkelt till Utseende » Anpassa för att starta den levande WordPress temaanpassningsverktyg.

Härifrån klickar du på fliken ‘Menyer’ och väljer sedan navigeringsmenyn. Du kommer nu att se en dra-och-släpp-redigerare i den vänstra kolumnen med en liveförhandsgranskning av din webbplats i högerpanelen.

Du kan nu arbeta med din meny, och alla ändringar du gör kommer att visas i liveförhandsvisningen.

4. Skapa en stor megameny som en rullgardinsmeny i WordPress

Om du har mycket innehåll kan du ha svårt att organisera det snyggt med en standard rullgardinsmeny.

Istället kan du visa hela strukturen på din webbplats som en megameny som bara visas när användare hovrar över huvudmenyn.

Megamenyer liknar en rullgardinsmeny, men de kan visa betydligt fler länkar, undermenyer och andra objekt. För detaljerade instruktioner, se vår steg-för-steg-handledning om hur du skapar en megameny i WordPress.

4. Exportera dina rullgardinsmenyer

Driver du flera WordPress-webbplatser? I så fall kanske du vill använda samma menyutformning och design över alla dina webbplatser.

Standardfunktionen för import/export i WordPress tillåter inte att du importerar och exporterar menyer separat, men det är möjligt att överföra dina menyer med hjälp av ett plugin.

För detaljerade steg-för-steg-instruktioner, se vår guide om hur man importerar och exporterar navigeringsmenyer i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt skapar en nedrullningsbar meny i WordPress. Du kanske också vill se vår guide om hur man lägger till en sökfält i din WordPress-meny, eller kolla in vårt expertval av bästa handledningarna för att bemästra WordPress-navigeringsmenyer.

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.