X

¿Qué es el Loop de WordPress?

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

 

Categorías: Core
Etiquetas: funcionalidad

Ver comentarios (6)

  • Saludos amigo. Si quisiera en ese loop mostrar un banner publicitario diferente cada x número de post cómo sería? de verdad me estoy matando con ese detalle. Capaz y sea algo sencillo, pero no me sale

    • Hola, de acuerdo a la sección 4, tendrías que generar dinámicamente la imagen antes de mostrarla, puedes llamar a una función que recupere estas imágenes, es decir en lugar del echo. Las rutas de las imágenes puedes tenerlas fijas en un array.

    • Hola, el código debería funcionar para cualquier tema (aunque en algunos casos podrían requerir ajustes, por ejemplo para los filtros y paginación). Aunque lo ideal es que este código sea parte de un plugin, mostrado a través de un shortcode por ejemplo.

  • ¡Hola Jhon!

    Muchas gracias por el tutorial.

    Quería hacer una pregunta, si tengo un custom post type, entiendo que para listar todos los creados con el aspeto de mi tema tengo que crear un archive-my-custom-post-type.php, pero como hago para llamar a la URL que pinta ese listado de custom post type?

    Espero haberme explicado, un saludo y gracias!!