Bij het ontwerpen van uw website in WordPress-blokthema’s is het u misschien opgevallen dat de hoofdnavigatie voor uw site beperkte stijlopties heeft. Wanneer u bijvoorbeeld op een paginalink in uw hoofdnavigatie klikt om een ​​pagina op uw website te bezoeken, verandert de link voor de actieve pagina niet van kleur binnen de hoofdnavigatie. Met andere woorden: er is voor de gebruiker geen indicatie op welke pagina hij zich momenteel bevindt.

Goede gebruikerservaring betekent dat sitebezoekers altijd een indicatie moeten hebben van waar ze zich op uw site bevinden – dit helpt voorkomen dat ze verdwalen.

In deze zelfstudie laat ik u zien hoe u snel uw sitenavigatie in WordPress-blokthema's kunt aanpassen om een ​​aangepaste kleur voor de actieve pagina weer te geven. Ik gebruik het Twenty Twenty Four-thema voor deze demonstratie.

Stap 1: Navigeer naar de blokeditor

Ga vanuit uw WordPress Dashboard naar Uiterlijk>Editor (rode pijl in de bovenstaande foto). Hiermee gaat u naar de Site-editor.

Klik op het gebied met de hoofdinhoud rechts van het menu. Dit brengt je naar de Block Editor.

Stap 2: Voeg aangepaste CSS toe

Klik vervolgens op het pictogram “Stijlen” ​​in de rechterbovenhoek van de Blokeditor.

Klik op het pictogram 'Meer' (het verticale pictogram met drie stippen) en klik vervolgens op 'Extra CSS'.

Plak de volgende CSS-code in het tekstvak 'Aanvullende CSS':

.current-menu-item {
  color: #e23f1b;
}

Vervang de waarde tussen het “#” symbool en de “;” symbool met de hexadecimale code voor elke kleur die u wilt gebruiken (u kunt hexadecimale kleurcodewaarden binnen WordPress verkrijgen door alles te bewerken dat een kleurwaarde heeft, of door een kleurentool te gebruiken zoals HueMint or Coolors).

Klik op de knop ‘Opslaan’ bovenaan de Blokeditor en klik vervolgens nogmaals op ‘Opslaan’.

Stap 3: Pagina bekijken

Nu uw wijzigingen zijn opgeslagen, kunt u nu op het pictogram 'Pagina bekijken' klikken om een ​​voorbeeld van uw site te bekijken met de nieuwe kleur voor de actieve pagina in uw hoofdnavigatie.

Probleem oplossen

Als de bovenstaande code niet voor u werkt, gebruikt u mogelijk een thema dat verschillende klassen gebruikt voor actieve menu-items, of gebruikt u mogelijk aangepaste links in uw navigatieblok in plaats van paginalinks.

Niet-blokthema's of blokthema's van derden

Om het eerste probleem op te lossen, moet u de tool 'inspecteren' in uw browser gebruiken en uitzoeken welke klasse wordt gebruikt voor actieve paginalinks in uw hoofdnavigatie (u kunt ook proberen te Googlen 'Welke klasse gebruikt ____ thema voor actieve paginalinks in de hoofdnavigatie”).

Voor het laatste probleem wijzigt u eenvoudigweg uw aangepaste links naar paginalinks in de Site-editor. Om dit vanuit de Block Editor te doen, klikt u op het logo in de linkerbovenhoek van de editor (dit zal het WordPress-logo of het logo van uw site zijn).

Klik vervolgens op ‘Navigatie’. Klik op het pictogram 'Bewerken' naast de naam van het hoofdmenu van uw site.

Klik op het navigatiemenu om het te bewerken. Klik vervolgens op ‘Ga naar bovenliggend navigatieblok’ in de zijbalk Blokinstellingen als dit daar niet standaard staat.

Onder de kop 'Menu' in de zijbalk Blokinstellingen ziet u een lijst met al uw pagina's die zich in uw hoofdnavigatie bevinden. Als u sitepagina's in de navigatie heeft die als aangepaste link worden vermeld (zoals het onderste item in de voorbeeldfoto), moet u het item verwijderen en opnieuw toevoegen als pagina (indien mogelijk).

Om dit te doen, klikt u op het pictogram 'Opties' naast het item en vervolgens op 'Verwijderen ____'. Klik vervolgens op het pictogram “+” onder aan de paginalijst.

Klik vervolgens op 'Paginalink' en zoek de pagina die u wilt toevoegen. Nadat u de pagina heeft toegevoegd, klikt u op 'Opslaan' en nogmaals op 'Opslaan'. Het probleem moet worden opgelost.