Layer-Navigation mit wp_list_categories

Viele setzen WordPress gar nicht als Blog-Software ein, sondern nutzen es als Content Management System, kurz CMS. Grundsätzlich spricht natürlich nichts dagegen, WordPress dafür einzusetzen. Der große Vorteil gegenüber bestehenden Content Management Systemen ist die Einfachheit des Administrationsbereichs: Man kann Artikel über einen WYSIWYG-Editor anlegen, und man muss gerade mal ein Häkchen setzen, in welcher Kategorie dieser auf der Webseite erscheinen soll. Und das war’s auch schon. Keine weitere Zuordnung, keine umständliche Vergabe von Navigationsinformationen – das kriegt selbst der berühmte “dümmste anzunehmende User” (DAU) hin.

Klingt alles viel zu schön, um wahr zu sein, aber zwischen den Zeilen gelesen, gibt es eigentlich nur ein Problem: Die Ausgabe der Kategorien ist bei WordPress mit wp_list_categories();  nicht besonders strapazierfähig. Mit Bordmitteln kann man alternativ gerade noch eine Formular-Drop-Down-Version ausgeben lassen – eine CMS-würdige Navigation ist aber nicht von Haus aus in WordPress implementiert.

Deswegen habe ich mich auf die Suche nach einer Lösung gemacht und bin dann am Ende mit einer Mischung aus Eigenbau und wp_list_categories ans Ziel gekommen:

On-Mouse-Over Layer-Navigation auf Finanz-Zentrale
On-Mouse-Over Layer-Navigation bei Finanz-Zentrale.com

Hier sind meine Voraussetzungen, die auch erfüllt sind:

  • Keine Anpassung an core-Dateien
  • Automatische Erweiterung, ohne template-Dateien anpassen zu müssen, wenn neue Unterkategorien angelegt werden
  • Suchmaschinenfreundlich: Kein Javascript oder gar Flash
  • CSS-basierte Gestaltung und Anpassungsmöglichkeiten
  • Kompatibilität mit modernen Browsern

Eine weitere Voraussetzung für die Funktionalität ist, dass die Hauptnavigation (bzw. die Hauptkategorien) feststeht – diese ist am besten auch schon in WordPress unter “Kategorien” angelegt. Für die folgende Umsetzung benötigt man die IDs der Hauptkategorien. Falls die Hauptnavigation einmal wachsen sollte, muss man das entsprechend in der navigation.php überarbeiten.

Noch ein Hinweis zum besseren Verständnis: Die Menü-Punkte, die in den DIV-Layern erscheinen, sind nicht direkt die Artikel der Hauptkategorie, sondern die Unterkategorien der Hauptkategorie. Ein Klick auf einen Link im DIV-Layer ruft also die Datei archive.php auf, welche dann eine Übersicht der Artikel in dieser Unterkategorie zeigt. Wenn man direkt Artikel anzeigen möchte, müsste man das entsprechend in der archive.php Datei anpassen – darauf kann ich bei Bedarf noch näher eingehen (einfach einen entsprechenden Kommentar hinterlassen).

Verwendete Plugins:

Ich habe eigentlich nur ein Plugin im Einsatz, welches /category/ aus dem URL-Pfad herauskürzt – das ist aber keine Voraussetzung für die volle Funktionalität der Navigation. Wer sich daran nicht stört, kommt auch ohne dieses Plugin aus.

Basis für die Navigation ist das Chrome CSS Drop Down Menu von Dynamic Drive. Das Skript ist eigentlich sehr simpel und optisch auch so kompakt und anpassbar, das man es hervorragend für fast jedes Design einsetzen kann. Man kann es über eine CSS-Datei beliebig anpassen – ich habe mich im obigen Beispiel für einen “Flat-Style” entschieden.
Dadurch benötigt man aus der Datei chromemenu.zip nur drei Dateien: demo.htm, chrome.js und chromestyle.css.

Diese drei Dateien kann man sich gleich mal in den Theme-Ordner entpacken. Für die Javascript-Datei kann man der besseren Übersicht halber noch einen Unterordner /js/ im Theme-Ordner erstellen.

Die Datei demo.htm habe ich in navigation.php umbenannt und komplett neu aufgebaut (siehe unten). Man kann die Navigation natürlich auch direkt in die header.php einbauen – ich verwende aber lieber ein php-include in der header-Datei.
In der header.php Datei müssen folgende Zeilen ergänzt werden:

[sourcecode language=’html’][/sourcecode]

Nachdem der HTML-Teil der Navigation in eine eigene Datei ausgelagert wird, muss man in der header.php noch das include für die navigation.php einbauen und zwar an der Stelle, an der die Navigation später erscheinen soll:

[sourcecode language=’php’][/sourcecode]

Die Anpassungen an der header.php sind damit schon abgeschlossen, der Rest erfolgt in den Dateien navigation.php und chrome.css (bzw. style.css).

Die navigation.php:

Je nach Anzahl an Hauptkategorien wächst auch die Größe der navigation.php-Datei. In meinem Fall gibt es vier Hauptkategorien mit den IDs 1, 3, 4 und 5. Die ID der Kategorie bekommt man relativ einfach im Admin-Bereich von WordPress heraus: Nachdem man eine Kategorie angelegt hat, einfach mit dem Mauszeiger über den Link fahren , in der Statusleiste des Browser dann die letzte Ziffer im angezeigten Link notieren: Das ist die ID der jeweiligen Kategorie.

Kategorie-ID über den Link im Admin-Bereich herausfinden
Kategorie-ID über den Link im Admin-Bereich herausfinden: "cat_ID="

Ich habe für die Navigation einen div-layer “navigation” angelegt – dieser umschliesst die gesamte Navigation und sorgt für die richtige Integration im Theme:

[sourcecode language=’html’]

21 Antworten auf „Layer-Navigation mit wp_list_categories“

  1. Nun. Alles schön und gut, aber die Geschichte lässt sich bis auf das kürzen der category aus der URL auch komplett dynamisch halten.

    wp_list_categories mit li’s und eine möglichkeit, die navi eindeutig zu stylen mittels div#id oder ul#id.

    Danach dann einfach an http://www.alistapart.com/articles/dropdowns orientieren und schon hat man das ganze in dynamisch…

    Man kann das natürlich auf mehrere Arten auch noch beautifien, wie man bei http://www.bongard.net/blog/2008/04/13/jquery-suckerfish-dropdowns/ und http://plugins.jquery.com/project/Superfish sieht.

  2. Interessanter Artikel,

    einen Einwand hätte ich allerdings: Die Vorraussetzung ‘Kein Javascript’ ist mit ”
    cssdropdown.startchrome(“chromemenu”)

    im source nicht erfüllt und soweit ich weiss geht das ohne js auch nur mit einem conditional-tag-marathon damit es im ie auch funzt…

    1. Hi Mobi,

      du hast recht – zu meiner Verteidigung soll aber gesagt sein, dass im Quelltext “echtes HTML” zu sehen ist – ein Suchmaschinen-Crawler also auch seinen Weg durch die Navigation findet. Die Javascript-Funktion macht die Navigation für Menschen etwas hübscher (Aufklapp-Effekt).

      Wenn man komplett auf Javascript verzichten möchte, ist der Weg im Grunde derselbe: Man muss lediglich ein CSS-Layer-Menü verwenden, welches diesen Aufklappt-Effekt nicht hat. Sollte ein leichtes sein, soetwas im Netz zu finden.

  3. Mit den Kategorien habe ich noch ein weiteres Problem in WordPress. Und zwar gelingt es mir nicht, in sämtlichen Artikeln einer Kategorie, beispielsweise innerhalb der Sidebar, einen bestimmten Inhalt auszugeben, der nur für die Artikel in eben dieser Kategorie gilt. Meine Inhalte werden immer in der Kategorie selbst ausgegeben. Gibt es hierfür eine Lösung?

  4. Es haben ja einige WP-Beginner Schwierigkeiten mit einem Drop-Down Menü. Doch wie so oft gibt es ein Plugin dafür, das sich “Wordpress CSS Drop-down Menu” nennt. Damit kann man schnell und auch ohne PHP-Kenntnisse ein schickes Menü zaubern, danach einfach die CSS anpassen und fertig. 😉

Schreibe einen Kommentar zu Mario Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert