Häufig sieht man Webseiten, bei denen jeder “Haupt-Menüpunkt” ein eigenes Bildchen oder Icon als Hintergrund hat. Das geht auch mit WordPress. Und ein bisschen einfacher läuft’s mit diesem kleinen PlugIn.

Update! Version 0.3 funktioniert auch für Kategorien.
Update! Version 0.3c auch für weitere Sonderzeichen …

 

Page-Navigation mit WordPress

Zum Auflisten von Seiten gibt’s bei WordPress die Funktion wp_list_pages();

Die Klammer kann mit etlichem Parametern gefüllt werden, so dass man bestimmen kann, nach welcher Reihenfolge die Seiten sortiert werden, ob “Unterseiten” angezeigt werden sollen, ob bestimmte Seiten aus der Auflistung auszuschließen sind und vieles mehr.

Eine ausführliche Anleitung dazu gibt’s » hier

Ausgegeben wird die Navigation als ungeordnete Liste. Je nachdem, was man eingestellt hat, sieht das ungefähr so aus:


<ul>
<li class="page_item"><a href="###">Start</a></li>
<li class="page_item"><a href="###">Wir &uuml;ber uns</a></li>
<li class="page_item current_page_item"><a href="###">Impressum</a></li>
<li class="page_item"><a href="###">Kontakt</a></li>
</ul>

… wobei jeder Listenpunkt die Klasse “page_item” bekommt - und aktive Menüpunkte heißen zusätzlich noch “current_page_item”.

Sofern man nicht grade für Netscape 6 gestaltet (der Klassen-Namen mit Unterstrichen nicht erkennt) könnte man zum Beispiel die aktive Seite rot markieren, die Schrift anders färben, ein kleines Pfeilbildchen reinsetzen … was auch immer.

 

Mehr Bilder …?

Das reicht in den meisten Fällen auch absolut aus. Nur wenn man bei “Start” ein kleines Home-Häuschen haben möchte, bei “Kontakt” einen kleinen Briefumschlag oder Ähnliches - gibt es keine Möglichkeit, die einzelnen Seiten im Stylesheet unabhängig voneinander “anzusprechen”. Man kann defacto nur gestalterisch zwischen “aktiv” und “nicht aktiv” unterscheiden.

Jeder Menüpunkt hat ein eigenes Hintergrundbild
verschiedene “Icons” für verschiedene Schaltflächen …

Um (wie oben) jeden Menüpunkt mit einem anderen Bild versehen zu können, müssen die Listenpunkte allesamt eine zusätzliche “Klassenbezeichnung” bekommen, die auch nur einmal vorkommt. Da bietet es sich an, gleich den Linktext dafür zu verwenden.

Vorher müssen natürlich Umlaute, Leer- und Sonderzeichen entfernt werden, damit in etwa dieser Code dabei herauskommt …


<ul>
<li class="start page_item"><a href="###">Start</a></li>
<li class="wirueberuns page_item"><a href="###">Wir &uuml;ber uns</a></li>
<li class="impressum page_item current_page_item"><a href="###">Impressum</a></li>
<li class="kontakt page_item"><a href="###">Kontakt</a></li>
</ul>

… mit diesem Quelltext kann man im zweiten Schritt über das Stylesheet …

li.start a { background-image: url("images/start.gif") }
li.wirueberuns a { background-image: url("images/wirueberuns.gif") }
li.impressum a { background-image: url("images/impressum.gif") }
li.kontakt a { background-image: url("images/kontakt.gif") }

… schließlich jeden Listenpunkt (bzw. Link-im-Listenpunkt) einzeln ansprechen und anpassen.

 

gunnart CSS PageList

Für diesen Zweck hab ich ein kleines PlugIn geschrieben, das die Ausgabe von wp_list_pages(); abfängt, wie beschrieben verändert und danach erst wieder ausgibt. Das Ganze ist in der Bedienung völlig unkompliziert: Hochladen und aktivieren, das war’s.

An den PHP-Dateien im Theme muss nachträglich nichts weiter geändert werden.

Überall, wo der Befehl wp_list_pages(); eingesetzt wird, erscheinen die Listenpunkte mit ihrer “eigenen”, zusätzlichen CSS-Klasse. Also sollten ein paar Änderungen und Erweiterungen des Stylesheets für eine Icon-Navigation reichen.

 

Download und noch ein paar Infos

Download-Link (Version 0.1): » gunnart_CSS_PageList01.zip
Download-Link (Version 0.2 - BugFix 14. Mai 2007): » gunnart_CSS_PageList02.zip
Download-Link (Version 0.3b - Update 23. Mai 2007): » gunnart_CSS_PageList03b.zip
Download-Link (Version 0.3c - Update 08. Juli 2007): » gunnart_CSS_PageList03c.zip

  • Benennung: Der Klassenname des Listenpunktes ist (damit er nur einmal vorkommt) immer gleich dem Seitentitel. Allerdings in Kleinbuchstaben, Sonderzeichen und Zahlen entfallen komplett, und Umlaute werden in ae, oe und so weiter gewandelt.
  • Zusammenspiel mit anderen PlugIns: Viele WordPress-User haben das PlugIn “Sidebar Page Switcher” oder gleich die “SPS-Suite” installiert, “gunnart CSS PageList” wandelt auch diese Ausgabe um.
  • Getestet: Bisher nur mit WordPress (neu!) 2.2, 2.13 und 2.010 - aber “gunnart CSS PageList” sollte auch in älteren Versionen problemlos laufen.

Die Installation lohnt sich für WordPress-Projekte, in denen die Hauptnavigation nicht “hart” ins Theme geschrieben werden soll.

Außerdem bleibt den aktiven Menüpunkten der Klassenbezeichner “current_page_item” erhalten (WordPress 2.13 kennzeichnet zusätzlich auch die “Mutterseiten” aktiver Pages mit “current_page_parent”) - so dass man auch ohne den Einsatz von PlugIns wie z.B. dTabs beispielsweise eine “Reiter-Navigation” einrichten kann.

 

Version 0.3b - auch für Kategorien

Änderung 1)

Die neue Version wandelt auch die Kategorien-Navigation um. WordPress gibt “nicht-aktiven” Listenpunkten bei der Kategorien-Anzeige keine CSS Klasse mit. Daher waren an der Grundfunktion einige kleinere Änderungen nötig, ansonsten hätte man den Filter unverändert auch auf die Category-Tags anwenden können.

Version 0.3 Version 0.3b greift also nun für folgende WordPress-Funktionen:

  1. wp_list_pages();
  2. sps_list_pages();
  3. wp_list_categories();
  4. wp_list_cats();
  5. list_cats();

Änderung 2)

Eine kleine Korrektur: In manchen Blogs verschwinden die Umlaute aus dem Klassennamen. Dort kommen nämlich bereits &#Nummer;-Entities in der Funktion an, die eigentlich dafür sorgen soll, dass z.B. “ä” in “ae” gewandelt wird.

In Version 0.3 Version 0.3b sollte das Problem behoben sein. Ist zwar nicht besonders elegant gelöst (Sorry) - hat dafür aber in allen Blogs geklappt, mit denen ich getestet habe: Eine vorgeschaltete Funktion wandelt alle HTML-Entities zunächst wieder in “normale” Buchstaben um - und dann wird nochmal in &auml;-Entities gewandelt, damit man auch “merkbare” Klassennamen erhält.

 

Version 0.3c - Probleme mit weiteren Sonderzeichen gelöst

8. Juli 2007 Ich habe noch einmal die “Umwandlung von Sonderzeichen” überarbeitet, in der Hoffnung, dass jetzt alle gefunden und korrekt umgeändert werden. Dazu muss ich allerdings anmerken, dass WordPress “von Haus aus” mit é oder ç ein paar Schwierigkeiten hat - Auch mit dem Clean-Umlauts-PlugIn werden diese Zeichen nicht in Entities gewandelt.

Jedenfalls findet die Version 0.3c diese Sonderzeichen und wandelt sie (zumindest für die generierte CSS-Klasse) in folgender Weise um:

  • "è" oder "é" in ein einfaches "e"
  • "ç" in ein einfaches "c"

Aktuell habe ich (wegen der Problematik mit “ausländischen Sonderzeichen”) eine erweiterte Version von “Clean Umlauts” in Arbeit, mehr Informationen und eine erste Download-Version gibt’s » hier