Jedes WordPress Theme verfügt über mindestens ein Menü bzw. eine Navigation. In den meisten Fällen werden jedoch 2-3 verschiedene Menüs verwendet, um Navigationselemente auf der Webseite anzuzeigen. Dieser Artikel zeigt dir wie man in WordPress ein Menü erstellen und in den Template-Dateien einbinden kann.

Das WordPress Menü registrieren

Zunächst müssen wir ein neues Menü in WordPress registrieren. Dazu verwenden wir die Funktion register_nav_menus(). Innerhalb dieser Funktion legen wir fest, welche Menüs wir in unserem WordPress Theme anzeigen möchten.

Das sollte zum einen das Hauptmenü für die Anzeige der wichtigsten Navigationselemente sein und zum anderen ein Footer-Menü, welches bspw. Links zur Datenschutzerklärung oder zum Impressum enthalten könnte.

Um verschiedene Menüs in WordPress zu aktivieren, verwenden wir die WordPress-Action after_setup_theme (?). Innerhalb der zugeordneten Funktion rufen wir register_nav_menus() auf und definieren einen einzigartigen Identifier für jedes neue Menü:

Sobald wir den oberen Code-Schnipsel in der functions.php Datei des Themes gespeichert haben, sind die neuen Menüs in der WordPress Administration verfügbar. Nun können wir im Backend, unter „Design > Menüs“ ein neues Menü mit Linkelementen anlegen und anschließend die dazugehörige Menüpositionen festlegen.

Um ein neues Menü zu erstellen, klicke zunächst auf „Erstelle ein neues Menü“ und vergebe einen Menünamen. Speichere das neue Menü und füge neue Navigationselemente hinzu.

Über die Menüposition, unter „Positionen verwalten„, bestimmen wir, welche angelegten Navigationselemente zu welchem definierten Menü aus register_nav_menus() zugehörig sein sollten.

Wenn du ein neues Menü erstellt hast, kannst du dieses Menü einer Menüposition (welche mit register_nav_menus() hinzugefügt wurde) zuweisen.

Diese grundlegenden Schritte sind dafür nötig, um ein neues Menü in WordPress verfügbar zu machen und diesem neue Menüelemente (Links) hinzuzufügen. Natürlich können wir auch weitere Menüs hinzufügen, insofern das für die Anzeige der Webseite nötig ist.

Ein WordPress Menü anpassen und im Frontend anzeigen lassen

Im nächsten Schritt müssen wir die angelegten Menüs in die Template-Dateien des Themes einbinden, damit die gewünschten Menüs im Frontend sichtbar werden. Dafür verwenden wir die Funktion has_nav_menu(), welche vor der Ausgabe des Menüs prüft ob es überhaupt existiert.

Für die eigentliche Anzeige und Ausgabe des Menü stellt WordPress die Funktion wp_nav_menu() bereit. Innerhalb dieser Funktion können wir alles nötige definieren, was wir für die Ausgabe im Frontend benötigen. Dazu gehören z.B. die Menüklassen für ein umgebendes Container-Element 'container_class' sowie für das Menüelement 'menu_class' selbst.

Neben Definitionen von IDs und HTML-Elementen die sich vor und nach der Ausgabe der Menüelemente angeben lassen, ist der wichtigste Bestandteil die Menüposition 'theme_location'. Denn hier legen wir fest welches Menü angezeigt wird. Möchten wir also das Hauptmenü anzeigen lassen, tragen wir den einzigartigen Identifier 'primary_menu' ein und erhalten 'theme_location' => 'primary_menu':

Für das Footer-Menü könnte das Ergebnis innerhalb des Templates dann folgendermaßen aussehen:

Den oberen Code-Schnipsel musst du nun innerhalb deiner WordPress Theme Template-Dateien einbinden, um das Menü an der gewünschten Stelle ausgeben zu lassen.

Das Menü wp_nav_menu() anpassen und richtig einstellen

Die Funktion wp_nav_menu() bietet gleich mehrere Einstellungsmöglichkeiten. Je nachdem wie wir ein WordPress Menü darstellen möchten, können wir darauf zurückgreifen. Einige dieser Einstellungen stelle ich euch nun vor:

Menüposition definieren

Die Menüposition ist entscheidend dafür, welches Menü wir anzeigen lassen möchten. Haben wir im WordPress Backend, dass Hauptmenü für die Position 'primary-menu' festgelegt, so geben wir das für 'theme_location' wie folgt an:

Die Menütiefe ändern

Die Menütiefe können wir mit 'depth' => 1 beeinflussen. Das hängt davon ab wie viele Ebenen ein WordPress Menü im Frontend anzeigen soll. Im Hauptmenü könnten das z.B. 2-3 Ebenen sein. Im Footer-Menü ist stattdessen eher 1 Menüebene sinnvoll:

Das Menü nicht direkt ausgeben lassen

Normalerweise wird das Menü direkt dort ausgegeben, wo wir wp_nav_menu() im Template schreiben. Durch 'echo' => false, können wir das verhindern und das Menü wie folgt ausgeben:

Eine ID und Klassen für den Menü-Container definieren

Um das eigentliche Menüelement <ul> können wir für das umliegende Elternelement <div>, also dem Container, wie folgt eine benutzerdefinierte ID 'container_id' und verschiedene Klassennamen 'container_class' definieren:

Das HTML-Element des Menü-Containers ändern

Standardmäßig wird das <div> HTML-Tag als Markup für den Menü-Container verwendet. Wenn man das HTML-Tag ändern möchte, können wir das mit 'container' wie folgt tun:

ID und Klassennamen für das Menü-Element festlegen

Für das Menüelement selbst, also das <ul> HTML-Tag können wir ebenfalls eine benutzerdefinierte ID und Klassennamen wie folgt vergeben:

Benutzerdefinierten Inhalt vor und nach dem Link-Markup des Menü-Listenelements einfügen

Jeder Menülink <a href="">Linktext</a> wir innerhalb des <li> HTML-Tags ausgegeben. Mit der folgenden Lösung können wir einen benutzerdefinierten Inhalt vor 'before' und nach 'after' diesem Menü-Link einfügen:

Individuellen Inhalt vor und nach dem Linktext des Menü-Listenelements einbinden

Ähnlich wie oben beschrieben, können wir auch einen individuellen Inhalt vor und nach dem Linktext innerhalb des <a> HTML-Tags einbinden. Das machen wir mit 'link_before' und 'link_after' wie folgt:

Weitere Einstellungsmöglichkeiten zur Anpassung des WordPress Menüs findest du unter: https://developer.wordpress.org/reference/functions/wp_nav_menu/

Nun hast du alle grundlegenden Dinge für die Erstellung einer WordPress Navigation gelernt und kannst direkt damit beginnen, neue Menüs hinzuzufügen und nach deinen Bedürfnissen anzupassen.