Ontdek hoe je Snel & Simpel een WordPress menu aanpast voor een betere navigatie en volledig uw eigen menu maakt. Wijzig kleuren, verplaats items, maak een sticky menu en nog veel meer.
Bent u beginner met WordPress? Dan is een van de eerste vragen meestal hoe men een WordPress menu kan aanpassen. Dat is logisch, want de navigatie is een van de belangrijkste elementen van elke website.
Een goed, duidelijk en opvallend menu wijst bezoekers de weg en verbetert de gebruiksvriendelijkheid. Of maakt uw site juist minder plezierig, want dat kan natuurlijk ook.
Zoekt u manieren om het navigatiemenu op uw WordPress website aan te passen? Dan vindt u in dit artikel alle ins en outs.
We kijken bij het aanpassen van uw WordPress menu naar inhoud, ontwerp en positie. Met de tips maakt u het ideale menu voor uw bezoekers. Zo vinden ze sneller wat ze zoeken, blijven ze langer op uw site en verbetert u indirect uw SEO.
Er staat veel op het menu, dus laten we snel van start gaan met het aanpassen van uw menu.
Zo voegt u menu’s toe in het WordPress Admin Dashboard
We beginnen eenvoudig, met het toevoegen van een menu in WordPress.
Onder Weergave > Menu’s kunt u menu’s aanmaken, aanpassen, toewijzen aan locaties en verwijderen. Laten we dit stap voor stap doen.
Opmerking. Menu’s kunt u ook aanpassen via Weergave > Customizer > Menu’s. Past u hier een menu-item aan, dan voert WordPress de wijziging meteen visueel door. Klikt u op Publiceren, dan zijn de wijzigingen definitief.
Voeg menu-items toe
Via ‘Weergave > Menu’s’ ziet u bestaande menu’s die u kunt aanpassen. Is er nog geen menu aanwezig? Klik dan op de link boven in beeld met deze tekst:
‘Bewerk uw menu hieronder of maak een nieuw menu’
Klik daarna op de blauwe knop ‘Menu opslaan’.
Via de knop ‘Items toevoegen’, voegt u onderdelen toe aan uw menu. Dit kunnen zijn:
- Berichten
- Pagina’s
- Aangepaste links
- Categorieën
- Tags
Zet een vinkje voor een pagina of bericht. Meerdere vinkjes zijn mogelijk. Klik vervolgens op de knop ‘Aan menu toevoegen’. Je ziet het item nu in het menu staan.
Berichten en Categorieën voegt u op dezelfde manier toe, alleen is de inhoud anders. Met de optie ‘Aangepaste links’ kunt u zelf een URL opgeven. Dit kan ook de URL van een andere website zijn.
Pas menu-labels aan
In de rechterhelft van het scherm ziet u het menu als blokjes onder elkaar staan. Die kunt u verslepen en om zo de volgorde aan te passen. Sleept u een blokje schuin onder een bestaand blokje? Dan wordt het een sub-item. Op deze manier maakt u uitklapmenu’s.
Bent u tevreden met het menu, bevestig dit dan via een klik op de knop ‘Menu opslaan’.
Klikt u op een pijltje bij de een menu-item, dan ziet u extra opties. U kunt o.a. het Navigatielabel aanpassen. Dit is de naam van een menu-item.
Hier kunt u ook items verwijderen of de URL van een aangepaste link aanpassen. Vergeet na afloop niet het menu op te slaan.
Gebruik de schermopties (eerst even aanzetten)
Bovenaan de pagina vind je de knop ‘schermopties’. Klik hierop en open het menu.
Onder ‘schermopties’ vindt u extra mogelijkheden om menu items aan te passen. Wilt u bijvoorbeeld de optie om links in een nieuw tabblad te openen? Zet dan een vinkje bij ‘Linkdoel’.
Bij menu-items ziet u voortaan een vakje om links te openen in een nieuw tabblad. Zet een vinkje als u dit wilt.
Ondersteunt uw WordPress-thema een omschrijving bij menu-items? Activeer dan de optie ‘Beschrijving’. U kunt nu een kort tekstje opgeven bij relevante menu-items.
Publiceer uw menu
Bent u tevreden met uw keuzes en de inhoud van het menu, dan kunt u hem publiceren.
Dit kan op 2 manieren.
1. Kies locatie menu onder Menu Instellingen
Onder ‘Menu instellingen’ geeft u op waar u het menu wilt laten zien. De opties verschillen per thema, maar er is bijna altijd een Primair menu aanwezig. Selecteer dit, klik op ‘Menu opslaan’ en open uw site in de browser. U ziet nu waar uw thema het menu toont.
Experimenteer ook met de andere opties, zoals ‘Secundair menu’ en ‘Footer menu’. Bekijk waar het menu dan getoond wordt.
2. Wijs menu toe via knop Locaties beheren
Bovenin beeld staat een knop ‘Locaties beheren’. Klikt u hierop, dan kunt u ook menu’s selecteren en toewijzen.
Opmerking. Menu’s kunt u ook toewijzen aan een widgetgebied op uw site, bijvoorbeeld in de footer. Ga daarvoor naar:
Weergave > Widgets
Selecteer nu een beschikbaar widgetgebied, bijvoorbeeld ‘Footer één’. Klik op de + om een nieuw blok te selecteren en zoek ‘Navigatiemenu’.
Selecteer het juiste menu, en het verschijnt voortaan ook in de footer.
Menu’s kunt u ook toewijzen aan een widget-plek. In dit geval ‘Footer één’. U ziet het menu nu (ook) onderaan de pagina.
Pas uw WordPress menu’s volledig aan (voor gevorderden)
U weet nu hoe u een WordPress-menu toevoegt aan uw site en ze wijzigt. Maar u kunt nog veel meer. Laten we daarom wat dieper duiken. Bent u niet zo’n held met CSS? Vraag dit aan uw webmaster. Met de volgende stap past u uw WordPress menu nog verder aan.
Voor de voorbeelden gebruiken we het gratis thema Neve van ThemeIsle. Gebruikt u een ander thema, dan kunnen dingen net even anders werken. Maar daar komt u eenvoudig achter en we laten zo dadelijk zien hoe.
Vind de juiste CSS-code
Wilt u een WordPress navigatiemenu stylen dan doet u dit via CSS. Dit is de opmaakcode van uw site en met CSS bepaalt u onder andere kleuren, lettergrootte en type, effecten en meer.
Tip. Maak een ‘Child Theme’ aan, voordat u de wijzigingen doorvoert. Dan blijven de wijzigingen ongemoeid bij een update van uw WordPress-theme.
👉 Lees het artikel: Child Themes in WordPress: Zo werkt uw template altijd perfect
CSS werkt met stukjes code. Die code bepaalt o.a. de opmaak van een menu of een menu-item.
Gebruikt u Google Chrome als browser, dan kunt u elementen inspecteren en relevante code bekijken. Klik met de rechtermuisknop een element aan, bijvoorbeeld de menuknop Home. Selecteer uit het menu de optie ‘Inspect Element’.
Google Chrome opent nu de Developer Tools en hier ziet u de gebruikte HTML- en CSS-code voor de knop. U weet nu welke code U moet aanpassen in het thema, om bijvoorbeeld de kleur van de knop te wijzigen.
Filter In het venster ‘Styles’ op het commando color. U ziet nu welke kleuren de stylesheet gebruikt voor het thema. Klikt u op een gekleurd blokje, dan krijgt u een ‘color picker’. Hiermee kunt u een andere kleur selecteren, bijvoorbeeld rood.
In het voorbeeld ziet u nu dat menu-items niet meer grijs, maar rood zijn.
Gaat u op de URL van een stylesheet staan? Dan ziet u in welk bestand u de kleurcode moet aanpassen, om de kleur definitief te wijzigen.
💡 Tip. CSS-bestanden kunt u wijzigen via Weergave > Thema editor.
Kijk wel uit met wat u doet, want maakt u een foutje, dan werkt uw site mogelijk niet meer. Dit kunt u meestal eenvoudig herstellen, maar u zult er toch van schriken. Zorg daarom altijd voor een back-up en gebruik zeker weten een Child Theme.
💡 Tip. In Developer Tools bekijkt u eenvoudig hoe wijzigingen uitpakken op verschillende apparaten. Dit doe je hier:
Wijzig uw menukleuren
Het veranderen van de kleuren van menu’s is eenvoudig en kan op verschillende manieren.
Als eerste is er de achtergrondkleur van een menu. Vaak is dit een onderdeel van de Header. Vind via Developer Tools code het stukje code voor de Header, dan kunt u de code wijzigen.
Deze manier werkt niet altijd. Soms heeft een theme ook een eigen navigatiebalk. In dat geval moet u het wrapping element van het menu zelf aanpassen.
Ga via Developer Tool weer op zoek naar de juiste code en filter eventueel op color. Zegt de code u niets, wijzig dan verschillende kleuren tot u de juiste gevonden hebt.
Met dit stukje code wijzig je in het thema van Neve de achtergrondkleur naar blauw.
💡 Opmerking. In Developer Tools kunt u kleurcodes aanpassen, maar dit is puur visueel. De tool slaat de wijzigingen niet op. Daarvoor moet u ze eerst opslaan in het CSS-bestand van uw Child Thema.
Maak een sticky menu
Een WordPress navigatiemenu’s staat meestal bovenaan de site, en verdwijnt uit beeld als u naar beneden scrollt. Met een sticky menu blijft het menu bovenaan staan
Een Sticky Menu kan erg handig zijn om bezoekers altijd toegang te geven tot de topnavigatie.
Een sticky menu kunt u op 3 manieren activeren.
1. Veel WordPress-themes hebben een sticky-optie. In dat geval is het kwestie van een vinkje zetten, en klaar bent u.
2. U kunt een menu sticky ook maken met CSS-code. Dat lijkt moeilijk, maar in deze video ziet u precies hoe het werkt.
3. Een derde optie is het installeren van een plugin. Een goede voorbeeld is myStickymenu. In deze video ziet u hoe de plugin werkt en hoe u hem instelt.
Hebt u weinig ervaring met programmeren, dan is de plug-in de snelste optie. Maar het is wel weer een toevoeging aan uw site, die daardoor weer wat trager laadt en kwetsbaarder is voor hackers. Probeer daarom eerst naar 1 en 2.
Hoe uw WordPress (navigatie) menu aanpassen?
Site navigatie is onmisbaar voor elke WordPress website. Stelt u menu’s niet goed in, dan is uwite praktisch onbruikbaar.
UJe kunt op verschillende manieren wijzigingen aanbrengen in navigatie menu’s.
In WordPress zelf, met plug-ins en met code. Met de tips uit dit artikel en de vele handige video’s op YouTube maakt u in no-time de beste menu’s voojouw site. Wat heeft uw voorkeur voor het aanpassen van uw WordPress menu’s ?
Reacties
No comments yet.