X

So heben Sie die aktuelle Seite im WordPress-Navigationsmenü hervor

Schnipsel von IsItWP

Möchten Sie die aktuelle Seite im Navigations- oder Sidebar-Menü hervorheben? Das Hervorheben der aktuellen Seite erleichtert die Navigation.

WordPress-Menüfunktionen (wp_nav_menu, wp_list_pages) fügen automatisch die Klasse current_page_item zu li hinzu, die den aktiven Link enthält. Wir müssen also nur diese Klasse verwenden, um die aktuelle Seite hervorzuheben.

Anweisungen:

Sie müssen nur diesen Code zu Ihrer style.css-Datei des Themes hinzufügen:

/* Highlight using list element */
li.current_page_item{
	background:#999;
	color:#fff;
}

/* Highlight using link element */
li.current_page_item a{
	text-decoration:underline;
	background:#666;
}

Hinweis: Wenn Sie zum ersten Mal Code-Schnipsel in WordPress hinzuf ilde{A}gen, lesen Sie bitte unseren Leitfaden, wie Sie Code-Schnipsel richtig in WordPress kopieren / einf ilde{A}gen, damit Sie Ihre Website nicht versehentlich besch ilde{A}digen.

Wenn Ihnen dieser Code-Schnipsel gefallen hat, sollten Sie sich auch unsere anderen Artikel auf der Website ansehen, wie zum Beispiel: Die besten WordPress-Seitenersteller (im Vergleich).

[code]/* Hervorhebung mit Listenelement */ li.current_page_item{ background:#999; color:#fff; } /* Hervorhebung mit Linkelement */ li.current_page_item a{ text-decoration:underline; background:#666; }[/code]

Kommentare   Hinterlasse eine Antwort

  1. Wo finde ich die „style.css-Datei des Themes“ in der kostenlosen Version von WordPress?

  2. Danke. Ich habe an einigen Stellen gesucht, aber Ihre Lösung hat funktioniert. Ich weiß es wirklich zu schätzen!

    1. Hallo Robert, es freut uns, dass unsere Lösung für Sie funktioniert hat.

      Folgen Sie uns auf Facebook und Twitter für weitere interessante Anleitungen. :)

  3. Funktioniert gut, danke!

  4. Dieser Code funktioniert, wenn das Menü eine Ebene hat. Andernfalls werden die Links der ersten Ebene und alle Unterkategorien darin hervorgehoben.
    Zum Beispiel wären Sie bei „Home>About>News“ und es würden alle „Home“-Kategorien hervorgehoben, anstatt nur „News“.

  5. Mein Theme fügt die CSS-Klasse `.current-menu-item` hinzu.

    Kann je nach Theme unterschiedlich sein, aber der Prozess ist immer derselbe.

  6. funktioniert wie ein Zauber und hat mir wertvolle Zeit gespart. Danke

  7. Vielen Dank!!!!

  8. Hallo Sir, es ist gut, aber ich möchte die Linkfarbe ändern, nicht die Hintergrundfarbe. Bitte helfen Sie mir.

    1. Die Farbe wird durch die color-Eigenschaft gesteuert, wie zum Beispiel:

      li.current_page_item a{
      color:#666;
      }

  9. Ich denke, Sie müssen dies nur zu Ihrem CSS hinzufügen und nicht zur functions.php-Seite. Es hat in meinem CSS gut funktioniert.

    Danke

    1. Danke, der Ausschnitt wurde nun aktualisiert.

Kommentar hinzufügen

Wir freuen uns, dass Sie einen Kommentar hinterlassen haben. Bitte beachten Sie, dass alle Kommentare gemäß unserer Datenschutzrichtlinie moderiert werden und alle Links nofollow sind. Verwenden Sie KEINE Schlüsselwörter im Namensfeld. Lassen Sie uns ein persönliches und bedeutungsvolles Gespräch führen.

WordPress Launch Checkliste

Die ultimative Checkliste für den Start von WordPress

Wir haben alle wichtigen Checklistenpunkte für den Start Ihrer nächsten WordPress-Website in einem praktischen E-Book zusammengefasst.
Ja, senden Sie mir das kostenlose E-Book!