WordPress | 14 de mayo de 2014

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:

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:

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í:

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.

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:

amk-pro

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.

También te podría interesar:

Los roles que los clientes asocian al diseñador web

Hace algún tiempo te comenté de un pequeño experimento que hice para reducir las reuniones presenciales que sostengo con mis clientes y, a decir verdad, ha funcionado bastante bien. Por si no leíste ese post, se trata básicamente de un formulario que pido llenar a todos mis prospectos de diseño web antes de concretar una […]

Seguir leyendo...

Comparando experiencias de edición de sitios web

Hace unas semanas subí un video explorando las opciones que nos ofrece Gutenberg, el futuro editor de WordPress, pero para entender a cabalidad lo que significa Gutenberg, es importante conocer las diferentes experiencias de edición existentes en diversas plataformas. Por eso en el video de hoy exploraremos las diferencias a las que se expone una […]

Seguir leyendo...

El archivo de funciones en los temas de WordPress

En casi todos los temas de WordPress encontraremos un archivo llamado functions.php y, sin lugar a duda, deberíamos incluirlo en cada uno de los temas que desarrollemos. Este es un archivo de gran relevancia ya que es el que nos permitirá ampliar el alcance que tienen nuestros temas creando funciones específicas y habilitando características de WordPress […]

Seguir leyendo...

Hay 7 opiniones

  1. Como siempre, muy buena tu explicación sobre el Loop.

    Lo que sucede con el tema con que estoy trabajando es que tengo problema para adaptar el loop para que muestre los post de 2 en 2, osea, que en el container no vallan apareciendo uno debajo de la otra, sino que se vallan mostrando 2 y debajo 2 mas y de esa manera sucesivamente.

  2. francisco coomo andas? hice tu curso de introduccion en udemy, la verdad que es muy bueno.
    mi consulta es la siguiente, quiero mostrar algunos articulos de a 2 y el primero,segundo y ultimo de a uno, si me podes guiar un poco te lo agradería muchisimo, te mandi un abrazo.

  3. Hola muy buenas,

    Llevo unos días con la siguiente duda: Tengo una página “MiPágina” dentro de mi wordpress, a esta página la he asignado una plantilla parecida a la del index.php, pero no consigo que en esta página se muestren los teasers de los posts que tengo.

    ¿Como puedo mostrar posts dentro de una página?

    Muchas gracias de antemano!

Y tú ¿Qué opinas?

Puede que no te responda, pero ten por seguro que leeré tu comentario. Por si acaso, tu email no se mostrará ;)

Recibe más artículos como este cada semana

Únete a los 7.787 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

¡Ya estamos casi! revisa tu bandeja de entrada para verificar tu email por favor.
Uy! Parece que algo salió mal procesando tu solicitud. Recaraga la página e inténtalo de nuevo.

Ya me suscribí antes, no me muestres esto.