Crear un slider para WordPress es una tarea relativamente sencilla, especialmente con el uso de frameworks como Bootstrap, que facilitan enormemente este proceso. Bootstrap no solo permite la creación de interfaces atractivas y funcionales, sino que también ofrece una estructura base que se puede personalizar según las necesidades del proyecto. Sin embargo, personalizar el código fuente en CSS3, así como integrar jQuery y JavaScript, será esencial para obtener un resultado único y adaptado a los requerimientos específicos del sitio web. El nivel de conocimiento técnico del desarrollador jugará un papel determinante en el resultado final.
El objetivo de esta entrada es mostrar cómo configurar un slider sencillo desde el menú de configuración de WordPress, para que pueda ser gestionado de manera intuitiva y sin complicaciones. La idea es compartir un código ya probado y utilizado en múltiples ocasiones, que permite crear un slider con tres imágenes, cada una con su título y subtítulo correspondiente. Aunque la complejidad del proyecto puede aumentar según las necesidades, el enfoque de este tutorial será educativo, buscando ofrecer una solución clara y fácil de entender.
Para contextualizar el proyecto, partimos de un carrusel que hemos copiado de la página oficial de Bootstrap 5 (https://getbootstrap.com/docs/5.0/getting-started/introduction/) y lo hemos integrado en nuestro proyecto. A continuación, nos centraremos en crear una nueva entrada en el personalizador de WordPress que permita subir imágenes de forma dinámica, así como redactar los títulos y subtítulos correspondientes para cada imagen.
El archivo que debemos modificar en nuestra plantilla se encuentra en /inc/customizer.php. En este archivo, será necesario incluir una función y un hook para que el personalizador funcione correctamente. Habrá que tener en cuenta que dos de las entradas serán cuadros de texto, mientras que la tercera será un botón que, al ser pulsado, permitirá subir una imagen a la carpeta de medios. Aunque esta última funcionalidad puede parecer más compleja, con el código que proporcionaré, no debería representar mayores dificultades.
function themeName_customize_register( $wp_customize ) {
//Panel
$wp_customize->add_panel ('slider', [
'title' => __('Slider', 'themename'),
'description' => 'Slider de la página de portada',
'priority' => 325,
]);
// Seccion
$wp_customize->add_section ('sliderContent', [
'title' => 'Contenidos Slider',
'panel' => 'slider',
]);
/* Settings -------------------------------------------------------------------------------------------------------------- */
$wp_customize->add_setting('sliderTitle1', array(
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
'theme_supports' => '',
'defaults' => '',
'transport' => 'refresh',
'sanitize_callback' => '',
'sanitize_js_callback' => '',
));
$wp_customize->add_setting('sliderTitle2', array(
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
'theme_supports' => '',
'defaults' => '',
'transport' => 'refresh',
'sanitize_callback' => '',
'sanitize_js_callback' => '',
));
$wp_customize->add_setting('sliderTitle3', array(
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
'theme_supports' => '',
'defaults' => '',
'transport' => 'refresh',
'sanitize_callback' => '',
'sanitize_js_callback' => '',
));
$wp_customize->add_setting('sliderSubtitle1', array(
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
'theme_supports' => '',
'defaults' => '',
'transport' => 'refresh',
'sanitize_callback' => '',
'sanitize_js_callback' => '',
));
$wp_customize->add_setting('sliderSubtitle2', array(
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
'theme_supports' => '',
'defaults' => '',
'transport' => 'refresh',
'sanitize_callback' => '',
'sanitize_js_callback' => '',
));
$wp_customize->add_setting('sliderSubtitle3', array(
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
'theme_supports' => '',
'defaults' => '',
'transport' => 'refresh',
'sanitize_callback' => '',
'sanitize_js_callback' => '',
));
$wp_customize->add_setting('fotoSlider1', array(
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
'theme_supports' => '',
'defaults' => '',
'transport' => 'refresh',
'sanitize_callback' => '',
'sanitize_js_callback' => '',
));
$wp_customize->add_setting('fotoSlider2', array(
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
'theme_supports' => '',
'defaults' => '',
'transport' => 'refresh',
'sanitize_callback' => '',
'sanitize_js_callback' => '',
));
$wp_customize->add_setting('fotoSlider3', array(
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
'theme_supports' => '',
'defaults' => '',
'transport' => 'refresh',
'sanitize_callback' => '',
'sanitize_js_callback' => '',
));
/* Controls -------------------------------------------------------------------------------------------------------------- */
$wp_customize->add_control ('sliderTitle1', [
'label' => __('Titulo principal Slider #1', 'themename'),
'description' => __('Titulo principal slider #1'),
'type' => 'text',
'section' => 'sliderContent',
'priority' => 16,
]);
$wp_customize->add_control ('sliderTitle2', [
'label' => __('Titulo principal Slider #2', 'themename'),
'description' => __('Titulo principal slider #2'),
'type' => 'text',
'section' => 'sliderContent',
'priority' => 16,
]);
$wp_customize->add_control ('sliderTitle3', [
'label' => __('Titulo principal Slider #3', 'themename'),
'description' => __('Titulo principal slider #3'),
'type' => 'text',
'section' => 'sliderContent',
'priority' => 16,
]);
$wp_customize->add_control ('sliderSubtitle1', [
'label' => __('Subtitulo principal Slider #1', 'themename'),
'description' => __('Subtitulo principal slider #1'),
'type' => 'text',
'section' => 'sliderContent',
'priority' => 16,
]);
$wp_customize->add_control ('sliderSubtitle2', [
'label' => __('Subtitulo principal Slider #2', 'themename'),
'description' => __('Subtitulo principal slider #2'),
'type' => 'text',
'section' => 'sliderContent',
'priority' => 16,
]);
$wp_customize->add_control ('sliderSubtitle3', [
'label' => __('Subtitulo principal Slider #3', 'themename'),
'description' => __('Subtitulo principal slider #3'),
'type' => 'text',
'section' => 'sliderContent',
'priority' => 16,
]);
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'fotoSlider1', array(
'label' => __('Slider Image #1', 'themename'),
'section' => 'sliderContent',
'settings' => 'fotoSlider1',
)));
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'fotoSlider2', array(
'label' => __('Slider Image #2', 'themename'),
'section' => 'sliderContent',
'settings' => 'fotoSlider2',
)));
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'fotoSlider3', array(
'label' => __('Slider Image #3', 'themename'),
'section' => 'sliderContent',
'settings' => 'fotoSlider3',
)));
}
add_action('customize_register', 'themeName_customize_register');Obvio que lo siguiente es llevar estos nuevos elementos, hablo de las imágenes y los textos a nuestro carousel que acabamos importar desde la página de Bootstrap 5 ( o que directamente hemos creado nosotros ). La función que vamos a llamar es get_theme_mod(), como podémos apreciar el en código PHP que os comparto a continuación. Realmente es sencillo seguir el código y entenderlo así que, en esta ocasión, no me extenderé más en este asunto.
<!-- Slider principal de la página web -->
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<?php
$imagenSlider1 = get_theme_mod('fotoSlider1');
if ($imagenSlider1 == '') $imagenSlider1 = 'https://images.pexels.com/photos/414029/pexels-photo-414029.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1';
?>
<img src="<?php echo $imagenSlider1; ?>" class="d-block w-100 img-fluid" alt="primera imagen del Slider">
<div class="carousel-caption">
<?php
$sliderTitle1 = get_theme_mod ('sliderTitle1');
if ($sliderTitle1 == '') $sliderTitle1 = 'First Coaching Services';
$sliderSubtitle1 = get_theme_mod ('sliderSubtitle1');
if ($sliderSubtitle1 == '') $sliderSubtitle1 = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic porro in laborum';
?>
<h5 class="animated bounceInRight" style="animation-delay: 1s"><?php echo $sliderTitle1; ?></h5>
<p class="animated bounceInLeft" style="animation-delay: 2s"><?php echo $sliderSubtitle1; ?></p>
</div>
</div>
<div class="carousel-item">
<?php
$imagenSlider2 = get_theme_mod('fotoSlider2');
if ($imagenSlider2 == '') $imagenSlider2 = 'https://images.pexels.com/photos/1618044/pexels-photo-1618044.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1';
?>
<img src="<?php echo $imagenSlider2; ?>" class="d-block w-100 img-fluid" alt="segunda imagen del Slider">
<div class="carousel-caption">
<?php
$sliderTitle2 = get_theme_mod ('sliderTitle2');
if ($sliderTitle2 == '') $sliderTitle2 = 'Two Coaching Services';
$sliderSubtitle2 = get_theme_mod ('sliderSubtitle2');
if ($sliderSubtitle2 == '') $sliderSubtitle2 = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic porro in laborum';
?>
<h5 class="animated bounceInRight" style="animation-delay: 1s"><?php echo $sliderTitle2; ?></h5>
<p class="animated bounceInLeft" style="animation-delay: 2s"><?php echo $sliderSubtitle2; ?> </p>
</div>
</div>
<div class="carousel-item">
<?php
$imagenSlider3 = get_theme_mod('fotoSlider3');
if ($imagenSlider3 == '') $imagenSlider3 = 'https://images.pexels.com/photos/2977567/pexels-photo-2977567.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1';
?>
<img src="<?php echo $imagenSlider3; ?>" class="d-block w-100" alt="tercera imagen del Slider">
<div class="carousel-caption">
<?php
$sliderTitle3 = get_theme_mod ('sliderTitle3');
if ($sliderTitle3 == '') $sliderTitle3 = 'Two Coaching Services';
$sliderSubtitle3 = get_theme_mod ('sliderSubtitle3');
if ($sliderSubtitle3 == '') $sliderSubtitle3 = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic porro in laborum';
?>
<h5 class="animated bounceInRight" style="animation-delay: 1s"><?php echo $sliderTitle3; ?></h5>
<p class="animated bounceInLeft" style="animation-delay: 2s"><?php echo $sliderSubtitle3; ?></p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Final del Slider Principal de la página web -->Confio en que este tutorial os haya servido y espero vuestros comentarios y vuestras aportaciones que sirvan para que todos aprendamos un poco más de la progrmación en HTML, CSS3, Bootstrap y PHP.