15 Beste zelfstudies voor WordPress navigatie-menu's

Ben je op zoek naar de beste tutorials om met WordPress-navigatiemenu's te werken? Met WordPress-navigatiemenu's kunt u gemakkelijk menu's op uw website aanpassen en beheren. In dit artikel laten we je de beste tutorials zien om WordPress navigatiemenu's onder de knie te krijgen.

Omdat dit een lang artikel is, hebben we een inhoudslijst toegevoegd om navigatie te vergemakkelijken.

1. Aan de slag met WordPress Navigation Menu's
2. Voeg Social Media-pictogrammen toe aan WordPress-menu's
3. Toon verschillende menu's aan ingelogde gebruikers in WordPress
4. Voeg voorwaardelijke logica toe aan navigatiemenu's
5. Styling van WordPress Navigation Menu's
6. Voeg afbeeldingspictogrammen toe met navigatiemenu's in WordPress
7. Voeg aangepaste navigatiemenu's toe in WordPress
8. Voeg Slide Panel Menu toe in WordPress Themes
9. Een Mobile Ready Responsive WordPress Menu maken
10. Voeg een responsievenmenu op volledig scherm toe in WordPress
11. Beschrijving toevoegen met navigatiemenu's in WordPress
12. Onderwerpen toevoegen in WordPress Navigation Menu's
13. Navigatiemenu's toevoegen in WordPress Sidebar
14. Voeg WordPress Navigatiemenu toe in Berichten en Pagina's
15. Voeg NoFollow-koppelingen toe in WordPress Navigation Menu's

1. Aan de slag met WordPress Navigation Menu's

In webontwerp is het navigatiemenu een lijst met koppelingen waarmee bezoekers van uw website verschillende pagina's en secties op uw website kunnen bezoeken. Hiermee kunnen gebruikers navigeren op uw website, vandaar het navigatiemenu met namen.

WordPress wordt geleverd met een ingebouwde tool waarmee je menu's op je website kunt maken en gebruiken. Deze tool bevindt zich op Uiterlijk »Menu's pagina in uw WordPress-beheerdersgebied.

Hier kunt u menu's maken door items uit de linkerkolom aan de rechterkant toe te voegen. U kunt elk WordPress-bericht, elke pagina, categorieën en aangepaste links toevoegen aan uw menu's.

Voor gedetailleerde instructies, zie onze beginnershandleiding over het toevoegen van navigatiemenu's in WordPress.

2. Voeg Social Media-pictogrammen toe aan WordPress-menu's

WordPress-menu's kunnen ook worden gebruikt om knoppen voor sociale media aan uw website toe te voegen. Hiermee kunt u gemakkelijk pictogrammen bijwerken, opnieuw rangschikken en nieuwe sociale media-pictogrammen toevoegen wanneer u maar wilt.

De eenvoudigste manier om dit te doen is door de plug-in Menu Sociale pictogrammen te gebruiken. Raadpleeg onze stapsgewijze handleiding over het installeren van een WordPress-plug-in voor meer informatie.

Ga na activering naar Uiterlijk »Menu's pagina. Maak een nieuw sociaal menu en vervolgens op het tabblad aangepaste links in de linkerkolom.

U ziet de social media-pictogrammen onder de linktekst- en URL-velden. Het enige dat u hoeft te doen, is klikken op een pictogram van een sociale media en uw sociale profiel-URL invoeren. Als je klaar bent, klik je op Toevoegen aan menuknop.

Herhaal dit proces voor alle profielen voor sociale media die u wilt toevoegen. Als u klaar bent, selecteert u een menulocatie en klikt u vervolgens op de knop Menu opslaan.

Raadpleeg onze handleiding voor meer gedetailleerde instructies over het toevoegen van socialemediapictogrammen aan WordPress-menu's.

3. Toon verschillende menu's voor ingelogde gebruikers in WordPress

Als u een WordPress-lidmaatschapssite uitvoert, wilt u mogelijk andere menu's weergeven voor uw ingelogde gebruikers. Hier is hoe je dit gemakkelijk kunt bereiken.

Eerst moet u twee verschillende menu's maken. Eén voor uw ingelogde gebruikers en één voor gebruikers die niet zijn aangemeld. U kunt deze menu's aanmelden en uitloggen.

Vervolgens moet u deze code toevoegen aan het functie.php-bestand van uw thema of een sitespecifieke plug-in.

 function my_wp_nav_menu_args ($ args = ") if (is_user_logged_in ()) $ args ['menu'] = 'ingelogd'; else $ args ['menu'] = 'logged-out'; return $ args; add_filter ('wp_nav_menu_args', 'my_wp_nav_menu_args'); 

Dat is alles. U kunt nu uw navigatiemenu's in actie testen.

Zie onze handleiding over het tonen van verschillende menu's voor ingelogde gebruikers in WordPress voor meer gedetailleerde instructies.

4. Voeg voorwaardelijke logica toe aan navigatiemenu's

Wilt u menu's wijzigen op basis van bepaalde voorwaarden? Als een ander menu op de startpagina, of een item verbergen voor afzonderlijke berichten. Hier is hoe je dit kunt bereiken in WordPress.

Eerst moet u de If Menu-plug-in installeren en activeren.

Bezoek na activering Appearabnce »Menu's scherm en klik op een menu-item dat u wilt bewerken. U ziet een nieuwe optie om 'Voorwaardelijke logica inschakelen'.

Als u deze optie aanvinkt, ziet u twee keuzemenu's. U kunt show of hide voor een menu selecteren als het overeenkomt met de voorwaarden. Verberg bijvoorbeeld het menu-item als een gebruiker een beheerder is of een menu-item alleen laat zien als een gebruiker een enkel bericht vaagt.

Zie ons artikel over het toevoegen van voorwaardelijke logica aan WordPress-menu's voor meer gedetailleerde instructies.

5. Styling van WordPress Navigation Menu's

Uw WordPress-thema bepaalt het uiterlijk van navigatiemenu's op uw website. Met CSS kunt u de weergave van navigatiemenu's aanpassen.

De eenvoudigste manier om dit te doen is door de CSS Hero plug-in te gebruiken. Het is een premium WordPress-plug-in waarmee u elk WordPress-thema kunt aanpassen zonder een regel code te schrijven (geen HTML of CSS vereist). Bekijk onze CSS Hero-recensie voor meer informatie.

Je kunt je navigatiemenu's ook stylen door handmatig CSS te schrijven. Raadpleeg onze handleiding over het stijlen van WordPress-navigatiemenu's voor gedetailleerde instructies.

6. Voeg afbeeldingspictogrammen toe met navigatiemenu's in WordPress

Veel populaire websites gebruiken afbeeldingspictogrammen naast hun navigatiemenu's om ze meer op te laten vallen. Hier ziet u hoe u afbeeldingspictogrammen kunt toevoegen met navigatiemenu's in WordPress.

Eerst moet u de Menu Image-plug-in installeren en activeren. Ga bij activering naar de menu's "Uiterlijk". Daar ziet u een optie om afbeeldingen toe te voegen aan elk item in uw bestaande menu.

U kunt ook CSS gebruiken om afbeeldingspictogrammen toe te voegen. Raadpleeg onze handleiding over het toevoegen van afbeeldingspictogrammen met navigatiemenu's in WordPress voor gedetailleerde instructies.

7. Voeg aangepaste navigatie-menu's toe in WordPress

De meeste gratis en premium WordPress-thema's worden geleverd met vooraf gedefinieerde locaties om uw navigatiemenu's weer te geven. U kunt echter ook aangepaste navigatiemenu's toevoegen aan uw thema's.

Eerst moet u uw nieuwe navigatiemenu registreren door deze code toe te voegen aan het bestand functions.php van uw thema.

 functie wpb_custom_new_menu () register_nav_menu ('mijn-custom-menu', __ ('My Custom Menu'));  add_action ('init', 'wpb_custom_new_menu'); 

Deze code maakt 'Mijn aangepast menu' voor uw thema. U kunt dit zien door een menu aan te passen Uiterlijk »Menu's pagina.

Om uw aangepaste menu weer te geven, moet u deze code aan uw thema toevoegen waar u het menu wilt weergeven.

  'mijn-custom-menu', 'container_class' => 'custom-menu-class')); ?> 

Raadpleeg ons artikel over het toevoegen van aangepaste navigatiemenu's in WordPress-thema's voor meer gedetailleerde instructies.

8. Voeg Slide Panel Menu toe in WordPress Themes

Wilt u laten zien dat het navigatiemenu van uw site een slide-in-paneel is? Het gebruik van schuifpanelen maakt uw menu's interactiever, minder opdringerig en leuk, vooral op mobiele apparaten.

Als u ze echter wilt toevoegen, heeft u een gemiddeld kennisniveau van JavaScript, WordPress-thema's en CSS nodig.

Voor stapsgewijze instructies, zie onze handleiding over het toevoegen van een schuifpaneelmenu in WordPress-thema's.

9. Een Mobile Ready Responsive WordPress Menu maken

De meeste WordPress-thema's zijn responsief en worden geleverd met voor navigatie geschikte navigatiemenu's. Als uw thema navigatie-menu's echter niet goed verwerkt op mobiele apparaten, beïnvloedt dit de gebruikerservaring op mobiele apparaten.

Gelukkig zijn er een aantal eenvoudige manieren om mobiele snel reagerende menu's toe te voegen zonder een code te schrijven.

Eerst moet u de invoegtoepassing Responsive Menu installeren en activeren.

Na activering moet u klikken op 'Responsive Menu' in uw WordPress-beheerbalk om plugin-instellingen te configureren.

Selecteer eenvoudig een breedte waarna het mobiele responsieve menu zichtbaar moet zijn. Daarna moet je een bestaand navigatiemenu selecteren.

Vergeet niet op de knop 'Update-opties' te klikken om uw instellingen op te slaan. Dat is alles wat u nu kunt doen om uw website te bezoeken en het formaat van het browservenster te wijzigen om het mobiele responsieve menu te zien.

Er zijn veel andere manieren om een ​​mobiel responsief menu toe te voegen. Zoals een menu dat wordt weergegeven met een schakeleffect, een menu voor dia's en een snelmenu. Lees meer over ze allemaal in onze gids over het maken van een responsive-menu voor WordPress voor mobiele apparaten.

10. Voeg een responsievenmenu op volledig scherm toe in WordPress

Is het je opgevallen hoe sommige populaire websites een navigatiemenu op volledig scherm gebruiken? Gewoonlijk vereist het een aantal creatief gebruik van JavaScript en CSS. Gelukkig kun je dit in WordPress doen zonder een code te schrijven.

Eerst moet u het DC - Volledig Responsive Menu installeren en activeren. Bij activering moet je bezoeken Uiterlijk "DC Volledig scherm Menu pagina om de plug-in-instellingen te configureren.

Hier kunt u een menu, achtergrond en tekstkleur en Google-lettertype kiezen voor uw volledig scherm.

Klik op de verzendknop om uw instellingen op te slaan. U kunt nu uw website bezoeken om uw op volledig scherm reagerende menu in actie te zien.

Raadpleeg onze handleiding over het toevoegen van een volledig reagerende menu in WordPress voor meer informatie over dit onderwerp.

11. Beschrijving toevoegen met navigatiemenu's in WordPress

WordPress-navigatiemenu's zijn meestal alleen tekstkoppelingen die het koppelingslabel of de ankertekst weergeven. Stel dat u een kleine beschrijving of tagregel wilt toevoegen voor elk item in uw navigatiemenu?

Gelukkig wordt WordPress geleverd met ingebouwde functionaliteit om een ​​beschrijving toe te voegen bij elk item in je navigatiemenu's.

Eerst moet u het beschrijvingsitem inschakelen. Klik op de knop Schermopties in de rechterbovenhoek van het scherm.

Dit toont een lijst met vakken en opties die u kunt inschakelen. U moet het vakje naast Beschrijving aanvinken.

Blader nu naar beneden en klik op een menu-item om het te bewerken en je ziet een optie om een ​​beschrijving toe te voegen.

Voeg uw beschrijving toe en klik op de knop Menu opslaan.

Als uw thema menubeschrijvingen ondersteunt, kunt u ze meteen bekijken. Anders moet u uw themabestanden bewerken om beschrijvingen weer te geven.

Raadpleeg onze handleiding voor gedetailleerde instructies over het toevoegen van menubeschrijvingen in uw WordPress-thema voor gedetailleerde instructies.

12. Onderwerpen toevoegen in WordPress Navigation Menu's

We worden vaak gevraagd over hoe je blogonderwerpen kunt toevoegen aan navigatiemenu's in WordPress. Veel beginners gaan ervan uit dat ze voor elk onderwerp pagina's moeten maken om ze aan menu's toe te voegen.

Wat je echt nodig hebt, zijn categorieën. Categorieën en tags zijn ingebouwd in WordPress-taxonomieën waarmee u inhoud in relevante onderwerpen kunt sorteren.

Voeg uw artikelen toe aan relevante categorieën en ga vervolgens naar Uiterlijk »Menu's pagina. Klik op het tabblad Categorieën om het uit te vouwen en selecteer vervolgens de categorieën die u in uw navigatiemenu's wilt weergeven.

Zie ons artikel over het toevoegen van onderwerpen in WordPress-navigatiemenu's voor meer informatie.

13. Navigatiemenu's toevoegen in WordPress Sidebar

WordPress-thema's hebben meestal navigatiemenu's bovenaan of onderaan. U kunt echter ook menu's maken en toevoegen aan uw WordPress zijbalk.

Gewoon bezoeken Uiterlijk »Widgets pagina en voeg de widget 'Aangepast menu' toe aan uw zijbalk. Raadpleeg onze handleiding over het toevoegen en gebruiken van widgets in WordPress voor gedetailleerde instructies.

Nadat u de widget aan een zijbalk hebt toegevoegd, kunt u een menu selecteren in de vervolgkeuzelijst. Vergeet niet op de knop opslaan te klikken om uw instellingen op te slaan.

14. Voeg WordPress Navigatiemenu toe in Berichten en Pagina's

Gewoonlijk worden navigatiemenu's getoond in de koptekst of zijbalk van een website. Soms wilt u misschien een menu toevoegen aan een WordPress-bericht of -pagina. Hier is hoe je dat zou doen.

Eerst moet u de plug-in Menu Shortcode installeren en activeren. Pas bij activering de post of pagina aan waar u uw menu wilt weergeven en voeg deze shortcode toe:

[listmenu menu = "Uw menunaam"]

Vergeet niet om 'Uw menunaam' te vervangen door de naam van uw eigen navigatiemenu. Sla uw bericht op of publiceer het en klik vervolgens op de voorbeeldknop.

Raadpleeg onze handleiding voor meer informatie over het toevoegen van WordPress-navigatiemenu aan berichten of pagina's voor meer informatie.

15. Voeg NoFollow-koppelingen toe in WordPress Navigation Menu's

Doorgaans bevat het navigatiemenu van uw site koppelingen naar uw eigen berichten en pagina's. Soms moet u echter een link naar een externe site toevoegen.

Veel SEO-experts raden aan het kenmerk rel = "nofollow" toe te voegen aan externe links. Hier is hoe u het nofollow-attribuut toevoegt aan koppelingen in WordPress-navigatiemenu's.

Eerst moet je bezoeken Uiterlijk »Menu's pagina en klik vervolgens op de knop Schermopties in de rechterbovenhoek van het scherm.

Dit zal een menu naar beneden halen waar je de selectievakjes naast Link Relationship (XFN) en Link Target-opties moet aanvinken.

Klik nu op het menu-item dat u wilt bewerken. U ziet twee nieuwe opties, Verbindingsrelaties en Open link in een nieuw venster / tabblad.

Je moet binnenkomen nofollow in de link-relatieoptie. Je kunt ook de open link in nieuw venster / tabblad bekijken als je wilt.

Klik op de knop Menu opslaan om uw wijzigingen op te slaan. Nu zal deze specifieke link in je WordPress-navigatiemenu het rel = "nofollow" -attribuut toegevoegd hebben.

Raadpleeg onze handleiding voor meer gedetailleerde instructies over het toevoegen van nofollow-links in WordPress-navigatiemenu's.

We hopen dat dit artikel heeft geholpen bij het vinden van de beste tutorials voor het beheer van WordPress-navigatiemenu's. Wellicht wilt u ook dat onze lijst met 24 WordPress-plug-ins voor zakelijke websites bevat.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.