Menú Taxonómico Jerárquico
Un módulo de Drupal que crea menús de navegación jerárquicos a partir de términos de vocabulario de taxonomía, con soporte para imágenes, comportamiento plegable y conteo de referencias de entidades.
hierarchical_taxonomy_menu
Install
composer require 'drupal/hierarchical_taxonomy_menu:^2.0'
composer require 'drupal/hierarchical_taxonomy_menu:8.x-1.43'
Overview
Hierarchical Taxonomy Menu es un potente módulo de Drupal que transforma vocabularios de taxonomía en menús de navegación jerárquicos completamente funcionales. El módulo proporciona un bloque configurable que puede colocarse en cualquier región de tu sitio, generando automáticamente elementos de menú a partir de los términos de un vocabulario seleccionado mientras preserva la jerarquía padre-hijo.
Las capacidades principales incluyen la posibilidad de mostrar imágenes junto a los elementos del menú (si tus términos de taxonomía tienen un campo de imagen o referencia de imagen de medios), comportamiento de menú plegable y expandible con interacciones JavaScript, y títulos de bloque dinámicos que se actualizan según la página actual del término de taxonomía. El módulo soporta limitar la profundidad del menú, filtrar por un término base, y mostrar conteos de nodos o productos de comercio que referencian cada término.
El módulo es completamente traducible y respeta el estado de publicación de los términos por idioma. Incluye una plantilla Twig personalizable que permite control completo sobre la estructura HTML, facilitando dar estilo al menú para cumplir cualquier requisito de diseño. Las opciones de caché aseguran un rendimiento óptimo mientras mantienen el contenido del menú actualizado.
Features
- Crear menús de navegación jerárquicos desde cualquier vocabulario de taxonomía con preservación automática de la estructura padre-hijo
- Mostrar imágenes junto a los elementos del menú usando campos de imagen o referencias de imagen de medios en términos de taxonomía
- Tamaño de imagen configurable con dimensiones en píxeles o estilos de imagen
- Comportamiento de menú plegable/expandible con animaciones de expandir/contraer potenciadas por JavaScript
- Modo de padre interactivo que permite que los elementos padre sean tanto enlaces clicables como interruptores de alternancia para submenús
- Título de bloque dinámico que coincide automáticamente con el nombre del término de taxonomía actual al ver páginas de términos de taxonomía
- Control de profundidad del menú de 0 a 10 niveles o subniveles ilimitados
- Filtrar elementos del menú especificando un término base (por ID o nombre) para mostrar solo sus descendientes
- Modo de término base dinámico que establece automáticamente el término base desde la página actual del término de taxonomía
- Mostrar conteo de nodos o productos de comercio que referencian junto a cada término
- Cálculo recursivo del conteo de entidades que incluye conteos de todos los términos hijos
- Opción para ocultar términos que no tienen contenido que los referencia (nodos/productos de comercio)
- Caché configurable con opciones desde sin caché hasta caché permanente
- Opción para ocultar todo el bloque cuando el vocabulario está vacío
- Soporte multilingüe completo con nombres de términos y URLs conscientes de la traducción
- Conciencia del estado del término que respeta el estado publicado/no publicado por idioma
- Plantilla Twig personalizable con sugerencias de tema por vocabulario
- Clases CSS estilo BEM para facilitar la tematización
- Resaltado del estado activo para el término actual en el menú
- Funcionalidad de mantener abierto para mantener la ruta del menú expandida hasta el término activo
Use Cases
Barra Lateral de Navegación por Categorías
Crear un menú en la barra lateral mostrando categorías de productos o artículos desde un vocabulario de taxonomía. Los usuarios pueden navegar el contenido haciendo clic en los términos de categoría, y las categorías hijas se muestran en una estructura de árbol jerárquico. Habilita el modo plegable para conservar espacio mientras permites a los usuarios expandir las categorías de interés.
Filtrado de Productos de Comercio Electrónico
Mostrar un menú de categorías de productos con el conteo de productos disponibles junto a cada categoría. Habilita 'Mostrar conteo de productos de comercio que referencian' y selecciona el campo de referencia de taxonomía apropiado. Habilita 'Excluir términos vacíos' para ocultar categorías sin productos. Los usuarios pueden ver de un vistazo cuántos productos hay en cada categoría.
Menú de Categorías Visual con Iconos
Agrega un campo de imagen a tu vocabulario de taxonomía y sube iconos de categoría o imágenes para cada término. Configura el bloque para mostrar imágenes usando un estilo de imagen como 'thumbnail'. El menú mostrará cada categoría con su icono asociado, creando una experiencia de navegación visualmente atractiva.
Menú de Subcategorías Contextual
Habilita 'Término base dinámico' para crear un menú que automáticamente muestre solo los hijos del término de taxonomía actual. Al ver una página de categoría padre, el menú muestra sus subcategorías. Esto es útil para estructuras de categorías profundas donde quieres enfocarte en la ubicación actual en la jerarquía.
Navegación de Documentación Plegable
Para un sitio de documentación organizado por taxonomía, habilita el modo plegable con 'Mantener abierto en el término de taxonomía actual'. El menú comienza contraído pero se expande automáticamente para mostrar la ruta a la página actual, ayudando a los usuarios a entender su ubicación mientras mantiene las secciones no relacionadas contraídas.
Navegación de Sitio Multilingüe
En un sitio multilingüe con términos de taxonomía traducidos, el menú muestra automáticamente los nombres de términos en el idioma actual. El módulo respeta el estado del término por idioma, así que puedes tener términos publicados en algunos idiomas pero no en otros, y el menú se adapta en consecuencia.
Tips
- Usa sugerencias de tema (hierarchical-taxonomy-menu--VOCABULARY.html.twig) para crear plantillas específicas por vocabulario con marcado personalizado
- El bloque usa la etiqueta de caché 'taxonomy_term_list', así que el menú se actualiza automáticamente cuando se agregan, editan o eliminan términos
- Para mejor rendimiento en sitios con muchos términos de taxonomía, usa la configuración de caché para reducir las consultas a la base de datos
- Al usar título de bloque dinámico, el título solo cambia en páginas de términos de taxonomía - en otras páginas muestra el título de bloque configurado
- La opción 'Padre interactivo' agrega una flecha de alternancia separada para que los elementos padre puedan ser tanto enlaces como disparadores de expandir/contraer
- Tanto los campos de imagen como las referencias de imagen de Media son soportados para mostrar imágenes junto a los elementos del menú
- Usa 'Término base' para crear múltiples bloques desde el mismo vocabulario mostrando diferentes ramas de la jerarquía
- Las clases CSS siguen la nomenclatura BEM (block-taxonomymenu__*) para un estilizado predecible
- Los términos no publicados se ocultan automáticamente del menú basándose en el idioma actual
Technical Details
Hooks 4
hook_help
Implementa hook_help() para proporcionar texto de ayuda en la página de ayuda del módulo. Muestra el contenido de README.md, opcionalmente renderizado como Markdown si el módulo Markdown está habilitado.
hook_theme
Implementa hook_theme() para registrar el hook de tema hierarchical_taxonomy_menu con sus variables disponibles.
template_preprocess_block
Implementa template_preprocess_block() para establecer dinámicamente el título del bloque con el nombre del término de taxonomía actual cuando la opción dynamic_block_title está habilitada.
hook_theme_suggestions_HOOK
Implementa hook_theme_suggestions_hierarchical_taxonomy_menu() para proporcionar sugerencias de plantilla específicas por vocabulario.
Troubleshooting 6
Verifica que el vocabulario seleccionado contenga términos publicados. Comprueba si 'Ocultar bloque si la salida está vacía' está habilitado y si es así, asegúrate de que haya términos para mostrar. También verifica que la configuración del término base no esté filtrando todos los términos.
Asegúrate de seleccionar la opción de vocabulario que incluye el campo de imagen (ej. 'Categorías (con imagen: field_image)'). Verifica que el campo de imagen en los términos de taxonomía tenga imágenes cargadas. Comprueba si la configuración del estilo de imagen es correcta si usas estilos de imagen.
Revisa la consola del navegador por errores de JavaScript. Asegúrate de que la biblioteca hierarchical_taxonomy_menu se esté cargando correctamente. Verifica que jQuery esté disponible en la página. La funcionalidad de expandir/contraer requiere que JavaScript esté habilitado.
Asegúrate de tener contenido (nodos o productos de comercio) que referencia los términos de taxonomía. Para productos de comercio, verifica que seleccionaste el 'Campo de referencia' correcto en la configuración del bloque. Comprueba que el campo de referencia existe y contiene valores.
El título de bloque dinámico solo funciona en páginas de términos de taxonomía (/taxonomy/term/ID). Asegúrate de que 'Hacer que el título del bloque coincida con el nombre del término de taxonomía actual' esté habilitado y que 'Mostrar título' esté configurado como visible en la configuración del bloque.
Verifica que los términos de taxonomía tengan traducciones para el idioma actual. Comprueba que los términos traducidos estén publicados (el estado puede diferir por traducción). Asegúrate de que el módulo locale esté habilitado y la detección de idioma esté funcionando.
Security Notes 3
- El módulo escapa apropiadamente los nombres de términos y URLs en la plantilla para prevenir vulnerabilidades XSS
- El acceso a términos se respeta - los términos no publicados no se muestran a usuarios sin los permisos apropiados
- El módulo usa el sistema de caché estándar de Drupal con etiquetas de caché apropiadas para seguridad y rendimiento