SummArg | Cursos y recursos para webmasters

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/

themeTaller clase 5 (995)

Volver al temario del taller

 

 

Dejar un comentario

  1. Gracias por el aporte. Esta vez sí, los resultados del ejercicio han sido correctos.
    Un saludo

  2. Marcos

    Cuando va a salir el 6?
    o no va a salir?

  3. Cristian

    Muy bueno el tutorial, espero salga lo siguiente, gracias

  4. billie

    para cuando el 6?
    estan buenisimos los tutos, Muchisimas gracias!

  5. René

    Muchas gracias por este curso taller.

    Vamos aprendiendo y afianzando conceptos.

    Todo muy bien explicado.

    Un saludo.

  6. Hola!

    Finalmente terminarás con las demás partes?? Más que nada porque el proyecto que empezamos con este tutorial, y que por cierto está muy bien, se ha quedado a medias…

    1 Saludo!

  7. Hola Nekko!

    Me engome con tu tuto, esta excelente! pero veo que quedamos a la mitad! como vamos con las demas partes??? como te puedo encontrar en la web! un placer y muchas gracias!!!

    bytes!

    LSD

  8. oskar

    hola de nuevo;

    voy a cambiar la firma de mis posts por algo así como “eltorpedeturno” o algo similar.

    Algo he hecho en algún archivo de mi tema, pero no acabo de detectar qué es.

    El caso es que cuando cambio al tema que estoy creando siguiendo este curso, el backend se comporta de manera extraña. Por ejemplo, cuando añado una entrada, al clickar en “Publicar”…. en la barra de direcciones el link cambia a “http://localhost/wp/wp-admin/post.php” pero no se ve absolutamente nada, pantalla en blanco. ¿???
    Si vuelvo a un tema de los que vienen por defecto todo funciona OK…
    Alguna pista?

    un saludo

  9. Nekko

    La verdad es que nunca me pasó! Estás utilizando Notepad++? Te fijás de no dejar espacios en blanco al inicio y al final de sus archivos? He visto algunos errores muy raros cuando se editan los archivos usando, por ejemplo, notepad (el editor que viene con windows) que no fueron creados para código.

  10. Buenas:
    No tengo mucha expriencia en wordpress y este tutorial está muy bueno. Gracias.
    Mi duda esta línea :
    <?php query_posts('category_name=Producto Destacado&posts_per_page=3' );

    solo me funciona si en vez del name de la categoría escribo el slug que para mi caso fue producto_destacado

    Sabe alguien si es debido a que el name tiene espacio en blanco o es debido a que?

  11. Gracias por este tutorial habia utilizado el bucle predeterminado de wordpress y cuando empezaba ha trabajar con los QUERY de wordpress todo sin problemas hasta que me habia dado cuenta que no me hacia funcionar ls paginacion (aparecia pero no podia ir a la siguiente pagina )

    Con este tutorial recien me di cuenta que me DESPUES de utilizar los QUERY POST tenia que resetearlo al FINAL DEL BUCLE , y con esto ya se soluciono el problema de la paginacion.

    Sigue asi con los tutoriales estan interesantes XD

  12. roberto

    hola, y si quiero mas de 2 pos en noticias, le he cambiado el numero pero la sidebar del lado derecho se baja.

    como le hago para que que las noticias no se corran a la derecha si no que aparezcan abajo de los otros post de noticias

  13. Cada vez se pone mejor, estoy leyendo y practicandolo. Estoy seguro que al fnal de este curso sere capaz de realizar mi propia plantilla.

  14. […] Clase 5: El bucle avanzado: Query_posts. […]

  15. […] Clase 5: El bucle avanzado: Query_posts. […]

  16. Julio

    Hola me gustaria hacer lo mismo de aqui

    <a href="”>

    Pero en lugar de ‘category_name=Noticias&posts_per_page=2’ me gustaria usar page_id= para mostrar varias paginas, como podria hacer?

    Gracias anticipadamente

  17. Agustin

    una consulta , donde dice “Ahora reemplazamos por el bucle con query_posts” no entiendo donde se remplaza ese bucle? en que archivo? saludos!

Dejar un comentario