WPLounge

Handleiding WordPress menu’s

In WordPress heb je de mogelijkheid om menu’s aan te maken. Je vindt deze optie onder Weergave > Menu’s. Je kunt je menu vullen met (links naar) pagina’s, berichten, categorieën en aangepaste links. Wanneer je een menu aanmaakt kun je deze vervolgens koppelen aan een “Menu locatie” in WordPress, of deze bijvoorbeeld in een Widget gebruiken.

Dit artikel is onderdeel van onze WordPress handleiding.

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium themes (waaronder Divi!) voor maar 89 dollar!
Bekijk de themes »
Lees meer over Divi

Een menu kan meerdere niveaus hebben. Op die manier kun je dus ook gebruikmaken van “drop down” menu’s, mits je WordPress theme dit ondersteunt. Je hebt dan een menu-item met daaronder een sub-menu met meerdere menu items.

WPLounge WordPress menu
Ons hoofdmenu bevat diverse dropdowns met submenu’s.

WordPress menu’s

Wanneer je in WordPress naar Weergave > Menu’s (of in de Engelse versie naar Appearance > Menus) gaat, kun je hier een nieuw menu aanmaken en bestaande menu’s aanpassen.

Menu WordPress
Klik op de afbeelding voor een grotere versie.

Zoals je in de afbeelding hierboven kunt zien, zijn er twee instellingen-pagina’s voor WordPress menu’s. Onder het eerste tabblad vind je de optie “Menu’s bewerken” en de tweede heet “Locaties beheren“. We beginnen bij de eerste: menu’s bewerken. Zoals je kunt zien hebben wij de optie om een menu te selecteren. Dit menu hebben wij “Hoofdmenu WPLounge” genoemd. Daarnaast vind je de optie “een nieuw menu aanmaken“.

Een nieuw menu aanmaken

Wanneer je klikt op “een nieuw menu aanmaken” zul je in het volgende scherm terecht komen. Vul hier een naam in voor je menu en klik vervolgens op “Menu aanmaken”. Dit nieuwe (lege) menu wordt niet direct zichtbaar op je website.

Nieuw menu aanmaken

Zodra je je menu een naam hebt gegeven en hebt aangemaakt, krijg je de optie om pagina’s, berichten en andere links aan je menu toe te voegen. Deze optie vind je in de balk links. In het onderstaande voorbeeld zoeken we naar pagina’s met als zoekwoord “WordPress Handleiding”. Vervolgens vink je deze pagina’s aan en klik je op “Aan menu toevoegen“.

Pagina's zoeken om aan je menu toe te voegen
Pagina’s zoeken om aan je menu toe te voegen (klik voor een grotere afbeelding).

Zodra je pagina’s (of berichten) aan je menu hebt toegevoegd, zullen ze rechts verschijnen onder het kopje “Menustructuur”. Hier kun je de pagina’s vervolgens in een bepaalde volgorde “slepen” met je muis:

WordPress menu's slepen
WordPress menu-items in de juiste volgorde slepen

Menu-items aanpassen

Wanneer je een bepaald menu-item in je menu uitklapt (door op het driehoekje helemaal rechts te klikken) kun je dit menu-item aanpassen. Zo kun je je menu-item een andere naam geven. Voorbeeld: een pagina heet “WordPress Handleiding”, maar je wilt dit graag inkorten naar “Handleiding” omdat dat mooier staat in je menu. Je kunt dan per menu-item de naam veranderen:

Menu item aanpassen

Je kunt er hier ook voor kiezen om de link in je menu te openen in een nieuw venster of tabblad. Voor externe links kan dit wenselijk zijn. Doe dit alleen wanneer het ook echt zinnig is. Het is voor bezoekers namelijk irritant als iedere link in een nieuw venster wordt geopend.

Niveaus toevoegen aan je menu

Behalve het verslepen van menu-items om ze in een andere volgorde te zetten, kun je ook meerdere niveaus aan je menu toevoegen. Wanneer je WordPress-theme dit ondersteunt zullen de sub-items dan getoond worden wanneer je bezoeker met zijn muis over het bovenliggende item beweegt. Je sleept menu-items dan als volgt:

Sub items

Natuurlijk is het ook mogelijk om nóg een niveau dieper te gaan. Het is echter altijd de vraag of je theme dit ondersteunt. Soms ondersteunen themes helemaal geen sub-menu’s of bijvoorbeeld maar één niveau.

Je menu aan een locatie toewijzen

In je WordPress-theme zijn bepaalde locaties gedefinieerd waar je menu’s aan kunt toewijzen. In ons theme zijn dit twee locaties:

Menu instellingen

Wanneer je bijvoorbeeld “Main Menu” aanvinkt en dan je menu opslaat, dan zal het door jou aangemaakte menu verschijnen op die locatie. De meeste themes hebben minimaal één locatie, die voor het hoofdmenu bedoeld is.

Je kunt deze locaties ook beheren via het tweede tabblad: “Locaties beheren“:

WordPress menu locaties beheren

Je kunt hier per “menu locatie” in je theme een menu kiezen. In ons geval hebben wij twee menu’s: Het hoofdmenu en de “Top Bar”. Dit is bij ons de donkere balk boven het hoofdmenu. Het verschilt echter per WordPress theme welke locaties er beschikbaar zijn.

Menu’s gebruiken in widgets

Navigatiemenu widgetBehalve deze standaard menu-locaties kun je er ook voor kiezen om een door jou aangemaakt menu in een Widget te plaatsen. Hiervoor ga je naar Weergave > Widgets in WordPress en sleep je vervolgens een “Navigatiemenu”-widget naar je widget area. Dit kan bijvoorbeeld je sidebar zijn.

Wanneer je deze widget uitklapt krijg je de instellingen te zien. Je kunt hier een titel invullen. Wanneer je dit veld leeg laat zal meestal de titel van je menu gebruikt worden. Die titel heb je opgegeven bij de instellingen onder Weergave > Menu’s. Selecteer een menu en klik vervolgens op “Opslaan”. De widget met je menu zal nu getoond worden in de “widget area” waar je deze naartoe hebt gesleept.

Navigatiemenu in widget

Menu’s aanpassen in de WordPress Customizer

Menu's in customizerBehalve via de hierboven beschreven instellingen-pagina’s, kun je je menu’s ook aanpassen in de WordPress Customizer. Deze vind je onder Weergave > Customizer. Je krijgt dan je wijzigingen “live” te zien zoals deze er op je website uit zullen zien. Op de afbeelding rechts zie je waar je moet klikken om je menu’s aan te passen. Je krijgt dan een nieuwe balk te zien met daarin al je menu’s. Je kunt daar ook per menu zien aan welke locatie(s) dit menu is toegewezen. Zo weet je dus welk menu je moet aanpassen om bijvoorbeeld je “Main menu” aan te passen.

Klik op het menu dat je wilt aanpassen. Je kunt dan pagina’s aan je menu toevoegen, de volgorde veranderen of niveaus aan je menu toevoegen zoals we dat eerder in deze handleiding hebben laten zien.

Het voordeel van de Customizer is dat je direct kunt zien hoe je wijzigingen er uit komen te zien op je website. Pas als je (bovenin) op “Publiceren” klikt krijgen je bezoekers die wijzigingen ook te zien.

Ook widgets met menu’s kun je aanpassen via de WordPress Customizer.

Geavanceerd

Wanneer je meer geavanceerde dingen wilt doen met je WordPress-menu’s dan kan dat natuurlijk ook. Zo kun je bijvoorbeeld linkrelaties toevoegen of bepaalde menu-items een CSS-klasse meegeven.

Linkrelaties (zoals “nofollow”) toevoegen

Een link relatie (zoals “nofollow”) toevoegen aan een menu-item in je WordPress-menu is ook mogelijk. We hebben hier eerder een artikel over geschreven: “Nofollow” in een WordPress-menu. Om dit voor elkaar te krijgen ga je in WordPress weer naar Weergave > Menu’s. Klik nu helemaal rechts bovenin op “Scherminstellingen”. Een nieuw menu klapt zich nu uit:

Scherminstellingen
Klik op “Scherminstellingen” en het menu klapt zich uit. (Klik op de afbeelding voor een grotere weergave)

Vink in dit nieuwe menu de optie “Linkrelatie (XFN)” aan. Er wordt nu bij ieder menu-item in je menu een nieuw veld toegevoegd waarin je de linkrelatie kunt opgeven. In het onderstaande voorbeeld zie je dat ik “nofollow” heb toegevoegd als linkrelatie voor een menu-item. Voor de meeste websites is dit overigens niet nodig. Echter, als je bijvoorbeeld een affiliate link in je menu wilt zetten, dan kan het “nofollow”-attribuut wel zinnig zijn.

llinkrelatie WordPress menu

CSS-classes aan je menu-item toevoegen

Je kunt ook CSS-classes aan je menu-items toevoegen. Ook hiervoor ga je weer naar Scherminstellingen en vink je “CSS-classes” aan (zie screenshot hierboven). Je kunt dan één of meerdere CSS classes aan je menu-item toevoegen:

CSS Class WordPress menu

In het bovenstaande voorbeeld heb ik de class “oranje” toegevoegd aan mijn menu-item. Er gebeurt in principe niets wanneer je een dergelijke class toevoegt. Als je echter thuis bent in CSS kun je deze optie gebruiken om bepaalde menu-items te “stylen”. Meer daarover lees je in ons artikel: WordPress menu-item een andere kleur geven.