Lingua

Contattami

Plugin per WordPress · dal 2021

Taxonomy Chain Menu

Menu a discesa concatenati su una tassonomia gerarchica (marca, modello, generazione) che terminano in un articolo, in una pagina di termine o in un'azione di filtro.

Prima versione
Installazioni attive
100+
  • PHP
  • WordPress
  • get_categories()
  • admin-ajax
  • JavaScript (classi ES6)
  • Fetch API
  • DOMParser
  • CustomEvent
Vedi su wordpress.org wordpress.org

Chi sono

Taxonomy Chain Menu trasforma qualsiasi tassonomia gerarchica di qualsiasi post type in una catena di menu a discesa: scegliendo un termine si carica il livello successivo, e al termine della catena il visitatore ottiene un elenco di articoli, un link al termine oppure niente. È un unico shortcode con 22 impostazioni e può anche pilotare una tabella TableOn o WOOT oppure un filtro prodotti WOOF nella stessa pagina.

Il lavoro di ingegneria sta nel caricare un albero di profondità sconosciuta un livello alla volta, nel sapere quando un livello è l'ultimo, nel ripristinare da un link un percorso scelto e nel comunicare con altri plugin senza dipendere dal loro codice.

Taxonomy Chain Menu · select concatenati

cosa è stato risolto

ATTIVOdal 2021

Menu a discesa concatenati su un albero di tassonomia

shipped · 2021

Cosa offreI visitatori scelgono una marca, poi un modello, poi una generazione, e raggiungono rapidamente la pagina giusta. Si caricano solo i livelli necessari e un percorso scelto può essere condiviso come link.

Problema
Una tassonomia può avere più livelli di profondità. Generare l'intero albero in anticipo è pesante per cataloghi grandi; caricarlo livello per livello richiede di sapere quando un livello è l'ultimo e cosa mostrare allora.
Soluzione

Il server genera un livello per richiesta e risponde con il select successivo, un select di articoli o un link al termine. Il browser conserva i livelli già ottenuti come nodi DOM e li riproduce dalla memoria.

Stack
  • PHP
  • admin-ajax
  • JavaScript
  • Fetch API
Attività · 6
Caricare solo il livello aperto dal visitatoreget_terms() per genitore con hide_empty; ajax restituisce il select successivo o una risposta di foglia

get_chain_item() legge il termine genitore dalla richiesta e chiede a get_categories() i suoi figli non vuoti. Se ci sono figli restituisce un select; altrimenti la risposta dipende dalla modalità della foglia. Il front end analizza l'HTML con DOMParser e aggiunge il nodo alla catena.

Decidere cosa mostra la fine della catenawatch_view sceglie un select di articoli, get_term_link() o nessun output

Nella modalità 'posts' la foglia restituisce un select degli articoli del termine con i permalink come valori, con limite, ordinamento e ordinamento per chiave meta configurabili. Nella modalità 'terms' restituisce l'URL del termine e il front end genera un pulsante. 'none' chiude la catena in silenzio, ed è la modalità usata quando la catena pilota solo un filtro.

Una richiesta per un termine senza figli è sprecataNella modalità terms ogni opzione porta il proprio numero di figli; una foglia apre direttamente il link

Quando watch_view è 'terms', generate_tax_select() aggiunge a ogni opzione data-child-count (wp_count_terms con il termine come genitore) e data-link. Il front end controlla il conteggio e, se è 0, mostra il pulsante senza chiamare il server.

Tornare indietro nella catena non dovrebbe ricaricare gli stessi livelliMettere in cache i nodi select ottenuti per term_id; cambiare un livello rimuove tutti i successivi

trigger_taxonomy_select() rimuove prima ogni elemento dopo il select modificato, poi cerca in this.cache[term_id]. Un nodo in cache viene ricollegato con la selezione azzerata; una risposta di foglia in cache ricrea il pulsante. Solo i termini mai visti vanno al server, e ogni risultato viene memorizzato con i propri dati di richiesta così che gli eventi scattino allo stesso modo per i livelli in cache e per quelli nuovi.

Ripristinare un percorso scelto da un link o da uno shortcodeready_chain elenca gli ID dei termini; il server genera ogni livello già selezionato in un unico passaggio

ready_chain proviene dallo shortcode o dal parametro GET ready_chain come elenco di ID di termini separati da virgola; un elemento che non è un semplice numero viene letto come ID di un articolo. draw_chain_menu() lo percorre, generando ogni livello con l'ID successivo selezionato e usandolo come genitore del successivo; un elemento non numerico diventa l'articolo preselezionato. Dopo il caricamento il front end aggiunge il pulsante per l'ultimo valore ed emette di nuovo l'evento change per il termine selezionato più profondo, così le tabelle e i filtri collegati recepiscono lo stato.

Limitare il livello superiore senza tagliare i livelli più profondiinclude_top si applica solo quando parent è 0; include ed exclude si applicano ovunque

Un sito può volere solo alcune marche al livello superiore ma tutti i modelli sotto di esse. get_terms() sostituisce l'elenco include con include_top solo per la richiesta della radice. Lo shortcode verifica inoltre con get_object_taxonomies() che la tassonomia appartenga al post type prima di generare qualsiasi cosa.

Pilotare tabelle e filtri dalla catena

nel prodotto

Cosa offreGli stessi menu a discesa possono pilotare le tabelle prodotti e i filtri prodotti già presenti nella pagina, così i visitatori restringono un catalogo in un unico punto.

Problema
La catena è spesso un front di navigazione per altri plugin nella stessa pagina: una tabella TableOn o WOOT, o un filtro prodotti WOOF. Questi mantengono il proprio stato e la propria logica di ridisegno e non sanno nulla della catena.
Soluzione

Ogni selezione invia un CustomEvent DOM con i dati della richiesta. Piccoli connettori lo traducono nel filter_data di una tabella o nei valori correnti di WOOF, e gli hooks PHP permettono al codice del sito di cambiare i dati e le etichette delle opzioni.

Stack
  • JavaScript
  • CustomEvent
  • Filtri WordPress
Attività · 5
Gli altri plugin devono reagire senza un accoppiamento strettoOgni modifica invia un CustomEvent 'taxonomy-chain-menu' con i dati della richiesta

cast_event() invia i dati della richiesta, il contenitore e il nuovo nodo. I connettori integrati ascoltano questo evento; qualsiasi altro script può fare lo stesso. Le catene che richiedono un filtro generico ricevono anche 'taxonomy-chain-menu-do-filter' con term_id, slug e contenitore.

Filtrare una tabella TableOn o WOOT in base al termine selezionato più profondoIl connettore sostituisce il filter_data della tabella con {taxonomy: term_id}, poi ridisegna

table_connector() trova la tabella in DataTable23.tables tramite connect_table. Se un livello è stato riportato a 'select', percorre i select dalla fine per trovare il più profondo ancora scelto. Poi sostituisce il filter_data della tabella con il termine selezionato, oppure rimuove la chiave della tassonomia quando non è selezionato nulla, e chiama redraw_table(); il resto lo fanno la logica ajax e di cache della tabella stessa.

WOOF si aspetta slug di termini e un proprio formato di URLScrivere lo slug e ready_chain in woof_current_values e inviare il link di WOOF

Le opzioni portano data-slug dal server. Con do_filter='woof' il gestore inserisce lo slug più profondo sotto la chiave della tassonomia di woof_current_values e memorizza il percorso completo degli ID come ready_chain, così la pagina dei risultati di WOOF può ricostruire la catena. Deselezionare tutto rimuove entrambe le chiavi prima dell'invio.

Testo, immagini ed etichette delle opzioni devono provenire dal codice del sitoHook taxonomy-chain-menu-option-data per opzione; prefisso call_filter_ per le etichette

draw_select() chiede al filtro taxonomy-chain-menu-option-data il testo e l'immagine di ogni opzione, passando l'ID del termine o dell'articolo, il genitore e chain_id. Un'etichetta che inizia con call_filter_ viene risolta applicando il filtro indicato, così le etichette possono essere tradotte o calcolate per pagina.

Le impostazioni dello shortcode devono raggiungere ogni richiesta ajaxLe impostazioni stanno negli attributi data-; il JS riconverte le chiavi camelCase in snake_case

draw_chain_menu() stampa tutte le impostazioni come attributi data- con escape sul contenitore, quindi il server non conserva alcuno stato per catena. prepare_request_data() copia il dataset nella richiesta, convertendo i nomi camelCase del dataset in snake_case; sanitize_request_data() porta le chiavi in minuscolo e sanifica ogni valore.

Select con stile senza perdere il comportamento nativo

nel prodotto

Cosa offreI menu a discesa possono essere stilizzati in armonia con il design del sito mantenendo il comportamento standard su cui si basano moduli e altri plugin.

Problema
I siti vogliono menu a discesa con uno stile proprio, ma la logica della catena, i connettori e la gestione dei moduli dipendono dagli elementi select nativi e dai loro eventi change.
Soluzione

I select nativi restano come fonte di verità nascosta. Un reflector clona la catena in widget Selectron23 dopo ogni modifica e rimanda le scelte al select nativo tramite un evento personalizzato.

Stack
  • JavaScript
  • CustomEvent
  • Clonazione del DOM
Attività · 3
Un widget con stile non deve sostituire il vero selectTCM_Reflector clona la catena accanto all'originale nascosto dopo ogni modifica

Con select_wrapper='selectron23' il contenitore viene generato nascosto e TCM_Reflector inserisce un elemento gemello. clone() lo ricostruisce a partire dai figli correnti del contenitore, avvolgendo ogni select clonato in un widget Selectron23, e viene eseguito dopo ogni cambio di livello, ogni accesso alla cache e ogni aggiornamento del loader.

Una scelta nel widget deve pilotare il vero selectonSelect invia select-changed; un listener imposta il valore ed esegue la logica

L'onSelect di Selectron23 scatena taxonomy-chain-menu-select-changed sul select originale con il valore e il contenitore. append_select_changed_event() controlla il contenitore, imposta il valore e l'attributo selected, e chiama lo stesso gestore di un change nativo, così catena, cache e connettori vedono un unico percorso di codice.

Larghezze e altezze diverse per livello da un'unica impostazioneElenchi separati da pipe; l'ultimo valore si applica a tutti i livelli più profondi

select_width ('300px|250px|20%') e selectron23_max_open_height vengono divisi su '|' e applicati per indice ogni volta che si aggiunge un livello. La profondità della catena non è nota in anticipo, quindi l'ultimo valore copre ogni livello successivo.

Numeri

wordpress.org
  • Installazioni attive 100+ contatore di wordpress.org.
  • Anni di supporto 5 Dal 25 febbraio 2021, ultimo aggiornamento 21 maggio 2026.