¿Qué es el Loop de WordPress?

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

funcionalidad

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)
   
  

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.

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

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().

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

Valora este artículo : (2 votos, promedio: 5,00 de 5)

Cargando...