Slideshow Simple en WordPress

Una de las cosas más usadas en la actualidad son los slideshows (pasadores de imágenes) hace un buen tiempo atrás no había otra opción más que usar flash para esto, sin embargo, ahora hay una gran cantidad de librerías javascript que podemos utilizar.

Personalmente soy un gran fanático de jQuery, librería que utilizaré para este ejemplo.

Vamos a crear un slide de imágenes simple, con un efecto fade-in / fade-out entre cada imagen. Tomaré las imágenes de la carpeta “images” incluida en nuestro tema.  Además condicionaremos el slideshow para que solo aparezca en el home de nuestro sitio.

Iniciamos agregando las librerías javascript a nuestro tema.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/functions.js"></script>

Éstas líneas las incluimos dentro de nuestras etiquetas <head> </head> de nuestro archivo header.php.

En primer lugar agregamos la librería jquery desde un repositorio que actualiza automáticamente a la última versión.

Luego agregamos el plugin jquery-cycle mismo que podemos descargar y documentarnos en esta dirección. Para incluirlo a nuestro tema debemos utilizar  bloginfo(‘template_directory’); que da como resultado el directorio de nuestro template en el sitio.

Nuestros archivos .js los hemos  incluidos en una carpeta llamada js , de nuevo, para trabajar de forma más ordenada.

Agregamos también un archivo llamado functions.js que recomiendo crear para incluir nuestros propios fragmentos de código js.

Este jQuery plugin (cycle) es de los más básicos que tenemos por ahi, yo les recomiendo buscar el que más se adapte a sus necesidades, lean bien la documentación e incluyanlo en sus proyectos.

El plugin a grandes rasgos, toma un grupo de imágenes dentro de un div con un id determinado y  hace un pase con efectos. Claro que ustedes pueden usar sus propios id’s y divs y estilizar como deseen el tamaño y demás con CSS. Yo usaré el id “slider” para mi ejemplo e incluiré un grupo de imágenes guardadas en la carpeta “images” de mi tema, algo importante es que estas imágenes tengan el mismo tamaño, en mi caso son de 930×367.


<div id="slider">
<img src="<?php bloginfo('template_directory'); ?>/images/banner.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner1.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner3.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner4.jpg" alt="" />
</div>

Como vemos, volvemos a utilizar  bloginfo(‘template_directory’); para obtener la dirección de nuestro tema, seguido de nuestro directorio images.

Ahora, y como mi plugin lo permite, agregaré un área de navegación con botones para ir atrás, adelante y un listado de números para cada slide.

<div id="pager_wrapper">
<span id="prev"></span>
<div id="pager"></div>
<span id="next"></span>
</div>

El id “pager_wrapper” define nuestros botónes atrás, adelante, incluyendo cada uno de éstos en un elemento span con un id específico para cada botón. como vemos en medio tenemos un div más con el id “pager”, éste contendrá un número correlativo para cada imagen en nuestro slide.

En conjunto nuestro código quedaría así:


<div id="slider_wrapper">

<div id="slider">
<img src="<?php bloginfo('template_directory'); ?>/images/banner.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner1.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner3.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner4.jpg" alt="" />
</div>

<div id="pager_wrapper">
<span id="prev"></span>
<div id="pager"></div>
<span id="next"></span>
</div>

</div>

Ahora agregamos nuestro css con la maquetación de los divs y demás.
Luego tomamos nuestro archivo functions.js y agregamos el siguiente código javascript.

$(document).ready(function(){
$('#slider').cycle({
fx:     'fade',
delay:    2000,
timeout:  2000,
pager: '#pager',
prev:    '#prev',
next:    '#next'
});
$('#nav li ul') .append ("<li class='bottom_bg_list'>thi sis it</li>");
$('#nav li ul') .append ("<li class='top_bg_list'>thi sis it</li>");
});

Como vemos, éste código le dice a mi plugin que utilice el id #slider, con otras varibles más como el efecto, los id’s para los botones anterior y siguiente, etc.

Mi resultado final fué éste:

Agregar un condicional al SlideShow.

Al agregar el fragmento del slideshow a nuestro archivo header, éste se repetirá en cada página en donde  se llame a dicho archivo. Para evitar esto, agregaremos una condición que muestre el slideshow solamente en el homepage de nuestro tema. Para esto utilizaremos uno de los Conditional tags de wordpress llamado is_home, con el la condición el código queda así.


<?php if (is_home()) { ?>
<div id="slider_wrapper">

<div id="slider">
<img src="<?php bloginfo('template_directory'); ?>/images/banner.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner1.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner3.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner4.jpg" alt="" />
</div>

<div id="pager_wrapper">
<span id="prev"></span>
<div id="pager"></div>
<span id="next"></span>
</div>

</div>
<?php } ? >

 

Referencia WordPress: Conditional_Tags, is_home

Aqui pueden descargar  los archivos que se construyeron en el transcurso de este tutorial.

Es todo por ahora, sus comentarios son siempre bienvenidos, éxitos y hasta que el tiempo sea grato.