Letar du efter de bästa handledningarna för att arbeta med WordPress-navigeringsmenyer? WordPress-navigeringsmenyer gör det enkelt att anpassa och hantera menyer på din webbplats. I den här artikeln visar vi dig de bästa handledningarna för att bemästra WordPress-navigeringsmenyer.
Eftersom detta är en lång artikel har vi lagt till en innehållsförteckning för enklare navigering.
- Kom igång med WordPress navigeringsmenyer
- Lägg till ikoner för sociala medier i WordPress-menyer
- Visa olika menyer för inloggade användare i WordPress
- Lägg till villkorlig logik till navigeringsmenyer
- Stilning av WordPress navigeringsmenyer
- Lägg till bildikoner med navigeringsmenyer i WordPress
- Lägg till anpassade navigeringsmenyer i WordPress
- Lägg till skjutpanelmeny i WordPress-teman
- Skapa en mobilklar responsiv WordPress-meny
- Lägg till en helskärmsanpassad meny i WordPress
- Lägga till beskrivning med navigeringsmenyer i WordPress
- Hur man lägger till ämnen i WordPress navigeringsmenyer
- Hur man lägger till navigeringsmenyer i WordPress sidofält
- Lägg till WordPress navigeringsmeny i inlägg och sidor
- Lägg till NoFollow-länkar i WordPress navigeringsmenyer
1. Kom igång med WordPress navigeringsmenyer
Inom webbdesign är en navigeringsmeny en lista med länkar som låter dina webbplatsbesökare besöka olika sidor och sektioner på din webbplats. Det hjälper användare att navigera runt på din webbplats, därav namnet navigeringsmeny.
WordPress levereras med ett inbyggt verktyg som låter dig skapa och använda menyer på din webbplats. Detta verktyg finns på sidan Utseende » Menyer i ditt WordPress administrationsområ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 alla WordPress-inlägg, sidor, kategorier och anpassade länkar i dina menyer.
För detaljerade instruktioner se vår nybörjarguide om hur man lägger till navigeringsmenyer i WordPress.
2. Lägg till ikoner för sociala medier i WordPress-menyer
WordPress-menyer kan också användas för att lägga till knappar för sociala medier på din webbplats. Detta gör att du enkelt kan uppdatera ikoner, ordna om dem och lägga till nya ikoner för sociala medier när du vill.
Det enklaste sättet att göra detta är att använda pluginet Menu Social Icons. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
När du har aktiverat, gå till sidan Utseende » Menyer. 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 fälten för länkttext och URL. Allt du behöver göra är att klicka på en ikon för sociala medier och ange din URL till din sociala profil. När du är klar, klicka på knappen "Lägg till i meny".
Upprepa denna process för alla sociala medieprofiler som du vill lägga till. När du är klar, välj en menyplats och klicka sedan på knappen "Spara meny".
För mer detaljerade instruktioner se vår guide om hur man lägger till ikoner för sociala medier i WordPress-menyer.
3. Visa olika menyer för inloggade användare i WordPress
Om du driver en WordPress-medlemskapswebbplats, kanske du vill visa olika menyer för dina inloggade användare. Här är hur du enkelt kan 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 inloggad och utloggad.
Lägg sedan till den här koden i ditt temas functions.php-fil eller ett webbplatsspecifikt plugin.
function my_wp_nav_menu_args( $args = '' ) {
if( is_user_logged_in() ) {
$args['menu'] = 'logged-in';
} else {
$args['menu'] = 'logged-out';
}
return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );
Det är allt. Du kan nu testa dina navigeringsmenyer i praktiken.
För mer detaljerade instruktioner se vår handledning om hur du visar olika menyer för inloggade användare i WordPress.
4. Lägg till villkorlig logik i navigeringsmenyer
Vill du ändra menyer baserat på vissa villkor? Som en annan meny på startsidan, eller dölja ett objekt i enskilda inlägg. Här är hur du kan uppnå detta i WordPress.
Först måste du installera och aktivera pluginet If Menu.
Efter aktivering, besök skärmen Utseende » Menyer och klicka på ett menyalternativ som du vill redigera. Du kommer att märka ett nytt alternativ för att 'Aktivera villkorlig logik'.
Att markera detta alternativ visar dig två rullgardinsalternativ. Du kan välja att visa eller dölja en meny om den uppfyller vissa villkor. Till exempel, dölj menyalternativ om en användare är administratör eller visa ett menyalternativ endast om en användare tittar på ett enskilt inlägg.
För mer detaljerade instruktioner se vår artikel om hur man lägger till villkorlig logik i WordPress-menyer.
5. Stilinställningar för WordPress navigeringsmenyer
Ditt WordPress-tema styr utseendet på navigeringsmenyer på din webbplats. Med CSS kan du anpassa utseendet på navigeringsmenyer.
Det enklaste sättet att göra detta är att använda pluginet CSS Hero. Det är ett premium WordPress-plugin som låter dig anpassa vilket WordPress-tema som helst utan att skriva en enda kodrad (ingen HTML eller CSS krävs). Se vår CSS Hero-recension för att lära dig mer.
Du kan också styla dina navigeringsmenyer genom att manuellt skriva CSS. För detaljerade instruktioner, se vår guide om hur man stylar WordPress navigeringsmenyer.
6. Lägg till ikonbilder med navigeringsmenyer i WordPress
Många populära webbplatser använder bildikoner bredvid sina navigeringsmenyer för att göra dem mer uppmärksammade. Här är hur du kan lägga till bildikoner med navigeringsmenyer i WordPress.
Först måste du installera och aktivera pluginet Menu Image. Efter aktivering, gå till Utseende » Menyer. Där ser du ett alternativ för 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 navigeringsmenyer 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 navigeringsmenyer. Du kan dock också lägga till egna navigeringsmenyer i dina teman.
Först måste du registrera din nya navigeringsmeny genom att lägga till denna kod i ditt temas functions.php-fil.
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
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å sidan Utseende » Menyer.
För att visa din anpassade meny måste du lägga till denna kod i ditt tema där du vill visa menyn.
<?php
wp_nav_menu( array(
'theme_location' => 'my-custom-menu',
'container_class' => 'custom-menu-class' ) );
?>
För mer detaljerade instruktioner, se vår artikel om hur man lägger till anpassade navigeringsmenyer i WordPress-teman.
8. Lägg till en sidopanelsmeny i WordPress-teman
Vill du att din webbplats navigeringsmeny ska visas i en skjutpanel? Att använda skjutpaneler gör dina menyer mer interaktiva, mindre påträngande och roliga, särskilt på mobila enheter.
För att kunna lägga till dem behöver du dock en medelgod förståelse för JavaScript, WordPress-teman och CSS.
För steg-för-steg-instruktioner, se vår guide om hur du lägger till en skjutpanelmeny i WordPress-teman.
9. Skapa en mobilanpassad responsiv WordPress-meny
De flesta WordPress-teman är responsiva och kommer med mobilanpassade navigeringsmenyer. Men om ditt tema inte hanterar navigeringsmenyer 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 mobilanpassade responsiva menyer utan att skriva någon kod.
Först måste du installera och aktivera pluginet Responsive Menu.
Efter aktivering måste du klicka på 'Responsive Menu' i din WordPress adminfält för att konfigurera plugininställningarna.
Välj helt enkelt en bredd efter vilken mobilanpassad meny ska vara synlig. Därefter behöver 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 mobilanpassade menyn.
Det finns många andra sätt att lägga till en mobilanpassad meny. Som en meny som visas med en växlingseffekt, en skjutin-meny och en responsiv meny för val. Lär dig mer om alla dessa i vår guide om hur du skapar en mobilanpassad responsiv WordPress-meny.
10. Lägg till en helskärms responsiv meny i WordPress
Har du märkt hur vissa populära webbplatser använder en helskärmsnavigeringsmeny? Vanligtvis kräver det 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. Efter aktivering måste du besöka sidan Utseende » DC Fullscreen Menu för att konfigurera plugin-inställningarna.
Här kan du välja en meny, bakgrunds- och textfärg, samt Google-font för din helskärmsmeny.
Klicka på skicka-knappen för att spara dina inställningar. Du kan nu besöka din webbplats för att se din responsiva helskärmsmeny i aktion.
För mer om detta ämne, se vår guide om hur du lägger till en responsiv helskärmsmeny i WordPress.
11. Lägga till beskrivning med navigeringsmenyer i WordPress
WordPress navigeringsmenyer är vanligtvis bara textlänkar som visar länketiketten eller ankaretiketten. Tänk om du ville lägga till en liten beskrivning eller en slogan för varje objekt i din navigeringsmeny?
Lyckligtvis har WordPress inbyggd funktionalitet för att lägga till beskrivningar med varje objekt i dina navigeringsmenyer.
Först måste du aktivera objektet beskrivningar. Klicka på knappen Skärmalternativ längst upp till höger på skärmen.
Detta visar en lista med rutor och alternativ som du kan aktivera. Du måste kryssa i rutan bredvid Beskrivning.
Rulla nu ner och klicka på ett menyobjekt för att redigera det och du kommer att se ett alternativ för att lägga till en beskrivning.
Lägg till din beskrivning och klicka på knappen Spara meny.
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 man lägger till menybeskrivningar i ditt WordPress-tema.
12. Hur man lägger till ämnen i WordPress navigeringsmenyer
Vi får ofta frågan om hur man lägger till bloggämnen i navigeringsmenyer i WordPress. Många nybörjare antar att de behöver skapa sidor för varje ämne för att kunna lägga till dem i menyer.
Vad du faktiskt behöver är kategorier. Kategorier och taggar är inbyggda WordPress-taxonomier som låter dig sortera innehåll i relevanta ämnen.
Lägg till dina artiklar i relevanta kategorier och gå sedan till sidan Utseende » Menyer. Klicka på fliken kategorier för att expandera den och välj sedan de kategorier du vill visa i dina navigeringsmenyer.
För mer information, se vår artikel om hur du lägger till ämnen i WordPress navigeringsmenyer.
13. Hur man lägger till navigeringsmenyer i WordPress sidofält
WordPress-teman har vanligtvis navigeringsmenyer högst upp eller längst ner. Du kan dock också skapa och lägga till menyer i ditt WordPress-sidofält.
Besök helt enkelt sidan Utseende » Widgets och lägg till widgeten 'Anpassad meny' i din sidofält. För detaljerade instruktioner, se vår guide om hur man lägger till och använder widgets i WordPress.
Efter att ha lagt till widgeten i en sidopanel kan du välja en meny från rullgardinsalternativet. Glöm inte att klicka på spara-knappen för att lagra dina inställningar.
14. Lägg till WordPress navigeringsmeny i inlägg och sidor
Vanligtvis visas navigeringsmenyer i sidhuvudet eller sidofältet på en webbplats. Ibland kanske du dock vill lägga till en meny inuti ett WordPress-inlägg eller en sida. Här är hur du skulle göra det.
Först måste du installera och aktivera pluginet Menu Shortcode. Efter aktivering, redigera inlägget eller sidan där du vill visa din meny och lägg till denna kortkod:
[listmenu menu="Ditt meny namn"]
Glöm inte att ersätta ‘Ditt meny namn’ med namnet på din egen navigeringsmeny. 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-navigeringsmeny i inlägg eller sidor.
15. Lägg till NoFollow-länkar i WordPress navigeringsmenyer
Vanligtvis innehåller din webbplats navigeringsmeny länkar till dina egna inlägg och sidor. Ibland kan du dock behöva lägga till en länk till en extern webbplats.
Många SEO-experter rekommenderar att lägga till attributet rel="nofollow" till externa länkar. Här är hur du lägger till nofollow-attributet till länkar i WordPress-navigeringsmenyer.
Först måste du besöka sidan Utseende » Menyer och sedan klicka på knappen Skärmalternativ längst upp till höger på skärmen.
Detta kommer att öppna en meny där du måste kryssa i rutorna bredvid Länkrelation (XFN) och Länkmål-alternativen.
Klicka nu på menyalternativet du vill redigera. Du kommer att märka två nya alternativ, Länkrelation och Öppna länk i ett nytt fönster/flik.
Du måste ange nofollow i alternativet för länkrelation. Du kan också markera alternativet för att öppna länken i ett nytt fönster/flik om du vill.
Klicka på knappen Spara meny för att spara dina ändringar. Nu kommer den här specifika länken i din WordPress-navigeringsmeny att ha attributet rel="nofollow" tillagt.
För mer detaljerade instruktioner, se vår handledning om hur du lägger till nofollow-länkar i WordPress navigeringsmenyer.
Vi hoppas att den här artikeln hjälpte dig att hitta de bästa handledningarna för att bemästra WordPress navigeringsmenyer. Du kanske också vill se vår lista över 24 måste ha WordPress-plugins för företagswebbplatser.
Om du gillade den här artikeln, vänligen prenumerera på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Jiří Vaněk
Jag gillar verkligen och är fascinerad av din punkt nummer 3 i handledningen. Jag har en medlemswebbplats som använder MemberPress, och idén att inloggade användare kan ha en annan navigeringsmeny är fantastisk eftersom jag kan lägga till premium-innehåll i menyn som vanliga användare inte borde se. Jag är också förvånad över hur många funktioner som är dolda i panelen Utseende » Menyer. Jag hade ingen aning om hur användbar den kunde vara i detta avseende.
ERFmama
Thank you so much for a fantastic overview! I’ve learned a few new things!
