Hace unos días un lector me preguntar como integrar el slider s3Slider en Wordpress, y mirando un poco las estadísticas del sitio me di cuenta que varios también se preguntaban lo mismo. Es por eso que hoy voy a explicar de manera rápida como lograr dicha integración.

s3Slider es un Slideshow para JQuery bastante ligero y ágil, la integración se sustentara con una query dentro de Wordpress

Primeramente debemos agarrar una copia de s3Slider.

Tomemos un minuto para entender que es lo que estamos creando y que elementos se encuentran en juego.

Thumbnail:

las imágenes de nuestro slideshow que crearemos con un campo personalizado o custom field

Titulo del post:

El titulo con el tag the_title

Introducción:

Usaremos la función the_content_rss para controlar el numero de palabras a mostrar

Una vez que tenemos en claro esto, procedamos.

Incluiremos s3Slider.js y JQuery.js en nuestro Header. En lo personal prefiero incluir JQuery.js directamente de Google Code para hacer mas “ligero” el site.

Abrimos nuestro Header.php e incluimos estas lineas:

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
 
<script src="<?php bloginfo('template_directory'); ?>/js/s3Slider.js" type="text/javascript"></script>
 
 <script type="text/javascript">
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 5000
        });
    });
 
</script>

Notemos que el archivo s3Slider.js se encuentra en una carpeta llamada “js” esto es algo que también prefiero para mantener todo organizado dentro de mi Theme.

Una vez realizado el paso anterior procederemos a la integracion con Wordpress.

Recomiendo crear un archivo nuevo y luego incluirlo donde deseemos, esto nos permite estar mas organizados y ser prolijos. Creemos un archivo llamado, por ejemplo: Slider.php

Como necesitaremos un nuevo loop, la forma mas fácil y efectiva de hacer es a través de un nuevo query. Para eso escribiremos lo siguiente:

<?php
$my_query = new WP_Query('category_name=NOMBRE_DE_LA_CATEGORIA&showposts=CANTIDAD_DE_ENTRADAS');
while ($my_query->have_posts()) : $my_query->the_post();
?>

Con esta función lo que estamos diciendo es que Wordpress solo muestre entradas de X categoría y X cantidad de ellas.

Luego pasaremos a diagramar la estructura para nuestro Slideshow. Lo primero que haremos sera crear un campo personal para las imagenes. Esto se logra de la siguiente manera:

<?php if (get_post_meta($post->ID, 'thumbnail', true)) { ?>
<a href="<?php the_permalink() ?>" title="Leer todo" ><img src="<?php echo get_post_meta($post->ID, "thumbnail", $single = true) ;?>" alt="<?php the_title() ;?>"/></a>

Aquí podemos ver como se ha creado el campo personal, con el nombre “thumbnail” que sera el nombre que le demos a la hora de crear una nueva entrada y el valor de dicho campo sera la URL completa de nuestra imagen.

Ahora pasaremos a insertar el titulo de la entrada y la introducción de la misma, para eso escribiremos este pedazo de código:

<span class="top"><strong><a class="slide" href="<?php the_permalink() ?>" title="Leer todo" ><?php the_title() ;?></a></strong><br /> <?php the_content_rss('', FALSE, '', 20) ;?></span>

Donde:

La clase “top” le dice a nuestro titulo e introducción que “aparezcan” desde la base, si deseamos lo contrario, que se muestren desde arriba, solo cambiamos la el valor a “bottom”.

Los valores dentro de the_content_rss nos indican el numero de palabras que se mostraran en la intro, en este caso solo se mostraran 20 palabras.

Por ultimo cerramos nuestro Loop:

<?php }?>
<?php endwhile ;?>

Perfectos hemos creado nuestro Slideshow. Solo nos resta unir todas las partes, y darles formato vía CSS:

<div id="slider">
<ul id="sliderContent">
<?php
$my_query = new WP_Query('category_name=NOMBRE_DE_LA_CATEGORIA&showposts=CANTIDAD_DE_ENTRADAS');
while ($my_query->have_posts()) : $my_query->the_post();
?>
 
<li class="sliderImage">
<?php if (get_post_meta($post->ID, 'thumbnail', true)) { ?>
<a href="<?php the_permalink() ?>" title="Leer todo" ><img src="<?php echo get_post_meta($post->ID, "thumbnail", $single = true) ;?>" alt="<?php the_title() ;?>"/></a>
 
<span class="top"><strong><a class="slide" href="<?php the_permalink() ?>" title="Leer todo" ><?php the_title() ;?></a></strong><br /> <?php the_content_rss('', FALSE, '', 20) ;?></span>
  </li>
  <?php }?>
  <?php endwhile ;?>
 
  <div class="clear sliderImage"></div>
 
  </ul>
  </div>

Guardamos nuestro archivo, y lo incluimos donde queremos, en mi caso lo incluí en el Header de mi Theme. Solo nos resta importarlo con la siguiente función:

<?php include (TEMPLATEPATH . '/slider.php'); ?>

Ahora solo queda en vos darle el formato deseado, hacer unos retoques, mover cositas, y tu slider estar funcionando perfectamente.