Mi propósito en este artículo es el de crear un slider para una plantilla wordpress desde cero. Para ello me apoyaré en Bootstrap para crear los estilos. Como siempre, empiezo estas publicaciones con un ejemplo lo suficientemente sencillo para que pueda ser comprendido por los más nóveles en el diseño y programación de páginas web.

Como os podéis imaginar, lo primero es crear un slider para vuestra página web. En este caso será una sucesión de imágenes, aunque se le puede incorporar textos. Para no complicarse demasiado, usaremos un código que ya esta probado y que será la base de nuestro diseño. El código al que me refiero tiene el siguiente aspecto:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

y como efectivamente sospecháis, lo he copiado de la página oficial de bootstrap 4. ¡Así de fácil!. Ahora que tenemos incorporado estas líneas de código en nuestro theme de wordpress, aún tendremos que hacer algunas cosas más antes de disponer de un slider práctico. Si os fijáis la fuente de la imagen solo tiene unos puntos suspensivos. Ese espacio habrá que rellenarlo de alguna manera. Eso lo haremos incorporando una entrada más en nuestro menú de personalización.

Para crearlo, tendremos que incorporar este código php en el archivo customizer.php que está incluido en el directorio /inc de nuestra plantilla. Estas son las líneas de código:

function antoniogarciaprats_customize_slider ($wp_customize) {

	//Panel 
	$wp_customize->add_panel ('slider_principal', [
		'title'	=> __('Slider Principal', 'antoniogarciaprats'),
		'description'	=> 'imagenes del slider de la pagina principal',
		'priority'	=> 160,
	]);

	// Seccion
	$wp_customize->add_section ('slider_home', [
		'title'		=> 'Imagenes para el Slider Principal',
		'panel'	=> 'slider_principal',
	]);

	/* -------------------------------- Imagen 1 del Slider ----------------------------------------- */

	//Setting o Configuracion
	$wp_customize->add_setting ('imagen1_slider', [
		'type' => 'theme_mod',
		'capability' => 'edit_theme_options',
		'theme_supports' => '',
		'defaults' => '',
		'transport' => 'refresh',
		'sanitize_callback' => '',
		'sanitize_js_callback' => '',
	]);

	//Control
	$wp_customize->add_control (new WP_Customize_Media_Control($wp_customize, 'imagen1_slider', [
		'label' => __('Imagen #1 del Slider principal', 'antoniogarciaprats'),
		'section' => 'slider_home',
		'mime_type' => 'image',
		'priority' => 1,
	]));

	/* -------------------------------- Imagen 2 del Slider ----------------------------------------- */

	$wp_customize->add_setting ('imagen2_slider', [
		'type' => 'theme_mod',
		'capability' => 'edit_theme_options',
		'theme_supports' => '',
		'defaults' => '',
		'transport' => 'refresh',
		'sanitize_callback' => '',
		'sanitize_js_callback' => '',
	]);

	//Control
	$wp_customize->add_control (new WP_Customize_Media_Control($wp_customize, 'imagen2_slider', [
		'label' => __('Imagen #2 del Slider principal', 'antoniogarciaprats'),
		'section' => 'slider_home',
		'mime_type' => 'image',
		'priority' => 3,
	]));

	/* -------------------------------- Imagen 3 del Slider ----------------------------------------- */

	$wp_customize->add_setting ('imagen3_slider', [
		'type' => 'theme_mod',
		'capability' => 'edit_theme_options',
		'theme_supports' => '',
		'defaults' => '',
		'transport' => 'refresh',
		'sanitize_callback' => '',
		'sanitize_js_callback' => '',
	]);

	//Control
	$wp_customize->add_control (new WP_Customize_Media_Control($wp_customize, 'imagen3_slider', [
		'label' => __('Imagen #3 del Slider principal', 'antoniogarciaprats'),
		'section' => 'slider_home',
		'mime_type' => 'image',
		'priority' => 5,
	]));

}

add_action ('customize_register', 'antoniogarciaprats_customize_slider');

Con esto incluimos en el panel de personalización una nueva entrada que nos permitirá incluir nuestras propias imágenes personalizadas a nuestro diseño web.

Ahora nos queda incluir en cada una de las entradas un pequeño código en PHP que nos permitirá visualizar la imagen personalizada para nuestro slider, o bien, dejar una de muestra que ocupe su espacio. Veamos ese código:

<?php
      $id_imagen = get_theme_mod ('imagen1_slider');
      $ruta_imagen = wp_get_attachment_image_src ( $id_imagen, 'full' );

      if ($ruta_imagen[0]) { ?>
        <img class="d-block w-100" src="<?php echo $ruta_imagen[0]; ?>" alt="Slider Principal #1">    
      <?php } 
      else { ?>
        <img class="d-block w-100" src="<?php echo get_template_directory_uri(); ?>/img/slider1.jpg" alt="Slider 1">
<?php } ?>

No es difícil entender estas líneas de PHP. El aspecto final será el siguiente:

<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 columna-sin-padding">
    
    <div class="carousel-item active">
      
      <?php
      $id_imagen = get_theme_mod ('imagen1_slider');
      $ruta_imagen = wp_get_attachment_image_src ( $id_imagen, 'full' );

      if ($ruta_imagen[0]) { ?>
        <img class="d-block w-100" src="<?php echo $ruta_imagen[0]; ?>" alt="Slider Principal #1">    
      <?php } 
      else { ?>
        <img class="d-block w-100" src="<?php echo get_template_directory_uri(); ?>/img/slider1.jpg" alt="Slider 1">
      <?php } ?>
      
    </div>
    
    <div class="carousel-item">
    
      <?php
      $id_imagen_2 = get_theme_mod ('imagen2_slider');
      $ruta_imagen_2 = wp_get_attachment_image_src ($id_imagen_2, 'full');

      if ($ruta_imagen_2[0]) { ?>                        
      <img class="d-block w-100" src="<?php echo $ruta_imagen_2[0]; ?>" alt="Slider Principal #2">
      <?php } 
      else { ?>
      <img class="d-block w-100" src="<?php echo get_template_directory_uri(); ?>/img/slider2.jpg" alt="Slider 2">
      <?php } ?>
    
    </div>
    
    <div class="carousel-item">
    
      <?php
      $id_imagen_3 = get_theme_mod ('imagen3_slider');
      $ruta_imagen_3 = wp_get_attachment_image_src ($id_imagen_3, 'full');

      if ($ruta_imagen_3[0]) { ?>                        
      <img class="d-block w-100" src="<?php echo $ruta_imagen_3[0]; ?>" alt="Slider 3">
      <?php } 
      else { ?>
      <img class="d-block w-100" src="<?php echo get_template_directory_uri(); ?>/img/slider3.jpg" alt="Slider 3">
      <?php } ?>
      
    </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>

Con esto ya hemos terminado. Dispondremos en nuestra plantilla de wordpress de un sencillo y práctico slider que nos dará una imagen totalmente profesional. Así prescindiremos de incluir un plugin que nos proporcionen este recurso y tendremos mucho más control sin tener que desembolsar un euro.

Con mucho gusto contestaré a todas las dudas que os surjan después de leer esta publicación. Tenéis la sección de comentarios para dejarme vuestras preguntas.

Dejar respuesta

Please enter your comment!
Please enter your name here