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?
- 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.
- 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.
- 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:
- 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.
- 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.
- 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
- 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.
- La función
- Obtención y Formateo de Palabras:
- La función utiliza
shortcode_attspara procesar y validar los atributos del shortcode. - Se utiliza
explodepara convertir la lista de palabras en un array.
- La función utiliza
- 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».
- Se inicia la construcción del HTML del slider con un contenedor
- 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.
- 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.
- Inclusión de Font Awesome:
- Se integra la biblioteca de Font Awesome para añadir estilos atractivos a las flechas del slider.
- Retorno del HTML del Slider:
- La función retorna el HTML completo del slider, listo para ser insertado en la página.
- 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.
- Estilos del Slider:
- Se definen estilos CSS para personalizar el aspecto del slider, el contenedor, cada palabra y las flechas de navegación.
- 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.
Agregar Comentario