Webbplatsnavigering är nyckeln till att hjälpa dina användare att nå dit de vill komma. En väl utformad meny kan räcka långt till att förbättra användarupplevelsen (UX), och till och med minska din avvisningsfrekvens. Men en dåligt utformad sådan kan göra precis det motsatta.
Med WordPress kan du lyckligtvis skapa egna menyer för att passa behoven hos just din webbplats. Du kan även använda inbyggda funktioner för att lägga till en kompakt rullgardinsmeny i WordPress som sparar utrymme, samtidigt som den tydligt visar dina besökare i rätt riktning.
I det här inlägget diskuterar vi varför webbplatsnavigering är viktigt och hur rullgardinsmenyer kan vara särskilt användbara. Sedan kommer vi att gå igenom hur du skapar dem i WordPress, och dela några plugins som kan hjälpa till med arbetet.
Nu börjar vi!
En introduktion till WordPressnavigering och rullgardinsmenyer
Även om de kan vara anspråkslösa är navigeringsmenyer en viktig del av varje webbplats. De hjälper användarna att snabbt hitta de mest relevanta sidorna för att uppnå sina mål, samtidigt som de ger förstagångsbesökare en uppfattning om vad du har att erbjuda:
Att ha en väl utformad navigeringsmeny är nyckeln till att öka konverteringar och minska din avvisningsfrekvens. När användarna enkelt kan hitta de sidor där din produkt, ditt e-postregistreringsformulär eller annat konverteringsinnehåll finns, är det enklare att få dem att göra ett köp eller registrera sig.
Om användarna tryggt kan hitta sin väg genom hela din webbplats kommer de dessutom inte lämna dina sidor för att de hamnade på fel ställe. Att hjälpa dem att komma rätt första gången kan både förbättra UX och minimera frustration.
I WordPress är menyer en naturlig funktion. Varje webbplats som skapas med plattformen kan visa en eller flera av dem. Men WordPressteman spelar också en viktig roll när det gäller styling och att placera ut din meny eller dina menyer.
Av denna anledning kan din WordPressmeny ta sig ut på många olika sätt. Den mest kända är headermenyn som alltid finns som standard:
Du kan ofta också inkludera en extra sidfotsmeny längst ner på dina sidor. Den kan visa samma innehåll som din headermeny eller erbjuda något annorlunda alternativ:
En annan stil är ett meny-overlay som användare kan öppna och stänga när de vill.
Alternativt kan du överväga att använda en sidofältsmeny:
Eller så kan du använda en rullgardinsmeny, som även ibland kallas en ”kapslad” meny:
Denna typ av navigering är idealisk för många typer av webbplatser. Den kommer inte att dölja ditt innehåll som en overlay-meny gör, men är inte lika påträngande som en stor header eller en sidofältsmeny.
Genom att dölja lite innehåll tills det behövs sparar du skärmutrymme samtidigt som användarna får ett enkelt sätt att ta sig runt på webbplatsen.
Så skapar du en rullgardinsmeny i WordPress (i 5 steg)
Om du har bestämt dig för att en rullgardinsmeny kan passa bra för din WordPresswebbplats, är det ganska enkelt att ställa in en. Genom att använda de inbyggda menyfunktionerna som finns i WordPress kan du skapa ett anpassat navigeringssystem som passar dina behov på bara fem steg.
Steg 1: Skapa dina menyalternativ
Det första steget mot att skapa en meny är att bestämma vad som ska ingå i den. Börja med att navigera till Utseende > Menyer i din WordPresspanel:
Vad du ser i menyredigeraren varierar något beroende på ditt tema.
Men det som är viktigt att notera just nu är det första alternativet i fliken Redigera menyer. Du bör se ett alternativ där du kan välja en av dina befintliga menyer att redigera, samt ett alternativ för att skapa en ny meny:
I det här exemplet väljer vi det senare alternativet och skapar en ny meny. Detta innebär att lägga till en titel och sedan klicka på knappen Skapa meny:
Nu är du redo att börja lägga till objekt i din WordPressmeny. I de flesta fall är det bäst att hålla din meny så enkel som möjligt, samtidigt som användarna får tillräckligt med information för att nå dit de vill komma.
Att ha alltför många sidor kan överväldiga besökare och göra navigeringen svårare i stället för enklare.
Det finns några olika vägar att ta för att lägga till dina menyalternativ. De två första är Sidor och Inlägg, och de fungerar ungefär likadant.
I sidofältet i menyredigeraren kryssar du bara i rutorna för varje sida eller inlägg du vill inkludera och klickar på knappen Lägg till i Meny:
Ditt nästa alternativ är att införliva Anpassade länkar. Detta innebär att ange webbadressen till sidan du vill skicka användare till och sedan skapa en kort men beskrivande etikett för den. Därefter kan du klicka på Lägg till i meny igen:
Slutligen kan du också lägga till Sid- och Inläggskategorier i navigeringsmenyn. Detta kommer att ta användare till en arkivsida där de kan visa allt innehåll om ett visst ämne.
Bloggar och andra innehållstunga webbplatser kan ha särskilt god nytta av den här funktionen:
Som med alternativen Sidor och Inlägg; kryssa bara i rutorna för de kategorier du vill inkludera och välj Lägg till i meny.
Steg 2: Organisera din WordPressmeny
När du har lagt till alla dina menyalternativ bör du se dem listade i enskilda rutor under Menystruktur i redigeraren:
Från början visas menyalternativ i den ordning du lade till dem. Du kan dock enkelt ändra deras organisation genom att dra och släppa dem på plats. Detta gör att du kan skapa en enkel meny utan rullgardinsfunktionalitet.
Det finns ett par vägar du kan ta för att lägga till rullgardinsfunktioner till din WordPressmeny.
Det enklaste är att fortsätta dra och släppa, men att börja kapsla in vissa menyobjekt under andra:
I bilden ovan har vi till exempel flyttat de tre inläggskategorierna vi lade till i menyn under Blogg, vilket gör dem till ”underobjekt”. På frontenden kommer detta att skapa en rullgardinsmeny som ser ut så här:
Om du vill lägga till en rullgardinsmeny som innehåller alla kategorier på din webbplats kan du göra det genom att lägga till en Anpassad länk till din meny. Använd ”#” som URL och ”Kategorier” eller något liknande för etiketten:
Du kan sedan lägga till alla dina kategorier i menyn och kapsla in dem under denna etikett. Varje kategori kommer att vara klickbar, men etiketten kommer inte att vara det:
Med en liknande teknik kan du också dölja alla dina menyalternativ i en enda rullgardinsmeny.
Lägg till en annan Anpassad länk, med ”#” som webbadress och ”meny” som etikett. Sedan kapslar du in alla dina andra menyalternativ under den:
Resultatet på frontenden kommer att vara en rullgardinsmeny som innehåller din webbplats viktigaste sidor.
Som du kan se i Kategoriobjektet nedan visas allt innehåll som kapslats in under ett underobjekt i en undermeny:
Genom att använda dra och släpp-menyredigeraren på detta sätt kan du skapa vilken stil och kombination av rullgardinsmenyer som helst i WordPress. Kom dock ihåg att för många menyalternativ kan vara förvirrande för användarna.
Det är också bäst att begränsa antalet undermenyer du använder, för att undvika över belamra din navigering med för mycket.
Steg 3: Införliva bilder i din WordPressmeny
Om din rullgardinsmeny i slutet av steg två ser ut exakt ut som du tänkt dig kan du hoppa till steg 5 för att publicera den. Det finns dock ytterligare steg du kan ta om du vill förbättra din meny med anpassningar.
En taktik du kan överväga är att införliva visuella element i dina menyer för att ge ytterligare vägledning åt dina besökare. Medan beskrivande etiketter är avgörande kan en bild eller en ikon ibland hjälpa användare att snabbare avgöra vad en viss navigeringslänk leder till.
Det är möjligt att lägga till bilder med hjälp av anpassad CSS, som vi kommer att diskutera inom kort. Vi rekommenderar dock att du hämtar ett plugin som Menu Image, Icons Made Easy:
På så sätt behöver du inte oroa dig över att pyssla med kod för göra din rullgardinsmeny mer visuellt intressant.
Installera helt enkelt pluginet och återgå sedan till Utseende > Menyer:
Du kommer se att det nu finns bildalternativ för varje sida du har inkluderat i din meny. Du kan välja varje sidas bild, storlek och position. Kom ihåg att spara dina ändringar när du är klar.
Steg 4: Lägg till anpassad CSS till din rullgardinsmeny
Även om det inte rekommenderas för nybörjare kan mer vana och avancerade användare införliva sin egen styling i sina rullgardinsmenyer i WordPress. Innan du hoppar rakt in i din CSS måste du dock lägga till en klass i din meny.
Om du hoppar över det här steget kan din anpassade CSS orsaka problem för andra menyer på din webbplats. Till exempel kan du oavsiktligt råka använda styling för din sidfotsmeny som du endast tänkte använda för din rullgardinsmeny.
I menyredigeraren klickar du på Skärmalternativ högst upp till höger:
Markera sedan rutan för CSS-klasser:
Detta kommer att lägga till ett CSS-klassfält till varje sida i din meny:
När du lägger till en eller flera CSS-klasser i dina menyalternativ, kommer all anpassad kod som du inkluderar på din stilmall endast gälla för objekten i din meny med den klass du anger.
Du kan nu gå över till din stilmall eller till Customizer, och börja jobba på din anpassade styling.
Steg 5: Publicera din meny på bästa plats
När din rullgardinsmeny har en struktur som möter alla dina behov och du har införlivat alla anpassningar du vill göra är du redo att publicera den på din webbplats.
Denna process kommer att variera något beroende på ditt tema och vilka menyplatser den stöder. För det här exemplet kommer vi att använda temat Twenty Twenty.
Bläddra ner till avsnittet Menyinställningar i menyredigeraren:
Du kan välja den första kryssrutan om du vill att nya sidor automatiskt ska läggas till i menyn. Om du nyss börjat med din webbplats och inte har lagt till alla dina viktigaste sidor ännu kan detta vara användbart. Var dock försiktig så att du inte av misstag lägger till för många objekt i din meny.
Under det här alternativet ser du en lista med kryssrutor som visar de olika områdena på din webbplats där du kan visa din meny.
Temat Twenty Twenty innehåller olika menyområden: Horisontell Skrivbordsmeny, Expanderad Skrivbordsmeny, Mobilmeny, Sidfotsmeny, Social meny.
I det här fallet är den meny vi har skapat bäst lämpad för den Horisontella Skrivbordsmenyn, som finns i webbplatsens header.
Du kan också överväga att navigera till fliken Hantera platser i Menyområdet i instrumentpanelen. Här kan du se alla menyplatser som stöds av ditt tema, samt vilken meny du har tilldelat var och en:
När du placerar dina menyer, kan det vara bra att se hur de kommer att se ut på frontenden.
Klicka på knappen Hantera med Live-förhandsvisning för att se hur din meny kommer att visas på den plats du har valt för den, med hjälp av WordPress Customizer:
Du kan sedan publicera din meny eller dina menyer direkt från Customizer. Om du någonsin behöver lägga till eller ta bort objekt från din rullgardinsmeny kan du helt enkelt återgå till menyredigeraren och göra nödvändiga justeringar.
WordPressplugins för att förbättra dina rullgardinsmenyer
Även om du kan skapa fullt fungerande navigeringsmenyer i WordPress utan några extra verktyg kan det ibland vara användbart att utöka din menys funktionalitet. Om så är fallet för just din webbplats kanske du vill undersöka några populära menyplugins för WordPress.
Nested Pages är ett effektivt sätt för innehållstunga bloggar att skapa rullgardinsmenyer. Även om det främst används för att organisera inlägg och sidor, kommer detta plugin också automatiskt generera en meny som speglar din innehållsstruktur:
Även om det inte nödvändigtvis är lämpligt att införliva ett stort antal objekt i dina menyer är det ibland oundvikligt.
Om så är fallet med din webbplats kan Max Mega Menu hjälpa dig att kombinera dina befintliga WordPressmenyer för att bilda en ”megameny”:
Med mobilsurfing på uppgång är det mycket viktigt att se till att dina menyer fortfarande är läsbara på mobila enheter.
WP Mobil Menu passar alla lyhörda teman för att hjälpa dig att skapa ett navigationssystem för dina webbplatsanvändare som är på språng:
Som vi redan har diskuterat kan det till sist finnas situationer där beskrivande menyobjekt inte räcker till. I de situationerna kanske du vill titta på att använda Menu Image, Icons Made Easy, som vi beskrev i steg 3 ovan.
Du kan använda vilket som helst av dessa plugins för att förbättra ditt nuvarande navigationssystem och göra din rullgardinsmeny effektivare. Kom bara ihåg att när det gäller navigering, är enklare ibland bättre. Lägg bara till extra funktioner om det kommer att förbättra din UX och undvik att belamra din webbplats med onödiga menyfunktioner.
Felsökning av din rullgardinsmeny i WordPress
Om du har konfigurerat menyn enligt beskrivningen ovan men rullgardinsmenyn inte fungerar finns det flera möjliga orsaker.
Även om vi inte kan täcka dem allihop i det här inlägget kan vi hjälpa dig att begränsa orsaken till ditt problem så att du kan hitta rätt lösning.
Ofta är en felfungerande meny ett resultat av konflikter mellan din anpassade menys och ditt temas kod. Det första du bör göra om din meny inte fungerar är att växla över till ett standardtema som Twenty Twenty. Om menyn börjar fungera igen vet du att problemet är relaterat till ditt tema. Du kan då kontakta din temautvecklare för att hitta en lösning.
Några andra möjliga orsaker inkluderar:
- Felstavad kod: Dubbelkontrollera att all anpassad CSS du har lagt till är korrekt och att du använder CSS-klasser enligt beskrivningen i steg 4.
- Plugin-inkompatibilitet:Försök att inaktivera alla menyrelaterade plugins du har installerat, för att se om det löser problemet.
- Utdaterad jQuery:Uppdatera till den senaste versionen av jQuery och försök öppna rullgardinsmenyn igen.
Men som vi nämnde tidigare är de potentiella orsakerna bakom din felaktiga meny många. Om ingen av ovanstående lösningar verkar fungera rekommenderar vi att du besöker WordPress supportforum, når ut till vårt Kinsta-supportteam med WordPress-experter, eller anlitar en WordPress-utvecklare för att fixa det åt dig.
Sammanfattning
Även om det kan verka som en liten sak kan din WordPresswebbplats navigering vara det som får den att bära eller brista. Med hjälp av rullgardinsmenyer kan du spara utrymme på användarnas skärmar, samtidigt som de enkelt kan ta sig runt på din webbplats och förbättra dina konverteringar.
