WordPress ermöglicht die Verwendung sogenannter Walker-Klassen zum Durchlaufen und Anzeigen von Elementen in einer hierarchischen Struktur. In diesem Beitrag erfahren Sie, wie Sie unsere eigene Walker-Klasse erstellen, implementieren und anpassen, um unsere Menüausgabe anzupassen.
Die bekannteste Verwendung der Anpassung mit Walker-Klassen in WordPress ist für Menüs, aber in Wirklichkeit verwendet WordPress Walker-Klassen für eine ganze Reihe von Fällen, zum Beispiel für die Ausgabe von Taxonomie-Hierarchien, Kommentarhierarchien [wp_list_pages](https://developer.wordpress.org/reference/functions/wp_list_pages/)()und [wp_list_categories](https://developer.wordpress.org/reference/functions/wp_list_categories/)(). Sie alle erweitern eine allgemeine WalkerKlasse. Wir werden die erweitern, die Walker_Nav_Menufür Menüs in WordPress verwendet wird.
Da wir eine andere Klasse erweitern, müssen wir nur die Funktionen hinzufügen, die wir überschreiben möchten. Wenn eine Funktion in unserer Klasse nicht vorhanden ist, führt WordPress stattdessen die Funktion der übergeordneten Klasse (der von uns erweiterten Klasse) aus.
Vorbereitung
Sie können Ihre Walker-Klasse in Ihre Plugin-Dateien, Themes function.phpoder jede PHP-Datei einfügen, die von functions.php(für saubereren Code) enthalten ist. Sie beginnen damit, Ihre Klasse mit einem Namen Ihrer Wahl zu definieren (stellen Sie sicher, dass der Klassenname eindeutig ist, und dies schließt mögliche Klassennamen im WordPress-Kern ein!) Erweitern Sie Walker_Nav_Menu:
class AWP_Menu_Walker extends Walker_Nav_Menu {
}Um WordPress anzuweisen, unseren Walker zu verwenden, definieren wir dies in unseren [wp_nav_menu](https://developer.wordpress.org/reference/functions/wp_nav_menu/)()Aufrufen. Diese Funktion ist für die Ausgabe eines Menüs zuständig und Sie haben wahrscheinlich mindestens eine in Ihrem Thema für das Hauptmenü.
Im Argumentarray wp_nav_menu()fügen Sie ein neues Element mit dem Schlüssel ‘walker’ hinzu und erstellen eine neue Instanz Ihrer Walker-Klasse wie folgt:
Wenn Sie Ihre Website aktualisieren, sollten Sie keine Änderung sehen. Dies liegt daran, dass unsere Klasse keine der übergeordneten Funktionen überschreibt und WordPress daher einfach die normalen Menü-Walker-Funktionen ausführt, wenn das Menü ausgegeben wird, genau wie zuvor, als wir ihm gesagt haben, dass es unseren Walker verwenden soll.
Die folgenden Funktionen können Sie Ihrer benutzerdefinierten Gehhilfeklasse hinzufügen, um die Funktionen der Erziehungsklasse zu Walker_Nav_Menuüberschreiben:
Die ersten vier sind Funktionen, die einfach für die Ausgabe verantwortlich sind, und alle erfordern, dass Sie an einen String anhängen – die erste Parametervariable. Wichtig zu wissen ist, dass man echohier draußen nichts macht, alles soll wie eine Kette aufgebaut werden.
start_lvl
Die Funktion start_lvlist für die Ausgabe des HTML für den Start eines neuen Levels zuständig. Kurz gesagt, es sollte den Start ausgeben <ul>.
function start_lvl(&$output, $depth=0, $args=null) { }Der erste Parameter, $outputder als Referenz übergeben wird, ist die Zeichenfolge, an die Sie Ihre Ausgabe anhängen. $depthist eine Ganzzahl, die anzeigt, auf welcher Ebene Sie sich befinden; 0 für oberste Ebene, 1 für direktes untergeordnetes Element der obersten Ebene und so weiter. $argsist ein Objekt aller in bereitgestellten Argumente wp_nav_menu().
end_lvl
Die end_lvlFunktion ist für die Ausgabe des HTML für das Ende eines Levels zuständig. Dies ist normalerweise nur der Abschluss </ul>.
function end_lvl(&$output, $depth=0, $args=null) { }Die Parameter sind genau die gleichen wie start_lvloben.
start_el
Diese Funktion ist für die Ausgabe des HTML jedes Elements verantwortlich. Kurz gesagt, es sollte den Anfang <li>und das <a>Tag mit dem Linktitel darin ausgeben.
function start_el(&$output, $item, $depth=0, $args=null, $id=0) { }Das erste Argument, $output, ist wie üblich die Zeichenfolge, an die Sie die Ausgabe anhängen. Das zweite Argument, $item, ist das Menüeintragsobjekt – und hier holen Sie sich die meisten Daten für die Ausgabe des Menüeintrags. Wenn der Menülink ein Beitragsmenüpunkt ist, erhalten Sie hier das Beitragsobjekt. Unabhängig vom Menütyp erhalten Sie auch einige zusätzliche nützliche Elemente; wie classes, url, title, und description.
Das dritte Argument, $depth, ist eine Ganzzahl, die Ihnen mitteilt, auf welcher Ebene wir uns befinden. Ebene 0 ist die oberste Ebene, 1 ist der obersten Ebene direkt untergeordnet und so weiter. Das vierte Argument, $args, ist ein Objekt aller Argumente, die für bereitgestellt werden wp_nav_menu(). Der fünfte Parameter, $id, ist die aktuelle Menüpunkt-ID.
end_el
Die end_elFunktion ist für die Ausgabe des Schließens eines Elements zuständig. Normalerweise würde es nur das </li>Tag ausgeben.
function end_el(&$output, $item, $depth=0, $args=null) { }Die Argumente für end_elsind die gleichen wie start_eloben, außer dass die Funktion keinen fünften Parameter hat, $id.
Anzeigeelement
Die Funktion display_elementist eine geerbte Funktion von der allgemeinen WalkerKlasse und ist die Funktion, die für das Durchlaufen verantwortlich ist. Dies ist die Funktion, die alle oben genannten Funktionen nacheinander aufruft.
Ich füge dies hier ein, weil Sie in einigen Fällen, zum Beispiel, wenn Sie verhindern möchten, dass ein ganzer Zweig durchlaufen wird, diese Funktion dafür verwenden würden.
function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output) { }Das erste Argument, $element, ist das Menüelementobjekt – das wird wie $itemin den obigen Funktionen weitergegeben. Das zweite Argument, $children_elementsdas als Referenz übergeben wird, enthält alle untergeordneten Elemente, die diese Funktion durchläuft. $max_depth, das dritte Argument, ist eine Ganzzahl, die angibt, wie tief wir durchqueren sollten, und das vierte Argument, $depth, ist die Tiefe, in der wir uns gerade befinden. Das fünfte Argument, $args, sind die Argumente, die an die Funktion übergeben wurden, die den Walker aufgerufen hat (für Menüs wären es die Argumente, die an wp_nav_menu()) übergeben wurden, und das letzte Argument, $output– als Referenz übergeben, ist die Ausgabe, die insgesamt als erstes Argument übergeben wird der oben genannten Funktionen.
Ändern der Ausgabe jedes Elements
In der obigen Übersicht sollten Sie sehen, dass die Funktion start_el()für die Ausgabe des HTML für ein einzelnes Menüelement verantwortlich ist. Beginnen wir damit, diese Funktion in unserer Walker-Klasse mit einem einfachen Beispiel zu überschreiben.
Beispiel: Verhindern des Hinzufügens von Links für ‘#’-Elemente
Lassen Sie uns sicherstellen, dass alle „ #“-Links ein <span>Element anstelle eines Link-Tags erhalten, um eine Aktualisierung der Seite zu vermeiden.
Wir beginnen das Element, indem wir ein <li>Tag an anhängen $output. Wir möchten sicherstellen, dass die Standardklassen von WordPress (z. B. „Menüpunkt”, „Menüpunkt-hat-Kinder” usw.) sowie manuell im Menü-Editor eingegebene Klassen zu unserem Listenelement hinzugefügt werden. Wir fügen die bereitgestellten Klassen als Array in $item->classesdie PHP-Funktion ein [implode](https://www.php.net/manual/en/function.implode.php)(), indem wir jedes Element durch ein Leerzeichen trennen.
In den Zeilen #5-9 und #13-17 handhaben wir die bedingte Ausgabe des Wrapping-Elements. Wir geben ein <a>Tag aus, es sei denn, die URL des Elements ist „ #“, in diesem Fall stellen wir <span>stattdessen ein Tag bereit. In Zeile #11 geben wir einfach den Text des Links aus, der sich in befindet $item->title.
Das ist alles, was wir brauchen, um sicherzustellen, dass alle Menüelemente, die " #" als URL haben, nicht anklickbar sind!
<a>Wenn Sie dies in einem gestylten Design tun, denken Sie daran, dass Sie etwas Stil verlieren könnten, wenn das Design das Tag direkt gestylt hat. Sie können dies lösen, indem Sie das Styling ändern und dem span-Element möglicherweise eine Klasse hinzufügen.
Beispiel: Beschreibungen von Menüpunkten anzeigen
Als Beispiel können Sie hier auch die Menübeschreibung ausgeben. Diese ist vorhanden, aber standardmäßig nicht aktiviert. Im WordPress-Menü-Editor müssen Sie oben rechts auf „Bildschirmoptionen” klicken und „Beschreibung” anzeigen:
Dadurch kann der Benutzer für jedes Element eine Beschreibung eingeben. Diese Beschreibung können Sie in Ihrer Walker-Klasse ausgeben. Angenommen, Sie möchten nur die Beschreibung für die Elemente der obersten Ebene anzeigen, da dies ein Teil des Designs Ihres Themas ist. Sie können einfach prüfen, ob das $itemeine Beschreibung hat und ob $depthes 0 ist, etwa so:
Beispiel: Hinzufügen von Dropdown-Carets
Ein häufigeres und nützliches Beispiel ist das Hinzufügen eines „Caret”, eines Symbols, das signalisiert, dass dieser Menüpunkt ein Dropdown-Menü hat (untergeordnete Elemente hat).
Beispiel für Carets in Aktion – hinter „Blog” und „News”
Sie müssen Ihre Caret-HTML-Ausgabe herausfinden. In meinem Fall gebe ich ein <i>Element mit bestimmten Klassen für einen schönen Abwärtspfeil aus, der in der Fontawesome- Bibliothek verfügbar ist, die Tausende von Symbolen bereitstellt. Sie möchten auch sicherstellen, dass dieses Caret-Zeichen nur für Elemente mit untergeordneten Elementen ausgegeben wird. Der beste Weg, um herauszufinden, ob das aktuelle Element Kinder hat, besteht darin, auf das Walker-Objekt (ja, das ist unser Walker selbst, aber auch die Klassen, die es erweitert!) in zu verweisen $argsund den booleschen Wert zu überprüfen has_children. Die Ausgabe eines Caretzeichens ist so einfach wie:
Die komplette Walker-Klasse würde so aussehen:
Und das ist alles, was Sie brauchen, um sicherzustellen, dass Ihr Menü schöne Caret-Symbole auf übergeordneten Elementen erhält und dass #Links nicht anklickbar sind.
Wenn Sie möchten, dass sich das Caret-Symbol ändert, z. B. in einen Aufwärtspfeil, wenn das Dropdown aktiv ist, müssen Sie dies mit Javascript zu Ihrem Design hinzufügen.
Wie die obigen Beispiele zeigen, können Sie die Ausgabe basierend auf beliebigen Bedingungen beliebig manipulieren. Sie können beispielsweise die Ausgabe basierend darauf ändern, ob eine bestimmte Klasse vorhanden ist (z. B. eine manuell im Menüeditor eingegebene Klasse), indem Sie in nach der Klasse suchen $item->classes, oder Sie können den in bereitgestellten Text des ausgegebenen Elements bearbeiten (z. B. groß schreiben) $item->title.
Ich möchte noch etwas Nützliches erwähnen. Denken Sie daran, dass $args alle Argumente enthält, die für bereitgestellt werden wp_nav_menu(). Dazu gehören zum Beispiel theme_locationund andere, wenn Sie also die Ausgabe nur für bestimmte Themenstellen ändern können – zum Beispiel Hauptmenü. Aber Sie können tatsächlich beliebige benutzerdefinierte Argumente angeben!
Angenommen, Sie geben dasselbe Menü mehrmals aus, z. B. einmal für den Desktop und noch einmal für Mobilgeräte. Oder möchten Sie, dass Ihr Walker die Elemente nur bearbeitet, wenn sie wp_nav_menu()in Ihrem Design ausgegeben werden, und nicht, wenn das Menü über ein Widget hinzugefügt wird? Vielleicht möchten Sie, dass Ihr Walker die Ausgabe in diesen Fällen anders handhabt?
Sie können beliebige benutzerdefinierte Argumente für angeben wp_nav_menu(). Als einfaches Beispiel füge ich show_caretsden Argumenten ein boolesches „ ” hinzu, um sicherzustellen, dass Carets nur in den Fällen hinzugefügt werden, in denen ich sie möchte – anstatt dass meine Walker-Klasse allen Menüs Carets hinzufügt.
Dann kann ich einfach mein Caret-hinzufügendes Stück Code oben (Zeile # 19-21) ändern, um zu prüfen, ob show_caretses vorhanden und wahr ist oder nicht $args, wie folgt:
Sie können beliebige Argumente hinzufügen, um sicherzustellen, dass Ihr Walker nur die gewünschten Menüs anpasst. Zum Beispiel einfache boolesche Werte für verschiedene Fälle, zB is_mobile_menu, oder alles andere, was Sie brauchen.
Und das war es auch schon. Fühlen Sie sich frei, zu experimentieren, und lassen Sie mich wissen, wenn Sie unten Fragen oder Vorschläge haben!