Construir un slideshow con las imágenes de una categoría

Como les platiqué anteriormente podemos hacer fácilmente un slideshow de imágenes. Ahora vamos a complementar el tutorial sustituyendo las imágenes de nuestra carpeta con las “imágenes destacadas” de los posts incluidos en una categoría en específico.

Tomando nuestro tuto anterior

Vamos a tomar el código de nuestro tutorial anterior como base para nuestro slideshow. No explicaré cómo funciona el slideshow como tal, lo único que va a cambiar es el código en nuestro header.php que es el siguiente.


<?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 } ?>

Agregar soporte para imágenes destacadas

Desde la versión 3 de WordPress en el panel de escritura de nuestros artículos viene incluida la opción para agregar imágenes destacadas que podemos usar para muchas cosas, éste es solo un ejemplo de cómo utilizarlas.

Primero agregaremos a nuestro tema el soporte para poder tener “imágenes destacadas” en nuestros artículos. Para esto, agregamos una pequeña línea de código a nuestro archivo functions.php.


add_theme_support('post-thumbnails');

Si no tienen ningún archivo functions.php deberán crearlo  y agregar el código.

Con esto, en el pánel de escritura de las entradas nos aparece un campo personalizado desde donde de la manera más amigable agregamos una imagen subida previamente o bien para subir y posteriormente seleccionarla como “imagen destacada”.

Categoría y el query para el loop

Ahora crearemos una categoría llamada “Featured”, que nos servirá para definir las imágenes de los artículos que incluiremos en el slideshow.

Teniendo nuestra categoría creada vamos a crear un Query (query_posts) que obtenga el listado de imágenes de los posts. Con este query podemos crear nuestro Loop con el listado de imágenes además definiremos la cantidad máxima de items (posts).


<div id="slider">

<?php query_posts('showposts=4&amp;amp;amp;amp;amp;amp;amp;cat=3'); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php the_post_thumbnail();?>

<?php endwhile; else: ?>
<p>Uuuups!!! no encontramos ninguna imágen en los artículos de la categoría.</p>
<?php endif; ?>

</div>

Usando Query_posts definimos los parámetros para que liste 4 artículos de la categoría con el id 3.  Luego la línea con el inicio del loop. A continuación la imagen destacada del artículo, terminamos esta parte y agregamos un else para un mensaje si los criterios no se cumplen.

 

{Como saber el id de una categoría}

Quizá alguien se pregunte cómo hice para saber el id de la categoría. En el panel de administración cuando vamos al sub-menú categorías del menú entradas y nos posicionamos sobre el nombre de la categoría, abajo aparecerá el id (ver imagen) o si no, damos editar a la categoría y en la barra de direcciones aparecerá una parte que dice como ID=3 pues eso… el ID de esta categoría es el 3.

Si todo sale bien, ahora cada que agregamos una imagen destacada en los artículos de la categoría especificada automáticamente agregaremos un item al slideshow de nuestro theme.

Bienvenidos los comentarios, les deseo éxitos y hasta que el tiempo sea grato.

  • Alex

    Hola amigo yo lo he realizado siguiendo tus pasos y si salido todo bien. Pero cuando probe utilizando otro sistema de Slideshow tengo dificultad cuando intento enlazar las imagenes destacadas pero si lo hago colocando una carpeta fija de imagenes como explicas en el tema de Slideshow Simple en WordPress no tengo dificulta.

    <div data-src="/images/slides/banner.jpg”>

    Camera is a responsive/adaptive slideshow. Try to resize the browser window

    de esa forma no hay problemas todo esta en orden Pero lo que quiero hacer es utilizar las imágenes Destacadas de WordPress. He colocado el código del lop en lugar de este no funciona he intentado modificando un poco el código asi:

    <div data-src="”>

    Camera is a responsive/adaptive slideshow. Try to resize the browser window

    Uuuups!!! no encontramos ninguna imagen en los artículos de la categoría.

    tampoco funciona. Agradezco mucho tu ayuda de antemano.
    Si no es mucho pedir si me podrías indicar como recojo también el Titulo del post y el contenido como abstracto para poder describir un poco el la imagen destacada.

    Saludos