Menu's en navigatie

Module 4: Inhoud maken · Leestijd: 7 minuten

Leerdoel: Na deze les kun je een duidelijk menu maken, zowel in een blokthema als in een klassiek thema, en weet je wat een goed menu is.

Kernbegrippen: navigatieblok, Site-editor, Weergave > Menu's, menulocatie, submenu, aangepaste link, mobiel menu, voettekstmenu, linktekst, toegankelijkheid

Twee manieren, afhankelijk van je thema

Waar je het menu maakt, hangt af van je thema (les 5.1):

• Blokthema: het menu is een navigatieblok in de kop van de site. Je bewerkt het in de Site-editor (Weergave > Editor > Navigatie, of in het sjabloondeel Header).
• Klassiek thema: je maakt het menu bij Weergave > Menu's en kiest daar een menulocatie die het thema aanbiedt, zoals "Hoofdmenu" of "Voettekst".

Zie je bij Weergave geen Menu's, alleen Editor? Dan gebruik je een blokthema. Dat is een veelvoorkomende verwarring na het wisselen van thema: "mijn menu is weg". Het oude menu bestaat nog (het staat in de database als lijst menu-items), maar het nieuwe thema kijkt op een andere plek. In de Site-editor kun je bij het navigatieblok een bestaand klassiek menu importeren.

Wat erin kan

Een menu-item kan zijn:

• een pagina of bericht van je site;
• een categorie (dan linkt het naar het archief van die categorie);
• een aangepaste link: elk adres, ook naar een andere site, of een anker binnen een pagina (/diensten/#prijzen);
• in een blokthema ook andere blokken in de navigatie, zoals een zoekveld, sociale-media-pictogrammen of een knop "Afspraak maken".

Menu-items kun je onder elkaar schuiven als submenu: in een klassiek thema door ze iets naar rechts te slepen, in het navigatieblok met "Submenu toevoegen" of door een item op een ander te slepen.

Een menu-item linkt naar een pagina, maar heeft een eigen label. Pas je later de titel van de pagina aan, dan verandert het label in het menu niet vanzelf mee (in een klassiek menu niet, in het navigatieblok afhankelijk van hoe je het item hebt toegevoegd). Kijk dus na een titelwijziging ook even in het menu.

Een goed menu

Een menu is geen inhoudsopgave van je hele site. Het is een wegwijzer naar de paar plekken waar de meeste bezoekers heen willen. Een paar richtlijnen:

• Weinig hoofditems: een stuk of vijf tot zeven. Meer past op een telefoon toch niet en bezoekers lezen het niet.
• Hooguit één laag submenu. Een submenu in een submenu is op een telefoon lastig te bedienen en voor schermlezers verwarrend.
• Een submenu-kop is ook een link. In veel thema's opent een klik op "Diensten" het submenu, maar is "Diensten" zelf ook een pagina. Zorg dat die pagina bestaat en iets zinnigs toont, of dat het item duidelijk alleen een kopje is.
• Gewone woorden die bezoekers zouden gebruiken: "Prijzen", niet "Onze investeringsmogelijkheden".
• Contact en de belangrijkste actie (afspraak maken, bestellen) altijd bereikbaar, vaak rechts in het menu of als knop.
• Juridische links (privacyverklaring, algemene voorwaarden, cookie-instellingen) horen in een voettekstmenu, niet in het hoofdmenu. Wel altijd vindbaar, op elke pagina (les 9.3).

Mobiel en toegankelijk

Op een telefoon klapt het menu meestal in tot een knop met drie streepjes (het "hamburgermenu"). Bij het navigatieblok stel je in wanneer dat gebeurt (altijd, of alleen op kleine schermen). Test het altijd op een echte telefoon:

• Kun je elk item met je duim raken, zonder per ongeluk het item ernaast te raken?
• Gaan submenu's open met een tik, en weer dicht?
• Sluit het menu als je een item kiest?

Voor toegankelijkheid (bezoekers met een schermlezer of die alleen het toetsenbord gebruiken) let je op:

• Duidelijke linkteksten. "Lees meer" of "Klik hier" zegt niets als een schermlezer alle links achter elkaar voorleest. "Lees meer over onze openingstijden" wel.
• Bedienen met het toetsenbord: met Tab door het menu, met Enter een item openen. De meeste thema's en het navigatieblok doen dat goed; zelfgemaakte menu's met scripts vaak niet.
• Een link naar een andere site opent liefst in hetzelfde venster. Moet het in een nieuw venster, zeg dat er dan bij.

Andere navigatie

Naast het hoofdmenu helpen deze onderdelen bezoekers hun weg te vinden:

• een zoekveld (het zoekblok), zeker bij een site met veel berichten;
• broodkruimels ("Home > Diensten > Webdesign"), vaak geleverd door een SEO-plugin of het thema;
• interne links in je teksten naar andere pagina's (ook goed voor vindbaarheid, les 9.2);
• een 404-pagina die helpt: met een zoekveld en links naar de belangrijkste pagina's in plaats van alleen "niet gevonden". Bij een blokthema bewerk je die als sjabloon "404" in de Site-editor.

In de praktijk: zo ziet het eruit in een paneel

In het beheer van WordPress:

• Blokthema: Weergave > Editor > Navigatie. Kies het menu, voeg items toe met het plusje, sleep ze in de goede volgorde, en kies bij de instellingen van het navigatieblok wanneer het mobiele menu verschijnt.
• Klassiek thema: Weergave > Menu's. Maak een menu, vink links pagina's aan en klik op Toevoegen aan menu, sleep de volgorde, en vink onderaan de menulocatie aan. Opslaan.

Samenvatting

• In een blokthema maak je het menu met het navigatieblok in de Site-editor; in een klassiek thema bij Weergave > Menu's met een menulocatie.
• Een menu wijst de weg naar een paar belangrijke plekken: weinig items, hooguit één laag submenu.
• Juridische links horen in een voettekstmenu, altijd vindbaar.
• Test het mobiele menu op een echte telefoon en gebruik linkteksten die op zichzelf iets zeggen.
• Een zoekveld, interne links en een behulpzame 404-pagina vullen het menu aan.

Quiz

Opdracht

Opdracht D4.3: Een menu dat werkt. Maak (of verbeter) het hoofdmenu van je site met hooguit zeven hoofditems, één submenu en één aangepaste link, en een voettekstmenu met je privacyverklaring. Test het mobiele menu op je telefoon en met alleen het toetsenbord (Tab en Enter). Vink af wat werkt en noteer: welk soort thema heb je (blok of klassiek), waar heb je het menu gemaakt, en welke linktekst heb je verbeterd en hoe?

Verder lezen

Voor het werken in WordPress zelf hebben we nog geen eigen artikelen; de officiële documentatie van WordPress is uitgebreid.

• Navigatieblok (wordpress.org, Engels): https://wordpress.org/documentation/article/navigation-block/
• Menu's in klassieke thema's (wordpress.org, Engels): https://wordpress.org/documentation/article/appearance-menus-screen/
• Site-editor (wordpress.org, Engels): https://wordpress.org/documentation/article/site-editor/