Share
Menüelemente, Seiten und (hierarchische) Taxonomien sind Beispiele für Daten mit einer baumartigen Struktur: Begriffe können Eltern, Kinder und Geschwister haben. Normalerweise möchten wir diese Struktur im HTML-Markup wiedergeben. Für die Anzeige eines Menüs möchten wir beispielsweise, dass der HTML-Code aus einer Liste von 'Top-Level'-Links besteht, mit verschachtelten Listen ihrer Kinder, die selbst verschachtelte Listen ihrer Kinder enthalten, und so weiter. Dieses Tutorial führt Sie durch eine von WordPress bereitgestellte Schulung, wodurch die Erstellung dieser Markierung extrem einfach ist.
Die Walker-Klasse ist eine abstrakte Klasse, die dazu dient, Elemente mit hierarchischen (oder baumartigen) Strukturen zu durchqueren und anzuzeigen. Es 'tut' eigentlich nicht (im Sinne der Generierung von HTML) etwas. Es verfolgt einfach jeden Zweig Ihres Baums: Er muss durch andere Klassen erweitert werden, die ihm sagen, was für jedes Element zu tun ist, auf das er stößt. WordPress bietet eigene Erweiterungsklassen, wie zum Beispiel:
Accentsconagua
Walker_Nav_Menu - zum Anzeigen des HTML für NavigationsmenüsWalker_Page - zum Anzeigen einer Liste von SeitenWalker_Category - zum Anzeigen einer Liste mit Taxonomie-Begriffen.Jede dieser Klassen erweitert die Walker-Klasse, indem sie einfach diktiert, was die Klasse bei jedem Element und jeder Ebene des Baums ausgibt. Um diese Klasse zu enträtseln, werden wir uns die wichtigsten Methoden und einige Beispiele für ihre Verwendung ansehen. Die Klasse selbst ist hier zu finden.
Gehenwalk ($ elements, $ max_depth)
Die Walker-Klasse wird mit der Walk-Methode gestartet. Diese Methode gibt den HTML-Code zurück, sobald er generiert wurde. Es akzeptiert zwei Argumente:
$ max_depth - legt fest, wie viele Generationen wir erforschen$ args. Dies wird dann an andere Methoden in der Klasse übergebenBei der Walk-Methode werden die Elemente der obersten Ebene (diejenigen ohne Eltern) ausgewählt und in einem Array angeordnet. Der Rest, die untergeordneten Elemente, werden in einem zweiten Array platziert, in dem der Schlüssel die ID des übergeordneten Elements ist (es handelt sich um ein zweidimensionales Array, da ein übergeordnetes Element mehrere untergeordnete Elemente haben kann):
$ children_elements = array ('1' => array () // Array von Elementen, die den Kindern von 1 entsprechen, '4' => array () // Array von Elementen, die den Kindern von 4 entsprechen); Anschließend durchläuft es jedes der übergeordneten Elemente und wendet die Methode an display_element.
Display_Elementdisplay_element ($ element, & $ children_elements, $ max_depth, $ depth = 0, $ args & $ output)
Wie der Name schon sagt display_element ist für die Anzeige eines Elements in unserem Baum verantwortlich. In der Tat werden dazu mehrere Funktionen aufgerufen. Diese Funktionen werden in der Walker-Klasse absichtlich leer gelassen - und diese werden in den Erweiterungsklassen geändert, da sie den tatsächlich zurückgegebenen HTML-Code bestimmen. Diese schließen ein:
start_lvl - eine Funktion, um den HTML-Code für den Beginn einer neuen Ebene zurückzugeben. Im Falle von Listen wäre dies der Beginn einer neuen "Unterliste" und damit die Rückgabe der
end_lvl - aufgerufen, wenn wir ein Level beendet haben. Im Navigationsmenü-Beispiel ist diese Funktion dafür verantwortlich, die Unterliste mit einem Schlusslisten-Tag zu beenden start_el - die Funktion, die für die Anzeige des aktuellen Elements verantwortlich ist, in dem wir uns befinden. Bei Menüs ist dies die end_el - Die Funktion, die nach einem Element und allen untergeordneten Elementen aufgerufen wurde, wurde angezeigt. Für unser Menübeispiel bedeutet dies, dass Sie einen Abschluss wiedergeben müssen Was macht also? display_element eigentlich machen Hier findet eigentlich die ganze Magie der Walker-Klasse statt. Zuerst werfen wir einen Blick auf die Argumente, die gegeben wurden:
$ element - Dies ist das Element, an dem wir uns derzeit in unserem Baum befinden$ children_elements - ein Array von alles untergeordnete Elemente (nicht nur untergeordnete Elemente des oben genannten Elements). Dies ist das zweite Array, das in gebildet wird gehen Methode und die Schlüssel sind die IDs des Elternteils.$ max_depth - Wie weit dürfen wir erforschen$ Tiefe - wie weit unten sind wir derzeit$ args - optionale Argumente (bereits erwähnt)$ ausgabe - Das HTML bisher. Dies wird hinzugefügt, wenn wir mehr vom Baum untersuchen. Das display_element Methode ruft zuerst auf start_el welches für die Anzeige des Elements verantwortlich ist. Wie das genau geht, hängt vom Kontext ab. Bei einem Dropdown-Menü kann es sein oder für ein Navigationsmenü kann es sein
Als nächstes wird geprüft, ob das aktuelle Element, an dem wir uns befinden, Kinder hat und dass wir die maximale Tiefe nicht erreicht haben. Wenn ja, erkunden wir die Kinder nacheinander, indem wir anrufen display_element für jeden von ihnen (wobei das Tiefenargument um eins erhöht wird). Auf diese Weise die display_element rekursiv ruft sich selbst auf, bis wir den Boden erreichen.
Angenommen, wir haben das Ende erreicht (ein Element ohne untergeordnete Elemente oder die maximale Tiefe), dann ruft es auf end_el was das schließende Tag hinzufügt. Dort die aktuelle Instanz von display_element endet und wir gehen zurück zum Elternteil, der sich bewirbt display_element zum nächsten Kind, bis wir jedes seiner Kinder bearbeitet haben. Wenn das Elternteil keine weiteren Kinder mehr hat, bewegen wir uns zurück in den Baum und so weiter, bis jeder Zweig erforscht ist. Verwirrt? Er ist ein Diagramm, von dem ich hoffe, dass es die Dinge klärt:
Die Verwendung der Walker-Klasse macht die Anzeige benutzerdefinierter hierarchischer Daten sehr einfach. Angenommen, Sie haben ein Array von Objekten mit 'Etikette','Eltern ID' und 'Objekt Identifikation'Eigenschaften, von denen Sie eine Liste anzeigen möchten. Dies kann nun leicht mit einer sehr einfachen Klasse erreicht werden:
Hinweis: Die Erweiterungsklasse legt fest, wo die ID eines Elements und die des übergeordneten Elements zu finden ist.
class Walker_Simple_Example erweitert Walker // Setzt die Eigenschaften des Elements, das die ID des aktuellen Elements und seines übergeordneten Elements enthält. var $ db_fields = array ('parent' => 'parent_id', 'id' => 'object_id'); // Zeigt den Beginn eines Levels an. Z.B 'Sie können die Walker-Klassen erweitern, um den angezeigten Inhalt zu ändern, den generierten HTML-Code zu ändern oder sogar die Anzeige bestimmter Zweige zu verhindern. Funktionen wie:
wp_nav_menuwp_list_pageswp_list_categoriesStellen Sie eine Option zum Angeben Ihrer eigenen benutzerdefinierten Walker-Klasse bereit, damit Sie deren Erscheinungsbild relativ leicht ändern können, indem Sie Ihre eigene benutzerdefinierte Walker-Klasse angeben. In vielen Fällen ist es tatsächlich einfacher, eine geeignete Walker-Erweiterung zu erweitern als die Walker-Klasse selbst.
Angenommen, Sie möchten ein Untermenü (Untermenü) haben, das sich auf Ihr Hauptmenü bezieht. Dies kann die Form von Links haben, die sich direkt unter Ihrem Hauptmenü oder in einer Seitenleiste befinden und nur die 'Nachkommen'-Menüelemente der aktuellen' Oberste Seite 'anzeigen. Als Beispiel aus dem obigen Diagramm möchten wir, wenn wir uns auf den Unterseiten "Archiv", "Autor" oder "News" befinden, alle Links unter "Archiv" anzeigen. Schon seit Walker_Nav_Menu Das meiste von dem, was wir wollen, werden wir diese Klasse erweitern und nicht die Walker-Klasse. Das erspart uns viel Mühe, seit dem Walker_Nav_Menu fügt die entsprechenden Klassen hinzu ('aktuell','gegenwärtiger Vorfahr'etc) zu den entsprechenden Links. Wir werden das erweitern Walker_Nav_Menu Walker-Klasse, um die Logik geringfügig zu ändern und zu verhindern, dass Verknüpfungen auf der obersten Ebene oder Nachkommen der "Nicht-Root" -Seiten angezeigt werden.
Zunächst verwenden wir in Ihren Vorlagendateien die wp_nav_menu () Funktion zweimal und zeigt auf dasselbe thema ort (Ich werde es nennenprimär'). Wenn Sie noch keinen Themenstandort registriert haben, sollten Sie diesen Artikel lesen. Unabhängig davon, welchen Themenbereich Sie verwenden, sollten Sie ein Menü an diesem Ort speichern. Wir werden dieses Menü zweimal anzeigen. Erstens, wo immer Ihr Hauptmenü erscheinen soll:
wp_nav_menu (array ('theme_location' => 'primary', 'depth' => 1)); Dann wiederum mit einem benutzerdefinierten Wanderer, um nur die (relevanten) untergeordneten Seiten anzuzeigen.
wp_nav_menu (array ('theme_location' => 'primary', 'walker' => new SH_Child_Only_Walker (), 'depth' => 0)); Zuallererst möchten wir keine Eltern der obersten Ebene darstellen. Erinnern Sie sich daran, dass die Funktion für die Eröffnung verantwortlich ist Tag und der Link ist start_el und die für das Schließen verantwortliche Funktion Tag ist end_el. Wir prüfen einfach, ob wir uns auf der übergeordneten Ebene befinden. Wenn dem so ist, machen wir nichts. Ansonsten fahren wir wie gewohnt fort und rufen die Funktion aus dem auf Walker_Nav_Menu Klasse.
// Keine Elemente der obersten Ebene drucken function start_el (& $ output, $ item, $ depth = 0, $ args = array ()) if (0 == $ depth) return; parent :: start_el (& $ output, $ item, $ tiefe, $ args); function end_el (& $ output, $ item, $ depth = 0, $ args = array ()) if (0 == $ depth) return; parent :: end_el (& $ output, $ item, $ tiefe, $ args);
Wir erweitern das display_element. Diese Funktion ist für das Abfahren der Äste verantwortlich. Wir möchten es in seinen Spuren stoppen, wenn wir uns auf der obersten Ebene befinden und nicht auf dem aktuellen Root-Link. Um zu prüfen, ob der Zweig, in dem wir uns befinden, 'aktuell' ist, prüfen wir, ob der Artikel eine der folgenden Klassen hat: 'aktueller Menüpunkt','aktuelles übergeordnetes Menü','aktueller Menüvorfahr'.
// Folge nur einer Verzweigungsfunktion display_element ($ element, & $ children_elements, $ max_depth, $ depth = 0, $ args, & $ output) // Überprüfe, ob das Element ein 'aktuelles Element' ist. Class $ current_element_markers = array ( 'Aktueller Menüpunkt', 'Aktueller Menü-Stamm', 'Aktueller Menü-Vorfahr'); $ current_class = array_intersect ($ current_element_markers, $ element-> classes); // Wenn das Element eine 'aktuelle' Klasse hat, ist es ein Vorfahre des aktuellen Elements $ ancestor_of_current =! Empty ($ current_class); // Wenn es sich um einen Link auf oberster Ebene und nicht um den aktuellen oder Vorfahren des aktuellen Menüelements handelt - hier stoppen. if (0 == $ depth &&! $ ancestor_of_current) return; parent :: display_element ($ element, & $ children_elements, $ max_depth, $ tiefe, $ args & $ output);
Wir erweitern jetzt die start_lvl und end_lvl Funktionen. Diese sind für die Ausgabe des HTML-Codes verantwortlich, der eine Ebene umschließt (in diesem Fall der
// Die oberste Level-Funktion start_lvl darf nicht umbrochen werden (& $ output, $ depth = 0, $ args = array ()) if (0 == $ depth) return; parent :: start_lvl (& $ ausgabe, $ tiefe, $ args); Funktion end_lvl (& $ output, $ depth = 0, $ args = array ()) if (0 == $ depth) return; parent :: end_lvl (& $ ausgabe, $ tiefe, $ args);
Diese Klasse in vollem Umfang:
Klasse SH_Child_Only_Walker erweitert Walker_Nav_Menu // Die oberste Funktion start_lvl darf nicht gestartet werden (& $ -Ausgabe, $ depth = 0, $ args = array ()) if (0 == $ depth) return; parent :: start_lvl (& $ ausgabe, $ tiefe, $ args); // Beenden Sie nicht die oberste Funktion end_lvl (& $ output, $ depth = 0, $ args = array ()) if (0 == $ depth) return; parent :: end_lvl (& $ ausgabe, $ tiefe, $ args); // Keine Elemente der obersten Ebene drucken function start_el (& $ output, $ item, $ depth = 0, $ args = array ()) if (0 == $ depth) return; parent :: start_el (& $ output, $ item, $ tiefe, $ args); function end_el (& $ output, $ item, $ depth = 0, $ args = array ()) if (0 == $ depth) return; parent :: end_el (& $ output, $ item, $ tiefe, $ args); // Folgen Sie nur einer Verzweigungsfunktion display_element ($ element, & $ children_elements, $ max_depth, $ depth = 0, $ args & $ output) // Prüfen Sie, ob das Element ein 'aktuelles Element' ist. Klasse $ current_element_markers = array ('aktuelles Menüelement', 'aktuelles Menü-Elternteil', 'aktuelles Menü-Vorfahren'); $ current_class = array_intersect ($ current_element_markers, $ element-> classes); // Wenn das Element eine 'aktuelle' Klasse hat, ist es ein Vorfahre des aktuellen Elements $ ancestor_of_current =! Empty ($ current_class); // Wenn es sich um einen Link auf oberster Ebene und nicht um den aktuellen oder Vorfahren des aktuellen Menüelements handelt - hier stoppen. if (0 == $ depth &&! $ ancestor_of_current) return parent :: display_element ($ element, & $ children_elements, $ max_depth, $ depth, $ args, & $ output); Sobald Sie wissen, wie die Walker-Klasse funktioniert, können Sie sie erweitern (oder die vorhandenen Erweiterungen von WordPress), um die Darstellung Ihrer hierarchischen Daten zu ändern. Zum Beispiel können Sie:
