15 bästa handledning till Master WordPress Navigation Menyer

Letar du efter de bästa handledningarna för att arbeta med WordPress navigationsmenyer? WordPress navigationsmenyer gör att du enkelt kan anpassa och hantera menyer på din webbplats. I den här artikeln kommer vi att visa dig de bästa handledningarna för att behärska WordPress navigationsmenyer.

Eftersom det här är en lång artikel har vi lagt till en innehållsförteckning för enklare navigering.

1. Komma igång med WordPress Navigation Meny
2. Lägg till sociala medierikoner till WordPress-menyer
3. Visa olika menyer för att logga in på användare i WordPress
4. Lägg till villkorlig logik i navigeringsmenyerna
5. Styling WordPress Navigation Menyer
6. Lägg till bildikoner med navigeringsmenyer i WordPress
7. Lägg till anpassade navigeringsmenyer i WordPress
8. Lägg till bildspelmenyn i WordPress-teman
9. Skapa en Mobile Ready Responsive WordPress-meny
10. Lägg till en fullskärmsmeny i WordPress
11. Lägga till beskrivning med navigeringsmenyer i WordPress
12. Så här lägger du till ämnen i WordPress Navigation Meny
13. Så här lägger du till navigeringsmenyer i WordPress Sidpanel
14. Lägg till WordPress Navigation Menu i inlägg och sidor
15. Lägg till NoFollow Länkar i WordPress Navigation Menyer

1. Komma igång med WordPress Navigation Meny

I webbdesign är navigationsmenyn en lista över länkar som gör det möjligt för besökarna att besöka olika sidor och avsnitt på din webbplats. Det hjälper användarna att navigera runt din webbplats, därmed navigeringsmenyn.

WordPress levereras med ett inbyggt verktyg som låter dig skapa och använda menyer på din webbplats. Detta verktyg finns på Utseende »Menyer sida i ditt WordPress-administrativa område.

Här kan du skapa menyer genom att lägga till objekt från vänster kolumn till höger. Du kan lägga till någon WordPress-post, sida, kategorier och anpassade länkar till dina menyer.

För detaljerade instruktioner, se vår nybörjarguide om hur man lägger till navigeringsmenyer i WordPress.

2. Lägg till sociala medierikoner till WordPress Meny

WordPress menyer kan också användas för att lägga till sociala medier knappar till din webbplats. Det här låter dig enkelt uppdatera ikoner, omorganisera dem och lägga till nya sociala medier ikoner när som helst.

Det enklaste sättet att göra detta är att använda menyens sociala ikoner plugin. För mer information, se vår steg för steg guide om hur du installerar ett WordPress-plugin.

Vid aktivering, gå över till Utseende »Menyer sida. Skapa en ny social meny och sedan på fliken anpassade länkar från vänster kolumn.

Du kommer att se ikonerna för sociala medier under länktexten och URL-fälten. Allt du behöver göra är att klicka på en social media-ikon och ange din sociala profiladress. När du är klar klickar du på lägg till menyknappen.

Upprepa denna process för alla sociala medier profiler som du vill lägga till. När du är klar väljer du en menyplats och klicka sedan på menyn Spara.

För mer detaljerade instruktioner, se vår guide om hur du lägger till sociala medierikoner på WordPress-menyerna.

3. Visa olika menyer för att logga in på användare i WordPress

Om du kör en WordPress-medlemssida kan du visa olika menyer till dina inloggade användare. Så här kan du enkelt uppnå detta.

Först måste du skapa två olika menyer. En för dina inloggade användare och en för användare som inte är inloggade. Du kan namnge dessa menyer inloggade och inloggade.

Därefter måste du lägga till den här koden i ditt temas funktioner.php-fil eller ett sajtspecifikt plugin.

 funktionen my_wp_nav_menu_args ($ args = ") if (is_user_logged_in ()) $ args ['menu'] = 'inloggad'; else $ args ['menu'] = 'loggad'; returnera $ args; add_filter ('wp_nav_menu_args', 'my_wp_nav_menu_args'); 

Det är allt. Du kan nu testa dina navigeringsmenyer i åtgärd.

För mer detaljerade instruktioner, se vår handledning om hur man visar olika menyer för inloggade användare i WordPress.

4. Lägg till villkorlig logik i navigeringsmenyerna

Vill du ändra menyer baserat på vissa villkor? Gilla en annan meny på hemsidan eller gömma ett objekt på enstaka inlägg. Så här kan du uppnå detta i WordPress.

Först måste du installera och aktivera Om meny-plugin.

Vid aktivering, besök Utseende »Menyer skärm och klicka på ett menyalternativ som du vill redigera. Du kommer att märka ett nytt alternativ till "Aktivera villkorlig logik".

Om du markerar det här alternativet visas två nedrullningsalternativ. Du kan välja att visa eller dölja för en meny om den matchar vissa villkor. Dölj exempelvis menyalternativet om en användare är en administratör eller endast visar en menyobjekt om en användare har ett enda inlägg.

För mer detaljerade instruktioner, se vår artikel om hur man lägger till villkorad logik på WordPress-menyerna.

5. Styling WordPress Navigation Menyer

Ditt WordPress-tema kontrollerar utseendet på navigeringsmenyerna på din webbplats. Med CSS kan du anpassa utseendet på navigeringsmenyerna.

Det enklaste sättet att göra det här är att använda CSS Hero plugin. Det är ett premium WordPress-plugin som låter dig anpassa alla WordPress-teman utan att skriva en enda kodlinje (ingen HTML eller CSS krävs). Se vår CSS Hero recension för att lära dig mer.

Du kan också ställa in dina navigeringsmenyer genom att manuellt skriva CSS. För detaljerade instruktioner, se vår guide om hur du stilar WordPress navigationsmenyer.

6. Lägg till bildikoner med navigeringsmenyer i WordPress

Många populära webbplatser använder bildikoner bredvid navigeringsmenyerna för att göra dem mer märkbara. Så här kan du lägga till bildikoner med navigationsmenyer i WordPress.

Först måste du installera och aktivera menybildsplugin. Vid aktivering, gå till Utseende "Menyer. Där ser du ett alternativ att lägga till bilder med varje objekt i din befintliga meny.

Du kan också använda CSS för att lägga till bildikoner. För detaljerade instruktioner, se vår guide om hur du lägger till bildikoner med navigationsmenyer i WordPress.

7. Lägg till anpassade navigeringsmenyer i WordPress

De flesta gratis och premium WordPress-teman kommer med fördefinierade platser för att visa dina navigationsmenyer. Du kan dock även lägga till egna navigationsmenyer till dina teman.

Först måste du registrera din nya navigationsmeny genom att lägga till den här koden i ditt temas funktioner.php-fil.

 funktion wpb_custom_new_menu () register_nav_menu ('my-custom-menyn', __ ('Min anpassade meny'));  add_action ('init', 'wpb_custom_new_menu'); 

Den här koden skapar "Min anpassade meny" för ditt tema. Du kan se detta genom att redigera en meny på Utseende »Menyer sida.

För att visa din egen meny måste du lägga till den här koden i ditt tema där du vill visa menyn.

  'my-custom-menu', 'container_class' => 'anpassad menyklass')); ?> 

För mer detaljerade instruktioner, se vår artikel om hur du lägger till anpassade navigeringsmenyer i WordPress-teman.

8. Lägg till bildspelmenyn i WordPress-teman

Vill du visa att webbplatsens navigationsmeny är en bildrutan? Med hjälp av bildrutor gör menyerna mer interaktiva, mindre påträngande och roliga speciellt på mobila enheter.

Men för att kunna lägga till dem behöver du medellång förståelse för JavaScript, WordPress-teman och CSS.

För stegvisa instruktioner, se vår guide om hur du lägger till en bildruta-meny i WordPress-teman.

9. Skapa en Mobile Ready Responsive WordPress-meny

De flesta WordPress-teman är mottagliga och levereras med mobila färdiga navigeringsmenyer. Men om ditt tema inte hanterar navigationsmenyerna bra på mobila enheter, påverkar det användarupplevelsen på mobila enheter.

Lyckligtvis finns det några enkla sätt för dig att lägga till mobila redo responsiva menyer utan att skriva någon kod.

Först måste du installera och aktivera plugin för Responsive Menu.

Vid aktivering måste du klicka på "Responsive Menu" i din WordPress-administratörsfält för att konfigurera insticksinställningar.

Välj bara en bredd efter vilken mobilmottagande meny ska vara synlig. Därefter måste du välja en befintlig navigeringsmeny.

Glöm inte att klicka på knappen "Uppdatera alternativ" för att spara dina inställningar. Det är allt du kan nu besöka din webbplats och ändra storlek på webbläsarens skärm för att se den mobila mottagliga menyn.

Det finns många andra sätt att lägga till en mobil responsiv meny. Gilla en meny som visas med en växelverkan, en bildruta i menyn och lyhörd meny. Lär dig mer om dem alla i vår guide om hur du skapar en mobil redo responsiv WordPress-meny.

10. Lägg till en Fullscreen Responsive Menu i WordPress

Har du märkt hur några populära webbplatser använder en fullskärmsnavigationsmeny? Vanligtvis krävs det en viss kreativ användning av JavaScript och CSS. Lyckligtvis kan du göra detta i WordPress utan att skriva någon kod.

Först måste du installera och aktivera DC - Full Screen Responsive Menu. Vid aktivering måste du besöka Utseende "DC Fullskärmsmeny sida för att konfigurera plugin-inställningarna.

Här kan du välja en meny, bakgrunds- och textfärg och Google-teckensnitt för din fullskärmsmeny.

Klicka på Skicka-knappen för att lagra dina inställningar. Du kan nu besöka din webbplats för att se din fullscreen-responsiva meny i åtgärd.

Mer information om detta ämne finns i vår guide om hur du lägger till en fullskärmslös meny i WordPress.

11. Lägga till beskrivning med navigeringsmenyer i WordPress

WordPress navigeringsmenyer är oftast bara textlänkar som visar länketiketten eller ankare texten. Vad händer om du vill lägga till en liten beskrivning eller tagglinje för varje objekt i din navigationsmeny?

Lyckligtvis kommer WordPress med inbyggd funktionalitet för att lägga till beskrivning med varje objekt i navigeringsmenyerna.

Först måste du aktivera beskrivningsobjektet. Klicka på skärmalternativsknappen längst upp till höger på skärmen.

Detta visar en lista över rutor och alternativ som du kan aktivera. Du måste markera rutan bredvid Beskrivning.

Nu rulla ner och klicka på ett menyalternativ för att redigera det och du får se ett alternativ att lägga till beskrivning.

Lägg till din beskrivning och klicka på Spara menyknappen.

Om ditt tema stöder menybeskrivningar kommer du att kunna se dem direkt. Annars måste du redigera dina temafiler för att visa beskrivningar.

För detaljerade instruktioner, se vår guide om hur du lägger till menybeskrivningar i ditt WordPress-tema.

12. Så här lägger du till ämnen i WordPress Navigation Meny

Vi är ofta frågade om hur man lägger till bloggämnen i navigeringsmenyerna i WordPress. Många nybörjare förutsätter att de behöver skapa sidor för varje ämne för att lägga till dem i menyer.

Vad du egentligen behöver är kategorier. Kategorier och taggar är byggda i WordPress-taxonomier som låter dig sortera innehåll i relevanta ämnen.

Lägg till dina artiklar i relevanta kategorier och sedan gå vidare till Utseende »Menyer sida. Klicka på fliken kategorier för att expandera den och välj sedan de kategorier som du vill visa i navigeringsmenyerna.

Mer information finns i vår artikel om hur du lägger till ämnen i WordPress-navigationsmenyerna.

13. Så här lägger du till navigeringsmenyer i WordPress Sidebar

WordPress-teman har vanligtvis navigeringsmenyer längst upp eller ner. Men du kan också skapa och lägga till menyer i ditt WordPress sidobalk också.

Helt enkelt besök Utseende »Widgets sida och lägg till widgeten "Anpassad meny" i ditt sidofält. För detaljerad information, se vår guide om hur du lägger till och använder widgets i WordPress.

När du har lagt till widgeten i ett sidofält kan du välja en meny från nedrullningsalternativet. Glöm inte att klicka på Spara-knappen för att lagra dina inställningar.

14. Lägg till WordPress Navigation Menu i inlägg och sidor

Vanligtvis visas menyerna i sidhuvudet eller sidofältet på en webbplats. Men ibland kanske du vill lägga till en meny i ett WordPress-inlägg eller en sida. Så här gör du det.

Först måste du installera och aktivera menyn Shortcode plugin. Vid aktivering, ändra posten eller sidan där du vill visa din meny och lägg till den här kortnummer:

[listmenu menu = "Ditt menynamn"]

Glöm inte att byta ut "Ditt menynamn" med namnet på din egen navigationsmeny. Spara eller publicera ditt inlägg och klicka sedan på förhandsgranskningsknappen.

För mer information, se vår guide om hur du lägger till WordPress navigationsmeny i inlägg eller sidor.

15. Lägg till NoFollow Länkar i WordPress Navigation Menyer

Vanligtvis innehåller webbplatsens navigationsmeny länkar till dina egna inlägg och sidor. Ibland behöver du dock lägga till en länk till en extern webbplats.

Många SEO-experter rekommenderar att attributet rel = "nofollow" läggs till externa länkar. Så här lägger du till nofollow-attributet till länkar i WordPress-navigationsmenyerna.

Först måste du besöka Utseende »Menyer sida och klicka sedan på skärmalternativsknappen längst upp till höger på skärmen.

Detta kommer att ge ner en meny där du måste markera rutorna bredvid Link Relationship (XFN) och Link Target alternativ.

Klicka nu på menyalternativet du vill redigera. Du kommer att märka två nya alternativ, länkförhållande och öppen länk i ett nytt fönster / flik.

Du måste ange nofollow i länk relation alternativet. Du kan också kontrollera den öppna länken i nytt fönster / flikalternativ om du vill.

Klicka på Spara menyknappen för att spara dina ändringar. Nu kommer den här länken i din WordPress navigationsmeny att ha rel = "nofollow" attributet tillagt.

För mer detaljerade instruktioner, se vår handledning om hur man lägger till nofollow-länkar i WordPress-navigationsmenyerna.

Vi hoppas att den här artikeln hjälpte till att hitta de bästa handledningarna för att behärska WordPress navigationsmenyer. Du kanske också vill se vår lista över 24 måste ha pluggar för WordPress för företagswebbplatser.

Om du gillade den här artikeln kan du prenumerera på vår YouTube-kanal för WordPress-videoinstruktioner. Du kan också hitta oss på Twitter och Facebook.