Entendiendo el loop de WordPress

Llamamos loop al código PHP que usaremos en los archivos de plantilla de nuestro tema para mostrar posts.

Dependiendo de la página que estemos cargando en el navegador, WordPress sabrá cuales son los posts que debiera cargar, sin embargo no los mostrará en nuestro HTML a menos que incluyamos un loop que defina en qué lugar se mostrarán los posts y con qué formato.

Nótese que cuando hablo de posts, me refiero a cualquier tipo de contenido o post, no necesariamente a entradas, sino también a páginas, custom post types y attachments. Todo dependerá de qué pantalla del sitio esté siendo visitada.

Cualquier código que incluyamos dentro del loop, se repetirá tantas veces como posts corresponda mostrar en la página actual.

El loop de WordPress luce de la siguiente manera:

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

    Aquí va el contenido de cada post

<?php endwhile; else: ?>

    Aquí va un mensaje en caso de que no haya posts para mostrar

<?php endif; ?>

Como puedes apreciar el código es bastante sencillo, en comparación a la vital labor que cumple en nuestra tarea de crear temas de WordPress.

Analicémoslo

Cuando vemos if ( have_posts() ) :, lo que está haciendo WordPress es verificar si hay posts que calcen con la página que estamos cargando en el navegador. Por ejemplo, si estamos cargando la página de una categoría en particular, WordPress, verificará si efectivamente hay artículos dentro de esa categoría.

Si no hay posts que calcen con el criterio, entonces WordPress pasará directamente a else : y mostrará algún mensaje al usuario en caso de que hayamos configurado el loop de esa manera. Luego todo termina con un endif;.

Pero si hay posts, WordPress pasará a while ( have_posts() ) : lo cual básicamente genera un bucle que se repetirá tantas veces como posts corresponda cargar en la página. Este bucle finaliza con endwhile;.

Dentro del bucle con encontraremos con la función the_post();, lo cual, básicamente establece en cada vuelta del bucle la información del post a mostrar, de esa forma, tendremos todo preparado para cargar el contenido de nuestros posts.

En la mayoría de los casos, la forma en que usaremos el loop, será exactamente la misma que vimos anteriormente, sin embargo, es importante conocer qué es lo que hace cada una de las partes, en caso de que queramos realizar algo más avanzado y modificar la forma en que se usa el loop.

Mostrando el contenido

Ahora que ya sabemos cómo funciona el loop, estamos listos para agregarle nuestro contenido.

Veamos como sería:

<?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>
        <header>
            <h1>Lo lamentamos</h1>
        </header>
        <p>No hay contenidos que mostrar :( </p>
    </article>

<?php endif; ?>

Con este loop, estamos dando a WordPress la instrucción de que por cada post que corresponda mostrar en la página actual , imprima en el HTML un elemento article con las clases que corresponda a ese post en particular, que contenga un header con un h1 que lleve el título y, que cargue el contenido del post.

Obtendríamos algo más o menos así:

<article class="post-22 post type-post status-publish format-standard hentry category-noticias">
    <header>
        <h1>El título del post</h1>
    </header>
    <p>Lorem ipsum dolor sit amet...</p>
</article>

Si estamos viendo una página de categoría, esta estructura HTML se repetirá tantas veces como posts haya dentro de esa categoría, siempre y cuando, la cantidad sea igual o menor a lo que hayamos definido en el área de administración de WordPress en Ajustes > Lectura > Número máximo de entradas a mostrar en el sitio.

Si se diera el caso de que la cantidad de posts supere al número definido en los ajustes de WordPress, entonces los contenidos serán paginados y sólo se mostrará esa cantidad por cada página.

Mientras que si estamos cargando una página de detalle, por ejemplo de una entrada, solo se cargará una vez con la información de ese artículo en particular.

Agregando un contenedor

Hace unos párrafos atrás analizamos en detalle qué es lo que hace cada parte del loop, y gracias a ello podremos intervenirlo y agregar cierto maquetado adicional.

Lo que haremos en el siguiente ejemplo es añadir un elemento section que contenga todos los article que genere el loop.

<?php if ( have_posts() ) : ?>

	<section class="listado-articulos">

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

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

		<?php endwhile;?>

	</section>

<?php else : ?>

	<section class="error">

		<article class="<?php post_class();?>">
	        <header>
	            <h1>Lo lamentamos</h1>
	        </header>
	        <p>No hay contenidos que mostrar :( </p>
	    </article>

	</section>

<?php endif; ?>

De este modo, si hay posts que mostrar, todos ellos estarán incluidos dentro de un elemento con la clase ‘listado-articulos‘, mientras que si no los hay, el section que se presentará tendrá la clase ‘error‘.

Al poner la apertura y el cierre del elemento section entre if y while, permite que éste se imprima en el HTML solo si hay posts, pero no se repita por cada uno de ellos.

Un anuncio importante

Ya te comenté anteriormente que dentro de unas semanas estaré lanzando un nuevo curso sobre el desarrollo de temas de WordPress, en el cual he estado trabajando intensamente y está quedando muy bueno, ya que está centrado en los puntos más relevantes de la creación de temas profesionales de WordPress, directo al grano y con cada punto explicado bien en detalle. Ya lo verás cuando te muestre el temario ;).

Pero ese no es el anuncio que quiero compartir ahora, sino que quiero que sepas que junto con el lanzamiento del curso también estaré lanzando una plataforma que he estado desarrollando últimamente y que he decidido llamar «AMK Pro«.

Esta plataforma será una extensión de mi sitio FranciscoAMK.com y permitirá que accedas directamente a los cursos que he creado y crearé en el futuro, así como también a temas y e-books que tengo pensado liberar en el futuro.

En esta plataforma vas a poder llevar un seguimiento de tu aprendizaje y ver las clases que quieras a tu propio ritmo.

Así es como se ve la página de «Mis Cursos» cuando estás registrado como usuario:

Estoy muy ansioso por comenzar a compartir contigo el curso de Desarrollo de Temas WordPress.

Pronto te contaré más detalles, sigue atento o regístrate en el siguiente formulario si aún no lo has hecho.