WordPress: Wie fügt man eigene Navigation mit wp_nav_menu() ein?

Mit jedem WordPress Theme werden viele Elemente standardmäßig mitgeliefert. Harte Codierung der Navigation ist erforderlich, wenn man Inhalte schon veröffentlicht hat, aber sie sind nicht dynamisch. Die beste Methode wäre es, eine benutzerdefinierte Navigation programmatisch zu erstellen und sie in ein Theme einzubinden. 

Weiter betrachten wir benutzerdefinierte Optionen und gehen der Frage nach, wie Ihr ein neues Menü von Grund auf erstellt. Diesen Beitrag könnt Ihr in der Folge als eine Kurzanleitung für die Programmierung nutzen.

Grundlagen der Navigationsmenüs

Bevor mit WordPress 3.0 viele Erweiterungen eingeführt wurden, setzte man bei der Theme-Entwicklung wp_page_menu() ein. Diese Funktion lässt alle Seiten als eine Liste mit einem Link zur Homepage ausgeben. Ihre Parameter  wurden im WordPress Codex beschrieben. Bei Bedarf könnt Ihr das Menü in der Sidebar oder im Footer unterbringen. 

Eines größeren Zuspruchs erfreut sich das eingebaute Menüsystem, um die Navigation in WordPress zu erstellen. Damit können Administratoren benutzerdefinierte Menüs nach ihren Vorstellungen anlegen, indem sie Links via Drag-and-drop anordnen, um Hierarchie und Struktur manuell vorzugeben. Ihr könnt Links direkt zu Posts, Seiten, Kategorien, Tags, also fast zu allen Bereichen auf Eurer Website verwalten.

Der erste Schritt ist es, den Code in functions.php-Datei einzufügen, mit der sich ein Menü anlegen lässt. Ihr könnt das über register_nav_menu()-Funktion  oder  register_nav_menus() tun, wenn Ihr mehrere Menüs einbinden wollt. Diese Menüs erfordern nur einen einzigen ID $location mit einer beschreibenden Zeile:

1

register_nav_menu( 'primary', 'Primary Menu' );

$location entspricht eher der ID bzw. dem Slug, die zur Menü-Identifizierung im Theme verwendet wird. Ihr müsst in jeder php-Datei Eures Themes auf definiertes Element  verweisen, das dargestellt werden soll. Ihr solltet beachten, dass die Unterstützung für Navigationsmenüs in Eurem Theme  automatisch aktiviert wird, deshalb braucht Ihr nicht die add_theme_support()-Funktion für Menüs anzuwenden.

Positionen im Theme

Nachdem Ihr das Menü in functions.php registriert habt, können wir zu anderen Theme-Dateien, und zwar header.php übergehen. In diese Datei kann man einen einfachen Code einfügen. Dieser Code-Schnipsel wurde bei WordPress Codex aus  wp_nav_menu() kopiert und hat alle optionalen Parameter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$defaults = array(
	'theme_location'  => '',
	'menu'            => '',
	'container'       => 'div',
	'container_class' => '',
	'container_id'    => '',
	'menu_class'      => 'menu',
	'menu_id'         => '',
	'echo'            => true,
	'fallback_cb'     => 'wp_page_menu',
	'before'          => '',
	'after'           => '',
	'link_before'     => '',
	'link_after'      => '',
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
	'depth'           => 0,
	'walker'          => ''
);
 
wp_nav_menu( $defaults );

Mit diesen Optionen setzen wir uns weiter auseinander. Auf  zwei obere möchten wir hier näher eingehen. Bitte achtet darauf, dass diese optional sind, und Werte, die Ihr unten seht, werden zum Standard, wenn sie nicht geändert werden. theme_location sollte mit dem location-Slug übereinstimmen, den Ihr bei der Menü-Registrierung ausgewählt haben. Dies ist der einzige Wert, den Ihr ändern solltet, um sicherzustellen, dass es übereinstimmt.

Manchmal werden der Menüplatz mit dem menu verwechselt, weil sie einander sehr ähnlich sind. In der Tat sollte das Menü fast immer  weggelassen werden, denn das ermöglicht einem Webmaster, das erstellte Menü einem Menüplatz zuzuordnen. Dieser menu -Parameter wird verwendet, um ein vorgefertigtes Admin-Menü einzubinden. Es muss mit einem  bestehenden Menü identisch sein, das bereits erstellt wurde. Da man oft kein bestehendes Menü hat (oder Menüs können sich auf Websites unterscheiden), wäre es am besten, es außerhalb der Navigation Eures Themes zu lassen.

Einstellen der Parameter

Die anderen Einstellungen dienen hauptsächlich zur Anpassung, deshalb Ihr sie ignorieren könnt. Betrachten wir die übrigen, damit wir die Möglichkeiten besser verstehen. container, container_class und container_id sind beim Formatieren des Menüs hilfreich. Das äußere Container-Element umgibt das UL-Element, so dass es auch ein HTML5 <nav> sein kann, wenn Ihr die Semantik mögt.

menu_class und menu_id  werden auf die ungeordnete Liste angewendet. Jedes Menü bekommt die .menu-Klasse. Ihr könnt das ändern, wenn Ihr mehrere Menüs verwendet. Der Echo-Parameter teilt dieser Funktion mit, das HTML-Menü auszugeben ist, andernfalls wird der Wert an eine Funktion oder PHP-Variable zurückgegeben. Wenn wp_nav_menu()  aus irgendeinem Grund nicht ausgeführt werden kann, wird automatisch auf die Verwendung von wp_page_menu() zurückgegriffen, wie es bereits erwähnt wurde.

Die nächsten zwei before- und after-Parameter lassen HTML direkt vor oder nach dem Anker-Link ausgeben. link_before und link_after fügen HTML innerhalb der Anker-Links direkt vor und nach dem Text hinzu. Es sollte darauf geachtet werden, dass diese Optionen nicht verwechselt werden! Wenn Ihr Zweifel habt, wäre es empfehlenswert im  Codex nachzuschlagen.

Nun wenn Ihr eine ungeordnete Liste nicht verwenden wollt, dann könnt Ihr das in items_wrap ändern. Es wird die sprintf()-Syntax angewendet, um Werte durch dynamische Parameter in derselben Funktion zu ersetzen. %1$s steht für menu_id, %2$s - für menu_class und %3$s bezieht sich auf die Ausgabe der Listenelemente. Da es sehr viel zusätzliche Arbeit erfordert, um die <li> -Elemente zu ändern, wäre es besser, das unverändert  zu lassen.

Der depth-Parameter teilt dem Menü von der Hierarchie-Tiefe mit. Wenn Eure Header-Navigation ein 1-Level-Dropdown-Menü darstellt, braucht Ihr nur eine Ebene. Ein 2-Level-Flyout-Menü unterstützt 2  Hierarchie-Ebenen.  -1 ist ein spezieller Wert, der alle Links im Menü anzeigen lässt und sie in der gleichen Ebene zusammenfasst.

$walker-Klasse ist ein spezieller Parameter, der die Ausgabe der Inhalte in einer Baumhierarchie in WordPress anpassen lässt. Das ist ein fortgeschrittenes Thema, mehr darüber könnt Ihr im Referenz-Guide für Walker-Klassen lesen.

Menüs im Admin-Bereich anlegen

Dieser letzte Abschnitt sollte Administratoren und Webmastern eine bessere Möglichkeit bieten, Menüs zu verstehen. Nachdem Ihr euch im Admin-Panel angemeldet habt, solltet Ihr mit der Maus „Design“ überfahren und den Menü-Link anklicken.

Hier könnt Ihr Links neu anordnen, damit sie vom linken Akkordeon in den rechten Bereich gehen. Sie können dem Menü einen Namen geben, der in PHP referenziert werden kann. Beachtet jedoch, dass oben ein Drop-down-Auswahlmenü angezeigt wird. Sobald Ihr eine Navigation registriert und ihr eine Platz im Theme zugewiesen habt, erscheint  sie in diesem Dropdown-Menü, wo der Administrator auswählen kann. Auf diese Weise können Webmaster ihre eigenen Menüs erstellen, ohne in PHP programmieren zu müssen.

Auf der linken Seite könnt Ihr zwischen Seiten, Posts, Links, Kategorien und Tags wählen. Wenn Ihr auf den kleinen Tab "Bildschirm-Optionen" oben rechts klicken, könnt Ihr einige dieser Optionen ausblenden. Ihr findet außerdem erweiterte Menüoptionen, mit denen Ihr jedem Link ein Ziel (z. B. target = "_ blank") oder sogar CSS-Klassen zuweisen könnt.

Jeder Link zu Kategorien könnte eine andere Klasse für einzigartige Farbe verwenden, wenn sie definiert wird. Standardmäßig verknüpft Ihr jeden Link mit einem Text und einer kurzen Beschreibung, die oft nur vom Website-Administrator verwendet wird. Links können auch über Titel-Attribute und XFN-Werte verfügen.

Je mehr Ihr Menüs über dieses Menüsystem anlegt, desto einfacher wird es für Euch. Erfahrene Entwickler, die WordPress seit Jahren verwenden, finden es sehr praktisch. Newcomer, die nur die Grundlagen von WordPress erlernen, können es auch problemlos verwenden.

Zum Schluss

Wir hoffen, dass der Blick auf das WordPress-Navigationssystem angehenden Entwicklern helfen kann, direkt in das Thema einzutauchen. Natürlich gibt es noch andere grundlegende Aspekte beim Codieren eines Themes. Aber die Navigation ist sehr wichtig und kann etwas verwirrend wirken, wenn Ihr noch nie so etwas gebaut habt. Probiert  die angeführten PHP-Codes aus und Ihr seht, was Ihr am Theme mit WordPress vornehmen könnt.

Dieser Beitrag wurde aus dem Englischen ins Deutsche übertragen. Das Original ist hier zu lesen.