Navigatiemenu toevoegen in WordPress (beginnershandleiding)

Wil je een navigatiemenu toevoegen aan je WordPress-site?


WordPress wordt geleverd met een menu-interface met slepen en neerzetten die u kunt gebruiken om koptekstmenu’s, menu’s met vervolgkeuzemogelijkheden en meer te maken.

In deze stapsgewijze handleiding laten we u zien hoe u eenvoudig een navigatiemenu toevoegt in WordPress.

Navigatiemenu toevoegen in WordPress

Wat is een navigatiemenu?

Een navigatiemenu is een lijst met links die naar belangrijke delen van een website verwijzen. Ze worden meestal weergegeven als een horizontale balk met links bovenaan elke pagina op een website.

Navigatiemenu’s geven uw site structuur en helpen bezoekers te vinden waarnaar ze op zoek zijn. Zo ziet het navigatiemenu eruit op WPBeginner:

Het WPBeginner-navigatiemenu

WordPress maakt het heel eenvoudig om menu’s en submenu’s toe te voegen. U kunt links toevoegen aan uw belangrijkste pagina’s, categorieën of onderwerpen, blogposts en zelfs aangepaste links zoals uw social media-profiel.

De exacte locatie van uw menu hangt af van uw WordPress-thema. De meeste thema’s hebben verschillende opties, dus u kunt verschillende menu’s maken die op verschillende plaatsen kunnen worden weergegeven.

De meeste WordPress-thema’s worden bijvoorbeeld geleverd met een primair menu dat bovenaan verschijnt. Sommige thema’s kunnen ook een secundair menu, een voettekstmenu of een mobiel navigatiemenu bevatten.

Uw eerste aangepaste navigatiemenu maken

Om een ​​navigatiemenu te maken, moet u de bezoeken Uiterlijk »Menu’s pagina in uw WordPress admin dashboard.

Een menu maken in WordPress

Eerst moet je een naam voor je menu opgeven, zoals ‘Navigatiemenu bovenaan’ en vervolgens op de knop ‘Menu maken’. Hierdoor wordt het menugebied uitgebreid en ziet het er als volgt uit:

Een nieuw gemaakt menu in WordPress

Vervolgens kunt u de pagina’s kiezen die u aan het menu wilt toevoegen. U kunt automatisch alle nieuwe pagina’s op het hoogste niveau toevoegen of u kunt specifieke pagina’s in de linkerkolom selecteren.

Klik eerst op het tabblad ‘Alles weergeven’ om alle pagina’s van uw site te zien. Klik daarna op het vak naast elk van de pagina’s die u aan uw menu wilt toevoegen en klik vervolgens op de knop ‘Toevoegen aan menu’.

Items toevoegen aan het navigatiemenu

Zodra uw pagina’s zijn toegevoegd, kunt u ze verplaatsen door ze te slepen en neer te zetten.

Een item slepen en neerzetten om het in het menu te verplaatsen

Notitie: Alle menu’s hebben hun items in een verticale (van boven naar beneden) lijst in de menu-editor. Wanneer u het menu live op uw site plaatst, wordt het verticaal of horizontaal weergegeven (van links naar rechts), afhankelijk van de locatie die u selecteert.

De meeste thema’s hebben verschillende locaties waar u menu’s kunt plaatsen. In dit voorbeeld gebruiken we het standaard 2020-thema, dat vijf verschillende locaties heeft.

Nadat je pagina’s aan het menu hebt toegevoegd, selecteer je de locatie waar je het menu wilt weergeven en klik je op de knop ‘Menu opslaan’.

De weergavelocatie voor uw menu selecteren

Tip: Als u niet zeker weet waar elke locatie zich bevindt, probeer dan het menu op verschillende plaatsen op te slaan en bezoek vervolgens uw site om te zien hoe deze eruitziet. U wilt waarschijnlijk niet alle locaties gebruiken, maar misschien wilt u er meer dan één gebruiken.

Dit is ons voltooide menu op de site:

Voltooid live navigatiemenu

Vervolgmenu’s maken in WordPress

Vervolgkeuzemenu’s, ook wel geneste menu’s genoemd, zijn navigatiemenu’s met menuopties voor ouders en kinderen. Wanneer u uw cursor over een bovenliggend item beweegt, verschijnen alle onderliggende items eronder in een submenu.

Als u een submenu wilt maken, sleept u een item onder het bovenliggende item en sleept u het vervolgens iets naar rechts. We hebben dat gedaan met drie subitems onder ‘Services’ in ons menu:

Voeg menu-items toe als submensen

Dit is het submenu live op de site:

Een drop-down submenu in de navigatie van de site

U kunt zelfs meerdere vervolgkeuzelagen toevoegen, zodat uw submenu een submenu kan hebben. Dit kan ertoe leiden dat er wat rommelig wordt gekeken en veel thema’s ondersteunen geen vervolgkeuzemenu’s met meerdere lagen.

In dit voorbeeld ziet u dat ‘Logo-ontwerp’ (een subitem van ‘Services’) twee eigen subitems heeft.

Een genest drop-down menu

Categorieën toevoegen aan WordPress-menu’s

Als je WordPress gebruikt om een ​​blog te runnen, wil je misschien je blogcategorieën toevoegen als vervolgkeuzelijst in je WordPress-menu. We doen dit op WPBeginner:

Het WPBeginner-menu met de vervolgkeuzelijst met categorieën

U kunt eenvoudig categorieën aan uw menu toevoegen door op het tabblad Categorieën aan de linkerkant van het menu’smenu te klikken. Mogelijk moet u ook op het tabblad ‘Alles weergeven’ klikken om al uw categorieën te zien.

Selecteer eenvoudig de categorieën die u aan het menu wilt toevoegen en klik vervolgens op de knop ‘Toevoegen aan menu’.

Categorieën toevoegen aan uw menu

De categorieën verschijnen als normale menu-items onderaan je menu. U kunt ze op hun plaats slepen en neerzetten. We gaan al deze categorieën onder het menu-item Blog plaatsen.

De categorieën onder het menu-item 'Blog' plaatsen

Wil je een blogpagina op je site hebben die los staat van je startpagina? Zo ja, bekijk dan onze tutorial over het maken van een aparte pagina voor blogposts in WordPress.

Aangepaste links toevoegen aan uw WordPress-navigatiemenu’s

Afgezien van categorieën en pagina’s, maakt WordPress het ook supereenvoudig om aangepaste links aan je menu toe te voegen. U kunt het gebruiken om te linken naar uw sociale media-profielen, uw online winkel en / of andere websites die u bezit.

U moet het tabblad ‘Aangepaste links’ op het menuscherm gebruiken. Voeg eenvoudig de link toe samen met de tekst die u in uw menu wilt gebruiken.

Een aangepaste link naar Twitter toevoegen aan het menu

Je kunt zelfs creatief worden en social media-iconen toevoegen aan je menu.

Menu voor sociale media

Een menu-item in WordPress Navigatiemenu’s bewerken of verwijderen

Wanneer u pagina’s of categorieën toevoegt aan uw aangepaste navigatiemenu, gebruikt WordPress de paginatitel of categorienaam als de linktekst. Je kunt dit wijzigen als je wilt.

Elk menu-item kan worden bewerkt door op de pijl-omlaag ernaast te klikken.

Een menu-item uitbreiden om de naam te bewerken

U kunt hier de naam van het menu-item wijzigen. Hier kunt u ook op ‘Verwijderen’ klikken om de link helemaal uit uw menu te verwijderen.

Als u worstelt met de slepen-en-neerzetten-interface, kunt u het menu-item ook verplaatsen door op de betreffende link ‘Verplaatsen’ te klikken.

WordPress-menu’s toevoegen in zijbalken en voetteksten

U hoeft zich niet alleen te houden aan de weergavelocaties voor uw thema. U kunt navigatiemenu’s toevoegen in elk gebied dat widgets gebruikt, zoals uw zijbalk of voettekst.

Ga gewoon naar Uiterlijk »Widgets en voeg de widget ‘Navigatiemenu’ toe aan uw zijbalk. Voeg vervolgens een titel voor de widget toe en kies het juiste menu in de vervolgkeuzelijst ‘Menu selecteren’.

Een menu toevoegen als zijbalkwidget

Hier is een voorbeeld van een aangepast WordPress-voettekstmenu dat is gebouwd op de Syed Balkhi-website.

Voorbeeld van WordPress voettekstmenu - Syed Balkhi

Verder gaan met navigatiemenu’s

Als je een echt episch menu met heel veel links wilt maken, hebben we een tutorial over het maken van een megamenu in WordPress. Hiermee kunt u een vervolgkeuzelijst maken met veel items, waaronder afbeeldingen.

Voorbeeld van megamenu

Megamenu’s zijn een geweldige optie als u een grote site heeft, zoals een online winkel of nieuwssite. Dit type menu wordt gebruikt door sites zoals Reuters, Buzzfeed, Starbucks, enz.

We hopen dat dit artikel je heeft geholpen bij het leren toevoegen van een navigatiemenu in WordPress. Misschien wilt u ook onze handleidingen bekijken over het vormgeven van navigatiemenu’s in WordPress en het maken van een plakkerig zwevend navigatiemenu in WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map