Clase 5: El bucle avanzado: query_posts.

Una de las formas mas fáciles de armar un bucle que cumpla con determinadas condiciones es utilizando query_posts. Una consulta con esta función altera el bucle a continuación y puede utilizarse para múltiples bucles si utilizamos correctamente wp_reset_query().

<?php
// La consulta
query_posts( $args );

// El bucle
while ( have_posts() ) : the_post();
echo '<li>';	the_title();	echo '</li>';
endwhile;

// Reset
wp_reset_query();
?>

En nuestra clase de hoy vamos a insertar dentro de themeTaller tres bucles nuevos:

1. Uno para invocar el contenido de tres entradas de la categoría “Productos destacados” y colocarlos debajo de nuestro slider.
2. Buscaremos dos entradas de la sección noticias para colocar debajo de los productos destacados.
3. En la barra lateral colocaremos las últimas cuatro entradas de la categoría blog.

Tomamos la primer sección en donde colocaremos los productos destacados y encontramos este código HTML según lo que trabajamos en la Clase 3:

<div id="featured">
<div class="item">
<h3>Quiere saber mas?</h3>
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
</div><!-- end of item" -->

<div class="item">
<h3>Quiere saber mas?</h3>
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
</div><!-- end of item" -->
<div class="item">
<h3>Quiere saber mas?</h3>
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
</div><!-- end of item" -->

</div><!-- end of featured -->

Creamos la categoría “Producto Destacado” e insertamos tres entradas con título y un poco de texto (sólo unas líneas). Ahora reemplazamos por el bucle con query_posts, en donde los parámetros serán seleccionar tres posts (posts_per_page=3) de la categoría “Producto Destacado” (category_name=Producto Destacado):

<div id="featured">
<?php query_posts('category_name=Producto Destacado&posts_per_page=3' );
while ( have_posts() ) : the_post(); ?>	

<div class="item">
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
</div><!-- end of item" -->	

<?php endwhile; wp_reset_query(); ?>

</div><!-- end of featured -->

Guardamos y probamos que nuestro theme nos muestre, efectivamente, nuestras tres entradas. Ahora procedemos a elaborar el segundo bucle que será un poco mas complicado debido a que tiene imágenes con un tamaño específico.

Para nuestras imágenes vamos a utilizar la función the_post_thumbnail disponible a partir de WP 3+ y que nos ofrece la posibilidad de gestionar miniaturas de tamaños personalizados sin necesidad de plugins. Para activar la función deberemos indicarlo en nuestro archivo functions.php, que hasta ahora no vimos, así que creamos un archivo llamado functions.php y dentro colocamos el siguiente contenido:

<?php
add_theme_support( 'post-thumbnails' );
add_image_size( 'homepage-thumb', 290, 130, true );
?>

Con add_image_size indicamos a la plataforma que necesitamos un tamaño personalizado al que llamaremos homepage-thumb y que deseamos que mida 290px de ancho por 130 de alto. Además la imagen será recortada y no redimensionada (el valor true final activa el crop, o recorte), de este modo evitamos que algunas imágenes se deformen.

Ahora procedemos a crear la categoría “Noticias” y subimos dos entradas las cuales tendrán una imagen que definiremos como destacada.

En nuestro archivo index.php buscamos el siguiente código:

<div class="news">
<img src="http://lorempixum.com/g/290/130" />
<h2>Un post que se destaca...</h2>
<p>Sed pharetra risus eu nisi molestie aliquet. Donec ipsum eros, sodales ut convallis ac, posuere vitae orci. <a href="#">Leer más</a></p>
</div>

<div class="news">
<img src="http://lorempixum.com/g/290/130" />
<h2>Un post que se destaca...</h2>
<p>Sed pharetra risus eu nisi molestie aliquet. Donec ipsum eros, sodales ut convallis ac, posuere vitae orci. <a href="#">Leer más</a></p>
</div>

Y lo reemplazaremos por nuestro segundo bucle, el cual modificaremos para que busque sólo dos entradas en la categoría “Noticias”.

<?php query_posts('category_name=Noticias&posts_per_page=2' );
while ( have_posts() ) : the_post(); ?>		

<div class="news">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'homepage-thumb' ); } ?>
<h2><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
</div>

<?php endwhile; wp_reset_query(); ?>

Observen que en el lugar de la imagen ahora colocamos una llamada a the_post_thumbnail, específicamente a la miniatura “homepage-thumb”, cuyo valor definimos en el functions.php.

Si ustedes desean cambiar el valor de las miniaturas una vez generadas, pueden hacerlo utilizando el plugin Regenerate Thumbnails, ya que una vez que WordPress genera las miniaturas cuando las subimos, no vuelve a regenerarlas al cambiar los valores mediante el functions.php.

En nuestro segundo bucle usamos el título (the_title) envuelto en la etiqueta <a> con un href que dentro contiene la función get_permalink. El resultado es el título de la entrada con link a la misma. Y en vez de the_content (que nos trae el contenido entero de una nota, con el formato del texto incluido), utilizamos the_excerpt que nos traerá las primeras palabras de la entrada sin formato.

Los links que colocamos en cada función los llevarán directamente al codex de WordPress.org, herramienta fundamental para cualquier desarrollador que quiera avanzar en la creación de themes o plugins para esta plataforma.

Finalmente pasamos a nuestro tercer bucle, ubicado en la barra lateral. Creamos la categoría “Blog” y generamos algún contenido (o reciclamos algo del contenido de pruebas que metimos cambiando de nombre “Uncategorized” por “Blog”). Abrimos el archivo sidebar.php que contiene el siguiente HTML.

<div id="sidebar">

<h3>Ultimas noticias</h3>

<ul>    

<li>Una noticia en la sidebar<br />Por admin</li>    

<li>Una noticia en la sidebar<br />Por admin</li>    

<li>Una noticia en la sidebar<br />Por admin</li>    

<li>Una noticia en la sidebar<br />Por admin</li>

</ul>

</div><!-- end of sidebar -->

E insertamos nuestro bucle con la nueva categoría y solicitando 4 entradas. También añadiremos el nombre del autor de cada entrada desde la función the_author.

<div id="sidebar">

<h3>Ultimas noticias</h3>

<ul>

<?php query_posts('category_name=Blog&posts_per_page=4' ); 

while ( have_posts() ) : the_post(); ?>	

<li><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a> <br /> Por <?php the_author(); ?></li>

<?php endwhile; wp_reset_query(); ?>	

</ul>

</div><!-- end of sidebar -->

Verán que en el caso de los títulos que llevan links ahora los vemos en color celeste y con subrayado debajo. Eso se debe a que nunca definimos desde el style.css como debían verse, así que pasaremos a hacerlo.

.news h2 a  {color: #7b7b7b;text-decoration:none;}

#sidebar ul li a{text-decoration:none;color: #7b7b7b;}

Verificamos que se vea todo correctamente en nuestro servidor de pruebas y listo.

http://www.summarg.com/demos/themetaller/

Volver al temario del taller