Język

Napisz do mnie

Wtyczka WordPress · od 2021

Taxonomy Chain Menu

Łańcuchowe listy rozwijane nad hierarchiczną taksonomią (marka, model, generacja), które kończą się wpisem, stroną terminu lub akcją filtra.

Pierwsze wydanie
Aktywne instalacje
100+
  • PHP
  • WordPress
  • get_categories()
  • admin-ajax
  • JavaScript (klasy ES6)
  • Fetch API
  • DOMParser
  • CustomEvent

O mnie

Taxonomy Chain Menu zamienia dowolną hierarchiczną taksonomię dowolnego typu wpisu w łańcuch list rozwijanych: wybór terminu ładuje następny poziom, a na końcu łańcucha odwiedzający dostaje listę wpisów, link do terminu albo nic. To jeden shortcode z 22 ustawieniami, który może też sterować tabelą TableOn lub WOOT albo filtrem produktów WOOF na tej samej stronie.

Praca inżynieryjna polega na ładowaniu drzewa o nieznanej głębokości po jednym poziomie, wiedzy, kiedy poziom jest ostatni, przywracaniu wybranej ścieżki z linku oraz komunikacji z innymi wtyczkami bez zależności od ich kodu.

Taxonomy Chain Menu · łańcuchowe listy wyboru

co rozwiązano

AKTYWNYod 2021

Łańcuchowe listy rozwijane nad drzewem taksonomii

shipped · 2021

Co to dajeOdwiedzający wybierają markę, potem model, potem generację i szybko trafiają na właściwą stronę. Ładują się tylko potrzebne poziomy, a wybraną ścieżkę można udostępnić jako link.

Problem
Taksonomia może mieć kilka poziomów głębokości. Renderowanie całego drzewa z góry jest ciężkie dla dużych katalogów; ładowanie poziom po poziomie wymaga wiedzy, kiedy poziom jest ostatni i co wtedy pokazać.
Rozwiązanie

Serwer renderuje jeden poziom na żądanie i odpowiada następnym selectem, selectem wpisów albo linkiem do terminu. Przeglądarka trzyma pobrane poziomy jako węzły DOM i odtwarza je z pamięci.

Technologie
  • PHP
  • admin-ajax
  • JavaScript
  • Fetch API
Zadania · 6
Ładowanie tylko tego poziomu, który otworzył odwiedzającyget_terms() według rodzica z hide_empty; ajax zwraca następny select lub odpowiedź dla liścia

get_chain_item() odczytuje termin nadrzędny z żądania i prosi get_categories() o jego niepuste dzieci. Jeśli dzieci są, zwraca select; w przeciwnym razie odpowiedź zależy od trybu liścia. Front-end parsuje HTML przez DOMParser i dołącza węzeł do łańcucha.

Decyzja, co pokazuje koniec łańcuchawatch_view wybiera select wpisów, get_term_link() albo brak wyjścia

W trybie 'posts' liść zwraca select wpisów terminu z permalinkami jako wartościami, z konfigurowalnym limitem, kolejnością i sortowaniem po kluczu meta. W trybie 'terms' zwraca URL terminu, a front-end renderuje przycisk. 'none' kończy łańcuch po cichu, co jest trybem używanym, gdy łańcuch tylko steruje filtrem.

Żądanie dla terminu bez dzieci jest zmarnowaneW trybie terms każda opcja niesie liczbę dzieci; liść otwiera link bezpośrednio

Gdy watch_view to 'terms', generate_tax_select() dodaje do każdej opcji data-child-count (wp_count_terms z terminem jako rodzicem) i data-link. Front-end sprawdza liczbę i dla 0 pokazuje przycisk bez wywoływania serwera.

Powrót w górę łańcucha nie powinien pobierać ponownie tych samych poziomówCache pobranych węzłów select według term_id; zmiana poziomu usuwa wszystkie późniejsze

trigger_taxonomy_select() najpierw usuwa każdy element po zmienionym select, potem szuka w this.cache[term_id]. Węzeł z cache jest dołączany ponownie z wyczyszczonym wyborem; odpowiedź liścia z cache odtwarza przycisk. Do serwera trafiają tylko niewidziane dotąd terminy, a każdy wynik jest zapisywany razem z danymi żądania, więc zdarzenia odpalają się tak samo dla poziomów z cache i świeżych.

Przywrócenie wybranej ścieżki z linku lub shortcode'uready_chain wymienia ID terminów; serwer renderuje każdy poziom z zaznaczeniem w jednym przebiegu

ready_chain pochodzi z shortcode'u lub parametru GET ready_chain jako lista ID terminów rozdzielona przecinkami; element, który nie jest zwykłą liczbą, jest odczytywany jako ID wpisu. draw_chain_menu() przechodzi po niej, renderując każdy poziom z zaznaczonym następnym ID i używając go jako rodzica kolejnego; element nienumeryczny staje się zaznaczonym wpisem. Po załadowaniu front-end dodaje przycisk dla ostatniej wartości i ponownie emituje zdarzenie change dla najgłębiej wybranego terminu, aby podłączone tabele i filtry przejęły stan.

Ograniczenie najwyższego poziomu bez obcinania głębszych poziomówinclude_top działa tylko gdy parent to 0; include i exclude działają wszędzie

Strona może chcieć tylko niektórych marek na górze, ale wszystkie modele pod nimi. get_terms() zastępuje listę include przez include_top tylko dla żądania korzenia. Shortcode sprawdza też przez get_object_taxonomies(), że taksonomia należy do typu wpisu, zanim cokolwiek wyrenderuje.

Sterowanie tabelami i filtrami z łańcucha

w produkcie

Co to dajeTe same listy rozwijane mogą sterować tabelami produktów i filtrami produktów już obecnymi na stronie, więc odwiedzający zawężają katalog w jednym miejscu.

Problem
Łańcuch jest często frontem nawigacyjnym dla innych wtyczek na tej samej stronie: tabeli TableOn lub WOOT albo filtra produktów WOOF. Mają one własny stan i logikę przerysowania i nic nie wiedzą o łańcuchu.
Rozwiązanie

Każdy wybór wysyła DOM CustomEvent z danymi żądania. Małe konektory tłumaczą go na filter_data tabeli lub bieżące wartości WOOF, a hooki PHP pozwalają kodowi strony zmieniać dane opcji i etykiety.

Technologie
  • JavaScript
  • CustomEvent
  • filtry WordPress
Zadania · 5
Inne wtyczki muszą reagować bez ścisłego sprzężeniaKażda zmiana wysyła CustomEvent 'taxonomy-chain-menu' z danymi żądania

cast_event() wysyła dane żądania, kontener i nowy węzeł. Wbudowane konektory nasłuchują tego zdarzenia; każdy inny skrypt może zrobić to samo. Łańcuchy, które proszą o ogólny filtr, dostają też 'taxonomy-chain-menu-do-filter' z term_id, slug i container.

Filtrowanie tabeli TableOn lub WOOT według najgłębiej wybranego terminuKonektor zastępuje filter_data tabeli przez {taxonomy: term_id}, po czym przerysowuje

table_connector() znajduje tabelę w DataTable23.tables według connect_table. Jeśli poziom został zresetowany do 'select', przechodzi po selectach od końca, by znaleźć najgłębszy wciąż wybrany. Następnie zastępuje filter_data tabeli wybranym terminem albo usuwa klucz taksonomii, gdy nic nie jest wybrane, i wywołuje redraw_table(); resztę robi własna logika ajax i cache tabeli.

WOOF oczekuje sluga terminów i własnego formatu URLZapisujemy slug i ready_chain w woof_current_values i wysyłamy link WOOF

Opcje niosą data-slug z serwera. Przy do_filter='woof' handler wstawia najgłębszy slug pod kluczem taksonomii w woof_current_values i zapisuje pełną ścieżkę ID jako ready_chain, aby strona wyników WOOF mogła odbudować łańcuch. Odznaczenie wszystkiego usuwa oba klucze przed wysłaniem.

Tekst opcji, obrazy i etykiety muszą pochodzić z kodu stronyHook taxonomy-chain-menu-option-data dla każdej opcji; prefiks call_filter_ dla etykiet

draw_select() prosi filtr taxonomy-chain-menu-option-data o tekst i obraz każdej opcji, przekazując ID terminu lub wpisu, rodzica i chain_id. Etykieta zaczynająca się od call_filter_ jest rozwiązywana przez zastosowanie filtra o tej nazwie, więc etykiety mogą być tłumaczone lub obliczane dla każdej strony.

Ustawienia shortcode'u muszą docierać do każdego żądania ajaxUstawienia żyją w atrybutach data-; JS zamienia klucze camelCase z powrotem na snake_case

draw_chain_menu() drukuje wszystkie ustawienia jako escapowane atrybuty data- na kontenerze, więc serwer nie trzyma stanu dla poszczególnych łańcuchów. prepare_request_data() kopiuje dataset do żądania, zamieniając nazwy camelCase z datasetu na snake_case; sanitize_request_data() zamienia klucze na małe litery i sanityzuje każdą wartość.

Stylizowane selecty bez utraty natywnego zachowania

w produkcie

Co to dajeListy rozwijane można stylizować zgodnie z wyglądem strony, zachowując standardowe zachowanie, na którym polegają formularze i inne wtyczki.

Problem
Strony chcą stylizowanych list rozwijanych, ale logika łańcucha, konektory i obsługa formularzy zależą od natywnych elementów select i ich zdarzeń change.
Rozwiązanie

Natywne selecty pozostają ukrytym źródłem prawdy. Reflektor klonuje łańcuch do widżetów Selectron23 po każdej zmianie i odsyła wybory do natywnego selecta przez zdarzenie niestandardowe.

Technologie
  • JavaScript
  • CustomEvent
  • klonowanie DOM
Zadania · 3
Stylizowany widżet nie może zastąpić prawdziwego selectaTCM_Reflector klonuje łańcuch obok ukrytego oryginału po każdej zmianie

Przy select_wrapper='selectron23' kontener jest renderowany jako ukryty, a TCM_Reflector wstawia element-rodzeństwo. clone() odbudowuje go z bieżących dzieci kontenera, opakowując każdy sklonowany select w widżet Selectron23, i uruchamia się po każdej zmianie poziomu, trafieniu w cache i aktualizacji loadera.

Wybór w widżecie musi sterować prawdziwym selectemonSelect wysyła select-changed; listener ustawia wartość i uruchamia logikę

onSelect w Selectron23 odpala taxonomy-chain-menu-select-changed na oryginalnym selecie z wartością i kontenerem. append_select_changed_event() sprawdza kontener, ustawia wartość i atrybut selected oraz wywołuje ten sam handler co natywny change, więc łańcuch, cache i konektory widzą jedną ścieżkę kodu.

Różne szerokości i wysokości dla poziomów z jednego ustawieniaListy rozdzielone pionową kreską; ostatnia wartość dotyczy wszystkich głębszych poziomów

select_width ('300px|250px|20%') i selectron23_max_open_height są dzielone po '|' i stosowane według indeksu przy dodawaniu każdego poziomu. Głębokość łańcucha nie jest znana z góry, więc ostatnia wartość obejmuje każdy dalszy poziom.

Liczby

wordpress.org
  • Aktywne instalacje 100+ licznik wordpress.org.
  • Lat wsparcia 5 Od 25 lutego 2021, ostatnia aktualizacja 21 maja 2026.