Idioma

Contactar

Plugin de WordPress · desde 2021

Taxonomy Chain Menu

Desplegables encadenados sobre una taxonomía jerárquica (marca, modelo, generación) que terminan en una entrada, una página de término o una acción de filtro.

Primera versión
Instalaciones activas
100+
  • PHP
  • WordPress
  • get_categories()
  • admin-ajax
  • JavaScript (clases ES6)
  • Fetch API
  • DOMParser
  • CustomEvent
Ver en wordpress.org wordpress.org

Sobre mí

Taxonomy Chain Menu convierte cualquier taxonomía jerárquica de cualquier tipo de contenido en una cadena de desplegables: al elegir un término se carga el siguiente nivel y, al final de la cadena, el visitante obtiene una lista de entradas, un enlace al término o nada. Es un único shortcode con 22 ajustes, y también puede controlar una tabla de TableOn o WOOT o un filtro de productos WOOF en la misma página.

El trabajo de ingeniería está en cargar un árbol de profundidad desconocida un nivel cada vez, saber cuándo un nivel es el último, restaurar una ruta elegida a partir de un enlace y comunicarse con otros plugins sin depender de su código.

Taxonomy Chain Menu · selectores encadenados

qué se resolvió

ACTIVOdesde 2021

Desplegables encadenados sobre un árbol de taxonomía

shipped · 2021

Qué aportaLos visitantes eligen una marca, luego un modelo y luego una generación, y llegan rápido a la página correcta. Solo se cargan los niveles necesarios y una ruta elegida se puede compartir como enlace.

Problema
Una taxonomía puede tener varios niveles de profundidad. Renderizar el árbol completo de antemano es pesado en catálogos grandes; cargarlo nivel a nivel exige saber cuándo un nivel es el último y qué mostrar entonces.
Solución

El servidor renderiza un nivel por petición y responde con el siguiente select, un select de entradas o un enlace de término. El navegador conserva los niveles obtenidos como nodos del DOM y los reproduce desde la memoria.

Stack
  • PHP
  • admin-ajax
  • JavaScript
  • Fetch API
Tareas · 6
Cargar solo el nivel que abrió el visitanteget_terms() por padre con hide_empty; ajax devuelve el siguiente select o una respuesta de hoja

get_chain_item() lee el término padre de la petición y pide a get_categories() sus hijos no vacíos. Si hay hijos, devuelve un select; si no, la respuesta depende del modo de hoja. El front-end analiza el HTML con DOMParser y añade el nodo a la cadena.

Decidir qué muestra el final de la cadenawatch_view elige un select de entradas, get_term_link() o ninguna salida

En el modo 'posts', la hoja devuelve un select con las entradas del término con los permalinks como valores, con límite, orden y ordenación por clave meta configurables. En el modo 'terms', devuelve la URL del término y el front-end renderiza un botón. 'none' termina la cadena en silencio, que es el modo usado cuando la cadena solo controla un filtro.

Una petición de un término que no tiene hijos es un desperdicioEn el modo terms, cada opción lleva su número de hijos; una hoja abre el enlace directamente

Cuando watch_view es 'terms', generate_tax_select() añade data-child-count (wp_count_terms con el término como padre) y data-link a cada opción. El front-end comprueba el recuento y, si es 0, muestra el botón sin llamar al servidor.

Subir de nuevo por la cadena no debería obtener otra vez los mismos nivelesGuardar en caché los nodos select obtenidos por term_id; cambiar un nivel elimina todos los posteriores

trigger_taxonomy_select() primero elimina todos los elementos posteriores al select cambiado y después busca en this.cache[term_id]. Un nodo en caché se vuelve a adjuntar con su selección borrada; una respuesta de hoja en caché recrea el botón. Solo los términos no vistos van al servidor, y cada resultado se almacena con sus datos de petición para que los eventos se disparen igual en los niveles en caché y en los nuevos.

Restaurar una ruta elegida a partir de un enlace o un shortcodeready_chain lista IDs de término; el servidor renderiza todos los niveles preseleccionados en una sola pasada

ready_chain viene del shortcode o del parámetro GET ready_chain como una lista de IDs de término separados por comas; un elemento que no es un número simple se lee como un ID de entrada. draw_chain_menu() la recorre, renderizando cada nivel con el siguiente ID seleccionado y usándolo como padre del siguiente; un elemento no numérico pasa a ser la entrada preseleccionada. Tras la carga, el front-end añade el botón para el último valor y vuelve a emitir el evento change para el término seleccionado más profundo, de modo que las tablas y los filtros conectados recojan el estado.

Limitar el nivel superior sin recortar los niveles más profundosinclude_top se aplica solo cuando parent es 0; include y exclude se aplican en todas partes

Un sitio puede querer solo algunas marcas en el nivel superior pero todos los modelos bajo ellas. get_terms() sustituye la lista include por include_top solo en la petición raíz. El shortcode también comprueba con get_object_taxonomies() que la taxonomía pertenece al tipo de contenido antes de renderizar nada.

Controlar tablas y filtros desde la cadena

en el producto

Qué aportaLos mismos desplegables pueden controlar las tablas de productos y los filtros de productos que ya hay en la página, de modo que los visitantes acotan un catálogo en un solo lugar.

Problema
La cadena suele ser un frontal de navegación para otros plugins de la misma página: una tabla de TableOn o WOOT, o un filtro de productos WOOF. Estos mantienen su propio estado y su lógica de redibujado y no saben nada de la cadena.
Solución

Cada selección dispara un CustomEvent del DOM con los datos de la petición. Pequeños conectores lo traducen al filter_data de una tabla o a los valores actuales de WOOF, y los hooks de PHP permiten que el código del sitio cambie los datos y las etiquetas de las opciones.

Stack
  • JavaScript
  • CustomEvent
  • Filtros de WordPress
Tareas · 5
Otros plugins deben reaccionar sin un acoplamiento fuerteCada cambio dispara un CustomEvent 'taxonomy-chain-menu' con los datos de la petición

cast_event() envía los datos de la petición, el contenedor y el nuevo nodo. Los conectores integrados escuchan este evento; cualquier otro script puede hacer lo mismo. Las cadenas que piden un filtro genérico también reciben 'taxonomy-chain-menu-do-filter' con term_id, slug y container.

Filtrar una tabla de TableOn o WOOT por el término seleccionado más profundoEl conector sustituye el filter_data de la tabla por {taxonomy: term_id} y luego redibuja

table_connector() encuentra la tabla en DataTable23.tables mediante connect_table. Si un nivel se restableció a 'select', recorre los selects desde el final para encontrar el más profundo que sigue elegido. Después sustituye el filter_data de la tabla por el término seleccionado, o elimina la clave de taxonomía cuando no hay nada seleccionado, y llama a redraw_table(); la propia lógica de ajax y caché de la tabla hace el resto.

WOOF espera slugs de término y su propio formato de URLEscribir el slug y ready_chain en woof_current_values y enviar el enlace de WOOF

Las opciones llevan data-slug desde el servidor. Con do_filter='woof', el manejador coloca el slug más profundo bajo la clave de taxonomía de woof_current_values y almacena la ruta completa de IDs como ready_chain, para que la página de resultados de WOOF pueda reconstruir la cadena. Deseleccionar todo elimina ambas claves antes del envío.

El texto, las imágenes y las etiquetas de las opciones deben venir del código del sitioHook taxonomy-chain-menu-option-data por opción; prefijo call_filter_ para las etiquetas

draw_select() pide al filtro taxonomy-chain-menu-option-data el texto y la imagen de cada opción, pasando el ID del término o de la entrada, el padre y chain_id. Una etiqueta que empieza por call_filter_ se resuelve aplicando el filtro indicado, de modo que las etiquetas pueden traducirse o calcularse por página.

Los ajustes del shortcode deben llegar a cada petición ajaxLos ajustes viven en atributos data-; JS convierte de nuevo las claves camelCase en snake_case

draw_chain_menu() imprime todos los ajustes como atributos data- escapados en el contenedor, así que el servidor no guarda estado por cadena. prepare_request_data() copia el dataset en la petición, convirtiendo los nombres camelCase del dataset a snake_case; sanitize_request_data() pasa las claves a minúsculas y sanea cada valor.

Selects con estilo sin perder el comportamiento nativo

en el producto

Qué aportaLos desplegables pueden estilizarse para que coincidan con el diseño del sitio manteniendo el comportamiento estándar en el que se apoyan los formularios y otros plugins.

Problema
Los sitios quieren desplegables con estilo, pero la lógica de la cadena, los conectores y la gestión de formularios dependen de elementos select nativos y de sus eventos change.
Solución

Los selects nativos permanecen como la fuente de verdad oculta. Un reflector clona la cadena en widgets Selectron23 tras cada cambio y devuelve las selecciones al select nativo mediante un evento personalizado.

Stack
  • JavaScript
  • CustomEvent
  • Clonación del DOM
Tareas · 3
Un widget con estilo no debe sustituir al select realTCM_Reflector clona la cadena junto al original oculto tras cada cambio

Con select_wrapper='selectron23', el contenedor se renderiza oculto y TCM_Reflector inserta un elemento hermano. clone() lo reconstruye a partir de los hijos actuales del contenedor, envolviendo cada select clonado en un widget Selectron23, y se ejecuta tras cada cambio de nivel, acierto de caché y actualización del cargador.

Una selección en el widget debe controlar el select realonSelect dispara select-changed; un listener establece el valor y ejecuta la lógica

El onSelect de Selectron23 dispara taxonomy-chain-menu-select-changed en el select original con el valor y el contenedor. append_select_changed_event() comprueba el contenedor, establece el valor y el atributo selected, y llama al mismo manejador que un change nativo, de modo que la cadena, la caché y los conectores ven un único camino de código.

Anchos y altos distintos por nivel a partir de un solo ajusteListas separadas por barra vertical; el último valor se aplica a todos los niveles más profundos

select_width ('300px|250px|20%') y selectron23_max_open_height se dividen por '|' y se aplican por índice cada vez que se añade un nivel. La profundidad de la cadena no se conoce de antemano, así que el último valor cubre todos los niveles posteriores.

Cifras

wordpress.org
  • Instalaciones activas 100+ contador de wordpress.org.
  • Años de soporte 5 Desde 25 de febrero de 2021, última actualización 21 de mayo de 2026.