Manchmal ergibt sich die Notwendigkeit bei Websites den jeweils aktiven Menüpunkt des Hauptmenüs speziell zu kennzeichnen oder entsprechend erkenntlich zu machen, damit Website-Besucher auf einen Blick wissen, auf welcher Seite der Website sie sich aktuell befinden. Dabei handelt es sich um den jeweils aktiven Menüpunkt, der in WordPress mit CSS grundsätzlich sehr einfach optisch bearbeitet werden kann. In diesem Beitrag zeige ich, wie man den jeweils aktiven Menüpunkt optisch in WordPress-Websites hervorheben kann.
Zunächst sollte man wissen, ob das jeweilig verwendete WordPress-Theme eventuell die einfache Möglichkeit besitzt, den jeweils aktiven Menüpunkt separat zu stylen (zB die Farbe anpassen, ..). Dies kann man über den Customizer (in der Regel ../wp-admin/customize.php) herausfinden. Ist das nicht der Fall, dann kann man ebenfalls über den Customizer (linke Seitenleiste, Menüpunkt: „Zusätzliches CSS“) einen CSS-Code einfügen, der es ermöglicht den jeweils aktiven Menüpunkt optisch zu ändern.
current_page_item
Das funktioniert mit der CSS-Klasse „.current_page_item“. Da es sich beim Menüpunkt um einen Link handelt, muss man somit auch ein „a“ noch hinzufügen. Daraus ergibt sich folglich für den CSS-Code: „.current_page_item a“.
Nun kann man grundsätzlich bereits die Parameter für diese Klasse definieren, wie zum Beispiel: Link-Farbe in schwarz:
.current_page_item a {
color: #000 !important;
}
Nun ist es folglich auch möglich, viele andere Dinge zu tun, um den jeweils aktiven Menüpunkt optisch hervorzuheben, wie zum Beispiel das Ändern der background-color, Schriftstil (underline, etc..), font-size, und Vieles mehr. Ich hoffe, damit geholfen zu haben und freue mich auf Feedback oder eine Google Bewertung, wenn dieser Beitrag ein Problem lösen – oder eine Anforderung erfüllen – konnte. Sollten Sie dennoch Unterstützung bei Ihrer WordPress-Website benötigen, senden Sie mir Ihre Anfrage.
Achtung: Diese Anleitung gilt für WordPress-Websites und nicht grundsätzlich für jedes System.
