🔐 Cómo Agregar un Slider Ticker de Categorías para Periódico Online en WordPress (Sin Plugins)

Hoy comparto un código personalizado que he usado en un proyecto recientemente para implementar un slider ticker de categorías que aparece automáticamente en las entradas individuales de tu blog WordPress. Esta solución es ideal para sitios de noticias, revistas digitales o blogs temáticos que desean mejorar la navegación y visibilidad de sus categorías.

Qué ofrece este desarrollo

Este slider ticker incluye las siguientes características:

• Muestra todas las categorías del sitio en formato horizontal
• Efecto de desplazamiento automático continuo
• Pausa al pasar el cursor sobre él
• Se integra perfectamente con el tema Blocksy
• No requiere plugins adicionales
• Totalmente responsive

Puedes ver el Slider Ticker de Categorías en WordPress en funcionamiento haciendo click aquí.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS. También puedes crear tu propio plugin con unos simples pasos.

Personalización del slider

Puedes ajustar varios aspectos del slider modificando estos valores:

1. Velocidad de desplazamiento:
   • Cambia el valor 40s en la animación para hacerlo más rápido o lento
2. Estilos visuales:
   • Modifica las variables de color (--paletteColor1, etc.) para que coincidan con tu diseño
   • Ajusta el padding y margin según tus necesidades
3. Contenido mostrado:
   • Para excluir ciertas categorías, añade 'exclude' => '1,5,7' en los parámetros de get_categories()

Funcionamiento técnico

Este código utiliza:

1. El hook blocksy:content:before para posicionar el slider justo después del header
2. CSS puro para la animación, sin dependencias de JavaScript
3. Las variables nativas de Blocksy para mantener la coherencia estética
4. Consulta WP_Query para obtener las categorías de forma óptima

Adaptación del Código para Otros Temas

Este desarrollo fue creado originalmente para el tema Blocksy, pero puede adaptarse fácilmente a cualquier otro tema de WordPress modificando el hook donde se inserta el slider. La clave está en identificar el punto de inserción adecuado en la estructura de tu tema.

Hooks Alternativos para Diferentes Temas

Si tu tema no es Blocksy, puedes probar estos hooks comunes para posicionar el slider debajo del header:

// Reemplaza esta línea:
add_action('blocksy:content:before', 'blocksy_category_ticker');

// Por alguno de estos hooks alternativos:
add_action('wp_body_open', 'blocksy_category_ticker'); // Estándar de WordPress
add_action('generate_after_header', 'blocksy_category_ticker'); // GeneratePress
add_action('astra_header_after', 'blocksy_category_ticker'); // Astra
add_action('ocean_after_header', 'blocksy_category_ticker'); // OceanWP
add_action('storefront_before_content', 'blocksy_category_ticker'); // Storefront

Conclusión

Este slider ticker de categorías es una solución profesional que puede implementarse en minutos y ofrece una excelente experiencia de usuario. Al mostrar las categorías de forma prominente, mejora la navegación y el tiempo de permanencia en el sitio.

Si tienes dudas sobre la implementación o necesitas ajustes específicos, puedes dejar un comentario o contactarme directamente. En próximos tutoriales seguiré compartiendo códigos útiles para personalizar WordPress.