Sitenavigatie is een van de belangrijkste en tegelijkertijd een van de meest onderbelichte delen van je site. De reden waarom sitenavigatie zo belangrijk is, is omdat je je gebruikers helpt om te komen waar ze willen zijn. Een goed ontworpen menu kan een grote bijdrage leveren aan het verbeteren van de gebruikerservaring (UX) en zelfs je bouncepercentage verlagen. Aan de andere kant, een slecht ontworpen menu doet precies het tegenovergestelde.
Gelukkig kan je met WordPress aangepaste menu’s maken die aan de behoeften van je site voldoen. Je kan zelfs de ingebouwde functies van WordPress gebruiken om een compact, ruimtebesparend dropdown-menu toe te voegen, terwijl je je bezoekers toch duidelijk op weg helpt.
In dit bericht bespreken we waarom websitenavigatie zo belangrijk is en hoe dropdown-menu’s zo nuttig kunnen zijn. Vervolgens laten we je zien hoe je ze in WordPress kan maken en delen we enkele plugins die je hierbij kunnen helpen.
Tijd om aan de slag te gaan!
Een inleiding tot WordPress navigatie en dropdown-menu’s
Hoewel ze vaak een onopvallend onderdeel zijn van een site, zijn navigatiemenu’s een essentieel onderdeel van elke website. Ze helpen gebruikers om snel de voor hun meest relevante pagina’s te vinden en geven first-time bezoekers een idee wat je zoal te bieden hebt:
Een goed ontworpen navigatiemenu is de sleutel tot het verhogen van conversies en het verlagen van je bouncepercentage. Wanneer gebruikers makkelijk je productpagina’s kunnen vinden, weten waar ze zich aan kunnen melden voor je nieuwsbrief of waar andere belangrijke content staat, dan is dit natuurlijk alleen maar goed voor je conversies.
En als gebruikers zich zelfverzekerd een weg door je site kunnen banen, dan hoeven ze ook niet steeds op de Terug knop te klikken omdat ze op de verkeerde pagina zijn terechtgekomen. Als ze zonder vertraging op de plek van bestemming kunnen komen, verbeter je de UX en minimaliseer je de frustratie.
Menu’s zijn een essentiële functie van WordPress. Elke site die je met het platform maakt, kan er een of meerdere weergeven. Maar vergeet ook WordPress thema’s niet. Ook deze spelen een belangrijke rol in de styling en locatie van je menu of menu’s.
Om deze reden kan je WordPress menu veel verschillende vormen aannemen. De meest bekende is waarschijnlijk het standaard headermenu:
Je kan ook een extra footermenu toevoegen onderaan je pagina’s. Dit menu kan dezelfde content weergeven als je hoofdmenu, of juist iets anders:
Een andere stijl is de zogenaamde menu-overlay, die gebruikers naar believen kunnen openen en sluiten:
Ook kan je een menu in de zijbalk overwegen:
Óf je kan een dropdown-menu toevoegen, ook wel een “nested” menu genoemd:
Dit type navigatie is ideaal voor veel soorten sites. Het staat je content niet in de weg zoals een overlay-menu, maar is niet zo opdringerig als een groot menu in de header of zijbalk.
Door de inhoud te verbergen totdat het wordt opgevraagd, bespaar je schermruimte terwijl je je bezoekers nog steeds een makkelijke manier biedt om te navigeren.
Zo maak je een dropdown-menu aan in WordPress (5 stappen)
Als je hebt besloten dat een dropdown-menu een goede keuze is voor je WordPress site, dan is het eigenlijk vrij simpel om er een in te stellen. Door de ingebouwde functies van WordPress te gebruiken, kan je in slechts vijf stappen je eigen op maat gemaakte navigatiesysteem maken.
Stap 1: Maak je menu-items
De eerste stap om een menu te maken is beslissen wat je erin wil opnemen. Je begint door te navigeren naar Weergave > Menu’s in je WordPress dashboard:
Hoe de editor er precies uitziet, hangt een beetje van je thema af.
Waar we in deze pagina naar gaan kijken, is het tabblad Menu’s bewerken. Hier zou je de optie moeten zien om een van de bestaande menu’s te selecteren die je vervolgens kan bewerken. Voor ons is de andere optie van belang, Menu aanmaken:
Voor dit voorbeeld kiezen we dus voor de laatste optie en maken we een nieuw menu aan. Kies een titel en klik vervolgens op de knop Menu aanmaken:
Nu is het tijd om items toe te voegen aan je WordPress menu. Het is over het algemeen het beste om je menu zo eenvoudig mogelijk te houden, terwijl je gebruikers toch voldoende informatie geeft om de naar hun gewenste locatie te navigeren.
Als je te veel pagina’s toevoegt, dan overweldig je je bezoekers. Dit maakt het navigeren moeilijker in plaats van makkelijker.
Je kan menu-items op een aantal verschillende manieren toevoegen. Je kan bijvoorbeeld Pagina’s en Berichten kiezen, deze werken op dezelfde manier.
In de zijbalk van de menu-editor kan je middels de selectievakjes de berichten en pagina’s selecteren die je wil toevoegen. Vervolgens klik je op de knop Aan menu toevoegen:
Een andere optie is om Aangepaste links toe te voegen. Deze optie houdt in dat je de URL van de pagina waar je bezoekers naartoe wil sturen, toevoegt. Je kan deze een korte, maar beschrijvende label geven. Zodra je dit hebt gedaan, klik je wederom op de knop Aan menu toevoegen.
Ten slotte kan je ook Categorieën van pagina’s en berichten toevoegen aan je navigatiemenu. Hiermee breng je bezoekers naar een archiefpagina waar ze alle inhoud over een bepaald onderwerp kunnen bekijken.
Dit is vooral geschikt voor blogs en andere sites met veel content:
Zoals met de opties voor Pagina’s en Berichten, moet je de categorieën selecteren die je wil toevoegen. Nu klik je op Aan menu toevoegen.
Stap 2: Organiseer je WordPress menu
Zodra je alle menu-items hebt toegevoegd, zou je deze nu overzichtelijk in een lijst moeten zien onder Menustructuur:
Menu-items verschijnen in eerste instantie in de volgorde waarin je ze hebt toegevoegd. Je kan ze gelukkig met simpele sleepbewegingen op je juiste plek zetten. Hiermee maak je snel een eenvoudig menu aan, maar deze heeft nog geen dropdown-functionaliteit.
Er zijn een aantal manieren om dropdowns toe te voegen aan je WordPress menu.
De eenvoudigste manier is om te blijven slepen, maar bepaalde menu-items “onder” andere te plaatsen:
In de bovenstaande afbeelding hebben we bijvoorbeeld de drie berichtcategorieën verplaatst en ze onder Blog neergezet, als “sub-items”. Als bezoeker krijg je dit te zien als een dropdown-menu dat er als volgt uitziet:
Als je een dropdown-menu wil toevoegen met alle categorieën van je site, dan kan je dit doen door een Aangepaste link toe te voegen aan je menu. Gebruik “#” als de URL en “Categorieën” of iets soortgelijks voor het label:
Je kan vervolgens alle categorieën toevoegen aan het menu en ze onder dit label plaatsen. Elke categorie kan worden aangeklikt, maar het label zelf niet:
Met een vergelijkbare techniek kan je ook al je menu-items verbergen binnen een enkel dropdown-menu.
Voeg een andere Aangepaste link toe, gebruik “#” als URL en “Menu” als label. Plaats vervolgens alle andere menu-items onder het eerdergenoemde item:
Het resultaat op de front-end is een dropdown-menu met daarin de belangrijkste pagina’s van je site.
Zoals je kan zien in het item Categorieën hieronder, wordt alle inhoud die je onder een sub-item plaatst, weergegeven in een submenu:
Door de drag-and-drop menu-editor op deze manier te gebruiken, kan je elke stijl en combinatie van WordPress dropdown-menu’s maken. Onthoud echter wel dat je met te veel menu-items de gebruikers al snel in de war brengt.
Het is daarom het beste om het aantal submenu’s te beperken, om te voorkomen dat je navigatie overvol raakt.
Stap 3: Neem afbeeldingen op in je WordPress menu
Ziet je dropdown-menu er na stap 2 uit zoals je dat wil? Ga dan naar stap 5 om het te publiceren. Maak vaker is het nodig om je menu met wat aanpassingen te verfraaien en moet je nog een aantal extra stappen nemen.
Een tactiek die je kan overwegen is het opnemen van visuele elementen in je menu’s om je bezoekers te begeleiden. Hoewel beschrijvende labels uiteraard erg belangrijk zijn, kan je een afbeelding of pictogram gebruikers soms sneller helpen te bepalen waar een bepaalde navigatielink naartoe leidt.
Het is mogelijk om met aangepaste CSS afbeeldingen toe te voegen. Dit bespreken we verderop. We raden echter aan om hiervoor een plugin te gebruiken, zoals Menu Image, Icons Made Easy:
Op deze manier hoef je je geen zorgen te maken over code en kan je veel makkelijker visuele elementen toevoegen aan je dropdown-menu’s.
Het enige wat je hoeft te doen is de plugin installeren en navigeren naar Weergave > Menu’s:
Je zult zien dat er nu afbeeldingsopties zijn voor elke pagina die je in je menu hebt opgenomen. Je kan hier voor elk item de foto, afmetingen en posities bepalen. Vergeet niet om je wijzigingen op de slaan wanneer je klaar bent.
Stap 4: Voeg aangepaste CSS toe aan je dropdown-menu
Hoewel het niet wordt aanbevolen voor beginners, willen gevorderde gebruikers misschien wel hun eigen styling toevoegen aan de WordPress dropdown-menu’s. Voordat we echter meteen in de CSS duiken, moet je eerst een class toevoegen aan je menu.
Als je deze stap overslaat, dan bestaat de kans dat je aangepaste CSS problemen veroorzaakt voor andere menu’s op je site. Je kan bijvoorbeeld zomaar styling toevoegen aan je footermenu dat alleen bedoeld is voor je primaire dropdown-menu.
In de menu-editor klik je rechtsbovenaan op Scherminstellingen:
Vink vervolgens het vakje aan met CSS-classes:
Hiermee wordt er aan elke pagina in je menu een veld met CSS-classes toegevoegd:
Zodra je een of meer CSS classes aan je menu-items hebt toegevoegd, is alle aangepaste code die je in je stylesheet opneemt alleen van toepassing op de items in je menu met de class die jij opgeeft.
Je kan nu naar je stylesheet of de Customizer gaan en aan de slag gaan met je eigen styling.
Stap 5: Publiceer je menu op de belangrijkste locaties
Nu je WordPress dropdown-menu zo is opgesteld dat hij aan je wensen voldoet en je de gewenste aanpassingen hebt aangebracht, ben je klaar om het op je site te publiceren.
Hoe je dit doet, hangt enigszins van je thema af en welke menulocaties het ondersteunt. In dit voorbeeld kijken we naar het Twenty Twenty thema.
Scrol in de menu-editor naar de sectie Menu instellingen:
Schakel het eerste selectievakje in als je wil dat er automatisch nieuwe pagina’s aan je menu worden toegevoegd. Als je net bent begonnen met je site en nog niet al je belangrijke pagina’s hebt toegevoegd, dan kan dit handig zijn. Zorg er wel voor dat je niet per ongeluk te veel items aan je menu toevoegt.
Onder deze optie zie je een lijst met selectievakjes waar je verschillende locaties op je site kan opgeven als locatie voor je menu’s.
Het Twenty Twenty thema heeft vijf verschillende menugebieden: Desktop Horizontal Menu, Desktop Expanded Menu, Mobile Menu, Footer Menu, Social Menu.
In dit voorbeeld is het menu dat we hebben gemaakt het meest geschikt voor de locatie Desktop Horizontal Menu die zich in de header van de site bevindt:
Ook kan je overwegen om naar het tabblad Locaties beheren te gaan. Dit vind je in het Menu’s gedeelte van je dashboard. Hier kan je alle menulocaties zien die worden ondersteund door je thema, net als welk menu je aan elk thema hebt toegewezen:
Bij het plaatsen van je menu’s kan het handig zijn om te zien hoe ze er op de front-end uitzien.
Klik op de knop Beheren via Live Preview om te bekijken hoe je menu’s eruit komen te zien op de locatie die je hebt gekozen, met behulp van de WordPress Customizer:
Je kan vanuit de Customizer je menu of menu’s vervolgens publiceren. Als je ooit items wil verwijderen/toevoegen in je dropdown-menu, dan kan je dit allemaal vanuit de menu-editor doen.
WordPress plugins die dropdown-menu’s verbeteren
Hoewel je prima zonder extra tools volledig functionele WordPress navigatiemenu’s kunt maken, kan het soms handig zijn om de functionaliteit van je menu’s uit te breiden. Als dat voor jouw site het geval is, dan is het misschien slim om eens naar een aantal populaire WordPress menuplugins te kijken.
Nested Pages is voor blogs met veel content een efficiënte manier om dropdown-menu’s te maken. Hoewel het voornamelijk wordt gebruikt voor het structureren van berichten en pagina’s, genereert deze plugin ook automatisch een menu dat de structuur van je content weerspiegelt:
Hoewel het niet noodzakelijkerwijs raadzaam is om een groot aantal items in je menu’s op te nemen, is het soms onvermijdelijk.
Als dit voor jouw site geldt, dan kan Mag Mega Menu je helpen om je bestaande WordPress-menu’s om te toveren tot een “mega menu”.
Nu mobiel browsen toeneemt, is het essentieel dat je menu’s ook goed leesbaar zijn op mobiele apparaten.
WP Mobile Menu past bij elk responsief thema en helpt je een navigatiesysteem te maken voor de gebruikers die on-the-go gebruikmaken van je site.
Ten slotte, zoals we al eerder bespraken, kunnen er situaties zijn waarin beschrijvende menu-items niet voldoende zijn. In een dergelijk scenario wil je wellicht eens kijken naar de plugin Menu Image, Icons Made Easy, die we ook in stap 3 bespraken.
Elk van deze plugins kan worden gebruikt om je huidige navigatiesysteem te verbeteren en om je WordPress dropdown-menu effectiever te maken. Onthoud wel dat, ook als op navigatie aankomen, simpeler vaak beter is. Zorg dat je alleen functies toevoegt die echt iets aan de UX verbeteren en die je site er niet rommelig uit laten zien.
Problemen met je WordPress dropdown-menu’s oplossen
Als je je menu hebt geconfigureerd zoals hierboven beschreven, maar je krijgt het dropdown-menu niet aan de praat, dan zijn er een paar mogelijke oorzaken.
Hoewel we ze niet allemaal kunnen behandelen, kunnen we wel helpen om de oorzaak van het probleem te vinden, zodat je de juiste oplossing kan zoeken.
Vaak is een slecht functionerend menu het resultaat van conflicterende code tussen je aangepaste menu en je thema. Daarom is de eerste stap die je moet zetten om het probleem op te lossen het overstappen naar een standaard thema als Twenty Twenty. Als je menu het vervolgens weer doet, dan weet je dat het probleem verband houdt met je thema. Je kan vervolgens contact opnemen met de ontwikkelaar van je thema om een oplossing te vinden.
Andere mogelijke oorzaken zijn:
- Foutieve code: dubbelcheck of de door jou toegevoegde aangepaste CSS correct is en dat je gebruikmaakt van CSS classes die we in stap 4 beschreven.
- Incompatibiliteit met een plugin: schakel alle menu-gerelateerde plugins uit om te kijken of dit het probleem oplost.
- Verouderde jQuery: upgrade naar de nieuwste versie van jQuery en probeer het dropdown-menu opnieuw te openen.
Zoals we eerder al vermeldden, zijn er veel mogelijke oorzaken achter een defect menu. Als geen van de bovenstaande oplossingen lijkt te werken, raden we aan de WordPress ondersteuningsforums te bezoeken, contact op te nemen met ons deskundige Kinsta WordPress supportteam of een WordPress ontwikkelaar in te huren om het voor je te repareren.
Samenvatting
Hoewel het op het eerste gezicht niet zo lijkt, kan de navigatie van je WordPress site het succes ervan maken of breken. Door dropdown-menu’s te gebruiken, bespaar je ruimte op de schermen van gebruikers, terwijl ze tegelijkertijd gemakkelijk hun weg kunnen vinden site. Hiermee is de kans groot dat je je conversies verbeter.
