Este conjunto de funciones en PHP y JavaScript destaca como una solución ingeniosa para la implementación de sliders de imágenes en entornos WordPress. Estos sliders, capaces de mostrar visualmente contenido diverso de manera dinámica, enriquecen la interacción del usuario y elevan la presentación visual de un sitio.
La función slider_imagenes_shortcode es la piedra angular, definiendo la lógica y estructura del shortcode personalizado ‘slider_imagenes’. Desde la generación de identificadores únicos hasta la inclusión de scripts y estilos necesarios, cada elemento contribuye a la creación de sliders personalizables. La integración de jQuery y Slick Carousel proporciona un entorno de visualización fluido y atractivo.
La seguridad no se descuida, incorporando prácticas como el escapado de atributos para salvaguardar contra posibles amenazas. La inclusión de Font Awesome y la aplicación de estilos específicos garantizan una presentación visual coherente y atractiva en cada instancia del slider.
La función no solo se limita a generar código; es una herramienta que potencia la presentación visual de un sitio WordPress. Ofrece sliders dinámicos que no solo exhiben imágenes, sino que también proporcionan una experiencia envolvente. En última instancia, este conjunto de funciones es un testimonio de la versatilidad y el poder de WordPress cuando se combina con un enfoque creativo y un sólido conocimiento de desarrollo.
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.
function slider_imagenes_shortcode($atts) {
// Configuración predeterminada del shortcode
$atts = shortcode_atts(
array(
'mostrar' => 1,
'altura' => '300px',
'ids' => '',
'titulos' => '',
'urls' => '',
),
$atts,
'slider_imagenes'
);
// Obtén un identificador único para cada slider
$slider_id = uniqid('slider_');
// Obtén las IDs de las imágenes como un array
$image_ids = explode(',', $atts['ids']);
// Obtén los títulos como un array
$image_titles = explode(',', $atts['titulos']);
// Obtén las URLs especificadas manualmente como un array
$image_urls = explode(',', $atts['urls']);
// Comienza a construir el HTML del slider con el identificador único
$output = '<div class="slider-imagenes slider-container ' . esc_attr($slider_id) . '">';
foreach ($image_ids as $key => $image_id) {
$image_src = wp_get_attachment_image_src($image_id, 'full');
$image_url = isset($image_urls[$key]) ? esc_url($image_urls[$key]) : '#';
$image_title = isset($image_titles[$key]) ? esc_html($image_titles[$key]) : '';
$output .= '<div class="imagen" style="background-image: url(\'' . esc_url($image_src[0]) . '\'); height: ' . esc_attr($atts['altura']) . ';">
<div class="overlay"></div>
<a href="' . $image_url . '" class="imagen-link" data-url="' . $image_url . '">
<h3 class="imagen-title">' . $image_title . '</h3>
<button class="imagen-button">Ver más</button>
</a>
</div>';
}
$output .= '</div>';
// Incluye jQuery y Slick Carousel específicos para este slider
$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 específico
$output .= '<script>
jQuery(document).ready(function($){
$(".slider-imagenes.' . esc_attr($slider_id) . '").slick({
slidesToShow: ' . intval($atts['mostrar']) . ',
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3000,
infinite: true,
speed: 1000,
cssEase: "linear",
adaptiveHeight: true,
centerMode: true,
centerPadding: "0",
pauseOnHover: true,
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,
centerPadding: "0"
}
}
]
});
$(".imagen-button").on("click", function() {
var url = $(this).closest(".imagen-link").data("url");
window.location.href = url;
});
});
</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"/>';
// Añade los estilos específicos para este slider al hook wp_head
$output .= '<style>
/* Estilos específicos para este slider */
.' . esc_attr($slider_id) . ' .slider-container {
}
.slider-container {
max-width: 100%;
margin: 0;
overflow: hidden;
}
.imagen {
position: relative;
background-size: cover;
background-position: center;
height: 300px;
width: 100%;
margin: 1px;
}
.imagen .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Ajusta el valor alpha para la opacidad */
}
.imagen-link {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.imagen-button {
font-size: 16px;
padding: 10px 20px;
background-color: transparent;
color: #ffffff;
border: solid 2px white;
cursor: pointer;
}
.slick-prev,
.slick-next {
font-size: 24px;
color: white;
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.slick-prev {
left: 20px;
}
.slick-next {
right: 20px;
}
.imagen-title {
color: #ffffff;
font-size: 18px;
margin-bottom: 5px;
z-index: 2;
}
</style>';
return $output;
}
add_shortcode('slider_imagenes', 'slider_imagenes_shortcode');
Lenguaje del código: PHP (php)Entendiendo el Código
1. Configuración Predeterminada del Shortcode:
- Se utiliza
shortcode_attspara establecer valores predeterminados a los atributos del shortcode ($atts). Esto garantiza que los atributos esenciales estén presentes y proporciona valores predeterminados si no se especifican.
2. Generación de Identificador Único para el Slider:
uniqidse emplea para crear un identificador único ($slider_id) basado en la cadena ‘slider_’.
3. Procesamiento de Parámetros:
- Las listas de identificadores, títulos y URLs de imágenes se descomponen utilizando
explodepara convertirlas en arrays manejables.
4. Construcción del HTML del Slider:
- Se utiliza un bucle
foreachpara generar el HTML del slider, incorporando dinámicamente las propiedades de cada imagen, como su fondo, título, enlace y botón.
5. Inclusión de Scripts y Estilos Necesarios:
- Se añaden enlaces a jQuery y Slick Carousel, junto con la inclusión de la hoja de estilos de Slick Carousel. Además, se integra Font Awesome para los íconos utilizados.
6. Inicialización del Slider con Slick Carousel:
- Se utiliza jQuery para inicializar el slider con la biblioteca Slick Carousel, configurando opciones como el número de imágenes a mostrar, la velocidad de reproducción automática y la adaptación de altura.
7. Manejo de Evento de Clic en el Botón «Ver Más»:
- Se vincula un evento de clic a los botones de «Ver Más» para redirigir al usuario a la URL asociada a la imagen correspondiente.
8. Estilos Específicos para el Slider:
- Se definen reglas CSS específicas para el contenedor del slider, imágenes, títulos, botones y controles de navegación. Esto asegura una presentación coherente y personalizable del slider.
9. Integración con WordPress:
- Se utiliza
add_shortcodepara registrar el shortcode en WordPress, permitiendo su invocación en cualquier lugar donde se permitan shortcodes.
Uso del Shortcode
El shortcode [slider_imagenes] proporciona una forma concisa y eficaz de integrar sliders de imágenes personalizables en una página o publicación de WordPress. Analicemos los parámetros proporcionados en el ejemplo:
[slider_imagenes altura="400px" mostrar="3" ids="6,7,8,9" titulos="Título 1,Título 2,Título 3,Título 4" urls="https://ejemplo.com/pagina1/,https://ejemplo.com/pagina2/,https://ejemplo.com/pagina3/,https://ejemplo.com/pagina4"]Lenguaje del código: JSON / JSON con comentarios (json)- Altura (
altura="400px"):- Establece la altura de cada imagen en el slider en 400 píxeles.
- Mostrar (
mostrar="3"):- Indica que se mostrarán simultáneamente 3 imágenes en el slider al mismo tiempo.
- IDs (
ids="6,7,8,9"):- Especifica los identificadores únicos de las imágenes que se mostrarán en el slider. En este caso, las imágenes corresponden a las IDs 6, 7, 8 y 9.
- Títulos (
titulos="Título 1,Título 2,Título 3,Título 4"):- Proporciona los títulos respectivos de las imágenes que se mostrarán en el slider. Cada título está asociado a una imagen específica según el orden de las IDs.
- URLs (
urls="https://ejemplo.com/pagina1/,https://ejemplo.com/pagina2/,https://ejemplo.com/pagina3/,https://ejemplo.com/pagina4"):- Asigna las URLs a las que se redirigirá al usuario al hacer clic en cada imagen. Cada URL está vinculada a una imagen específica según el orden de las IDs.
En resumen, este shortcode crea un slider de imágenes que:
- Muestra 3 imágenes simultáneamente.
- Cada imagen tiene una altura de 400 píxeles.
- Utiliza las imágenes con IDs 6, 7, 8 y 9.
- Asocia títulos específicos a cada imagen.
- Proporciona URLs de destino para cada imagen.
El shortcode [slider_imagenes] se encarga de toda la lógica y presentación, permitiendo una integración rápida y fácil de sliders personalizados en páginas o publicaciones de WordPress.
En resumen, esta función encapsula la creación dinámica de un slider de imágenes personalizable en WordPress, con una atención especial a la generación y gestión de identificadores únicos, procesamiento de parámetros y la inclusión de recursos externos necesarios para su funcionalidad.
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.
Deja tus opiniones o dudas en los comentarios.