Vill du skapa en vertikal navigeringsmeny i WordPress?
I WordPress kan navigeringsmenyer visas horisontellt eller vertikalt. Vertikala menyer erbjuder ett antal fördelar, som att de passar bättre in i din webbplats sidofält och är lättare att navigera på mobila enheter.
I den här artikeln kommer vi att visa dig hur du skapar en vertikal navigeringsmeny i WordPress.
Vad är en navigeringsmeny?
En navigeringsmeny är en lista med länkar som pekar till viktiga delar av en webbplats. De presenteras vanligtvis som en horisontell stapel med länkar överst på varje sida på en WordPress-webbplats.
Navigeringsmenyer ger struktur åt din webbplats och hjälper besökarna att hitta det de letar efter. Du kan lägga till länkar till dina viktigaste sidor, kategorier eller ämnen, WordPress-blogginlägg och till och med anpassade länkar, som din sociala medieprofil.
Men även om du ofta ser dem placerade horisontellt överst på en webbplats, har vertikala navigeringsmenyer många användningsområden och fördelar.
Med det sagt, låt oss ta en titt på flera sätt att skapa en vertikal navigeringsmeny i WordPress. Det här är de ämnen vi kommer att ta upp i den här artikeln:
När du lägger till en navigeringsmeny på din webbplats visas den vertikalt eller horisontellt. Detta beror på ditt tema såväl som på vilken menyplats du väljer.
Antalet tillgängliga menyplatser beror på vilket tema du använder. Vissa av dessa platser kan visa menyn vertikalt.
För att testa detta med ditt tema måste du navigera till Utseende » Menyer. Här kan du experimentera för att se vilka platser som är tillgängliga på din webbplats och hur de visas.
Twenty Twenty-One-temat erbjuder till exempel inte vertikala platser, medan Twenty Twenty-temat erbjuder en, kallad “Desktop Expanded Menu.”
Du kan helt enkelt välja den meny du vill visa vertikalt och sedan markera rutan “Utökad skrivbordsmeny” längst ned på skärmen. Efter det bör du se till att klicka på knappen “Spara meny” för att lagra dina inställningar.
Så här ser det ut på vår demowebbplats.
För mer information om hur du redigerar menyer och menyplatser kan du kolla in vår nybörjarguide om hur du lägger till en navigeringsmeny i WordPress.
Oavsett vilket tema du använder är det enkelt att lägga till en vertikal navigeringsmeny till sidofältet med hjälp av en widget.
Först måste du skapa en navigeringsmeny som du vill visa, om du inte redan har gjort det.
Då måste du navigera till Utseende » Widgets. Härifrån klickar du helt enkelt på den blå “+”-knappen för att infoga blocket högst upp på sidan och drar navigeringsmenyblocket till sidofältet.
Efter det kan du ge widgeten ett namn och välja menyn du vill visa från rullgardinsmenyn.
Så här ser den vertikala sidofältsmenyn ut på vår demowebbplats.
Du kan lägga till en vertikal navigeringsmeny till inlägg och sidor på liknande sätt.
Först måste du skapa ett nytt inlägg eller redigera ett befintligt. Därefter måste du klicka på den blå “+” blockinfogningsknappen längst upp på sidan och sedan dra navigeringsblocket till sidan.
Därefter måste du välja vilken meny som ska visas. Klicka bara på knappen “Välj meny” i verktygsfältet och välj önskad meny.
Slutligen bör du titta på blockinställningarna i den vänstra panelen. Där hittar du två knappar för menyorientering. Du måste klicka på nedåtpilen för att orientera menyn vertikalt.
Den nya fullständiga webbplatsredigeraren låter dig anpassa dina WordPress-teman med blockredigeraren. Den släpptes i WordPress 5.9 och låter dig lägga till olika block till dina mallar för att skapa en unik design.
Den fullständiga webbplatsredigeraren är dock fortfarande i beta och är begränsad till specifika teman som stöder den, som standardtemat Twenty Twenty-Two. För mer information kan du kolla in vår artikel om de bästa WordPress-temanen för redigering av hela webbplatsen.
För att lägga till en navigeringsmeny med den fullständiga webbplatsredigeraren måste du gå till Utseende » Redaktör från din WordPress-instrumentpanel. När du är i redigeraren, gå vidare och klicka på navigeringsmenyn som visas högst upp i webbsidans rubrik.
Därefter måste du klicka på knappen “Välj navigering” i verktygsfältet.
Du kommer nu att se olika alternativ för att anpassa navigeringsmenyn i den högra panelen. Ett av dessa alternativ är om menyn ska visas i horisontell eller vertikal orientering.
Klicka bara på nedåtpilen för att få vertikal orientering och skapa en vertikal meny.
För mer information, se vår guide om hur du lägger till en navigeringsmeny i WordPress.
SemillaProd är den bästa WordPress-sidbyggaren och anpassade temabyggande plugin på marknaden. Det låter dig enkelt skapa vertikala menyer var som helst på din WordPress-webbplats.
Det första du bör göra är att installera och aktivera SemillaProd plugg. För mer information, se vår steg-för-steg-guide om hur du installerar ett WordPress-plugin.
Notera: Det finns en gratisversion av SeedProd vilket gör att du kan lägga till en vertikal navigeringsmeny på enskilda sidor. Men du behöver Pro-versionen för att komma åt temabyggaren och lägga till en meny till dina temamallar.
Vid aktivering måste du ange din licensnyckel. Du kan hitta denna information i ditt konto på SeedProd-webbplatsen.
Efter det måste du använda SeedProd för att skapa ett anpassat WordPress-tema.
Skapa ett anpassat WordPress-tema
Du hittar SeedProd-temabyggaren genom att navigera till SeedProd » Theme Builder sida. Här kommer du att använda ett av SeedProds färdiga teman som utgångspunkt. Detta kommer att ersätta ditt befintliga WordPress-tema med en ny, anpassad design.
Du kan göra detta genom att klicka på knappen “Teman”.
Du kommer att se en lista med professionellt designade teman för olika typer av webbplatser. Till exempel finns det mallar som heter “Modern Business”, “Marknadsföringsbyrå” och “Bolånemäklare-tema.”
Ta en titt på alternativen och välj det som bäst passar dina behov genom att klicka på bockikonen.
När du väl har valt ett tema kommer SeedProd att generera alla temamallar du behöver. Du kan lära dig hur du anpassar dessa mallar i vår guide om hur du enkelt skapar ett anpassat WordPress-tema.
Lägg till en vertikal navigeringsmeny till dina webbplatsmallar
Du kan nu använda SeedProd för att lägga till en vertikal navigeringsmeny till någon av dina temamallar. I den här handledningen kommer vi att lägga till en meny till bloggindexmallen.
Du måste föra musen över mallen och klicka sedan på länken “Redigera design”.
Detta öppnar SeedProd dra och släpp sidbyggaren. Du ser en förhandsvisning av din webbplats till höger och en samling block som du kan lägga till på din webbplats till vänster.
Du måste rulla ner blocken tills du kommer till avsnittet Avancerat.
När du har hittat navigationsmenyblocket måste du dra det till sidofältet eller någonstans där du vill visa navigeringsmenyn. Som standard finns det bara ett objekt i menyn, “Om”.
Nu måste du ändra menyinställningarna. För att göra det måste du klicka på menyn och de tillgängliga alternativen kommer att visas i en panel till vänster på sidan.
För närvarande är menytypen ‘Enkel’ vald. Detta låter dig skapa din egen navigeringsmeny i SeedProd.
Men för den här handledningen kommer vi att klicka på “WordPress-menyn” för att använda WordPress-navigeringsmenyn.
Slutligen måste du klicka på fliken “Avancerat”. Här hittar du ett alternativ för att orientera listlayouten vertikalt eller horisontellt.
När du klickar på “Vertikal”-knappen kommer du att märka att förhandsvisningen omedelbart ändras till en vertikal navigeringsmeny.
Glöm inte att klicka på “Spara”-knappen längst upp på skärmen för att lagra din vertikala meny.
Det kan vara svårt att trycka på en standardmeny när du använder den lilla skärmen på en smartphone. Det är därför vi rekommenderar att du förhandsgranskar den mobila versionen av din WordPress-webbplats för att se hur din webbplats ser ut på mobila enheter.
Vertikala menyer är mycket enklare att navigera, särskilt när du använder en helskärmskänslig meny som automatiskt anpassar sig till olika skärmstorlekar.
För att lära dig hur du gör din navigeringsmeny mer mobilvänlig, kolla in vår guide om hur du lägger till en responsiv helskärmsmeny i WordPress.
En rullgardinsmeny ser ut som en vanlig horisontell navigeringsmeny högst upp på skärmen, men när du för musen över ett av objekten visas en vertikal undermeny.
Om du har en innehållstung webbplats låter en rullgardinsmeny dig organisera menystrukturen efter ämne eller hierarki. Detta kommer att visa mer innehåll på ett begränsat utrymme.
För att visa en rullgardinsmeny på din webbplats måste du välja ett tema som stöder rullgardinsmenyer. Efter det måste du skapa navigeringsmenyn och sedan lägga till underpunkter till några av menyposterna.
Du kan lära dig hur du gör det steg för steg i vår nybörjarguide om hur du skapar en rullgardinsmeny i WordPress.
En megameny listar flera menyer vertikalt på sidan. De liknar rullgardinsmenyer, förutom att alla undermenyer visas på en gång, vilket gör att användarna snabbt och enkelt kan hitta det bästa innehållet.
Mega-menyer är mycket attraktiva och interaktiva eftersom de kombinerar det bästa av horisontella och vertikala menyer för att visa en användbar översikt över ditt webbplatsinnehåll på en enda skärm.
Vi har nyligen lagt till en megameny till WPBeginner för att förbättra innehållets synlighet. Vi förklarar hur vi gjorde detta i vår bakom-kulisserna titt på vår sidas nya design.
Du kan lära dig mer i vår guide om hur du lägger till en megameny på din WordPress-webbplats.
Vi hoppas att den här handledningen hjälpte dig att lära dig hur du skapar en vertikal navigeringsmeny i WordPress. Du kanske också vill lära dig hur du startar din egen podcast eller kolla in vår expertjämförelse av de bästa domänregistratorerna.
