✅Slider Automático de Texto en WordPress (Sin Plugins)

Imagina agregar un toque dinámico y atractivo a tus contenidos sin la necesidad de complicados plugins. Con este código de slider de texto para WordPress, puedes lograrlo de manera sencilla y sin excesos técnicos.

¿Por Qué Considerar un Slider de Texto?

1. Presentación Dinámica: Añade movimiento y dinamismo a tus mensajes. El slider de texto permite que las ideas fluyan suavemente, capturando la atención de tus visitantes.
2. Destaca Elementos Clave: Resalta palabras y conceptos importantes. Ya sea para destacar características de productos o compartir testimonios, cada palabra puede ocupar su propio espacio en el slider.
3. Amplia Gama de Aplicaciones: Desde blogs hasta sitios de comercio electrónico, este slider se adapta a diversas situaciones. Brinda un toque visual personalizado sin importar el tipo de contenido que presentes.

Ventajas de la Personalización:

1. Integración con el Estilo de Tu Sitio: Personaliza cada aspecto del slider para que se alinee con la estética de tu sitio web, sin depender de diseños predeterminados.
2. Eficiencia sin Exceso de Plugins: Evita la sobrecarga de plugins. Nuestro código proporciona una solución específica y liviana, manteniendo tu sitio rápido y eficiente.
3. Versatilidad Garantizada: Se adapta a diferentes propósitos y contextos. Se trata de una herramienta simple y efectiva para resaltar palabras de manera visual.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS. (Copia a partir de la linea 3).

<?php

function slider_palabras_shortcode($atts) {
    // Configuración predeterminada del shortcode
    $atts = shortcode_atts(
        array(
            'palabras' => '',
        ),
        $atts,
        'slider_palabras'
    );

    // Obtén las palabras como un array
    $palabras = explode(',', $atts['palabras']);

    // Comienza a construir el HTML del slider
    $output = '<div class="slider-palabras">';
    foreach ($palabras as $palabra) {
        $output .= '<div class="palabra">' . esc_html(trim($palabra)) . '</div>';
    }
    $output .= '</div>';

    // Incluye jQuery y Slick Carousel
    $output .= '<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>';
    $output .= '<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>';
    $output .= '<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>';

    // Incluye el script para inicializar el slider
    $output .= '<script>
    jQuery(document).ready(function($){
        $(".slider-palabras").slick({
            slidesToShow: 3, // Muestra 3 palabras en versión de escritorio
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 3000,
            infinite: true,
            speed: 500,
            cssEase: "linear",
            adaptiveHeight: true,
            centerMode: true,
            centerPadding: "50px",
            pauseOnHover: false,
            prevArrow: "<div class=\'slick-prev\'><i class=\'fa fa-chevron-left\'></i></div>",
            nextArrow: "<div class=\'slick-next\'><i class=\'fa fa-chevron-right\'></i></div>",
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1, // Muestra 1 palabra en versión móvil
                    }
                }
            ]
        });
    });
</script>';


    // Incluye la biblioteca de Font Awesome (puedes ajustar según tu configuración)
    $output .= '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>';

    return $output;
}
add_shortcode('slider_palabras', 'slider_palabras_shortcode');


function agregar_estilos_slider_palabras() {
    ?>
    <style>
        /* Estilos para el contenedor del slider */
        .slider-palabras {
            max-width: 600px; /* Ajusta el ancho máximo según tus necesidades */
            margin: 0 auto;
        }

        /* Estilos para cada palabra en el slider */
        .palabra {
            background-color: #3498db; /* Color de fondo */
            color: #ffffff; /* Color del texto */
            padding: 20px; /* Espaciado interno */
            text-align: center;
            font-size: 24px; /* Tamaño de fuente */
        }

        /* Estilos para las flechas del slider */
        .slick-prev,
        .slick-next {
            font-size: 30px; /* Tamaño de la flecha */
            color: #3498db; /* Color de la flecha */
            background-color: transparent; /* Color de fondo de la flecha */
            /*border: 2px solid #3498db; /* Borde de la flecha */
            border-radius: 50%; /* Bordes redondeados para un aspecto elegante */*/
            padding: 10px; /* Espaciado interno */
        }

        .slick-prev:hover,
        .slick-next: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>
    <?php
}

// Añade los estilos al hook wp_head
add_action('wp_head', 'agregar_estilos_slider_palabras');


Lenguaje del código: PHP (php)

Entendiendo el Código

1. Configuración del Shortcode:
   • La función slider_palabras_shortcode($atts) establece la configuración inicial del shortcode.
   • Atributo ‘palabras’: Se espera que los usuarios ingresen una lista de palabras separadas por comas.
2. Obtención y Formateo de Palabras:
   • La función utiliza shortcode_atts para procesar y validar los atributos del shortcode.
   • Se utiliza explode para convertir la lista de palabras en un array.
3. Construcción del HTML del Slider:
   • Se inicia la construcción del HTML del slider con un contenedor <div class="slider-palabras">.
   • Se itera sobre el array de palabras, generando un div individual para cada palabra con la clase «palabra».
4. Inclusión de jQuery y Slick Carousel:
   • Se agregan scripts y estilos esenciales para jQuery y Slick Carousel desde fuentes externas.
   • Se asegura que la biblioteca jQuery y el plugin Slick Carousel estén disponibles para la funcionalidad del slider.
5. Inicialización del Slider con jQuery:
   • Se utiliza un script jQuery para inicializar el slider con configuraciones específicas.
   • Configuraciones incluyen la cantidad de elementos mostrados, velocidad de reproducción, modo de centro, entre otras.
6. Inclusión de Font Awesome:
   • Se integra la biblioteca de Font Awesome para añadir estilos atractivos a las flechas del slider.
7. Retorno del HTML del Slider:
   • La función retorna el HTML completo del slider, listo para ser insertado en la página.
8. Registro del Shortcode en WordPress:
   • Se registra el shortcode ‘slider_palabras’ para que pueda ser utilizado en cualquier página o publicación de WordPress.
9. Estilos del Slider:
   • Se definen estilos CSS para personalizar el aspecto del slider, el contenedor, cada palabra y las flechas de navegación.
10. Integración de Estilos con el Hook wp_head:
    • Los estilos se añaden al encabezado de la página utilizando el hook ‘wp_head’, garantizando una carga efectiva.

Este código permite la fácil implementación de un slider de palabras en WordPress, proporcionando a los usuarios una herramienta visualmente atractiva y altamente personalizable para mostrar información en sus sitios web.

Nos vemos en el siguiente tutorial. Un saludo.