Hur man skapar en mobilklar responsiv WordPress-meny

Mer än hälften av all webbplatstrafik kommer från mobila enheter. Om din navigeringsmeny inte fungerar bra på smartphones och surfplattor, kan en stor del av din publik ha svårt att hitta runt på din webbplats.

Med års erfarenhet av att bygga WordPress-sidor förstår vi vikten av att göra din sida mobilanpassad. På WPBeginner har vi alltid prioriterat detta och säkerställt att våra sidor är lätta att navigera på alla enheter.

Faktum är att vi har designat en mobilanpassad meny som passar perfekt på mindre skärmar utan att kännas rörig, vilket förbättrar användarupplevelsen på smartphones och surfplattor.

I den här guiden visar vi hur du enkelt skapar en mobilanpassad responsiv WordPress-meny.

Varför skapa en mobilanpassad responsiv WordPress-meny?

En väl utformad navigeringsmeny hjälper besökare att hitta runt på din webbplats. Men bara för att din meny ser bra ut på stationära datorer, betyder det inte automatiskt att den kommer att se bra ut på mobilskärmar och surfplattor också.

Mobilanvändare utgör cirka 58 % av all internettrafik. Om din meny inte ser bra ut eller fungerar korrekt på mobila enheter, riskerar du att förlora hälften av din publik på grund av dålig användarupplevelse.

Detta kommer att göra det svårt att uppnå viktiga mål som att växa din e-postlista, få försäljning och växa din verksamhet.

Med det sagt, låt oss se hur du kan skapa en mobilanpassad responsiv meny som ser bra ut på smartphones och surfplattor. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda.

• Metod 1: Skapa en mobilanpassad responsiv glidpanelmeny
• Metod 2: Skapa en mobilanpassad responsiv helskärmsmeny
• Bonus: Hur man lägger till en mobil-responsiv meny till landningssidor

Metod 1: Skapa en mobilanpassad responsiv glidpanelmeny

En responsiv skjutpanel är en navigeringsmeny som glider in på skärmen när en besökare trycker eller klickar på en växlingsknapp.

På så sätt är menyn alltid lättillgänglig men tar inte upp något skärmutrymme som standard.

Detta är särskilt viktigt eftersom smartphones och surfplattor har mycket mindre skärmar jämfört med stationära datorer.

Om menyn ständigt är expanderad, kan en mobilanvändare av misstag aktivera dess länkar med hjälp av enhetens pekskärm. Detta gör glidpaneler till ett bra val för en mobilanpassad meny.

Det enklaste sättet att lägga till en mobilanpassad skjutpanel är att använda Responsive Menu.

Först måste du installera och aktivera pluginet Responsive Menu. För mer information, se vår handledning om hur man installerar ett WordPress-plugin.

Efter aktivering kan du använda pluginet för att anpassa alla WordPress-menyer du tidigare har skapat. Om du behöver skapa en ny meny, se vår nybörjarguide om hur man lägger till en navigeringsmeny i WordPress.

Å andra sidan, om ditt WordPress-tema redan har en inbyggd mobil meny, då behöver du känna till den menyns CSS-klass så att du kan dölja den.

Om du hoppar över det här steget kommer mobilanvändare att se två överlappande menyer på din webbplats. För steg-för-steg-instruktioner, se vår guide om hur man döljer en mobilmeny i WordPress.

När det är gjort, gå till sidan Responsive Menu » Menus i WordPress adminpanel och klicka på knappen ‘Create New Menu’.

Du kommer nu att se några olika mobilanpassade teman som du kan använda för din meny.

Vi använder 'Standardtema' i våra bilder, men du kan använda vilket tema du vill. När du har fattat ditt beslut klickar du på 'Nästa'.

Du kan nu skriva in ett namn för menyn. Detta är bara för din referens så du kan använda vad du vill.

När det är gjort, klicka på 'Länka WordPress-meny' och välj den meny du vill använda.

Som redan nämnts, om ditt tema redan har en inbyggd mobilmeny, måste du lägga till dess CSS-klass i fältet 'Dölj temameny'.

Om du uppgraderar till premium-pluginet får du några ytterligare inställningar. Till exempel kan Pro-användare dölja menyn på specifika sidor eller enheter.

När du är nöjd med hur menyn är inställd, klicka på 'Skapa meny'.

Du kommer nu att se en förhandsgranskning av din WordPress-webbplats till höger på skärmen och vissa inställningar till vänster.

För att se hur din webbplats ser ut på mobilen, klicka på antingen mobil- eller surfplattaikonen längst ner till vänster på skärmen.

För att anpassa hur menyn ser ut och fungerar på mobila enheter, välj 'Mobilmeny'.

Klicka sedan på ‘Container’.

Här hittar du massor av olika inställningar.

När du gör ändringar uppdateras förhandsgranskningen i realtid ofta automatiskt. Med det i åtanke är det en bra idé att expandera menyn så att du kan övervaka hur din mobilmeny kommer att se ut. För att göra detta klickar du helt enkelt på menyväxlingsknappen.

Som standard lägger pluginet till en titel och lite text som ‘Lägg till mer innehåll...’.

Du kan ersätta detta med ditt eget meddelande eller till och med ta bort texten helt. För att redigera titeln, klicka för att expandera sektionen ‘Titel’.

Du kan nu skriva ditt eget meddelande i fältet ‘Title Text’.

Du kan också lägga till en länk till titeln eller lägga till ikonfonter och bilder.

För att anpassa hur titeln ser ut, klicka på fliken 'Stilar'.

Här kan du ändra bakgrundsfärgen, textfärgen, teckensnittsstorleken och mer.

Om du inte vill visa någon titeltext, klicka för att inaktivera reglaget bredvid ‘Titel’.

Om titeln inte är väsentlig, kommer att ta bort den att skapa mer utrymme för länkarna och annat innehåll i din mobila navigeringsmeny.

För att ersätta texten 'Lägg till mer innehåll här...' med din egen text, klicka för att expandera området 'Ytterligare innehåll'.

Du kan nu skriva din egen text, ändra textfärgen, ändra textjusteringen och mer genom att använda inställningarna i menyn till vänster.

För att ta bort texten helt, klicka bara för att inaktivera omkopplaren.

Återigen kan detta skapa mer utrymme för resten av menyns innehåll. Detta är särskilt användbart på smartphones och surfplattor, som vanligtvis har mindre skärmar.

Som standard kommer Responsive Menu att visa alla dina menyalternativ som en enda lista. Du kanske dock föredrar att visa dessa länkar i flera kolumner.

Detta kan fungera bra om dina menyetiketter är kortare, eftersom det gör att du kan visa fler objekt på en mindre yta utan att menyn ser rörig ut.

För att prova olika kolumnlayouter, klicka för att expandera sektionen ‘Menu’.

Du kan nu öppna rullgardinsmenyn 'Menybehållarkolumner' och välja antalet kolumner du vill använda.

Vid det här laget kan du se texten 'Uppdatering krävs'. Om du ser detta meddelande, klicka på det för att uppdatera förhandsgranskningen med dina nya kolumninställningar.

Som standard lägger pluginet också till en sökfält till din WordPress-meny. Detta kan hjälpa besökare att hitta intressant innehåll men också ta upp värdefullt utrymme på skärmen.

Om du föredrar det kan du ta bort sökfältet för mobilanvändare genom att inaktivera växlingsknappen bredvid 'Sök'.

Det finns många andra inställningar som du kan konfigurera, så du kanske vill spendera lite tid med att titta igenom de andra alternativen. Detta räcker dock för att skapa en väldesignad mobilanpassad meny.

När du är nöjd med hur navigeringsmenyn är inställd, klicka på 'Uppdatera'.

Besök nu helt enkelt din WordPress-blogg med en mobil enhet för att se den nya menyn i aktion. Du kan också visa mobilversionen av din WordPress-webbplats från din dator.

Metod 2: Skapa en mobilanpassad responsiv helskärmsmeny

Ett annat alternativ är att lägga till en responsiv helskärmsmeny. Detta är en meny som automatiskt anpassar sig till olika skärmstorlekar, så navigationsmenyn kommer alltid att se bra ut oavsett vilken enhet besökaren använder.

Eftersom menyn tar upp allt tillgängligt utrymme är den lättare att navigera på smartphones och surfplattor, oavsett hur liten skärmen är.

Det enklaste sättet att skapa en helskärmsmeny är att använda FullScreen Menu. Denna plugin låter dig skapa en helskärmsmeny endast för mobila enheter, eller så kan du visa samma meny på smartphones, surfplattor och stationära datorer, så att alla besökare får samma upplevelse.

Det första du behöver göra är att installera och aktivera pluginet FullScreen Menu. Du kan följa vår steg-för-steg-guide om hur man installerar ett WordPress-plugin för mer information.

Efter aktivering, besök sidan Fullscreen Menu Options från WordPress-menyn och markera följande ruta: ‘Activate Animated Fullscreen Menu.’

Vi rekommenderar också att du markerar rutan 'Visa menyn endast för administratörsanvändare'. Detta gör att du kan se ändringarna medan du konfigurerar menyn, men besökare kommer inte att se mobilmenyn förrän du gör den live.

Som standard visar pluginet helskärmsmenyn på alla enheter. Om du vill visa helskärmsmenyn endast på smartphones och surfplattor, markera rutan bredvid 'Endast mobil'.

Därefter kan du finjustera menyns utseende genom att klicka på fliken 'Design / Utseende'.

Här kan du välja färger, teckensnitt och animeringsinställningar för helskärmsmenyn.

När du gör dessa ändringar, var bara medveten om att ‘Initial Background Menu’ är menyns växlingsikon. Under tiden är ‘Opened Background Menu’ färgen på den expanderade, helskärms mobilmenyn.

Efter att ha valt menyfärger, scrolla till avsnittet 'Menyutseende'. Här kan du ändra menyns teckensnittsfärg, teckensnittsfamilj och teckensnittsstorlek.

Var bara medveten om att laddning av ytterligare teckensnitt kan påverka din webbplatsens prestanda och hastighet i WordPress. Detta är inte alltid ett bra val för mobila enheter, som vanligtvis har mindre processorkraft jämfört med stationära datorer. Vissa besökare kan också ha en dålig mobil internetanslutning, vilket gör att din webbplats laddas ännu långsammare.

När det är gjort, scrolla ner till 'Animationsinställningar'.

Till att börja med kan du välja hur menyn ska expandera när en besökare klickar på växlingsikonen. Öppna helt enkelt rullgardinsmenyn 'Animationstyp' och välj ett alternativ från listan, till exempel Från topp till botten eller Från vänster till höger.

När du är nöjd med menyns layout, klicka på fliken ‘Menyinnehåll’ för att lägga till innehåll.

Här, fortsätt och öppna rullgardinsmenyn 'Välj meny' och välj den meny du vill visa i helskärmsläge.

Om du inte redan har skapat en navigeringsmeny, ta en titt på vår guide om hur du lägger till navigeringsmenyer i WordPress.

Om du vill visa ytterligare innehåll i menyn kan du lägga till det i rutan 'Gratis HTML / Kortkoder'. Detta fungerar som en miniredigerare för sidor så att du kan skriva text, ändra formateringen, lägga till punktlistor och numrerade listor och mer.

Det finns också en kryssruta som lägger till en länk till din integritetspolicy-sida. 

Därefter kanske du vill lägga till ikoner för sociala medier i din WordPress-meny. Dessa ikoner kommer att visas i en rad längst ner i helskärmsmenyn.

För att lägga till dessa ikoner, klicka bara för att expandera rutan 'Social Icon 1'.

Du kan nu skriva in en titel för ikonen, till exempel 'Facebook'.

Klicka sedan på pilen bredvid 'Social Icon' och välj den ikon du vill visa för mobilbesökare.

Skriv slutligen in adressen du vill använda i fältet ‘Social URL’.

För att lägga till fler ikoner, klicka helt enkelt på knappen ‘Lägg till en ikon till’.

Slutligen kanske du vill lägga till en WordPress-sökning-fält för att hjälpa besökare att hitta det de letar efter. För att göra detta, markera helt enkelt rutan bredvid ‘Lägg till sökfält.’

Som standard visar pluginet meddelandet ‘Sök efter något...’. Du kan dock ersätta detta med din egen anpassade text genom att skriva i fältet ‘Platshållare för sökfältet’.

Om du till exempel driver en WooCommerce-butik, kanske du vill använda text som ‘Börja handla’ eller ‘Sök efter produkter’.

När du är nöjd med menyns konfiguration, klicka på knappen 'Spara ändringar'.

Besök nu helt enkelt din webbplats med en mobil enhet för att se helskärmsmenyn i aktion.

Du kan också förhandsgranska mobilversionen av din webbplats med hjälp av WordPress temaanpassare.

Bonus: Hur man lägger till en mobil-responsiv meny till landningssidor

Om du skapar en landningssida eller försäljningssida, vill du att designen ska se lika bra ut på mobila enheter som på datorer.

Med det i åtanke rekommenderar vi att du skapar sidan med SeedProd. Det är den bästa WordPress-sidbyggaren och kommer med över 300+ professionellt designade mallar.

Efter att ha skapat en design med SeedProd kan du lägga till en mobilanpassad meny på sidan med SeedProds färdiga Nav Menu-block. Detta block låter dig skapa separata menyer för både mobila enheter och stationära datorer.

På så sätt kan du använda en annan layout och till och med visa olika länkar beroende på användarens enhet.

För att lära dig mer, se vår guide om hur man lägger till anpassade navigeringsmenyer i WordPress.

Efter att ha lagt till Nav-blocket i din design, klicka helt enkelt på fliken 'Avancerat'.

Klicka här för att expandera sektionen 'Enhets synlighet'.

Klicka sedan på växlingsknappen ‘Hide on Desktop’ för att aktivera den. Nu kommer den här menyn bara att visas på mobila enheter.

Du kan nu lägga till länkar och ändra menyns layout med hjälp av inställningarna i den vänstra menyn.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar en mobilanpassad responsiv WordPress-meny. Du kanske också vill se vår nybörjarguide om hur du lägger till en teckenstorleksändrare i WordPress och våra experttips om sätt att skapa en mobilvänlig WordPress-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.