Mit WordPress 3.0 sind die individuell zusammenstellbaren WordPress-Menüs eingeführt worden, welche im „Design“-Menü unter „Menü“ zu finden sind. Wenn ihr diesen Punkt aufruft, kommt das Ganze recht unscheinbar daher; die vielfältigen Möglichkeiten erschließen sich nicht gleich auf den ersten Blick.

Dabei gibt es schier unendliche Möglichkeiten, Elemente einzubinden und das Menü zu strukturieren. So lassen sich einzelne Beiträge, Schlagworte, Kategorien, Post-Formate, Seiten, Links uvm. kreuz und quer durcheinander mischen. Aber dazu später mehr.

Voraussetzung für die Nutzung der WordPress-Menüs ist, dass die Funktion vom Theme unterstützt wird, der Theme-Autor also einen entsprechenden Bereich dafür vorgesehen und das Menü in sein Theme integriert hat.

In diesem Tutorial zeige ich Schritt für Schritt, wie das Menü aktiviert, integriert und eingerichtet wird.

Funktion im Theme aktivieren

Theme-abhängige Funktionen werden in WordPress in der functions.php des Themes festgelegt. So auch diese. Öffnet die functions.php eures Themes und fügt dort folgendes ein:

if ( function_exists('register_nav_menus') ) {
    register_nav_menus(array(
        'header-nav' => __( 'Kopfzeilen-Navigation' )
    ));
}

Kurze Erklärung: mittels function_exists wird überprüft, ob die aktuell verwendete WordPress-Version die Funktion register_nav_menus unterstützt. Im Array definieren wir zunächst einen eindeutigen Namen, die sogenannte „Theme-Location“, gefolgt von einer aussagekräftigen Bezeichnung, welche uns später die Zuordnung der Menüs bei deren Einrichtung erleichtert.

Wer mehrere Menüs benötigt, beispielsweise eines im Kopf- und eines im Fußbereich, ergänzt den Array einfach um einen weiteren Punkt (Komma nicht vergessen):

if ( function_exists('register_nav_menus') ) {
    register_nav_menus(array(
        'header-nav' => __( 'Kopfzeilen-Navigation' ),
        'footer-nav' => __( 'Fußzeilen-Navigation' )
    ));
}

Damit ist das Menü aktiviert und steht bereits unter „Design“ -> „Menüs“ zur Einrichtung bereit.

Menü in das Theme integrieren

Damit das Menü an der Stelle angezeigt wird, wo wir es haben wollen, müssen wir es in unser Theme integrieren. Die Integration erfolgt mit folgenden Aufruf:

<?php wp_nav_menu( array( 'theme_location' => 'header-nav' ) ); ?>

Die theme-location definiert, welches Menü aufgerufen wird (der eindeutigen Name aus der functions.php).

Dieser Aufruf des Menüs im Template unseres Themes lässt viele weitere Optionen zu. Beispielsweise kann die Struktur des Menüs auf eine bestimmte Ebene begrenzt, spezielle CSS-Klassen zugewiesen werden und vieles mehr. Die Funktionsreferenz dazu findet ihr hier.

Wird das Menü in das Theme integriert, setzt das natürlich voraus, dass im Stylesheet entsprechende Klassen (Hauptnavigation, Submenüs, Listenelemente, u.a.) definiert und formatiert sind. Die von wp_nav_menu ausgegebenen Klassen, sind in der o.g. Funktionsreferenz ersichtlich.

Anzumerken ist noch, dass ein individuelles Menü auch ohne diese Theme-Integration genutzt werden kann, nämlich als Widget:

Menü festlegen und Elemente zum Menü hinzufügen

Um das Menü mit Leben zu füllen, öffnet ihr im Menü „Design“ den Punkt „Menü“. Dort solltet ihr zunächst einmal die Optionen am oberen Bildrand öffnen:

Standardmäßig werden nämlich nicht alle Elemente angezeigt. Aktiviert die Elemente, die ihr für euer Menü nutzen wollt.

Wie bereits erwähnt lassen sich Seiten, Links, einzelne Beiträge, Tags, Kategorien, Post-Formate und individuelle HTML-Verlinkungen munter zusammenstellen. Gerade die Möglichkeit HTML-Verlinkungen einzubinden ist ungemein praktisch: so kann auf einfache Weise auf einen Download, ein Bild, Dokumente usw. verlinkt werden.

Wie geht’s nun weiter? Klickt oben auf den Reiter „+“ um ein neues Menü zu erstellen. Vergebt einen Namen für das Menü und klickt auf den Button „Menü erstellen“.

Um eine oder mehrere Seiten, Beiträge, Tags, Kategorien usw. hinzuzufügen, markiert ihr das entsprechende Element bzw. die entsprechenden Elemente auf der linken Seite und klickt auf den Button „Zum Menü hinzufügen“:

Die ausgewählten Elemente werden in den rechten Bereich verschoben, wo ihr sie dann per Drag and Drop sowohl vertikal als auch horizontal verschieben könnt. Verschiebt ihr einen Eintrag vertikal, verändert ihr die Reihenfolge der Elemente bei der Ausgabe des Menüs im Theme. Verschiebt ihr einen Eintrag horizontal nach rechts, erstellt ihr ein Untermenü.

Hier als Beispiel die Haupt-Menüstruktur meiner Webseite:

Seid ihr mit den Inhalten und der Struktur zufrieden, klickt auf den Button „Menü speichern“.

Wer mehrere Menüs in der functions.php angelegt hat, muss nun natürlich noch bestimmen, welches Menü an welchem Platz angezeigt werden soll. Dies macht ihr im Kasten „Anordnung im Theme“ oben links. Dort findet ihr auch die Beschreibung wieder, welche wir in der functions.php hinterlegt haben:

Einzelne Menüpunkte unterschiedlich formatieren

Wer den Wunsch verspüren sollte, einzelne Menüpunkte unterschiedlich zu formatieren, um sie beispielsweise durch eine andere Hintergrundfarbe besonders hervorzuheben, dem kann ebenfalls geholfen werden. WordPress bietet die Möglichkeit jedem Menüpunkt spezielle CSS-Klassen zuzuweisen.

Geht dazu wie folgt vor: zunächst einmal müsst ihr nochmals die Optionen am oberen Bildrand öffnen. Dort aktiviert ihr unter „Erweitere Menüeigenschaften anzeigen“ den Punkt „CSS-Klassen“.

Nun klickt auf den Pfeil nach unten des Menüpunktes, den ihr unterschiedlich darstellen wollt. Ihr seht nun ein neues Eingabefeld „CSS-Klassen (optional)“. Hier tragt ihr nun eure CSS-Klasse ein und speichert das Menü ab.

WordPress wird bei diesem Menüpunkt nun die spezielle CSS-Klasse ausgeben. Diese CSS-Klasse verwenden wir im Stylesheet des Themes, um den Menüpunkt unterschiedlich aussehen zu lassen. Für unser Beispiel wäre das folgende Deklaration:

li.vierzehn > a {
	background: #000;
}

Das Ergebnis:

Zum Abschluss noch einen Tipp: stellt euch vor ihr möchtet einen Hauptnavigationspunkt einfügen, der selber jedoch nicht klickbar sein soll und lediglich als „Ordner“ für Untermenüpunkte dienen soll.

Mit folgendem Trick funktioniert das: legt einen neuen Menüpunkt als Link an. In das Feld URL gebt ihr einen gültigen Link oder einfach # ein. Gebt dem Menüpunkt eine Bezeichnung und speichert diesen ab:

Öffnet nun diesen Eintrag in der Menüstruktur auf der rechten Seite und löscht das # aus dem Feld URL wieder heraus.

Menü speichern und der Punkt ist nicht mehr klickbar.

Abschließend noch ein Hinweis: wer Elemente (z.B. eine Seite) dem Menü zugefügt hat und diese Seite irgendwann löscht, muss den Menüpunkt manuell aus dem Menü entfernen. Funktioniert nicht automatisch.