✅Ticker de Entradas por Categoría en WordPress (Sin Plugins)

Este código para WordPress funciona como una herramienta que facilita la creación de tickers de noticias personalizados en sitios web sin requerir habilidades técnicas avanzadas. ¿Qué implica esto?

Imagina que tienes un blog o una página web y deseas resaltar ciertas noticias de una manera dinámica y atractiva. Este código te brinda la oportunidad de hacerlo de manera sencilla.

En términos más simples, el código:

1. Prepara el Terreno:
   • Asegura que las herramientas esenciales, como jQuery (una biblioteca de JavaScript), estén disponibles para realizar la tarea.
2. Carga Estilos y Herramientas:
   • Trae estilos y funciones especiales desde ubicaciones específicas (llamadas CDNs) para crear un carrusel de noticias interactivo.
3. Crea una Función Especial (o Shortcode):
   • Define una función especial llamada custom_news_ticker. Esta función permite a los usuarios, incluso sin conocimientos técnicos, agregar un carrusel de noticias personalizado donde lo deseen.
4. Personaliza Según Gustos:
   • Los usuarios pueden ajustar el título del carrusel, las categorías de noticias, la cantidad de noticias mostradas, colores y más. Es como personalizar la apariencia de un objeto según tus preferencias.
5. Da Estilo a las Noticias:
   • Toma las noticias seleccionadas, les aplica un estilo según las preferencias del usuario y las presenta en un carrusel atractivo.
6. Facilita la Navegación:
   • Incluso agrega flechas de izquierda y derecha para que las personas puedan explorar las noticias a su propio ritmo.
7. ¡Listo para Usar!
   • Una vez que el código realiza su tarea, el usuario solo tiene que colocar la función especial donde quiera que aparezca el carrusel, y listo, la herramienta está preparada para cautivar a los visitantes del sitio web.

Casos de Uso:

• Blogs de Noticias: Útil para destacar noticias importantes o recientes.
• Sitios Web Empresariales: Puede utilizarse para resaltar logros, actualizaciones o anuncios clave.
• Páginas Personales: Perfecto para aquellos que deseen mostrar sus últimas publicaciones o proyectos de manera llamativa.

En resumen, este código es como una herramienta práctica que permite a cualquier persona mejorar visualmente su sitio web con un carrusel de noticias llamativo.

Si prefieres crear carruseles de texto personalizado en vez de utilizar entradas, échale un ojo a este artículo.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

<?php

function load_jquery() {
    // Verificar si jQuery está cargado
    if (!wp_script_is('jquery', 'enqueued')) {
        // Si no está cargado, cargar la versión de WordPress
        wp_enqueue_script('jquery');
    }
}

function enqueue_custom_news_ticker_scripts() {
    // Asegúrate de que jQuery esté encolado
    wp_enqueue_script('jquery');

    // Encola los estilos de Slick Carousel
    wp_enqueue_style('slick-carousel', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css');

    // Encola el script de Slick Carousel
    wp_enqueue_script('slick-carousel', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array('jquery'), null, true);

    // Encola los estilos de Font Awesome (puedes ajustar según tu configuración)
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_news_ticker_scripts');




function custom_news_ticker_shortcode($atts) {
	
	// Generar un identificador único para esta instancia del shortcode
    $shortcode_id = uniqid('custom_news_ticker_');
	
    // Configuración predeterminada del shortcode
$atts = shortcode_atts(
        array(
            'titulo' => '', 
            'categorias' => '',
            'mostrar' => 5, 
            'fondo' => '', 
            'color' => '', 
            'vista' => 1, 
            'icono' => '', 
            'pausa' => 3000, // Valor predeterminado para autoplaySpeed
            'velocidad' => 500, // Valor predeterminado para speed
        ),
        $atts,
        'custom_news_ticker'
    );

    // Obtener las categorías como un array
    $categorias = explode(',', $atts['categorias']);

    // Query para obtener las entradas por categoría
    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'category_name' => implode(',', $categorias),
        'posts_per_page' => $atts['mostrar'], // Utiliza el número personalizado de entradas a mostrar
    );

    $query = new WP_Query($args);

    // Comprobar si hay entradas
    if ($query->have_posts()) {
        ob_start(); ?>

<style>
	
	/* Estilos para el título */
        .breaking-news-title-<?php echo $shortcode_id; ?> {
            font-size: 20px; /* Tamaño del título */
            color: #333; /* Color del título */
            margin-bottom: 10px; /* Espaciado inferior del título */
            text-align: center; /* Alinea el título a la izquierda */
            padding-left: 10px; /* Ajusta el espaciado izquierdo */
        }

        /* Estilos para cada noticia en el slider */
        .breaking-news-slider-<?php echo $shortcode_id; ?> {
            list-style: none;
            padding: 0;
            display: flex;
			background-color: <?php echo esc_attr($atts['fondo']); ?>; /* Establece el color de fondo desde el shortcode */
			border: 1px solid <?php echo esc_attr($atts['color']); ?>;
			border-radius: 10px;

        }
	
	
        .breaking-news-slider-<?php echo $shortcode_id; ?> li {
            color: #ffffff; /* Color del texto */
            padding: 20px; /* Espaciado interno */
            text-align: center;
            font-size: 16px; /* Tamaño de fuente */
			text-decoration:none;
        }

        .breaking-news-slider-<?php echo $shortcode_id; ?> a {
            text-decoration: none;
            color: <?php echo esc_attr($atts['color']); ?>;
        }

        /* Estilos para las flechas del slider */
        .slick-prev-<?php echo $shortcode_id; ?>,
        .slick-next-<?php echo $shortcode_id; ?> {
            font-size: 30px; /* Tamaño de la flecha */
            color: <?php echo esc_attr($atts['color']); ?>;
            border-radius: 50%; /* Bordes redondeados para un aspecto elegante */
            padding: 10px; /* Espaciado interno */
            cursor: pointer;
        }

        .slick-prev-<?php echo $shortcode_id; ?>:hover,
        .slick-next-<?php echo $shortcode_id; ?>:hover {
            background-color: transparent; /* Cambia el color de fondo al pasar el ratón */
            color: #ffffff; /* Cambia el color del texto al pasar el ratón */
        }
    </style>

    <div class="custom-news-ticker">
        <div class="breaking-news-title-<?php echo $shortcode_id; ?>"><h3><?php echo esc_html($atts['titulo']); ?></h3></div>
        <ul class="breaking-news-slider-<?php echo $shortcode_id; ?>" data-vista="<?php echo esc_attr($atts['vista']); ?>">
            <?php while ($query->have_posts()) : $query->the_post(); ?>
                <li>
                    <i class="<?php echo esc_attr($atts['icono']); ?>" style="color: <?php echo esc_attr($atts['color']); ?>"></i>
                    <a href="<?php the_permalink(); ?>">
                        <?php the_title(); ?>
                    </a>
                </li>
            <?php endwhile; ?>
        </ul>
    </div>

    <script>			
			jQuery(document).ready(function ($) {
            var vista = parseInt($(".breaking-news-slider-<?php echo $shortcode_id; ?>").data("vista"));
            var pausa = parseInt(<?php echo esc_attr($atts['pausa']); ?>);
            var velocidad = parseInt(<?php echo esc_attr($atts['velocidad']); ?>);
			
			
			
            $(".breaking-news-slider-<?php echo $shortcode_id; ?>").slick({
                slidesToShow: vista,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: pausa,
                infinite: true,
                speed: velocidad,
                cssEase: "linear",
                adaptiveHeight: true,
                pauseOnHover: true,
                prevArrow: "<div class='slick-prev-<?php echo $shortcode_id; ?>'><i class='fas fa-angle-left'></i></div>",
                nextArrow: "<div class='slick-next-<?php echo $shortcode_id; ?>'><i class='fas fa-angle-right'></i></div>",
                responsive: [
                    {
                        breakpoint: 767,
                        settings: {
                            slidesToShow: 1,
                        }
                    }
                ]
            });
        });
    </script>

<?php
        // Restaurar datos de consulta originales
        wp_reset_postdata();

        return ob_get_clean();
    } else {
        return 'No hay entradas disponibles.';
    }
}
add_shortcode('custom_news_ticker', 'custom_news_ticker_shortcode');
Lenguaje del código: HTML, XML (xml)

Entendiendo el Código

Función load_jquery()

Esta función verifica si jQuery está cargado y, si no lo está, lo encola (lo carga) utilizando la versión incluida con WordPress.

Función enqueue_custom_news_ticker_scripts()

Esta función se encarga de encolar los scripts y estilos necesarios para el funcionamiento del carrusel de noticias. Utiliza las funciones de WordPress wp_enqueue_script y wp_enqueue_style para cargar jQuery, Slick Carousel (un plugin de carrusel), y Font Awesome (para iconos). Los scripts y estilos se cargan desde CDN (Content Delivery Network).

Función custom_news_ticker_shortcode($atts)

Esta es la función principal que define el comportamiento del shortcode custom_news_ticker. Aquí se realiza lo siguiente:

1. Generación de Identificador Único:
   • Se genera un identificador único ($shortcode_id) para cada instancia del shortcode utilizando la función uniqid. Esto es crucial para evitar conflictos de estilos cuando hay múltiples instancias del carrusel en la misma página.
2. Configuración del Shortcode:
   • Los atributos del shortcode se definen y se establecen valores predeterminados utilizando shortcode_atts. Estos atributos incluyen:
     • titulo: Título del carrusel.
     • categorias: Categorías de las cuales se obtendrán las noticias.
     • mostrar: Número de noticias a mostrar.
     • fondo: Color de fondo del carrusel.
     • color: Color del texto y de las flechas del carrusel.
     • vista: Número de noticias visibles a la vez en el carrusel.
     • icono: Clase del icono a utilizar.
     • pausa: Tiempo de pausa entre las noticias en milisegundos.
     • velocidad: Velocidad de transición del carrusel en milisegundos.
3. Consulta de WordPress y Estilos:
   • Se realiza una consulta de WordPress utilizando WP_Query para obtener las entradas según las categorías especificadas.
   • Se definen estilos en línea y se encolan mediante la etiqueta <style> para personalizar la apariencia del carrusel. Los estilos incluyen el formato del título, el fondo, el borde y el formato del texto de cada noticia.
4. Generación del Carrusel:
   • Se genera el HTML del carrusel, incluyendo el título, la lista de noticias y los enlaces a las entradas completas.
   • Se utiliza la librería Slick Carousel para convertir la lista de noticias en un carrusel interactivo. Se ajustan las opciones del carrusel según los atributos del shortcode, como el número de noticias visibles, la velocidad de transición, etc.
5. Script jQuery:
   • Se utiliza jQuery para inicializar el carrusel Slick Carousel con las opciones configuradas previamente.
   • Se incluyen las flechas de navegación y se establecen los estilos correspondientes.
6. Retorno del Carrusel o Mensaje de Error:
   • Si hay entradas disponibles, el HTML generado se devuelve utilizando ob_get_clean() para imprimirlo en la ubicación donde se utilice el shortcode.
   • Si no hay entradas, se devuelve un mensaje indicando que no hay entradas disponibles.
7. Registro del Shortcode:
   • Finalmente, el shortcode se registra con el nombre custom_news_ticker y la función asociada custom_news_ticker_shortcode.

[custom_news_ticker fondo="#ce112d" color="#ffffff" titulo="Medicina" categorias="travel" icono="fas fa-hospital" mostrar="5" vista="1" pausa="0" velocidad="10000"]Lenguaje del código: JSON / JSON con comentarios (json)

En resumen, este código permite a los usuarios de WordPress insertar un carrusel de noticias personalizable en sus páginas y publicaciones utilizando el shortcode custom_news_ticker. Los atributos del shortcode permiten controlar aspectos como el título, las categorías de las noticias, el aspecto visual, etc.

Si necesitas adaptar el código a las necesidades de tu proyecto o agregar una funcionalidad específica a tu página web no dudes en contactar conmigo.

Nos vemos en el siguiente tutorial.

Un saludo.