Tema clásico 05: The Loop y listados mantenibles

Domina The Loop en plantillas clásicas para renderizar contenido dinámico con fallback, paginación y marcado limpio.

The Loop es el corazón de un tema clásico: determina qué contenido se pinta y en qué orden.

Si lo implementas de forma pobre, tendrás plantillas frágiles, HTML duplicado y dificultad para mantener listados complejos.

La clave es combinar estructura clara, template parts reutilizables y fallback cuando no hay resultados.

También debes controlar paginación y contexto para que archives, home y búsquedas tengan comportamiento coherente.

  • No es solo while(have_posts()): también importa cómo organizas el markup y los estados vacíos.
  • Empieza con comprobación de resultados; si no hay posts, muestra un bloque útil en lugar de dejar pantalla vacía.
  • Dentro del while, usa template tags para título, extracto, miniatura y permalink evitando consultas manuales innecesarias.
  • Cuando el diseño crece, extrae cada tarjeta de post a template-parts/content.php para reutilizar sin duplicar código.
  • Control explícito de estado sin resultados.

Estructura correcta del loop

No es solo while(have_posts()): también importa cómo organizas el markup y los estados vacíos.

Empieza con comprobación de resultados; si no hay posts, muestra un bloque útil en lugar de dejar pantalla vacía.

Dentro del while, usa template tags para título, extracto, miniatura y permalink evitando consultas manuales innecesarias.

Cuando el diseño crece, extrae cada tarjeta de post a template-parts/content.php para reutilizar sin duplicar código.

  • Control explícito de estado sin resultados.
  • Markup semántico por entrada (article, h2, enlace).
  • Sin lógica pesada dentro del loop.
  • Template parts para escalar en equipo.

Loop base para archive.php

Snippet listo para usar como base de listados de entradas.

Escalar el loop con template parts

Cuanto antes extraigas el bloque de tarjeta, menos retrabajo tendrás en futuras plantillas.

Mueve el HTML de cada post a template-parts/content.php y llámalo con get_template_part().

Así puedes reutilizar la misma tarjeta en home, archive y taxonomías cambiando solo contenedor o contexto.

Este patrón reduce inconsistencias visuales y facilita code review cuando hay varios desarrolladores.

WordPress Themes Pro
15

Tema clásico 05: The Loop y listados mantenibles

Domina The Loop en plantillas clásicas para renderizar contenido dinámico con fallback, paginación y marcado limpio.

Código del tema: paginate_links

📘 Teoría

Estructura correcta del loop

No es solo while(have_posts()): también importa cómo organizas el markup y los estados vacíos.

Empieza con comprobación de resultados; si no hay posts, muestra un bloque útil en lugar de dejar pantalla vacía.

Dentro del while, usa template tags para título, extracto, miniatura y permalink evitando consultas manuales innecesarias.

Cuando el diseño crece, extrae cada tarjeta de post a template-parts/content.php para reutilizar sin duplicar código.

  • Control explícito de estado sin resultados.
  • Markup semántico por entrada (article, h2, enlace).
  • Sin lógica pesada dentro del loop.
  • Template parts para escalar en equipo.

Loop base para archive.php

Snippet listo para usar como base de listados de entradas.

Escalar el loop con template parts

Cuanto antes extraigas el bloque de tarjeta, menos retrabajo tendrás en futuras plantillas.

1

Mueve el HTML de cada post a template-parts/content.php y llámalo con get_template_part().

2

Así puedes reutilizar la misma tarjeta en home, archive y taxonomías cambiando solo contenedor o contexto.

3

Este patrón reduce inconsistencias visuales y facilita code review cuando hay varios desarrolladores.

🧪 Aprende probando

Ejemplo Ejemplo: estado vacío de búsqueda Plantilla simple para cuando una búsqueda no devuelve resultados.

🏁 Retos

Reto Reto: añadir paginación al listado Completa el loop para que archive.php no muestre todo en una sola página.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre WordPress Themes Pro.

Test de WordPress Themes Pro

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com