wp_list_pages: Aktive Seiten hervorheben. (WP-Tutorial)
Ich bin jetzt schon einigemale gefragt worden, wie ich es in diesem Design schaffe, das die Aktive Seite Hervorgehoben wird.
Nun, ich mache es nicht Manuel, sondern Arbeite mit dem Template Tag wp_list_pages(); der von Hause aus 4 CSS-Selektoren mitbringt.
wp_list_pages(); bringt eigene CSS Klassen Attribute mit, die es mir mithilfe der style.css (in meinen fall die nav_sidebar.css & nav_topbuttons.css) es ermöglicht die jeweils Aktiven Seiten Hervorzuheben.
Folgende CSS Klassen Attribute stehen dabei zur verfügung:
.pagenav
.page_item
.current_page_item
.current_page_parent
Denn CSS Klassen Attribut .pagenav behandel ich hier mal nicht, denn für das Hervorheben der Aktuellen Seite ist dieser Unintressant.
Um nun die Aktive Seite zu Kennzeichnen müssen wir den Klassen Attribut .page_item im zusammenhang mit .current_page_item verwenden, dieser wird Automatisch an jeden Aktiver Seite innerhalb der Verwendung von wp_list_pages(); Angefügt.
Stellen wir uns also einmal vor, wir haben in der sidebar.php folgende Seiten Auflistung durch den Template Tag wp_list_pages();:
Jeder li-Tag bekommt von WordPress Automatisch die HTML-Auszeichnung class="page_item" angefügt.
Nehmen wir an, das der Besucehr auf Seite 3 Surft, so bekommt die li-Tag zum “page_item zusätzlich noch ein current_page_item Angehangen.
Mit diesen Attributen können wir unsere Hervorhebung schon gestallten. Wir fügen in der style.css einfach folgenden CSS-Schnippsel hinzu:
.page_item a:hover, .current_page_item a { background: #ccc; }
Somit Hinterlegen sagen wir dem Browser das die Aktive Seite mit einen “Grauen Hintergrund” Hinterlegt wird und damit eine Aktive Kennzeichnung anzeigt.
Was aber nun, wenn wir zu den Hauptseiten auch noch Unterseiten haben?
Nun, auch hierfür hat der Template Tag wp_list_pages(); eine Lösung.
Nehmen wir an unser Besucher ist auf Seite 4 und der dazugehörigen unterseite “Seite 4 Unterseite”.
Um nun die Aktive Seite (unterseite) und die dazugehörige Hauptseite zu Kennzeichnen, fügen wir zur style.css folgenden CSS-Schnippsel hinzu:
.page_item a:hover, .current_page_item a, .current_page_parent a { background: #ccc; }
Mit dieser Hilfe lassen sich alle Aktiven Seiten, die durch den Template Tag wp_list_pages(); Ausgegeben werden Hervorheben.
Übrigens gewusst?
Auf die fast gleiche Art, kann man mit Hilfe des Template-Tags wp_list_cats(); (Auslaufens ab 2.1) bzw. wp_list_categories (ab 2.1) die Aktiven Kategorien hervorheben.
Hierzu wird statt .page_item a:hover, .current_page_item a die klassen Attribute .cat-item, .current-cat verwendet.
Geschrieben am 09.03 08 von Fabian
Abgelegt in der Kategorie: WordPress.
Schlagwörter: CSS, HTML, Template Tags, Tutorial, WordPress, Workshop, WP-Tutorial, wp_list_cat, wp_list_categories, wp_list_pages
Pingback: wp_list_pages(): Statische Seiten Auflisten lassen - fk:Blog - Fabians Weblog
nice simple feature! :)
habs eben ausprobiert.. aber anscheinend kann man nur den hintergrund ändern und bspweise nicht die schriftart bold setzen bei active!?? echt schade..
Hallo Manu,
du kannst die Ausgabe von wp_list_pages komplett mit der CSS Steuern.
Wenn ich dich richtig Verstanden habe, sollte folgender CSS Schnipsel den erwünschten effekt bringen.
LG Fabian
Problem ist nur, dass die “Home”-Seite nie die Klasse current_page_item bekommt… Das heißt diese kann man nicht so leicht als aktuelle Seite hervorheben…. :-/
Hallo Sascha,
das ist korrekt, jedoch nur beim einsatz des Template Tags “wp_page_menu()“.
Hier in den Artikel gehe ich auch die Hervorhebung von Seiten mittels “wp_list_pages()” ein.
Ich empfehle aber generell die Navigation nicht mit “.page_item” zu gestallten sondern mit einer Klasse/ID für ein umliegegende DIV Container,
Also als beispiel:
oder
Beim Einsatzt von “wp_page_menu()” funktioniert auch so das gestallten der Startseite (Home).