Spanish (Español) translation by Oscar Abad Folgueira (you can also view the original English article)
Como he perfilado en la introducción a esta serie, la clase WP_Query tiene cuatro elementos:
- los argumentos para la consulta, usando parámetros que veremos en detalle en esta serie
- la consulta en sí misma
- el bucle, que mostrará el contenido del post, títulos o cualquier cosa que quieras mostrar
- para terminar: cerrando las etiquetas if y while y reseteando los datos del post
En este tutorial te mostraré cómo usar el bucle con WP_Query, incluyendo la dos formas de estructurar tu bucle y cómo usar múltiples bucles.
Dónde Encaja el Bucle
Sin el bucle, no se mostrará nada en tu página. Después de que WordPress ha ejecutado la consulta utilizando los argumentos que has definido, necesita que le digan qué mostrar de los datos que ha ido a buscar. Aquí es donde aparece el bucle.
Por lo tanto el bucle aparece después de tu consulta y utiliza tres etiquetas:
-
if( $query->have_posts() )comprueba si hay algún post. -
while( $query->have_posts() )repite el bucle por cada post mientras haya posts.
-
$query->the_post()accede a un post específico.
Por lo tanto aquí es donde el bucle encaja en la clase WP_Query:
1 |
<?php
|
2 |
|
3 |
$args = array( |
4 |
// Arguments for your query.
|
5 |
);
|
6 |
|
7 |
// Custom query.
|
8 |
$query = new WP_Query( $args ); |
9 |
|
10 |
// Check that we have query results.
|
11 |
if ( $query->have_posts() ) { |
12 |
|
13 |
// Start looping over the query results.
|
14 |
while ( $query->have_posts() ) { |
15 |
|
16 |
$query->the_post(); |
17 |
|
18 |
// Contents of the queried post results go here.
|
19 |
|
20 |
}
|
21 |
|
22 |
}
|
23 |
|
24 |
// Restore original post data.
|
25 |
wp_reset_postdata(); |
26 |
|
27 |
?>
|
Tras ejecutar el bucle, todo lo que queda por hacer es poner en orden las cosas usando wp_reset_postdata().
Estructura del Bucle
La forma en que está estructurado tu bucle dependerá de qué datos de tu post quieres mostrar. Aquí hay un ejemplo de bucle que muestra el título del post, imagen destacada y un resumen. Tendrías que utilizar un bucle como este en una página de archivo.
1 |
<?php
|
2 |
|
3 |
$args = array( |
4 |
// Arguments for your query.
|
5 |
);
|
6 |
|
7 |
// Custom query.
|
8 |
$query = new WP_Query( $args ); |
9 |
|
10 |
// Check that we have query results.
|
11 |
if ( $query->have_posts() ) { |
12 |
|
13 |
// Start looping over the query results.
|
14 |
while ( $query->have_posts() ) { |
15 |
|
16 |
$query->the_post(); |
17 |
|
18 |
?>
|
19 |
|
20 |
<article id="post-<?php the_ID(); ?>" <?php post_class( 'left' ); ?>> |
21 |
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> |
22 |
<?php post_thumbnail( 'thumbnail' );?> |
23 |
</a>
|
24 |
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> |
25 |
<?php the_title(); ?> |
26 |
</a>
|
27 |
<?php the_excerpt(); ?> |
28 |
</article>
|
29 |
|
30 |
<?php
|
31 |
|
32 |
}
|
33 |
|
34 |
}
|
35 |
|
36 |
// Restore original post data.
|
37 |
wp_reset_postdata(); |
38 |
|
39 |
?>
|
Este bucle muestra exactamente lo que he descrito anteriormente: la imagen característica, el título y el resumen.
El Bucle con más Detalle: Comprobar el Contenido
Pero a veces podrías querer añadir un encabezado antes de la lista de los posts o podrías querer encerrarlos en un elemento contenedor. Si simplemente lo has añadido antes de tu bucle, lo mostrará independientemente de si la consulta actual devuelve algún dato, lo que quiere decir que puede tener un encabezado sin nada debajo o con alguna marca innecesaria.
Esto es fácil de conseguir poniendo el elemento contenedor o el encabezado dentro de una etiqueta if:
1 |
<?php
|
2 |
|
3 |
$args = array( |
4 |
// Arguments for your query.
|
5 |
);
|
6 |
|
7 |
// Custom query.
|
8 |
$query = new WP_Query( $args ); |
9 |
|
10 |
// Check that we have query results.
|
11 |
if ( $query->have_posts() ) { |
12 |
|
13 |
|
14 |
echo '<section class="clear">'; |
15 |
echo '<h2>' . __( 'Heading', 'tutsplus' ) . '</h2>'; |
16 |
|
17 |
// Start looping over the query results.
|
18 |
while ( $query->have_posts() ) { |
19 |
|
20 |
$query->the_post(); |
21 |
|
22 |
?>
|
23 |
|
24 |
<article id="post-<?php the_ID(); ?>" <?php post_class( 'left' ); ?>> |
25 |
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> |
26 |
<?php post_thumbnail( 'thumbnail' );?> |
27 |
</a>
|
28 |
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> |
29 |
<?php the_title(); ?> |
30 |
</a>
|
31 |
<?php the_excerpt(); ?> |
32 |
</article>
|
33 |
|
34 |
<?php
|
35 |
|
36 |
}
|
37 |
|
38 |
echo '</section>'; |
39 |
|
40 |
}
|
41 |
|
42 |
// Restore original post data.
|
43 |
wp_reset_postdata(); |
44 |
|
45 |
?>
|
Aquí puedes ver que he comprobado si hay algún post devuelto por mi consulta y si lo hay, abro el elemento contenedor y añado un encabezado.
Esto también es útil si quieres mostrar los resultados de tu consulta como una lista. Digamos que quiero crear una lista de todos los posts de una categoría en concreto. El elemento ul no está dentro de mi bucle y no está relacionado con un post específico pero solo quiero mostrarlo si hay posts. Por lo tanto utilizo esto:
1 |
<?php
|
2 |
|
3 |
$args = array( |
4 |
'category_name' => 'category-slug', |
5 |
'post_type' => 'post' |
6 |
);
|
7 |
|
8 |
// Custom query.
|
9 |
$query = new WP_Query( $args ); |
10 |
|
11 |
// Check that we have query results.
|
12 |
if ( $query->have_posts() ) { |
13 |
|
14 |
echo '<ul class="category posts">'; |
15 |
|
16 |
// Start looping over the query results.
|
17 |
while ( $query->have_posts() ) { |
18 |
|
19 |
$query->the_post(); |
20 |
|
21 |
?>
|
22 |
|
23 |
<li <?php post_class( 'left' ); ?>> |
24 |
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> |
25 |
<?php the_title(); ?> |
26 |
</a>
|
27 |
</li>
|
28 |
|
29 |
<?php
|
30 |
|
31 |
}
|
32 |
|
33 |
echo '</ul>'; |
34 |
|
35 |
}
|
36 |
|
37 |
// Restore original post data.
|
38 |
wp_reset_postdata(); |
39 |
|
40 |
?>
|
Esto comprueba si la consulta ha encontrado algún post y si es así, abre el elemento ul y ejecuta el bucle.
Ejecutando Bucles Extra
Es importante tener en cuenta que mientras puedes utilizar WP_Query para ejecutar más de un bucle, tienes que resetear los datos del post y comenzar una segunda instancia de WP_Query para hacer esto. Esto es porque cada uno de tus bucles mostrará datos basados en diferentes argumentos:
Este ejemplo muestra el resumen y la imagen característica del primer post y entonces el título de cada post posterior:
1 |
<?php
|
2 |
|
3 |
// First query arguments.
|
4 |
$args1 = array( |
5 |
'post_type' => 'post', |
6 |
'posts_per_page' => '1' |
7 |
);
|
8 |
|
9 |
// First custom query.
|
10 |
$query1 = new WP_Query( $args1 ); |
11 |
|
12 |
// Check that we have query results.
|
13 |
if ( $query1->have_posts() ) { |
14 |
|
15 |
// Start looping over the query results.
|
16 |
while ( $query1->have_posts() ) { |
17 |
|
18 |
$query1->the_post(); |
19 |
|
20 |
?>
|
21 |
|
22 |
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> |
23 |
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> |
24 |
<?php post_thumbnail( 'thumbnail' );?> |
25 |
</a>
|
26 |
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> |
27 |
<?php the_title(); ?> |
28 |
</a>
|
29 |
<?php the_excerpt(); ?> |
30 |
</article>
|
31 |
|
32 |
<?php
|
33 |
|
34 |
}
|
35 |
|
36 |
}
|
37 |
|
38 |
// Restore original post data.
|
39 |
wp_reset_postdata(); |
40 |
|
41 |
// Second query arguments.
|
42 |
$args2 = array( |
43 |
'offset' => '1', |
44 |
'post_type' => 'post' |
45 |
);
|
46 |
|
47 |
// Second custom query.
|
48 |
$query2 = new WP_Query( $args2 ); |
49 |
|
50 |
// Check that we have query results.
|
51 |
if ( $query2->have_posts() ) { |
52 |
|
53 |
echo '<ul class="more-posts">'; |
54 |
|
55 |
// Start looping over the query results.
|
56 |
while ( $query2->have_posts() ) { |
57 |
|
58 |
$query2->the_post(); |
59 |
|
60 |
?>
|
61 |
|
62 |
<li <?php post_class(); ?>> |
63 |
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> |
64 |
<?php the_title(); ?> |
65 |
</a>
|
66 |
</li>
|
67 |
|
68 |
<?php
|
69 |
|
70 |
}
|
71 |
|
72 |
echo '</ul>'; |
73 |
|
74 |
}
|
75 |
|
76 |
// Restore original post data.
|
77 |
wp_reset_postdata(); |
78 |
|
79 |
?>
|
Yo he usado dos argumentos aquí:
-
'post_per_page' => '1'usado con la primera consulta me muestra el post más reciente. -
'offset' = '1'utilizado en le segunda consulta, se salta el primer post asegurándose de que no está repetido en la lista de abajo. - Como puedes ver en el código anterior, el bucle es ligeramente diferente para cada consulta. El primero muestra la imagen destacada, el título y el resumen, mientras que el segundo comprueba si la consulta tiene posts y si es así, abre un elemento
uly agrupa cada título de post en un elementoliy lo enlaza a su página.
También notarás que he usado wp_reset_postdata() después de ambos bucles. Si no hubiera hecho esto, el segundo bucle todavía mostraría datos del primer post.
Sumario
Sin un bucle, WP_Query no hace mucho realmente. El bucle es el código que usas para mostrar los datos que WordPress ha extraído de la base de datos basándose en los argumentos de tu consulta.
Como he demostrado, hay algunas variaciones en el bucle. Un bucle sencillo mostrará todos los posts en el orden que le hayas especificado en los argumentos de tu consulta (o por fecha en orden descendente por defecto). Si separas if( $query->have_posts() ) y while( $query->have_posts() ), puedes insertar marcas adicionales fuera de tu bucle, pero sólo si tu consulta ha devuelto datos. Y finalmente, especificando argumentos alternativos y usando wp_reset_postdata() después de cada bucle, puedes usar WP_Query más de una vez para crear varios bucles en tu página.
¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!
By
