Ein WordPress Menü erstellen und im Template einbinden
by
admin
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.
Über die Menüposition, unter „Positionen verwalten„, bestimmen wir, welche angelegten Navigationselemente zu welchem definierten Menü aus register_nav_menus() zugehörig sein sollten.
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.
