öffentlich
Redaktion Druckversion

Eigenes WordPress-Theme erstellen

4.82143
(28)
Beitrag bewerten
Kommentar schreiben
Stand: 16. Juni 2014

Das Wordpress-Theme erweitern

Aktuellen Menüpunkt hervorheben und Startseiten-Link anzeigen

Um die Ausgabe des Seiten-Menüs zu realisieren, stehen Ihnen mehrere Lösungen hilfreich zur Seite. Der Template-Tag wp_ page_menu (''); welches Sie schon kennengelernt haben ist eines davon. Dieser tut zwar seinen Dienst sehr zuverlässig, hat aber den Nachteil, dass er nicht automatisch den Link zur Startseite ausgibt. Daher muss man ihn um einen zusätzlichen Parameter erweitern :

Link zur Startseite:

<<div id="hauptnavi"><?php wp_page_menu('show_home=Startseite&depth=1'); ?></div><!-- /#hauptnavi -->

Den relevanten Abschnitt habe ich hervorgehoben. Mit dem Parameter show_home erreichen wir, dass der Link zur Startseite mit im Menü ausgegeben wird und der Wert Startseite ist die Bezeichnung des Verweises zur Startseite. Sie können hier gerne auch ein eine individuelle Bezeichnung wählen. Der obere Code bewirkt folgendes im Quelltext:

Die Ausgabe im HTML-Quelltext:

<div id="hauptnavi">
 <ul>
 <li class="current_page_item"><a href="http://www.webwork-tools.de/">Startseite</a></li>
 <li class="page_item page-item-459"><a href="http://www.webwork-tools.de/werkzeuge-fuers-web/" title="Werkzeuge fürs Web">Werkzeuge fürs Web</a></li>
 <li class="page_item page-item-2"><a href="http://www.webwork-tools.de/ueber-uns/" title="Über uns">Über uns</a></li>
 <li class="page_item page-item-4"><a href="http://www.webwork-tools.de/impressum/" title="Impressum">Impressum</a></li>
 </ul>
</div><!-- /#hauptnavi -->

Aktuellen Menüpunkt hervorheben

Nun stet uns der Klassen-Selektor .current_page_item zur Verfügung um den aktuellen Menüpunkt hervorzuheben. In unserem Fall reicht folgende Ergänzung der schon bestehenden CSS-Regel:

#hauptnavi li a:hover, #hauptnavi .aktiv, #hauptnavi .current_page_item a {
 text-decoration: underline;
}

Haben Sie das Seitenmenü verschachtelt, also in mehrere Ebenen verteilt, dann möchten Sie bestimmt die entsprechende Eltern-Seite, der aktuellen Kind-Seite, ebenfalls hervorheben. Hierfür steht Ihnen .current_page_parent a {…} zur Verfügung.

Mitglied werden, Vorteile nutzen!

  • Sie können alles lesen und herunterladen: Beiträge, PDF-Dateien und Zusatzdateien (Checklisten, Vorlagen, Musterbriefe, Excel-Rechner u.v.a.m.)
  • Unsere Autoren beantworten Ihre Fragen

Downloads zu diesem Beitrag

Newsletter abonnieren