15 bästa tutorials för att bemästra WordPress navigationsmenyer

Letar du efter de bästa tutorials för att arbeta med WordPress navigationsmenyer? WordPress navigationsmenyer allow you att enkelt customize och hantera menyer på din website. I den här artikeln kommer vi att visa dig de bästa tutorials för att bemästra WordPress navigationsmenyer.

Eftersom det här är en lång artikel har vi add to en innehållsförteckning för enklare navigation.

1. Kom igång med menyer för navigation i WordPress
2. Add Social Media Icons till WordPress Menyer
3. Visa olika menyer för inloggade användare i WordPress
4. Add Conditional Logic till navigationsmenyer
5. Styling av navigationsmenyer i WordPress
6. Add Image Icons med navigationsmenyer i WordPress
7. Add Custom navigationsmenyer i WordPress
8. Add Slide Panel Menu i WordPress Themes
9. Skapa en mobilanpassad responsiv WordPress-meny
10. Add to en responsiv meny i fullskärm i WordPress
11. Lägga till beskrivning med navigationsmenyer i WordPress
12. Så här addar du ämnen i navigeringsmenyer i WordPress
13. Hur man addar navigationsmenyer i WordPress sidebar
14. Add WordPress Navigation Menu i Posts och Pages
15. Add NoFollow Links i navigeringsmenyer i WordPress

1. Kom igång med WordPress Navigation Menus

Inom webbdesign är navigation menu en lista med länkar som gör det möjligt för dina besökare att besöka olika pages och sections på din website. Det hjälper användare att navigera runt på din website, därav namnet navigation menu.

WordPress har ett inbyggt verktyg som allow you att skapa och använda menyer på din website. This tool is located at Appearance ” Menus page in your WordPress admin area.

Här kan du skapa menyer genom att lägga till objekt från vänster till höger column. Du kan add to alla WordPress post, page, categories, och customizes links till dina menyer.

För detaljerade instruktioner, se vår guide för nybörjare om hur du lägger till navigationsmenyer i WordPress.

2. Add Social Media Icons till WordPress Menyer

WordPress-menyer kan också användas för att add to knappar för sociala media till din website. Detta allow you att enkelt updating icons, omorganisera dem och add new social media icons när du vill.

Det enklaste sättet att göra detta är genom att använda tillägget Menu Social Icons. För mer detaljer, se vår steg-för-steg guide om hur du installerar ett plugin för WordPress.

När du har aktiverat det, heada till sidan Appearance ” Menus. Skapa en new social menu och sedan på custom links tabs från vänster column.

Du kommer att se ikonerna för social media under fälten för länktext och URL. Allt du behöver göra är att clicka på en social media icon och enter din sociala profil URL. När du är klar klickar du på knappen Add to menu.

Upprepa denna process för alla profiler på sociala medier som du vill add to. När du är klar väljer du en location för menyn och klickar sedan på knappen save menu.

För mer detaljerade instruktioner, se vår guide om hur du lägger till social media icons till WordPress menyer.

3. Visa olika menyer för inloggade användare i WordPress

Om du run en WordPress membership site, då kanske du vill visa olika menyer till dina inloggade användare. Så här gör du enkelt för att 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 ej är inloggade. Du kan namnge dessa menyer inloggad och utloggad.

Därefter måste du add to den här koden till functions.php-filen i ditt theme eller i ett site-specifikt 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 all. You can now test your navigation menus in action.

För mer detaljer, se vår tutorial om hur du visar olika menyer för inloggade användare i WordPress.

4. Add Conditional Logic till navigations menyer

Vill du ändra menyer baserat på vissa villkor? Likes en annan menu på homepage, eller dölja ett objekt på enskilda inlägg. Så här kan du göra det i WordPress.

Först måste du installera och aktivera pluginet If Menu.

Efter aktivering, besök Appearabnce ” Menyer vy och klicka på en menu-item som du vill edit. You will notice a new alternative to ”Enable conditional logic”.

Om du kontrollerar det här alternativet visas två rullgardinsmenyer för dig. You can select show or hide for a menu if it matches the certain conditions. Du kan till exempel dölja menu-item om en användare är admin eller visa ett menu-item endast om en användare tittar på ett enskilt inlägg.

Mer detaljerade instruktioner finns i vår artikel om hur man lägger till villkorlig logik i WordPress-menyer.

5. Styling av menyer för navigation i WordPress

Ditt WordPress theme kontrollerar utseendet på navigationens menyer på din website. Med hjälp av CSS kan du customize utseendet på navigationsmenyerna.

Det enklaste sättet att göra detta är att använda tillägget CSS Hero. Det är ett premiumtema för WordPress som allow you att customize vilket WordPress-tema som helst utan att skriva en enda rad kod (ingen HTML eller CSS obligatorisk). Se vår CSS Hero review för att lära dig mer.

Du kan också styla dina menyer i navigationen genom att manuellt skriva CSS. För detaljerade instruktioner, se vår guide om hur du stylar WordPress navigationsmenyer.

6. Add Image Icons med navigationsmenyer i WordPress

Många populära websites använder image icons bredvid sina navigation menus för att göra dem mer notice. Så här kan du add to image icons med navigations menyer i WordPress.

Först måste du installera och aktivera Menu Image plugin. När du har aktiverat det går du till appearance ” Menus. Där kommer du att se ett alternativ för att add to images med varje objekt i din befintliga menu.

Du kan också använda CSS för att add to image icons. För detaljerade instruktioner, se vår guide om hur du lägger till image icons med navigation menyer i WordPress.

7. Add Custom Navigationsmenyer i WordPress

De flesta gratis och premiumteman i WordPress kommer med fördefinierade locations för att visa dina navigationsmenyer. Men du kan också add to custom navigation menus till dina themes.

Först måste du registrera din nya navigation menu genom att lägga till den här koden i functions.php-filen i ditt theme.

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Denna kod kommer att skapa ”My Custom Menu” för ditt theme. Du kan se detta genom att editera en menu på Appearance ” Menus page.

För att visa din custom menu måste du add to denna kod till ditt theme 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 du lägger till anpassade navigationsmenyer i WordPress teman.

8. Add Slide Panel Menu i WordPress Themes

Vill du visa din sites navigation menu är en slides-in panel? Att använda slides in paneler gör dina menyer mer interaktiva, mindre påträngande och roliga speciellt på mobila enheter.

Men för att kunna add to dem behöver du medelnivåförståelse för JavaScript, WordPress themes och CSS.

För steg-för-steg-instruktioner, se vår guide om hur man lägger till en slide panel menu i WordPress themes.

9. Skapa en mobilanpassad responsiv WordPress-meny

De flesta WordPress themes är responsiva och levereras med mobilanpassade navigationsmenyer. Men om ditt theme inte hanterar navigationsmenyer på ett bra sätt på mobila enheter påverkar det användarupplevelsen på mobila enheter.

Lyckligtvis finns det några enkla sätt för you att add to mobilanpassade responsiva menyer utan att skriva någon kod.

Först måste du installera och aktivera pluginet Responsive Menu.

När du har aktiverat det måste du klicka på ”Responsive Menu” i din WordPress admin bar för att konfigurera plugin-inställningar.

Välj helt enkelt en bredd efter vilken den mobila responsiva menyn ska vara synlig. Efter det måste du välja en befintlig navigation menu.

Glöm inte att klicka på knappen ”Update Options” för att lagra dina inställningar. Det är all du kan nu besöka din website och resize webbläsarens vy för att se den mobila responsiva menyn.

Det finns många andra sätt att add to en mobil responsiv menu. Likes en meny som visas med en toggle-effekt, en slide in meny och responsive select meny. Läs mer om dem alla i vår guide om hur du skapar en mobilanpassad responsiv WordPress-meny.

10. Add a Fullscreen Responsive Menu i WordPress

Har you notice hur vissa populära websites använder en fullskärms navigation menu? Vanligtvis är det obligatoriskt att använda JavaScript och CSS på ett kreativt sätt. Lyckligtvis kan du göra det i WordPress utan att skriva någon kod.

Först måste du installera och aktivera DC – Full Screen Responsive Menu. När du har aktiverat måste du besöka sidan Appearance ” DC Fullscreen Menu för att konfigurera plugin-inställningarna.

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

Klicka på knappen submit för att store dina settings. You can now visit your website to see your fullscreen responsive menu in action.

Mer information om ämnet finns i vår guide om hur du lägger till en responsiv meny i fullskärm i WordPress.

11. Lägga till beskrivning med navigationsmenyer i WordPress

WordPress navigationsmenyer är vanligtvis bara textlänkar som visar länketiketten eller ankartexten. Vad händer om du vill add to en liten description eller tagged line för varje objekt i din navigation menu?

Lyckligtvis har WordPress en built-in-funktion för att add to description för varje objekt i dina navigationsmenyer.

Först måste du aktivera objektet descriptions. Klicka på knappen Screen Options högst upp till höger på vyn.

Då visas en lista med boxar och alternativ som du kan aktivera. You need to check the box next to Description (Du måste kontrollera boxen bredvid Description).

Rulla nu ner och klicka på ett menu-item för att edit det och du kommer att se ett alternativ för att lägga till description.

Add to your description och click on the save menu button.

Om ditt theme har support för menu descriptions kommer du att kunna se dem direkt. Annars måste du editera dina theme-filer för att visa beskrivningar.

För detaljerade instruktioner, se vår guide om hur du lägger till beskrivningar av menyer i ditt WordPress theme.

12. Hur man addar ämnen i WordPress navigationsmenyer

Vi får ofta frågor om hur man addar ämnen från bloggen till navigationsmenyer i WordPress. Många Beginnare tror att de måste skapa pages för varje ämne för att kunna add to menyer.

Vad du faktiskt behöver är kategorier. Categories och tags är inbyggda i WordPress taxonomier som allow you att sortera content i relevanta ämnen.

Add your artiklar till relevanta kategorier och head sedan över till appearance ” Menus page. Click on the categories tabs to expand it and then select the categories that you want to display in your navigation menus.

För mer detaljer, se vår artikel om hur du lägger till ämnen i WordPress navigationsmenyer.

13. Så här add to navigeringsmenyer i sidebar i WordPress

WordPress teman har vanligtvis navigation menyer högst upp eller längst ner. Men du kan också skapa och add to menyer i din WordPress sidebar också.

Besök bara sidan Customize ” Widgets och lägg till widgeten ’Custom Menu’ i din sidebar. För detaljerade instruktioner, se vår guide om hur du lägger till och använder widgetar i WordPress.

När du har lagt till widgeten i sidofältet kan du välja en meny från rullgardinsmenyn. Glöm inte att klicka på knappen save för att spara dina settings.

14. Add WordPress Navigation Menu in Posts and Pages

Vanligtvis visas navigationsmenyer i headern eller sidebaren på en website. Men ibland kanske du vill add to en meny i ett WordPress post eller page. Här är hur du gör det.

Först måste du installera och aktivera Menu Shortcode plugin. När du har aktiverat det, redigera posten eller sidan där du vill visa din meny och add to denna shortcode:

[listmenu menu="Your Menu Name"]

Glöm inte att ersätta ”Your Menu Name” med namnet på din egen navigation menu. Save eller publicera din post och klicka sedan på knappen preview.

För mer details, se vår guide om hur du lägger till en navigation menu i WordPress i posts eller pages.

15. Add NoFollow Links i WordPress navigations menyer

Vanligtvis innehåller din sites navigation menu länkar till dina egna posts och pages. Ibland kan du dock behöva add to en link till en extern site.

Många experter på sökmotorsoptimering rekommenderar att du lägger till attributet rel=”nofollow” till externa länkar. Så här gör du för att add to nofollow-attribut till länkar i WordPress navigationsmenyer.

Först måste du besöka sidan Appearance ” Menus och sedan klicka på knappen Screen Options högst upp till höger på skärmen.

Detta kommer att ge ner en meny där du måste kontrollera boxarna bredvid alternativen Link Relationship (XFN) och Link Target.

Klicka nu på det menu-item som du vill edit:a. You will notice two new options, Link Relationship and Open link in a new window/tab.

Du måste enter nofollow i alternativet Link relationship. Du kan också kontrollera alternativet Öppna länk i nytt fönster / tab om du vill.

Click on the save menu button to store your changes. Nu kommer den här vissa länken i din WordPress navigation menu att ha rel=”nofollow” attribut add to.

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

Vi hoppas att den här artikeln hjälpte dig att hitta de bästa tutorials för att bemästra WordPress navigeringsmenyer. Du kanske också vill se vår lista över 24 tillägg till WordPress som du måste ha för företagswebbplatser.

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