¿Qué es el Loop de WordPress?

[ 6 septiembre 2017 ] [ Actualizado: 29 noviembre 2017 ] [ Autor: Jhon Marreros Guzmán ][ Core - Avanzado] [ ]

Si estas pensando en hacer modificaciones a la estructura o forma en que tu plantilla muestra el contenido, entonces te viene bien conocer que es el Bucle o Loop de WordPress.

1- Generalidades

El Loop es una porción de código que usa WordPress para mostrar contenido. Si por ejemplo nuestro contenido son entradas, a través del Loop de WordPress y de la Jerarquía de Archivos del Theme, podemos mostrar:

Un listado de entradas, al mostrar la página de inicio (home.php o front-page.php), al mostrar una categoría (category.php), etc.
El detalle de una entrada específica. (single.php)

Ten en cuenta que el Loop de WordPress no se limita únicamente a entradas puede ser aplicado para cualquier Custom Post Type

2- Código básico de Loop de WordPress

El siguiente código muestra un código básico de Loop en WordPress:

<?php
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post();
		//
		// Contenido Aqui
		//
	}
}

Lo que hace este código:

Se empieza con una condicional y dentro la función have_posts() comprueba si existe contenido a mostrar, esta condicional se puede usar con un else para mostrar un mensaje alternativo informando que no existe contenido a mostrar.
Se usa una estructura de bucle o loop a través del while, que comprueba nuevamente la función have_posts() cada vez que se realiza una interacción.
La función the_post() es llamada dentro del bucle, con esto se mueve el puntero al registro actual y por lo tanto dentro del bucle podemos recuperar información referida a la entrada específica usando cualquier Template Tag de WordPress.

Si estas consultando una entrada individual, sólo tendrás un registro como parte del bucle

3- Código dentro del bucle

Dentro del Loop puedes procesar código HTML, PHP y algunas funciones propias de WordPress como los Template Tag.

En el siguiente código vemos un ejemplo de bucle con condicional.


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

	<article class="<?php post_class();?>">
		<header>
		<h1><?php the_title(); ?></h1>
		</header>
		<?php the_content(); ?>
	</article>

<?php endwhile; else: ?>

	<article>
		<p>No hay contenido a mostrar </p>
	</article>

<?php endif; ?>

Templates Tags usados en el código anterior:

post_class(): Devuelve las clases CSS estándard de WordPress para un artículo
the_title(): Devuelve el título del artículo
the_content(): Devuelve el contenido del artículo

Los Templates Tags anteriores imprimen directamente el contenido, también puedes usar Template Tags que sólo devuelven el valor, por ejemplo : get_post_class(), get_the_title(), get_the_content()

Es posible que, para mantener mejor organizado el código, dentro del bucle encuentras también referencias a archivos externos a través de la función get_template_part()

4- Ejemplo de modificación del Loop

En este ejemplo vamos a mostrar una imagen, que podría ser un banner publicitario, cada dos artículos en el bucle de inicio de nuestro sitio.

<?php
if ( have_posts() ) :
	$i = 0;  
	while ( have_posts() ) : the_post();

		get_template_part( 'template-parts/post/content', get_post_format() );

		//Muestra código HTML cada dos entradas
		if ( ++$i % 2 == 0) echo'<img src="https://unsplash.it/600/200/">';

	endwhile;
else :
	get_template_part( 'template-parts/post/content', 'none' );
endif;

En el código anterior:

Se inicializa una variable $i dentro de la condicional.
Dentro del bucle se esta usando la función get_template_part() para organizar el contenido del Loop en un archivo diferente.
Se incrementa la variable $i y luego se comprueba si es un número par, de ser el caso se realiza alguna acción, en el código se imprime el código HTML de una imagen.
Finalmente en la sección else se usa igualmente la función get_template_part().

En lugar de imprimir un código HTML directamente, podrías por ejemplo ejecutar algún Shortcode que te brinde la imagen de banner con la función do_shortcode()

¿Aún con dudas?, en el siguiente video se explica los puntos tratados anteriormente.