Ein Besucher landet auf Ihrer Website, öffnet die Seite „Leistungen" und kann auf den ersten Blick nicht erkennen, wo er sich befindet. Die Menüpunkte sehen identisch aus. Es gibt keinen aktiven Zustand. Das ist kein WordPress-Fehler; standardmäßig ist ein Theme nicht verpflichtet, den aktuellen Eintrag hervorzuheben. Aber ein paar Zeilen CSS beheben das Problem in weniger als einer Minute.

WordPress weist jedem Menüpunkt seit Version 3.0 automatisch eine Reihe von CSS-Klassen zu. Drei davon signalisieren: „Der Nutzer befindet sich gerade auf dieser Seite oder in diesem Bereich." Sie müssen nur die Stile schreiben, und die Navigation wird ohne einen einzigen Klick klar verständlich.

💡 Kurzüberblick:

• Öffnen Sie den Inspektor Ihres Browsers und ermitteln Sie den CSS-Selektor für das Menü Ihrer Website
• Fügen Sie 3-5 Zeilen CSS im Customizer oder in der style.css ein, die auf die Klassen .current-menu-item, .current-page-ancestor und .current-post-ancestor abzielen
• Hat die Website mehrere Menüs, verfeinern Sie den Selektor, sodass die Hervorhebung nur auf das Hauptmenü wirkt
• Bei Block-Themes (FSE) ist das Vorgehen dasselbe, CSS wird jedoch über den Website-Editor eingefügt

Welche Klassen WordPress den Menüpunkten zuweist

Wenn WordPress ein Menü über wp_nav_menu() ausgibt, erhält jedes <li>-Element mehrere Klassen. Hier sind die drei, die den aktiven Zustand steuern:

.current-menu-item wird dem Eintrag zugewiesen, dessen Link auf die aktuelle Seite zeigt. Rufen Sie „Kontakt" auf, und der Menüpunkt „Kontakt" erhält diese Klasse. Der direkteste und am häufigsten genutzte Fall.

.current-page-ancestor greift, wenn der Nutzer sich auf einer Unterseite befindet, während der Menüpunkt auf die übergeordnete Seite verweist. Beispiel: Das Menü enthält „Portfolio" und der Besucher liest eine Fallstudie innerhalb dieses Bereichs. Der übergeordnete Eintrag „Portfolio" erhält die Ancestor-Klasse, sodass Sie auch ihn hervorheben und anzeigen können, in welchem Bereich der Website sich der Nutzer befindet.

.current-post-ancestor folgt demselben Konzept, jedoch für Beiträge und Kategorien. Verlinkt ein Menüpunkt auf die Kategorie „News" und der Leser öffnet einen bestimmten Artikel aus dieser Kategorie, trägt der Eintrag „News" diese Klasse.

WordPress weist alle drei Klassen automatisch zu. Sie müssen keine PHP-Bedingungen schreiben oder Templates manuell bearbeiten, anders als in der WP-2.9-Ära und davor, als jeder Link in eine if-Abfrage gegen die aktuelle URL verpackt werden musste. Heute können Sie einfach den Inspektor öffnen und nachsehen, welche Klasse bereits am gewünschten Element anliegt.

Schritt 1: Den Menü-Selektor finden

Öffnen Sie Ihre Website, drücken Sie F12 (Entwicklertools) und suchen Sie das <ul>- oder <nav>-Element, das die Menüpunkte enthält. Es sieht üblicherweise so aus:

1
<ul id="primary-menu" class="menu">
2
  <li class="menu-item ... current-menu-item">
3
    <a href="/about">О нас</a>
4
  </li>
5
</ul>

Notieren Sie die Kennung (#primary-menu) oder Klasse (.main-navigation) Ihres Menüs. Diesen Selektor verwenden wir im nächsten Schritt, um den Geltungsbereich des CSS einzugrenzen.

In klassischen Themes werden Menüs meist über wp_nav_menu() mit einem theme_location-Argument wie 'primary' ausgegeben. Die CSS-Klassen werden von der Funktion nav_menu_css_class zugewiesen, und ein gleichnamiger Filter erlaubt Entwicklern, Klassen programmatisch hinzuzufügen oder zu entfernen. Für die einfache Hervorhebung ist jedoch kein Code nötig, nur CSS.

Schritt 2: Das Hervorhebungs-CSS einfügen

Der einfachste und sicherste Weg ist, die Stile über den integrierten Customizer einzufügen. Gehen Sie im WordPress-Adminbereich zu Design → Customizer → Zusätzliches CSS.

Kopieren Sie den folgenden Code und fügen Sie ihn ein:

1
.current-menu-item > a {
2
  color: #ffffff;
3
  background: #2271b1;
4
  border-radius: 4px;
5
  padding: 6px 14px;
6
}

Was dieser Code bewirkt: Erhält ein Menüpunkt die Klasse .current-menu-item, ändert sich die Textfarbe seines Links auf Weiß und der Hintergrund auf Blau, zudem wird eine leichte Abrundung vorgenommen. Das Ergebnis ist sofort in der Customizer-Vorschau sichtbar, noch vor dem Speichern.

Für eine feinere Steuerung können Sie auch Ancestors hervorheben:

1
.current-menu-item > a,
2
.current-page-ancestor > a,
3
.current-post-ancestor > a {
4
  border-bottom: 3px solid #2271b1;
5
  color: #2271b1;
6
}

Hier gibt es statt einer Flächenfüllung eine Unterstreichung mit einem blauen Balken. Diese Variante wirkt in minimalistischen Themes aufgeräumter.

Schritt 3: Den Geltungsbereich eingrenzen

Hat Ihre Website mehrere Menüs (Hauptmenü im Header, Sekundärmenü im Footer, ein Widget-Menü in der Sidebar), hebt das CSS aus dem vorherigen Schritt den aktiven Eintrag überall hervor. Das ist selten erwünscht.

Stellen Sie dem Klassen-Selektor die ID oder Klasse des spezifischen Menüs voran, das Sie in Schritt 1 ermittelt haben:

1
#primary-menu .current-menu-item > a {
2
  background: #2271b1;
3
  color: #ffffff;
4
}

Jetzt wirkt die Hervorhebung nur innerhalb des Elements mit id="primary-menu". Andere Menüs auf der Website bleiben unverändert.

Verwendet Ihr Theme eine Klasse statt einer ID, schreiben Sie .main-navigation .current-menu-item > a. Das Prinzip ist dasselbe.

Wie sieht es mit Block-Themes (FSE) aus?

Bei blockbasierten Themes (Twenty Twenty-Four, Twenty Twenty-Five und ähnlichen) gibt es keinen klassischen Customizer mit einem Feld für zusätzliches CSS. Menüs werden über den Navigationsblock erstellt.

CSS wird über den Website-Editor eingefügt: Design → Editor → Stile → drei Punkte (Menü) → Zusätzliches CSS. Der Code ist exakt derselbe; WordPress weist die Klassen .current-menu-item und die weiteren auch in Block-Themes zu.

Der Unterschied liegt im Selektor. Bei FSE ist der Menü-Wrapper ein <nav> mit einer Klasse wie .wp-block-navigation. Prüfen Sie den Selektor über den Inspektor und stellen Sie ihn den Aktiv-Klassen voran:

1
.wp-block-navigation .current-menu-item > a {
2
  border-bottom: 2px solid #2271b1;
3
}

Läuft Ihre Website mit einem modernen Theme und das Menü wird nicht „von Haus aus" hervorgehoben, prüfen Sie, ob das Theme selbst Link-Zustände über :hover und :focus überschreibt, ohne Stile für .current-menu-item vorzusehen. Die Lösung besteht darin, einen Selektor mit gleicher Spezifität hinzuzufügen.

Weitergehende Menü-Anpassungen (von Mega-Menüs bis zur mobilen Navigation) behandelt ein separater Artikel. Er enthält auch eine Plugin-Übersicht für Fälle, in denen CSS nicht mehr ausreicht: von kostenlosen Buildern bis zu professionellen Lösungen mit Rastern und Icons.

⁉️🤔 Häufig gestellte Fragen

Warum wird das Menü nicht hervorgehoben, nachdem ich das CSS eingefügt habe?

Die häufigste Ursache ist, dass der Selektor nicht mit der tatsächlichen HTML-Struktur übereinstimmt. Öffnen Sie den Inspektor (F12), klicken Sie auf den aktiven Menüpunkt und prüfen Sie: Trägt das <li> die Klasse .current-menu-item? Fehlt die Klasse, betrachtet WordPress diese Seite für diesen Eintrag nicht als „aktuell". Das kann bei benutzerdefinierten Beitragstypen oder Plugins vorkommen, die die Menülogik überschreiben. Lösung: Registrieren Sie den benutzerdefinierten Typ mit 'show_in_nav_menus' => true oder fügen Sie Unterstützung über den Filter nav_menu_css_class hinzu.

Kann ich einen Menüpunkt für jede Seite mit einer anderen Farbe hervorheben?

Ja. WordPress fügt jedem Eintrag eine eindeutige Klasse wie .menu-item-{ID} hinzu, zum Beispiel .menu-item-42. Nutzen Sie den Inspektor, um die ID des gewünschten Eintrags zu finden, und schreiben Sie: .menu-item-42 > a { background: #d63638; }. So können Sie das Menü farblich passend zu den Website-Bereichen kodieren.

Wie hebe ich einen Menüpunkt hervor, wenn es sich um einen externen Link oder einen Anker handelt?

Ein externer Link erhält kein .current-menu-item, da er auf eine andere Website verweist und WordPress ihn nicht als „aktuell" identifizieren kann. Bei Ankern innerhalb derselben Seite greift die Klasse ebenfalls nicht. Fügen Sie in diesen Fällen dem Eintrag manuell eine eigene CSS-Klasse hinzu: Design → Menüs → Ansicht anpassen → CSS-Klassen aktivieren, dann tragen Sie Ihre Klasse in den Eintragseinstellungen ein und gestalten sie.

Ist es sicher, CSS über das Feld „Zusätzliches CSS" im Customizer einzufügen?

Ja. Stile aus diesem Feld werden in der Datenbank gespeichert und gehen bei einem Theme-Update nicht verloren, anders als Bearbeitungen an der style.css eines Child-Themes, die versehentlich überschrieben werden können. Das Feld ist seit WordPress 4.7 verfügbar und wird von praktisch allen klassischen Themes unterstützt.

Lohnt sich der Aufwand: Zusammenfassung in drei Zeilen

Die Hervorhebung des aktiven Menüpunkts ist keine Designer-Laune, sondern eine navigatorische Grundanforderung. Ohne sie brauchen Besucher wertvolle Sekunden, um sich zu orientieren. Mit ihr ist die Website-Struktur auf einen Blick klar.

Die Aufgabe wird vollständig von drei Klassen erledigt: .current-menu-item, .current-page-ancestor und .current-post-ancestor. Sie passt in fünf Codezeilen. Die Umsetzung dauert drei Minuten über den Customizer.

Benötigen Sie mehr (nicht standardgemäßes Menüverhalten, bedingte Hervorhebung nach Benutzerrolle oder eigene Indikatoren), lesen Sie die Übersicht mit über 15 Menü-Plugins. Für die einfache Hervorhebung genügt CSS.