Sprache

Kontakt aufnehmen

WordPress-Plugin · seit 2021

Taxonomy Chain Menu

Verkettete Dropdowns über einer hierarchischen Taxonomie (Marke, Modell, Generation), die in einem Beitrag, einer Begriffsseite oder einer Filteraktion enden.

Erstveröffentlichung
Aktive Installationen
100+
  • PHP
  • WordPress
  • get_categories()
  • admin-ajax
  • JavaScript (ES6 classes)
  • Fetch API
  • DOMParser
  • CustomEvent

Über mich

Taxonomy Chain Menu macht aus jeder hierarchischen Taxonomie jedes Post Types eine Kette von Dropdowns: Die Wahl eines Begriffs lädt die nächste Ebene, und am Ende der Kette erhält der Besucher eine Beitragsliste, einen Link zum Begriff oder nichts. Es ist ein Shortcode mit 22 Einstellungen und kann auf derselben Seite auch eine TableOn- oder WOOT-Tabelle oder einen WOOF-Produktfilter steuern.

Die Ingenieursarbeit steckt darin, einen Baum unbekannter Tiefe Ebene für Ebene zu laden, zu erkennen, wann eine Ebene die letzte ist, einen gewählten Pfad aus einem Link wiederherzustellen und mit anderen Plugins zu kommunizieren, ohne von deren Code abzuhängen.

Taxonomy Chain Menu · verkettete Auswahllisten

was gelöst wurde

LIVEseit 2021

Verkettete Dropdowns über einem Taxonomiebaum

shipped · 2021

Was es bringtBesucher wählen eine Marke, dann ein Modell, dann eine Generation und gelangen schnell auf die richtige Seite. Es werden nur die nötigen Ebenen geladen, und ein gewählter Pfad lässt sich als Link teilen.

Problem
Eine Taxonomie kann mehrere Ebenen tief sein. Den ganzen Baum vorab zu rendern ist bei großen Katalogen schwer; Ebene für Ebene zu laden erfordert zu wissen, wann eine Ebene die letzte ist und was dann angezeigt wird.
Lösung

Der Server rendert pro Anfrage eine Ebene und antwortet mit dem nächsten Select, einem Beitrags-Select oder einem Begriffslink. Der Browser behält geladene Ebenen als DOM-Knoten und spielt sie aus dem Speicher wieder ab.

Stack
  • PHP
  • admin-ajax
  • JavaScript
  • Fetch API
Aufgaben · 6
Nur die Ebene laden, die der Besucher geöffnet hatget_terms() nach Parent mit hide_empty; ajax liefert das nächste Select oder eine Blattantwort

get_chain_item() liest den Eltern-Begriff aus dem Request und fragt get_categories() nach dessen nicht leeren Kindern. Gibt es Kinder, liefert es ein Select; andernfalls hängt die Antwort vom Blattmodus ab. Das Frontend parst das HTML mit DOMParser und hängt den Knoten an die Kette an.

Festlegen, was das Ende der Kette zeigtwatch_view wählt ein Beitrags-Select, get_term_link() oder keine Ausgabe

Im Modus 'posts' liefert das Blatt ein Select der Beiträge des Begriffs mit Permalinks als Werten, mit konfigurierbarem Limit, Sortierung und Sortierung nach Meta-Key. Im Modus 'terms' liefert es die Begriffs-URL, und das Frontend rendert eine Schaltfläche. 'none' beendet die Kette stillschweigend, der Modus, der verwendet wird, wenn die Kette nur einen Filter steuert.

Eine Anfrage für einen Begriff ohne Kinder ist verschwendetIm Modus terms trägt jede Option ihre Kinderzahl; ein Blatt öffnet den Link direkt

Wenn watch_view 'terms' ist, fügt generate_tax_select() jeder Option data-child-count (wp_count_terms mit dem Begriff als Parent) und data-link hinzu. Das Frontend prüft die Zahl und zeigt bei 0 die Schaltfläche, ohne den Server aufzurufen.

Das Zurückgehen in der Kette soll dieselben Ebenen nicht erneut ladenGeladene Select-Knoten pro term_id zwischenspeichern; die Änderung einer Ebene entfernt alle späteren

trigger_taxonomy_select() entfernt zuerst jedes Element nach dem geänderten Select und sucht dann in this.cache[term_id]. Ein zwischengespeicherter Knoten wird mit gelöschter Auswahl wieder angehängt; eine zwischengespeicherte Blattantwort erzeugt die Schaltfläche neu. Nur unbekannte Begriffe gehen an den Server, und jedes Ergebnis wird mit seinen Request-Daten gespeichert, sodass Events für zwischengespeicherte und frische Ebenen gleich ausgelöst werden.

Einen gewählten Pfad aus einem Link oder Shortcode wiederherstellenready_chain listet Begriffs-IDs; der Server rendert in einem Durchgang jede Ebene vorausgewählt

ready_chain kommt aus dem Shortcode oder dem GET-Parameter ready_chain als kommagetrennte Liste von Begriffs-IDs; ein Eintrag, der keine einfache Zahl ist, wird als Beitrags-ID gelesen. draw_chain_menu() geht sie durch, rendert jede Ebene mit der nächsten ausgewählten ID und verwendet diese als Parent der folgenden; ein nicht numerischer Eintrag wird zum vorausgewählten Beitrag. Nach dem Laden fügt das Frontend die Schaltfläche für den letzten Wert hinzu und sendet das Change-Event für den tiefsten gewählten Begriff erneut, sodass verbundene Tabellen und Filter den Zustand übernehmen.

Die oberste Ebene einschränken, ohne tiefere Ebenen zu beschneideninclude_top gilt nur, wenn parent 0 ist; include und exclude gelten überall

Eine Site will vielleicht nur einige Marken oben, aber alle Modelle darunter. get_terms() ersetzt die include-Liste nur bei der Wurzelanfrage durch include_top. Der Shortcode prüft außerdem mit get_object_taxonomies(), dass die Taxonomie zum Post Type gehört, bevor er irgendetwas rendert.

Tabellen und Filter von der Kette aus steuern

im Produkt

Was es bringtDieselben Dropdowns können die Produkttabellen und Produktfilter steuern, die bereits auf der Seite sind, sodass Besucher einen Katalog an einer Stelle eingrenzen.

Problem
Die Kette ist oft eine Navigationsfront für andere Plugins auf derselben Seite: eine TableOn- oder WOOT-Tabelle oder ein WOOF-Produktfilter. Sie haben ihren eigenen Zustand und ihre eigene Neuzeichnungslogik und wissen nichts von der Kette.
Lösung

Jede Auswahl löst ein DOM-CustomEvent mit den Request-Daten aus. Kleine Konnektoren übersetzen es in das filter_data einer Tabelle oder die aktuellen Werte von WOOF, und PHP-Hooks lassen Site-Code Optionsdaten und Beschriftungen ändern.

Stack
  • JavaScript
  • CustomEvent
  • WordPress filters
Aufgaben · 5
Andere Plugins müssen ohne enge Kopplung reagierenJede Änderung löst ein CustomEvent 'taxonomy-chain-menu' mit Request-Daten aus

cast_event() sendet die Request-Daten, den Container und den neuen Knoten. Die eingebauten Konnektoren hören auf dieses Event; jedes andere Skript kann das auch. Ketten, die einen generischen Filter anfordern, erhalten zusätzlich 'taxonomy-chain-menu-do-filter' mit term_id, slug und container.

Eine TableOn- oder WOOT-Tabelle nach dem tiefsten gewählten Begriff filternDer Konnektor ersetzt das filter_data der Tabelle durch {taxonomy: term_id} und zeichnet dann neu

table_connector() findet die Tabelle in DataTable23.tables über connect_table. Wurde eine Ebene auf 'select' zurückgesetzt, geht er die Selects vom Ende her durch, um das tiefste noch gewählte zu finden. Dann ersetzt er das filter_data der Tabelle durch den gewählten Begriff oder entfernt den Taxonomie-Schlüssel, wenn nichts gewählt ist, und ruft redraw_table() auf; den Rest erledigen Ajax und Cache-Logik der Tabelle.

WOOF erwartet Term-Slugs und sein eigenes URL-FormatDen Slug und ready_chain in woof_current_values schreiben und den Link von WOOF absenden

Optionen tragen data-slug vom Server. Mit do_filter='woof' legt der Handler den tiefsten Slug unter dem Taxonomie-Schlüssel von woof_current_values ab und speichert den vollständigen ID-Pfad als ready_chain, damit die WOOF-Ergebnisseite die Kette neu aufbauen kann. Wird alles abgewählt, entfernt er vor dem Absenden beide Schlüssel.

Optionstext, Bilder und Beschriftungen müssen aus dem Site-Code kommenDen Hook taxonomy-chain-menu-option-data pro Option einhängen; Präfix call_filter_ für Beschriftungen

draw_select() fragt den Filter taxonomy-chain-menu-option-data nach Text und Bild jeder Option und übergibt die Begriffs- oder Beitrags-ID, den Parent und chain_id. Eine Beschriftung, die mit call_filter_ beginnt, wird durch Anwenden des genannten Filters aufgelöst, sodass Beschriftungen pro Seite übersetzt oder berechnet werden können.

Shortcode-Einstellungen müssen jede Ajax-Anfrage erreichenEinstellungen liegen in data-Attributen; JS wandelt camelCase-Schlüssel zurück in snake_case

draw_chain_menu() gibt alle Einstellungen als escapte data-Attribute am Container aus, der Server hält also keinen Zustand pro Kette. prepare_request_data() kopiert das Dataset in den Request und wandelt dabei die camelCase-Namen des Datasets in snake_case um; sanitize_request_data() wandelt Schlüssel in Kleinbuchstaben um und bereinigt jeden Wert.

Gestaltete Selects, ohne das native Verhalten zu verlieren

im Produkt

Was es bringtDropdowns lassen sich passend zum Site-Design gestalten, wobei das Standardverhalten erhalten bleibt, auf das Formulare und andere Plugins angewiesen sind.

Problem
Sites wollen gestaltete Dropdowns, aber die Kettenlogik, die Konnektoren und die Formularverarbeitung hängen von nativen Select-Elementen und deren Change-Events ab.
Lösung

Native Selects bleiben als verborgene maßgebliche Quelle. Ein Reflector klont die Kette nach jeder Änderung in Selectron23-Widgets und sendet Auswahlen über ein Custom-Event an das native Select zurück.

Stack
  • JavaScript
  • CustomEvent
  • DOM cloning
Aufgaben · 3
Ein gestaltetes Widget darf das echte Select nicht ersetzenTCM_Reflector klont die Kette nach jeder Änderung neben das verborgene Original

Mit select_wrapper='selectron23' wird der Container verborgen gerendert, und TCM_Reflector fügt ein Geschwisterelement ein. clone() baut es aus den aktuellen Kindern des Containers neu auf und verpackt jedes geklonte Select in ein Selectron23-Widget, und läuft nach jedem Ebenenwechsel, Cache-Treffer und Loader-Update.

Eine Auswahl im Widget muss das echte Select steuernonSelect löst select-changed aus; ein Listener setzt den Wert und führt die Logik aus

Das onSelect von Selectron23 löst taxonomy-chain-menu-select-changed auf dem ursprünglichen Select mit dem Wert und dem Container aus. append_select_changed_event() prüft den Container, setzt den Wert und das Attribut selected und ruft denselben Handler auf wie bei einem nativen Change, sodass Kette, Cache und Konnektoren einen einzigen Codepfad sehen.

Unterschiedliche Breiten und Höhen pro Ebene aus einer EinstellungMit senkrechten Strichen getrennte Listen; der letzte Wert gilt für alle tieferen Ebenen

select_width ('300px|250px|20%') und selectron23_max_open_height werden an '|' aufgeteilt und bei jeder hinzugefügten Ebene nach Index angewendet. Die Tiefe der Kette ist vorab nicht bekannt, daher deckt der letzte Wert jede weitere Ebene ab.

Zahlen

wordpress.org
  • Aktive Installationen 100+ Zähler von wordpress.org.
  • Jahre Support 5 Seit 25. Februar 2021, letztes Update 21. Mai 2026.