Articles

Hoe maak je een Dropdown Menu in WordPress (in 5 stappen)

sitenavigatie is de sleutel om uw gebruikers te helpen waar ze willen gaan. Een goed ontworpen menu kan een lange weg gaan naar het verbeteren van de gebruikerservaring( UX), en zelfs het verlagen van uw bounce rate. Echter, een slecht ontworpen men kan precies het tegenovergestelde doen.

gelukkig kunt u met WordPress aangepaste menu ‘ s maken die aan de behoeften van uw site voldoen. U kunt zelfs native functies gebruiken om een compact WordPress dropdown menu dat ruimte bespaart toe te voegen, terwijl nog steeds het verstrekken van duidelijke richting voor uw bezoekers.

In dit bericht zullen we bespreken waarom websitenavigatie belangrijk is en hoe vervolgkeuzemenu ‘ s bijzonder nuttig kunnen zijn. Dan zullen we u door hoe ze te maken in WordPress, en delen een aantal plugins die kunnen helpen.

laten we erin duiken!

een inleiding tot WordPress navigatie en Dropdown menu ‘s

hoewel ze bescheiden kunnen zijn, zijn navigatiemenu’ s een essentieel onderdeel van elke website. Ze helpen gebruikers snel de meest relevante pagina ‘ s te vinden voor het bereiken van hun doelen, terwijl ze ook beginnende bezoekers een idee geven van wat je te bieden hebt:

menu voorbeeld

Het Kinsta website primary navigation menu

Een goed ontworpen navigatiemenu is de sleutel om conversies te stimuleren en uw bounce rate te verlagen. Wanneer gebruikers gemakkelijk de pagina ‘ s kunnen vinden waar uw product, e-mail inschrijfformulier of andere omzettende inhoud zich bevindt, hebt u een eenvoudiger tijd om ze een aankoop te doen of zich aan te melden.

Plus, als gebruikers met vertrouwen hun weg door uw site kunnen vinden, hoeven ze niet van uw pagina ‘ s af te stuiteren omdat ze op de verkeerde plaats zijn beland. Hen helpen om het de eerste keer goed te krijgen, kan zowel UX verbeteren als frustratie minimaliseren.

in WordPress zijn menu ‘ s een inherent kenmerk. Elke site gemaakt met het platform kan een of meer van hen weer te geven. Echter, WordPress thema ’s spelen ook een belangrijke rol als het gaat om styling en het plaatsen van uw menu of menu’ s.

om deze reden kan uw WordPress menu verschillende vormen aannemen. Het meest bekende is het standaard kopmenu:

header menu voorbeeld

een voorbeeld van een typisch header menu

u kunt vaak ook een extra footer menu aan de onderkant van uw pagina ‘ s toevoegen. Het kan dezelfde inhoud weergeven als uw hoofdmenu, of iets andere opties bieden:

footer menu voorbeeld

een voorbeeld van een footer menu

een andere stijl is de menuoverlay, die gebruikers naar believen kunnen openen en sluiten:

overlay menu voorbeeld

een voorbeeld van Een overlay menu

als Alternatief kan u overwegen met behulp van een zijbalk menu:

zijbalk menu voorbeeld

Een voorbeeld van een zijbalk menu

Of u kunt het opnemen van een dropdown menu, soms ook wel een “geneste” menu:

dropdown menu voorbeeld

Een voorbeeld van een dropdown menu

Dit soort van navigatie is ideaal voor vele soorten websites. Het zal niet obscure uw inhoud als een overlay menu, maar is niet zo opdringerig als een grote header bar of een zijbalk menu.

door wat inhoud te verbergen totdat het nodig is, bespaart u schermruimte terwijl u gebruikers toch een gemakkelijke manier biedt om zich te verplaatsen.

Hoe maak je een Dropdown Menu in WordPress (in 5 stappen)

als je hebt besloten dat een dropdown menu kan een goede pasvorm voor uw WordPress site, het opzetten van een is vrij eenvoudig. Door gebruik te maken van de native menu functies beschikbaar in WordPress, kunt u een aangepaste navigatiesysteem dat past bij uw behoeften in slechts vijf stappen te maken.

Stap 1: Maak uw Menu-Items

de eerste stap naar het maken van een menu is beslissen wat er in het op te nemen. Begin door te navigeren naar Uiterlijk > menu ‘ s in uw WordPress dashboard:

WordPress menu

toegang tot de Menu-editor in het WordPress dashboard

wat u ziet in de Menu-editor zal enigszins variëren afhankelijk van uw thema.

echter, wat nu belangrijk is om op te merken is de eerste optie in het tabblad Bewerk Menu ‘ s. U zou een optie moeten zien waarbij u een van uw bestaande menu ‘ s kunt selecteren om te bewerken, evenals een optie om een nieuw menu aan te maken:

de nieuwe menukoppeling maken boven aan de WordPress menubewerker

de nieuwe menukoppeling maken boven aan de WordPress menubewerker

in dit voorbeeld kiezen we de laatste optie en maak een nieuw menu. Dit houdt in het toevoegen van een titel en klik vervolgens op de knop Menu maken:

naamgeving en aanmaken van het nieuwe menu

naamgeving en aanmaken van het nieuwe menu

nu bent u klaar om items toe te voegen aan uw WordPress menu. In de meeste gevallen is het het beste om je menu zo eenvoudig mogelijk te houden, terwijl je gebruikers toch voldoende informatie geeft om te komen waar ze heen willen.

Het opnemen van te veel pagina ‘ s kan bezoekers overweldigen en navigatie moeilijker maken in plaats van gemakkelijker.

er zijn een paar verschillende manieren om uw menu-items toe te voegen. De eerste twee zijn pagina ‘ s en berichten, en ze werken zeer vergelijkbaar.

pagina 's toevoegen aan het menu

pagina’ s toevoegen aan het menu

in de zijbalk van de menu-editor selecteert u eenvoudig de selectievakjes voor elke pagina of post die u wilt toevoegen, en klikt u op de knop Toevoegen aan Menu:

uw volgende optie is om aangepaste koppelingen op te nemen. Dit houdt in het verstrekken van de URL voor de pagina die u wilt gebruikers omleiden naar, en vervolgens het creëren van een korte maar beschrijvende label voor het. Daarna, U kunt klikken op Toevoegen aan Menu opnieuw:

een aangepaste link toevoegen aan het menu

een aangepaste link toevoegen aan het menu

tenslotte kunt u ook pagina-en Postcategorieën toevoegen aan uw navigatiemenu. Dit brengt gebruikers naar een archiefpagina waar ze alle inhoud over een bepaald onderwerp kunnen bekijken.

Blogs en andere content-zware sites kunnen deze functie bijzonder nuttig vinden:

categorieën toevoegen aan het menu

categorieën toevoegen aan het menu

net als bij de opties pagina ‘ s en berichten, selecteert u de selectievakjes van de categorieën die u wilt toevoegen en kiest u toevoegen aan Menu.

Stap 2: Organiseer uw WordPress Menu

zodra u al uw menu-items hebt toegevoegd, ziet u ze in afzonderlijke tegels onder menustructuur in de editor:

de sectie menustructuur van de Menu-editor

de sectie menustructuur van de Menu-editor

aanvankelijk zullen menu-items verschijnen in de volgorde waarin u ze hebt toegevoegd. U kunt hun organisatie echter eenvoudig wijzigen door ze op hun plaats te slepen en neer te zetten. Dit zal u toelaten om een eenvoudig menu te maken zonder dropdown functionaliteit.

Er zijn een aantal manieren om dropdowns toe te voegen aan uw WordPress menu.

het eenvoudigste is om door te gaan met slepen en neerzetten, maar begin met het nestelen van bepaalde menu-items onder andere:

een WordPress dropdown menu maken

Nestcategorieën onder de blogpagina

bijvoorbeeld, in de afbeelding hierboven hebben we de drie postcategorieën verplaatst die we aan het menu onder Blog hebben toegevoegd, waardoor ze “subposten”. Op de frontend zal dit een vervolgkeuzemenu maken dat er zo uitziet:

WordPress dropdown menu

voorbeeld van een dropdown menu in WordPress

Als u een dropdown menu wilt toevoegen dat alle categorieën op uw site bevat, kunt u dit doen door een aangepaste Link aan uw menu toe te voegen. Gebruik ” # “als URL en” Categories”of iets dergelijks voor het label:

een Categorielabel aanmaken voor het menu

een Categorielabel aanmaken voor het menu

u kunt dan al uw categorieën toevoegen aan het menu en ze onder dit label nestelen. Elke categorie zal aanklikbaar zijn, maar het label zal niet zijn:

het Categories dropdown menu

Het Categories dropdown menu

met een vergelijkbare techniek kunt u ook al uw menu-items verbergen in een enkel dropdown menu.

voeg nog een aangepaste Link toe, met “#” als URL en “Menu” als label. Dan, nest al uw andere menu-items onder die ene:

alle navigatiekoppelingen onder één Menu-label nesten

alle navigatiekoppelingen onder één Menu-label nesten

het resultaat op de frontend is een dropdown-menu met de belangrijkste pagina ‘ s van uw site.

zoals u kunt zien in het Categorieën-item hieronder, zal elke inhoud genest onder een sub-item verschijnen in een sub-menu:

een echte WordPress dropdown navigatiemenu

een echte WordPress dropdown navigatiemenu

met behulp van de drag-and-drop menu-editor op deze manier, kunt u elke stijl en combinatie van WordPress dropdown menu ‘ s. Vergeet echter niet dat te veel menu-items verwarrend kunnen zijn voor gebruikers.

Meld u aan voor de nieuwsbrief

we groeiden ons verkeer met 1,187% met WordPress. We zullen je laten zien hoe.

Word lid van meer dan 20.000 anderen die onze wekelijkse nieuwsbrief krijgen met insider WordPress tips!

Subscribe Now

Het is ook het beste om het aantal submenu ‘ s te beperken, om te voorkomen dat uw navigatie overbelast raakt.

Stap 3: Neem afbeeldingen op in uw WordPress-Menu

als aan het einde van Stap 2 uw dropdown-menu er precies uitziet zoals u het zich had voorgesteld, kunt u naar stap 5 gaan om het te publiceren. Er zijn echter extra stappen die u wilt nemen als u uw menu wilt verbeteren met aanpassingen.

een tactiek om te overwegen is het opnemen van visuele elementen in uw menu ‘ s om verdere begeleiding voor bezoekers te bieden. Hoewel beschrijvende labels van vitaal belang zijn, kan een afbeelding of een pictogram Gebruikers soms helpen sneller te bepalen waar een bepaalde navigatielink leidt.

Het is mogelijk om afbeeldingen toe te voegen met behulp van aangepaste CSS, die we binnenkort zullen bespreken. Echter, raden wij het oppakken van een plugin zoals menu Afbeelding, pictogrammen gemakkelijk gemaakt:

WordPress dropdown menu met afbeeldingen naast de navigatiekoppelingen

WordPress dropdown menu met afbeeldingen

op deze manier hoeft u zich geen zorgen te maken over enige code om visuele interesse aan uw dropdown menu toe te voegen.

Installeer gewoon de plugin en ga dan terug naar het uiterlijk > menu ‘ s:

the Menu Image section in the menu editor

The Menu Image section in the menu editor

u zult zien dat er nu afbeeldingsopties zijn voor elke pagina die u in uw menu hebt opgenomen. U kunt de foto, grootte en positie van elke pagina selecteren. Vergeet niet uw wijzigingen op te slaan als u klaar bent.

Stap 4: Voeg Custom CSS toe aan uw vervolgkeuzemenu

hoewel het niet wordt aanbevolen voor beginners, kunnen intermediaire en gevorderde gebruikers hun eigen styling willen opnemen in hun WordPress vervolgkeuzemenu ‘ s. Voordat je direct in je CSS springt, moet je echter een klasse aan je menu Toevoegen.

Als u deze stap overslaat, kan uw aangepaste CSS problemen veroorzaken voor andere menu ‘ s op uw site. Bijvoorbeeld, kunt u per ongeluk styling toe te passen op uw voettekst menu dat je alleen bedoeld voor uw belangrijkste dropdown menu.

in de Menu-editor, klik op schermopties in de rechterbovenhoek:

het tabblad schermopties in de Menu-editor

het tabblad schermopties in de Menu-editor

controleer dan het vakje voor CSS-klassen:

De CSS-Klassen inschakelen in het Scherm Opties tabblad

De CSS-Klassen inschakelen in het Scherm Opties tabblad

Dit zal het toevoegen van een CSS-Klassen veld aan elke pagina in het menu:

De CSS-Klassen veld in de menu-editor

De CSS-Klassen veld in de menu-editor

Zodra u een of meer CSS-klassen gebruikt om uw menu-items, worden alle aangepaste code die u op uw stylesheet zal alleen van toepassing op de items in het menu met de klasse die u opgeeft.

moe van een trage host voor uw WordPress site? Wij bieden razendsnelle servers en 24/7 ondersteuning van wereldklasse van WordPress experts. Bekijk onze plannen

U kunt nu naar uw stylesheet of de Customizer gaan en aan de slag met uw aangepaste styling.

Stap 5: Publiceer uw Menu op toplocaties

zodra uw WordPress dropdown menu is gestructureerd om aan uw behoeften te voldoen, en u eventuele aanpassingen hebt opgenomen die u wilt, bent u klaar om het te publiceren op uw site.

dit proces zal enigszins variëren afhankelijk van uw thema en welke menulocaties het ondersteunt. Voor dit voorbeeld gaan we het Twenty Twenty thema gebruiken.

in de Menu-editor scroll naar beneden naar de menu-Instellingen sectie:

de menu-Instellingen sectie in de editor

De menu-Instellingen sectie in de editor

u kunt het eerste selectievakje selecteren als u wilt dat nieuwe pagina ‘ s automatisch aan uw menu worden toegevoegd. Als je net aan de slag bent met je site en nog niet al je belangrijkste pagina ‘ s hebt toegevoegd, kan dit nuttig zijn. Echter, wees voorzichtig dat je niet per ongeluk te veel items toe te voegen aan uw menu.

onder deze optie ziet u een lijst met selectievakjes die de verschillende gebieden van uw site aangeven waar u uw menu kunt weergeven.

Het Twenty Twenty-thema bevat verschillende menu-gebieden: horizontaal Menu voor het bureaublad, uitgebreid Menu voor het bureaublad, mobiel Menu, Voettekstmenu, sociaal Menu.

in dit geval is het menu dat we hebben gemaakt het best geschikt voor de horizontale Menulocatie van het bureaublad, die in de koptekst van de site staat:

horizontaal Menu van het bureaublad voor het thema van twintig twintig

horizontaal Menu van het bureaublad voor het thema van twintig twintig

u kunt ook overwegen om naar het tabblad locaties beheren in het menu-gebied te navigeren van je dashboard. Hier kunt u ALLE menu locaties die worden ondersteund door uw thema te zien, evenals welk menu je hebt toegewezen aan elk een:

het tabblad locaties beheren

het tabblad locaties beheren

bij het plaatsen van uw menu ‘ s kan het nuttig zijn om te zien hoe ze eruit zullen zien op de frontend.

de optie beheren met Live voorbeeld

De optie beheren met Live voorbeeld

klik op de knop Beheren met Live voorbeeld om te zien hoe uw menu zal verschijnen op de locatie die u ervoor hebt gekozen, met behulp van de WordPress Customizer:

een live voorbeeld voor het WordPress menu in de Customizer

een live voorbeeld voor het WordPress menu in de Customizer

u kunt uw menu of menu ‘ s direct vanuit de Customizer publiceren. Als u ooit items uit uw dropdown-menu wilt toevoegen of verwijderen, kunt u gewoon terugkeren naar de Menu-editor en de nodige aanpassingen maken.

WordPress Plugins voor het verbeteren van uw Dropdown menu ‘s

hoewel u volledig functionerende WordPress navigatie menu’ s kunt maken zonder extra hulpmiddelen, kan het soms nuttig zijn om de functionaliteit van uw menu uit te breiden. Als dat het geval is met uw site, wilt u misschien kijken naar een aantal populaire WordPress menu plugins.

geneste pagina ’s is een efficiënte manier voor content-zware blogs om dropdown menu’ s te maken. Hoewel het voornamelijk wordt gebruikt voor het organiseren van berichten en pagina ‘ s, zal deze plugin ook automatisch een menu dat de structuur van uw inhoud weerspiegelt genereren:

geneste pagina 's

geneste pagina’ s WordPress plugin

hoewel het niet noodzakelijk raadzaam is om een groot aantal items in uw menu ‘ s op te nemen, is het soms onvermijdelijk.

als dat het geval is met uw site, kan Max Mega Menu u helpen uw bestaande WordPress menu ’s te combineren tot één “mega menu”:

max mega menu

Max Mega Menu WordPress plugin

Met Mobiel browsen in opkomst, ervoor zorgen dat uw menu ‘ s nog steeds leesbaar zijn op mobiele apparaten is de sleutel.

WP Mobile Menu combineert met elk responsief thema om u te helpen een navigatiesysteem te maken voor de gebruikers van uw site die onderweg zijn:

WP mobile menu

WP Mobile menu ‘ s WordPress plugin

tot slot, zoals we al hebben besproken, kunnen er situaties zijn waarin beschrijvende menu-items niet genoeg zijn. In deze situaties, wilt u misschien kijken naar het gebruik van Menu Afbeelding, pictogrammen gemakkelijk gemaakt zoals we beschreven in Stap 3 hierboven.

u kunt elk van deze plugins gebruiken om uw huidige navigatiesysteem te verbeteren en uw WordPress dropdown menu effectiever te maken. Vergeet niet dat soms, als het gaat om navigatie, eenvoudiger is beter. Alleen extra functies toevoegen als het uw UX zal verbeteren en te voorkomen dat verrommeling uw site.

problemen oplossen met uw WordPress Dropdown menu

Als u uw menu hebt geconfigureerd zoals hierboven beschreven, maar de dropdown functionaliteit werkt niet, zijn er verschillende mogelijke oorzaken.

hoewel we ze hier niet allemaal kunnen behandelen, kunnen we u helpen de oorzaak van uw probleem te beperken, zodat u de juiste oplossing kunt vinden.

vaak is een slecht functionerend menu het resultaat van conflicterende code tussen uw eigen menu en uw thema. Het eerste wat je moet doen als uw menu niet werkt is overschakelen naar een standaard thema zoals twintig twintig. Als uw menu weer begint te functioneren, weet u dat het probleem is gerelateerd aan uw thema. U kunt dan contact opnemen met de ontwikkelaar van uw thema om een oplossing te zoeken.

een paar andere mogelijke oorzaken zijn:

  • Mistyped code: controleer of elke aangepaste CSS die u hebt toegevoegd correct is, en dat u CSS-klassen gebruikt zoals beschreven in Stap 4.
  • plugin incompatibiliteit: probeer alle menu-gerelateerde plugins die u hebt geïnstalleerd uit te schakelen, om te zien of dat het probleem oplost.
  • verouderde jQuery: Upgrade naar de nieuwste versie van jQuery en probeer het vervolgkeuzemenu opnieuw te openen.

echter, zoals we al eerder zeiden, zijn de mogelijke oorzaken achter uw defecte menu talrijk. Als geen van de bovenstaande oplossingen lijken te werken, raden we een bezoek aan de WordPress Support Forums, het bereiken van onze deskundige Kinsta WordPress Support Team, of het huren van een WordPress ontwikkelaar om het te repareren voor u.

navigatiemenu ‘ s zijn de sleutel tot de UX van uw site. Maar wat als je veel menu-items die u nodig hebt om te voorzien? Dropdown menu is de naam van het spel hier! Bekijk hoe eenvoudig het is om er een te maken met deze gids 📑 🗃 ️ click to Tweet

samenvatting

hoewel het misschien een kleine zaak lijkt, kan de navigatie van uw WordPress site zijn succes maken of breken. Met behulp van dropdown menu’ s kan ruimte besparen op de schermen van gebruikers, terwijl ze ook in staat om gemakkelijk hun weg rond uw site en het verbeteren van uw conversies.

Als u deze tutorial leuk vond, dan zult u onze ondersteuning geweldig vinden. Alle Kinsta ‘ s hosting plannen omvatten 24/7 ondersteuning van onze ervaren WordPress ontwikkelaars en ingenieurs. Chat met hetzelfde team dat onze Fortune 500 klanten steunt. Bekijk onze plannen