Een WordPress website is weinig waard zonder bijbehorende menu’s en submenu’s. Het aanpassen van die menu’s aan jouw specifieke wensen is in WordPress ook vrij eenvoudig. Daardoor is je WordPress menu een belangrijke tool om hoog in de zoekresultaten te komen én bezoekers op je website te houden.
De specifieke menupagina’s in WordPress laten niet per se zien hoe complex je menu’s eigenlijk kunnen zijn. Je kan menu’s ook op diverse verschillende plekken op je website laten zien. Als je kan programmeren, kan je een WordPress menu bijna onbeperkt aanpassen.
In dit artikel geven we je een uitgebreide uitleg over het maken van een WordPress menu. We laten je ook zien hoe je de functionaliteit op verschillende manieren kan aanpassen en verbeteren.
De anatomie van een WordPress menu
Eenvoudig gezegd is een WordPress menu in feite een verzameling links (dit geldt ook voor dropdownmenu’s). Het is een vrij eenvoudig stuk functionaliteit, maar desalniettemin één van de belangrijkste onderdelen van de “ruggengraat” van je website.
In het volgende hoofdstuk zullen we precies kijken op welke plekken op een website je menu’s kan vinden. Voor nu is het vooral belangrijk om te weten dat ze in principe overal passen waar je ze zou willen hebben. Het zou kunnen dat je slechts enkele voorgeselecteerde opties hebt (op basis van je gebieden voor widgets). Maar technisch gezien kan een menu overal geplaatst worden waar je het hebben wil.
Uiteraard is een WordPress menu erg belangrijk in het navigeren op een website. Als je een helder en overzichtelijk navigatie-menu hebt, zullen gebruikers makkelijker hun weg vinden op je website, waardoor je bounceprecentage lager blijft.
Er is ook nog een ander doel: je menu’s helpen bij je Search Engine Optimization (SEO). Het optimaliseren van een WordPress menu voor SEO gaat meer om wat je weglaat uit het menu dan over wat je erin zet. Om te beginnen kan je het beste de bijzondere visuals achterwege laten, zoals een tagcloud, en het aantal links proberen te minimaliseren.
Alhoewel Google je tot wel 250 links op een pagina laat zetten, is het belangrijk om de “waarde van links” zo hoog mogelijk te houden. Daarom is het beperken van het aantal externe links op de lange termijn de beste strategie.
De verschillende soorten structuur van een WordPress menu
Zoals je wellicht al door hebt, kan je op basis van je specifieke wensen kiezen voor verschillende soorten WordPress menu’s.
Headermenu’s zijn bijvoorbeeld veelgebruikte opties omdat ze een duidelijke primaire sitenavigatie bieden. Je ziet ook vaak nog kleinere menu’s boven deze hoofdnavigatie, omdat dit een goede plek is voor socialemediasymbolen, zoekbalken en meer van dat soort dingen.
De website van SAU/CAL, een partner van Kinsta, heeft een “fly-in” menu met navigatie en links naar sociale media:
Dit menu laat zien dat er meer toepassingen voor een WordPress menu kunnen zijn dan alleen de navigatie. Met behulp van de ingebouwde functionaliteit van WordPress (daarover zometeen meer), kan je een menu voor elke denkbare toepassing maken.
Bijna net zo populair als een headernavigatie, is een menu in de footer. Dit gebied wordt meestal gebruikt om de primaire navigatie te herhalen voor bezoekers die helemaal tot onderaan de pagina zijn gescrold. Daarnaast is het overigens ook een goede plek voor meer context-gerelateerde links voor je producten en diensten:
Je ziet vaak ook menu’s in zijbalken, als een website een zijbalk heeft:
Alhoewel je hier zelden de primaire navigatie ziet, is het wel een bekende plek voor sociale links, archieven met blogartikelen en dergelijke.
Zo maak je een custom WordPress menu (3 manieren)
Het maken van een WordPress menu is vrij eenvoudig, ook als je een complete beginner bent. Er zijn drie voornaamste manieren om dit te regelen: de ingebouwde functionaliteit van WordPress gebruiken; een plugin gebruiken, of zelf aan de slag met programmeren.
We zullen je laten zien hoe je een WordPress menu kan maken met alle drie de manieren.
1. De ingebouwde functionaliteit van WordPress gebruiken om een menu te maken
WordPress heeft ingebouwde tools waarmee je een menu kan maken Het speciale scherm in de WordPress admin zal de meeste mensen bekend voorkomen.
Uiteraard biedt het gebruik van de standaardfunctie om je WordPress menu te maken diverse voordelen. Allereerst heb je automatisch volledige compatibiliteit met je website. Daarnaast kan je de menu’s bouwen met een interface en ingebouwde tools die je al kent.
Voor deze aanpak ga je eerst naar de pagina Appearance > Menus binnen WordPress:
Dit scherm is verdeeld in verschillende onderdelen. Bovenaan zie je de optie om een bestaand menu te selecteren, of een nieuw menu te maken:
Als je inderdaad een nieuw menu wil maken, geef je het een naam en ga je naar Menu Settings:
Hier zijn allerlei selectievakjes te vinden, maar er zijn vooral twee belangrijke keuzes die je hier moet maken:
- Add top-level pages to the menu automatically.“Top-level” betekent hierbij dat je pagina’s binnen WordPress maakt die geen “child”-pagina’s zijn van andere pagina’s, dus niet alleen “onder” een andere pagina hangen in de structuur. Zo is bijvoorbeeld een blogartikel geen top-level pagina omdat het meestal een archiefpagina heeft als parent (namelijk /blog). Aan de andere kant is een contactpagina meestal juist wel een top-level pagina omdat er geen pagina boven zit.
- De locatie van het menu. Elk thema heeft eigen locaties voor het menu. Tenzij je de kernbestanden van je thema wil bewerken, moet je kiezen uit de menu-locaties die de developers van het thema erin geprogrammeerd hebben. Bij sommige thema’s kan je dit aanpassen via de instellingen.
Nadat je klaar bent klik je op de knop Create Menu. Het scherm zal verversen, en je zal naar je nieuwe menu gaan. Nu kan je aan de linkerkant van het scherm kijken:
Op dit scherm staan alle artikelen, pagina’s, taxonomieën en andere linkbare bestanden op je website. Je kan je menu opbouwen door de gewenste items aan te vinken, en vervolgens op de knop Add to Menu te klikken.
Hierdoor zullen ze naar de hoofdsectie van het scherm Menus gaan:
Hier kan je menu-items naar de gewenste plaats verslepen. Als je op het pijltje naast een item klikt, kan je ook een label voor het menu-item instellen of het item verwijderen:
Nadat je op Save Menu hebt geklikt, ben je al helemaal klaar. Als je het menu Screen Options bovenaan de pagina uitklapt, krijg je echter nog veel meer mogelijkheden voor je WordPress menu:
De groep Screen elements toont meta-vakjes voor het menu in de linkerzijbalk. De groep Show advanced menu properties toont linkdoelen, omschrijvingen en CSS classes voor items in de lijst.
Er is nog een aspect van het scherm Menus dat belangrijk is. Het vak Custom Links maakt het mogelijk om een willekeurige link toe te voegen, dus geen vooraf gedefinieerde pagina op je site:
Met deze optie kan je links naar social media aan je WordPress menu toevoegen. Het platform haalt dan zelf het juiste pictogram op, op basis van de gekozen website, waardoor je de optie hebt om nette logo’s in je menu te zetten.
2. Gebruik een plugin om een custom WordPress menu te maken
De handigste oplossing om meer functionaliteit toe te voegen aan WordPress is altijd via plugins. In het vorige onderdeel hebben we al laten zien dat je met de ingebouwde optie van WordPress al eigenlijk alle belangrijke dingen kan regelen, maar plugins breiden de functionaliteit aanzienlijk uit.
Het is altijd wel de vraag of je een extra, speciale plugin nodig hebt, puur om een specifiek WordPress menu te maken, maar je kan verschillende goede redenen hebben om dit toch te doen. Om te beginnen kan je zo een menu maken in een stijl die niet in de standaardopties te vinden is. Specifieke responsive ontwerpen, “mega menu’s” en meer belangrijke opties zijn alleen maar te implementeren via plugins.
Daarnaast kan je meestal een menu bouwen via een specifieke editor en kiezen uit een aantal handige templates. In combinatie met de uitgebreide opties tot personalisatie, heb je zo een “no-code” oplossing om een WordPress menu te maken die perfect bij je website past.
Ter illustratie, de Max Mega Menu plugin biedt weinig verrassingen in de extra functies die de plugin biedt:
Nadat je de plugin hebt geïnstalleerd en geactiveerd, kan je een nieuw scherm van Mega Menu vinden in WordPress:
Als je naar het scherm Menu Locations gaat, zie je dat er nog veel meer mogelijkheden voor aanpassingen zijn:
Je kan er ook voor kiezen om een thema te kiezen voor je menu en dit verder aan te passen, met behulp van de beste paginabuilders die je momenteel kan vinden:
We zouden hier het hele artikel mee kunnen vullen, maar dan zouden we onszelf herhalen. Lees dus voor meer informatie eens ons artikel over WordPress menuplugins. Daar leggen we uitgebreid uit hoe je de beste plugin kan kiezen én gebruiken.
3. Schrijf code om een eigen WordPress menu te maken
Het programmeren van je eigen WordPress menu is een betrouwbare manier om je perfecte menu te maken, als je dat aandurft tenminste (of een ervaren developer bent en een nieuw WordPress thema maakt). Je gaat natuurlijk niet elke dag je code-editor erbij pakken om een nieuw menu te maken. Daarvoor kan je immers beter de standaard WordPress tools of een plugin gebruiken.
Maar als je graag thema’s wil gaan ontwikkelen, is het kunnen bouwen van een WordPress menu een belangrijke voorvereiste. Hiervoor heb je vier onderdelen nodig:
- Het registreren van je menu.
- Het tonen van je WordPress menu aan de front-end.
- Extra content in je menu of in de menu-items tonen.
- Een callback definiëren.
Voordat we beginnen: we nemen hierbij aan dat je overweg kan met een code-editor, dat je in een developmentomgeving kan werken, en dat de benodigde vaardigheden aanwezig zijn. Als je nog geen thema hebt om mee te werken, dan kan je één van de standaardopties van WordPress kiezen, of juist één kiezen uit onze lijst met snelste WordPress thema’s.
Als je dit allemaal klaar hebt staan, kan je het bestand functions.php van je thema openen. Let op dat dit iets anders is dan het algemene WordPress bestand met dezelfde naam. In dit bestand moet je je menu registreren. Oftewel, je moet WordPress vertellen wat er weergegeven moet worden op de pagina Appearance > Menus. Om dit te doen, gebruik je de register_nav_menus() functie:
function register_my_menus() {
register_nav_menus(
array(
'header' => __( 'Header Menu' ),
'other' => __( 'Other Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );
Deze code geeft aan dat het tabblad Manage Locations binnen WordPress twee menu’s moet tonen: Header Menu en Other Menu:
Vervolgens moet je je menu tonen via de wp_nav_menu() functie. Je moet dit toevoegen aan het templatebestand op de plek waar je het menu wil tonen. In ons geval is dat de header, dus voegen we de volgende code toe aan het header.php bestand van ons thema:
wp_nav_menu( array( 'theme_location' => 'header' ) );
Het zou kunnen dat deze code binnen een if statement staat, naast een aantal andere menu’s, dus volg vooral de conventies die al in het bestand staan.
Je kan vanaf nu hetzelfde doen met het menu in WordPress wat je met de standaardmenu’s kan. Maar je kan er ook voor kiezen om extra content toe te voegen aan je menu-items. Zo kan je bijvoorbeeld de array uitbreiden om ook HTML tags op te nemen die getoond worden bij de output:
wp_nav_menu(
array(
'menu' => 'primary',
'link_before' => '',
'link_after' => '',
)
);
Als laatste moet je nog een callback definiëren. Standaard toont WordPress een gevuld standaardmenu, wanneer het gespecificeerde menu niet gevonden kan worden. Wanneer er geen speciaal menu is geselecteerd, zal WordPress een menu van pagina’s tonen. Als je dat liever niet hebt, kan je een andere parameter instellen voor het theme-location argument, en een fallback_cb argument toevoegen.
wp_nav_menu(
array(
'menu' => 'primary',
// do not fall back to first non-empty menu
'theme_location' => '__no_such_location',
// do not fall back to wp_page_menu()
'fallback_cb' => false
)
);
Nadat je begrijpt hoe je een WordPress menu kan maken, kan je beginnen om de functionaliteit te verbeteren en uit te breiden. In het laatste deel zullen we daarnaar kijken, om een eigen menu-metabox in WordPress te maken.
Zo verbeter je een WordPress menu
Dit onderdeel gaat over een bewerking voor gevorderde gebruikers, dus eerst de aannames die we hierbij doen:
- Je weet hoe je een WordPress menu met PHP kan maken.
- Je PHP vaardigheden zijn goed genoeg om mee te komen met gevorderde onderwerpen.
- Je weet hoe je een WordPress plugin kan registreren en initialiseren.
Het gaat wat te ver voor dit artikel, maar je kan de WordPress Plugin Boilerplate Generator gebruiken om een nieuw, gestandaardiseerde template voor plugins te maken.
Wanneer je er klaar voor bent, kan je de plugin maken en uploaden naar WordPress:
Vervolgens ga je naar de map van de plugin en open je het hoofdbestand. Daar voeg je onderstaande code toe:
/**
* Add menu meta box
*
* @param object $object The meta box object
* @link https://developer.wordpress.org/reference/functions/add_meta_box/
*/
function custom_add_menu_meta_box( $object ) {
add_meta_box( 'custom-menu-metabox', __( 'Authors' ), 'custom_menu_meta_box', 'nav-menus', 'side', 'default' );
return $object;
}
add_filter( 'nav_menu_meta_box_object', 'custom_add_menu_meta_box', 10, 1);
De WordPress add_meta_box() functie zal een metabox registreren in het WordPress admin-gebied. Er zijn enkele arguments die je hierbij kan gebruiken, die je verder kan vinden in de officiële documentatie. We kunnen ook het nav_menu_meta_box_object() filter gebruiken aangezien er geen action in het bestand nav-menus.php zit waar we aan kunnen hooken. Dit statement bepaalt of een functie een meta box van een menu-item toevoegt voor een objecttype. Wanneer het filter uitgevoerd wordt, registreert add_meta_box de custom metabox.
Definiëren van een callback functie
Vervolgens kunnen we een callback functie definiëren om de HTML content voor de meta box aan te maken:
/**
* Displays a metabox for an author menu item.
*
* @global int|string $nav_menu_selected_id (id, name or slug) of the currently-selected menu
*/
function custom_menu_meta_box(){
global $nav_menu_selected_id;
$walker = new Walker_Nav_Menu_Checklist();
...
}
De globale variabele onthoudt het huidige menu ID, terwijl $walker een nieuwe instance opslaat voor het object Walker_Nav_Menu_Checklist. Daarmee wordt de HTML lijst van menu-items opgebouwd.
Nu moeten we het actieve tabblad in de custom meta box bepalen. Dit doen we door de waarde van $current_tab in te stellen, die binnen de ellips werkt die we in het vorige stuk code gemaakt hebben.
We gebruiken hier twee tabbladen, maar je kan er zoveel toevoegen als je nodig hebt:
$current_tab = 'all';
if ( isset( $_REQUEST['authorarchive-tab'] ) && 'admins' == $_REQUEST['authorarchive-tab'] ) {
$current_tab = 'admins';
} elseif ( isset( $_REQUEST['authorarchive-tab'] ) && 'all' == $_REQUEST['authorarchive-tab'] ) {
$current_tab = 'all';
}
De volgende regel haalt alle gebruikers op die writing-rechten hebben en voegt allerlei eigenschappen toe aan het object $authors:
$authors = get_users( array( 'orderby' => 'nicename', 'order' => 'ASC', 'who' => 'authors' ) );
$admins = array();
/* set values to required item properties */
foreach ( $authors as &$author ) {
$author->classes = array();
$author->type = 'custom';
$author->object_id = $author->nickname;
$author->title = $author->nickname . ' - ' . implode(', ', $author->roles);
$author->object = 'custom';
$author->url = get_author_posts_url( $author->ID );
$author->attr_title = $author->displayname;
if( $author->has_cap( 'edit_users' ) ){
$admins[] = $author;
}
}
$removed_args = array( 'action', 'customlink-tab', 'edit-menu-item', 'menu-item', 'page-tab', '_wpnonce' );
?>
Hier stuurt get_users een array terug van $user objecten die geselecteerd zijn op basis van specifieke parameters. De who parameter zal afdwingen dat WordPress de database doorzoekt op gebruikers met writing-rechten.
Ook zal de $admins array een array van auteurs opslaan, terwijl $removed_args een lijst met query variabelen opslaat die verwijderd worden.
Je kan nu de markup van de metabox tonen. Om dat te doen, stellen we eerst de labels en links van de tabbladen samen.
<div id="authorarchive" class="categorydiv">
<ul id="authorarchive-tabs" class="authorarchive-tabs add-menu-item-tabs">
<li <?php echo ( 'all' == $current_tab ? ' class="tabs"' : '' ); ?>>
<a class="nav-tab-link" data-type="tabs-panel-authorarchive-all" href="<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'all', remove_query_arg( $removed_args ) ) ); ?>#tabs-panel-authorarchive-all">
<?php _e( 'View All' ); ?>
</a>
</li>
<li <?php echo ( 'admins' == $current_tab ? ' class="tabs"' : '' ); ?>>
<a class="nav-tab-link" data-type="tabs-panel-authorarchive-admins" href="<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'admins', remove_query_arg( $removed_args ) ) ); ?>#tabs-panel-authorarchive-admins">
<?php _e( 'Admins' ); ?>
</a>
</li>
</ul>Onthoud dat je de juiste class namen, ID’s en data eigenschappen moet toewijzen aan de elementen van de metabox, anders zal het menu niet zo werken als je zou verwachten.
Zowel de functie add_query_arg als remove_query_arg stellen waarden per tabblad in voor de variabele authorarchive-tabs, en verwijderen alle onnodige variabelen.
We hebben nu een metabox met gedefinieerde tabbladen:
De volgende stap is het toevoegen van de HTML content aan de tabblad.
Het opbouwen van de HTML content voor de tabbladen van de meta box
Je kan hiervoor de code in het vorige onderdeel volgen in de custom_menu_meta_box() functie. Om de content toe te voegen, voeg je onderstaande code toe binnen de <div> tag uit het vorige deel.
<div id="tabs-panel-authorarchive-all" class="tabs-panel tabs-panel-view-all <?php echo ( 'all' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); ?>">
<ul id="authorarchive-checklist-all" class="categorychecklist form-no-clear">
<?php
echo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $authors), 0, (object) array( 'walker' => $walker) );
?>
</ul>
</div>
<div id="tabs-panel-authorarchive-admins" class="tabs-panel tabs-panel-view-admins <?php echo ( 'admins' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); ?>">
<ul id="authorarchive-checklist-admins" class="categorychecklist form-no-clear">
<?php
echo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $admins), 0, (object) array( 'walker' => $walker) );
?>
</ul>
</div>Deze code zorgt er in feite voor dat elk tabblad een lijst met selectievakjes bevat. De walk_nav_menu_tree() functie toont een lijst met drie argumenten: $items, $depth, en $r – die allemaal vereist zijn.
De array $items slaat een array van admins op. De array_map() functie past de wp_setup_nav_menu_item() functie toe op $admins en voegt eigenschappen van menu-items toe aan de elementen van de array.
Nu hoeven we de boel alleen nog maar af te ronden.
Toevoegen van een Submit knop
De custom meta box is bijna klaar, maar we moeten nog wel een knop Submit toevoegen, en een icoon die aangeeft dat de pagina aan het laden is.
Hier een stukje code die je direct na het vorige deel kan toevoegen:
<p class="button-controls wp-clearfix">
<span class="list-controls">
<a href="<?php echo esc_url( add_query_arg( array( 'authorarchive-tab' => 'all', 'selectall' => 1, ), remove_query_arg( $removed_args ) )); ?>#authorarchive" class="select-all"><?php _e('Select All'); ?></a>
</span>
<span class="add-to-menu">
<input type="submit"<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ); ?> class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e('Add to Menu'); ?>" name="add-authorarchive-menu-item" id="submit-authorarchive" />
<span class="spinner"></span>
</span>
</p>
</div>
<?php
}
Met deze kennis kan je bijna elke denkbare functie toevoegen aan je menu’s. Er is ook een publieke Gist van de plugin op GitHub, die je gratis kan downloaden.
Samenvatting
Een WordPress menu is een belangrijk onderdeel van je website. Daarom biedt het platform een krachtige ingebouwde manier om je menu precies zo te maken als je het wil hebben. Maar je krijgt daar niet elke denkbare mogelijkheid bij.
Er zijn verschillende opties waarmee je CSS tags kan toevoegen, en dergelijke zaken. En door een plugin te installeren kan je van de standaardmenu’s ook megamenu’s maken, of extra functionaliteit toevoegen om je menu meer responsive te maken (of andere dingen toe te voegen). Je kan ook zelf gaan programmeren, alhoewel dit wel een uitdaging zal zijn voor een beginnende programmeur, is het in principe iets dat je prima in een middagje in elkaar kan zetten.
Wil jij je WordPress menu gaan aanpassen, en zo ja, voor welke aanpak kies je dan? Deel jouw gedachten en ideeën in de reacties hieronder!
Laat een reactie achter