Langue

Me contacter

Extension WordPress · depuis 2021

Taxonomy Chain Menu

Des listes déroulantes chaînées sur une taxonomie hiérarchique (marque, modèle, génération) qui aboutissent à un article, à une page de terme ou à une action de filtre.

Première version
Installations actives
100+
  • PHP
  • WordPress
  • get_categories()
  • admin-ajax
  • JavaScript (classes ES6)
  • Fetch API
  • DOMParser
  • CustomEvent

À propos

Taxonomy Chain Menu transforme n'importe quelle taxonomie hiérarchique de n'importe quel type de contenu en une chaîne de listes déroulantes : le choix d'un terme charge le niveau suivant, et au bout de la chaîne le visiteur obtient une liste d'articles, un lien vers le terme, ou rien. C'est un seul shortcode avec 22 réglages, et il peut aussi piloter un tableau TableOn ou WOOT ou un filtre de produits WOOF sur la même page.

Le travail d'ingénierie consiste à charger un arbre de profondeur inconnue un niveau à la fois, à savoir quand un niveau est le dernier, à restaurer un chemin choisi à partir d'un lien, et à dialoguer avec d'autres extensions sans dépendre de leur code.

Taxonomy Chain Menu · listes chaînées

ce qui a été résolu

EN LIGNEdepuis 2021

Listes déroulantes chaînées sur un arbre de taxonomie

shipped · 2021

Ce que cela apporteLes visiteurs choisissent une marque, puis un modèle, puis une génération, et atteignent rapidement la bonne page. Seuls les niveaux nécessaires sont chargés, et un chemin choisi peut être partagé sous forme de lien.

Problème
Une taxonomie peut avoir plusieurs niveaux de profondeur. Rendre tout l'arbre d'emblée est lourd pour de grands catalogues ; charger niveau par niveau exige de savoir quand un niveau est le dernier et ce qu'il faut afficher alors.
Solution

Le serveur rend un niveau par requête et répond avec la liste suivante, une liste d'articles ou un lien de terme. Le navigateur conserve les niveaux récupérés sous forme de nœuds DOM et les rejoue depuis la mémoire.

Stack
  • PHP
  • admin-ajax
  • JavaScript
  • Fetch API
Tâches · 6
Charger uniquement le niveau que le visiteur a ouvertget_terms() par parent avec hide_empty ; ajax retourne la liste suivante ou une réponse de feuille

get_chain_item() lit le terme parent dans la requête et demande à get_categories() ses enfants non vides. S'il y a des enfants, il retourne une liste ; sinon la réponse dépend du mode de feuille. Le front-end analyse le HTML avec DOMParser et ajoute le nœud à la chaîne.

Décider ce qu'affiche la fin de la chaînewatch_view choisit une liste d'articles, get_term_link() ou aucune sortie

En mode 'posts', la feuille retourne une liste des articles du terme avec les permaliens comme valeurs, avec limite, ordre et tri par clé meta configurables. En mode 'terms', elle retourne l'URL du terme et le front-end affiche un bouton. 'none' termine la chaîne silencieusement, c'est le mode utilisé lorsque la chaîne ne fait que piloter un filtre.

Une requête pour un terme sans enfants est gaspilléeEn mode terms, chaque option porte son nombre d'enfants ; une feuille ouvre directement le lien

Lorsque watch_view vaut 'terms', generate_tax_select() ajoute data-child-count (wp_count_terms avec le terme comme parent) et data-link à chaque option. Le front-end vérifie le nombre et, pour 0, affiche le bouton sans appeler le serveur.

Remonter dans la chaîne ne doit pas récupérer de nouveau les mêmes niveauxMettre en cache les nœuds select récupérés par term_id ; changer un niveau supprime tous les suivants

trigger_taxonomy_select() supprime d'abord tous les éléments après la liste modifiée, puis consulte this.cache[term_id]. Un nœud en cache est rattaché avec sa sélection effacée ; une réponse de feuille en cache recrée le bouton. Seuls les termes jamais vus vont au serveur, et chaque résultat est stocké avec ses données de requête afin que les événements se déclenchent de la même façon pour les niveaux en cache et les niveaux frais.

Restaurer un chemin choisi à partir d'un lien ou d'un shortcodeready_chain liste des ID de termes ; le serveur rend chaque niveau présélectionné en une seule passe

ready_chain provient du shortcode ou du paramètre GET ready_chain sous forme de liste d'ID de termes séparés par des virgules ; un élément qui n'est pas un simple nombre est lu comme un ID d'article. draw_chain_menu() la parcourt, rendant chaque niveau avec l'ID suivant sélectionné et l'utilisant comme parent du niveau suivant ; un élément non numérique devient l'article présélectionné. Après le chargement, le front-end ajoute le bouton pour la dernière valeur et réémet l'événement de changement pour le terme sélectionné le plus profond, de sorte que les tableaux et filtres connectés reprennent l'état.

Limiter le niveau supérieur sans amputer les niveaux plus profondsinclude_top ne s'applique que lorsque parent vaut 0 ; include et exclude s'appliquent partout

Un site peut ne vouloir que certaines marques au sommet mais tous les modèles en dessous. get_terms() remplace la liste include par include_top uniquement pour la requête racine. Le shortcode vérifie aussi avec get_object_taxonomies() que la taxonomie appartient au type de contenu avant de rendre quoi que ce soit.

Piloter des tableaux et des filtres depuis la chaîne

dans le produit

Ce que cela apporteLes mêmes listes déroulantes peuvent piloter les tableaux de produits et les filtres de produits déjà présents sur la page, de sorte que les visiteurs restreignent un catalogue au même endroit.

Problème
La chaîne sert souvent de façade de navigation pour d'autres extensions de la même page : un tableau TableOn ou WOOT, ou un filtre de produits WOOF. Elles gardent leur propre état et leur propre logique de redessin et ne savent rien de la chaîne.
Solution

Chaque sélection envoie un CustomEvent DOM avec les données de la requête. De petits connecteurs le traduisent en filter_data d'un tableau ou en valeurs courantes de WOOF, et des hooks PHP permettent au code du site de modifier les données et les libellés des options.

Stack
  • JavaScript
  • CustomEvent
  • Filtres WordPress
Tâches · 5
Les autres extensions doivent réagir sans couplage fortChaque changement envoie un CustomEvent 'taxonomy-chain-menu' avec les données de la requête

cast_event() envoie les données de la requête, le conteneur et le nouveau nœud. Les connecteurs intégrés écoutent cet événement ; tout autre script peut faire de même. Les chaînes qui demandent un filtre générique reçoivent aussi 'taxonomy-chain-menu-do-filter' avec term_id, slug et container.

Filtrer un tableau TableOn ou WOOT par le terme sélectionné le plus profondLe connecteur remplace le filter_data du tableau par {taxonomy: term_id}, puis redessine

table_connector() trouve le tableau dans DataTable23.tables grâce à connect_table. Si un niveau a été remis sur 'select', il parcourt les listes depuis la fin pour trouver la plus profonde encore choisie. Il remplace alors le filter_data du tableau par le terme sélectionné, ou supprime la clé de taxonomie quand rien n'est sélectionné, et appelle redraw_table() ; la logique ajax et de cache propre au tableau fait le reste.

WOOF attend des slugs de termes et son propre format d'URLÉcrire le slug et ready_chain dans woof_current_values et soumettre le lien de WOOF

Les options portent data-slug depuis le serveur. Avec do_filter='woof', le gestionnaire place le slug le plus profond sous la clé de taxonomie de woof_current_values et stocke le chemin complet des ID comme ready_chain, afin que la page de résultats WOOF puisse reconstruire la chaîne. Tout désélectionner supprime les deux clés avant la soumission.

Le texte des options, les images et les libellés doivent venir du code du siteHook taxonomy-chain-menu-option-data par option ; préfixe call_filter_ pour les libellés

draw_select() demande au filtre taxonomy-chain-menu-option-data le texte et l'image de chaque option, en lui passant l'ID du terme ou de l'article, le parent et chain_id. Un libellé qui commence par call_filter_ est résolu en appliquant le filtre nommé, de sorte que les libellés peuvent être traduits ou calculés par page.

Les réglages du shortcode doivent atteindre chaque requête ajaxLes réglages vivent dans des attributs data- ; JS retransforme les clés camelCase en snake_case

draw_chain_menu() imprime tous les réglages sous forme d'attributs data- échappés sur le conteneur, de sorte que le serveur ne garde aucun état par chaîne. prepare_request_data() copie le dataset dans la requête, en convertissant les noms camelCase du dataset en snake_case ; sanitize_request_data() met les clés en minuscules et assainit chaque valeur.

Listes stylisées sans perdre le comportement natif

dans le produit

Ce que cela apporteLes listes déroulantes peuvent être stylisées pour correspondre au design du site tout en conservant le comportement standard dont dépendent les formulaires et les autres extensions.

Problème
Les sites veulent des listes déroulantes stylisées, mais la logique de la chaîne, les connecteurs et la gestion des formulaires dépendent des éléments select natifs et de leurs événements change.
Solution

Les select natifs restent la source de vérité masquée. Un réflecteur clone la chaîne en widgets Selectron23 après chaque changement et renvoie les choix au select natif via un événement personnalisé.

Stack
  • JavaScript
  • CustomEvent
  • Clonage du DOM
Tâches · 3
Un widget stylisé ne doit pas remplacer le vrai selectTCM_Reflector clone la chaîne à côté de l'original masqué après chaque changement

Avec select_wrapper='selectron23', le conteneur est rendu masqué et TCM_Reflector insère un élément frère. clone() le reconstruit à partir des enfants actuels du conteneur, en enveloppant chaque select cloné dans un widget Selectron23, et s'exécute après chaque changement de niveau, chaque succès de cache et chaque mise à jour du chargeur.

Un choix dans le widget doit piloter le vrai selectonSelect envoie select-changed ; un écouteur définit la valeur et exécute la logique

L'onSelect de Selectron23 déclenche taxonomy-chain-menu-select-changed sur le select d'origine avec la valeur et le conteneur. append_select_changed_event() vérifie le conteneur, définit la valeur et l'attribut selected, et appelle le même gestionnaire qu'un change natif, de sorte que la chaîne, le cache et les connecteurs voient un seul chemin de code.

Des largeurs et hauteurs différentes par niveau à partir d'un seul réglageListes séparées par des barres verticales ; la dernière valeur s'applique à tous les niveaux plus profonds

select_width ('300px|250px|20%') et selectron23_max_open_height sont découpés sur '|' et appliqués par index à chaque ajout d'un niveau. La profondeur de la chaîne n'est pas connue à l'avance, la dernière valeur couvre donc chaque niveau supplémentaire.

Chiffres

wordpress.org
  • Installations actives 100+ compteur de wordpress.org.
  • Années de maintenance 5 Depuis 25 février 2021, dernière mise à jour 21 mai 2026.