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:

Diseñando Las Gráficas De Un Curso En Adobe XD

Este es el primer episodio de una nueva sección la cual llamaremos «Diseñando con Francisco» o simplemente «Diseñando». En esta serie de videos iré compartiendo contigo los procesos de diferentes piezas que vaya diseñando para algún proyecto personal, para este sitio web o para alguno de mis cursos. En esta ocasión te muestro el proceso […]

Seguir leyendo...

Exportar un sitio funcional (HTML y CSS) desde Adobe XD

Últimamente he hecho bastantes videos e incluso un curso hablando de Adobe XD y hay una pregunta que ha surgido constantemente: ¿Cómo lo exporto a html y css para subirlo a mi hosting?

Seguir leyendo...

El último episodio… por ahora

Hola, gracias por estar aquí otra vez. Este episodio marca un hito importante: Huevos Revueltos entrará en pausa por un tiempo. En el video y en este artículo verás los motivos que llevan a esta decisión y qué es lo que se viene más adelante. Por ahora te invito a responder una breve encuesta para hacer […]

Seguir leyendo...

Hay 11 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!

  4. Hola.
    ¿ Se puede colocar de alguna manera más de un loop en la misma pagina? .

    Me explico, un loop con el contenido principal de la página y hacer otro loop de otra página en la barra lateral donde quiero ver partes del contenido de esa otra página.

    Saludos

  5. Hola Francisco.
    A lo más que llego es a poner antes de loop esto: $query = new WP_Query( array( ‘pagename’ => ‘solucion-a-indiquese-el-grado’ ) ); tal como dice en la documentación ¿que más?

    Pero ahora no se que hacer con la variable $query.

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 8.161 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.