El bucle de WordPress (WordPress Loop) es una parte fundamental de como tu sitio de WordPress muestra el contenido. Si quieres poder personalizar algunas partes de tu sitio (o quizás sumergirte en el desarrollo de WordPress), necesitarás conocer el Bucle de WordPress.
Tanto si nunca has oído hablar del Bucle de WordPress como si ya estás familiarizado con él, este artículo te pondrá al día de todo lo que necesitas saber sobre el Bucle de WordPress.
Te explicaremos qué es y por qué puede ser útil poder trabajar con él. A continuación, te mostraremos paso a paso cómo trabajar con el Bucle en plantillas PHP (para temas clásicos) y con el bloque Bucle de Consulta (Query Loop) en temas de bloques más actuales.
Entremos en materia, empezando por el principio…
¿Qué es el Bucle de WordPress?
El Bucle de WordPress es lo que utiliza WordPress para mostrar contenido en tu sitio. Tradicionalmente es código PHP que puedes personalizar utilizando etiquetas de plantilla, aunque los temas más recientes de bloques de WordPress utilizan el bloque Bucle de Consulta en lugar de PHP.
En términos más técnicos, el Bucle consulta la base de datos de tu sitio para recuperar los datos de cada publicación y luego muestra esa información según una plantilla. Para controlar esta plantilla, puedes usar diversas etiquetas de plantilla o bloques, dependiendo de si utilizas PHP o el bloque Bucle de Consulta.
Por ejemplo, supongamos que tienes una página que enumera las entradas más recientes de tu blog, como la página principal de tu blog:
- En primer lugar, el Bucle comprobará si existe alguna entrada.
- Si hay entradas, mostrará la primera entrada según tu plantilla.
- A continuación, comprobará si existe otra entrada. Si hay otra entrada, hará un «loop» (bucle) con la plantilla de nuevo y mostrará la segunda entrada según la misma plantilla.
- Continuará «haciendo un bucle» a través de tus entradas hasta que no haya más entradas (o alcance algún otro límite, como las reglas de paginación).
Aquí tienes un ejemplo de cómo se ve el Bucle en el blog de Kinsta – cada cuadro resaltado es otra iteración del «bucle». Puedes ver que las seis cajas utilizan la misma plantilla.
¿Cuándo utiliza WordPress el Bucle para mostrar el contenido?
WordPress utiliza el Bucle para mostrar contenido en cualquier página que contenga varias piezas de contenido (entradas, páginas, tipos de entrada personalizados, etc.).
Estas son algunas de las principales situaciones en las que WordPress utiliza el Bucle, aunque no es una lista completa:
- Página principal del sitio web que muestra tus entradas recientes
- Página principal del blog
- Páginas de listado de categorías
- Páginas de listado de etiquetas
- Páginas de resultados de búsqueda
- Páginas de tipo de entrada personalizada
Técnicamente, WordPress también puede utilizar el Bucle para mostrar un contenido individual. En estas situaciones, el «bucle» terminaría después de consultar el primer elemento.
Sin embargo, cuando la mayoría de las personas piensan en el Bucle de WordPress, suelen imaginar que este ‘recorre’ varios elementos para mostrarlos en algún tipo de lista.
¿Para qué puedes utilizar el Bucle de WordPress?
Aprender a editar y manipular el Bucle de WordPress puede ayudarte a utilizar WordPress para crear sitios web más dinámicos y fáciles de usar.
Aquí tienes tres de las principales formas en que puedes utilizar el Bucle de WordPress para mejorar tu sitio…
Controlar cómo mostrar el contenido básico de las entradas y los metadatos
La razón más común por la que puedes querer personalizar el Bucle de WordPress es para controlar el diseño básico del contenido de tu sitio.
Por ejemplo, supongamos que quieres controlar la disposición de la página de las entradas de tu blog. Manipulando el Bucle de WordPress, podrías controlar la disposición de elementos importantes como el título de la entrada, el contenido, el autor, los metadatos (por ejemplo, la fecha de publicación), etc.
Usando condicionales, también puedes crear diferentes diseños para distintos tipos de contenido. Por ejemplo, puedes utilizar un diseño para listar las entradas de la categoría «Noticias» y otro diferente para listar las entradas de la categoría «Entrevistas».
Esto te permite optimizar el diseño para los distintos tipos de contenido de tu sitio y crear una gran experiencia para tus visitantes.
Inserta datos de campos personalizados para crear sitios más dinámicos
Comprender cómo utilizar el Bucle de WordPress también puede ayudarte a utilizar WordPress para crear tipos de sitios de contenido más dinámicos.
Por ejemplo, supongamos que quieres crear un sitio de anuncios inmobiliarios. Como parte de ello, quieres tener una página que enumere información sobre casas que están disponibles para la venta a través de un tipo de entrada personalizada «Casa» que has creado.
Si sólo utilizas el diseño predeterminado de listado de entradas que viene con tu tema, sólo mostraría información básica como el título y el contenido, igual que muestra las entradas normales de tu blog.
Al editar el Bucle de WordPress para tu tipo de entrada «Casa» y añadir las etiquetas de plantilla pertinentes, podrías incluir información de los campos personalizados que estés utilizando, como el número de dormitorios y baños de cada casa, los metros cuadrados, etc.
Insertar contenido no relacionado con las entradas en tus listas de entradas (por ejemplo, anuncios)
Aprender a utilizar el Bucle de WordPress también puede ayudarte a insertar contenido no dinámico en las listas de contenido de tu sitio. Es decir, contenido que tu sitio no extrae de la base de datos de WordPress.
Por ejemplo, supongamos que quieres insertar un banner publicitario entre cada entrada de la lista (o algún otro tipo de contenido estático). Editando el Bucle, podrías inyectar fácilmente tus anuncios en cualquier punto del diseño.
Dos opciones para trabajar con el Bucle de WordPress
Con el desarrollo moderno de temas de WordPress, la forma en que interactúes con el Bucle de WordPress dependerá del tipo de tema que estés utilizando.
En el pasado, todos los temas de WordPress se basaban en plantillas PHP, por lo que tendrías que trabajar con el Bucle utilizando PHP en esos archivos de plantilla de temas. Hoy en día, este tipo de temas se denominan temas clásicos de WordPress.
La mayoría de los temas populares de WordPress siguen utilizando este enfoque clásico, lo que significa que utilizarás PHP para trabajar con el Bucle de WordPress. Algunos ejemplos de temas clásicos son Astra, GeneratePress, Kadence, Neve, OceanWP, etc.
Sin embargo, los nuevos temas de bloques de WordPress creados en el Editor de Sitios ya no utilizan archivos de plantilla PHP como los temas clásicos, por lo que no puedes utilizar PHP para personalizar el Bucle si utilizas un tema de bloques. En su lugar, estos nuevos temas de bloques utilizan un bloque especial «Bucle de Consulta (Query Loop)» para personalizar el Bucle de WordPress.
Puedes consultar nuestra lista de los mejores temas de bloques para ver algunos ejemplos de temas populares que utilizan este enfoque.
A continuación, te mostraremos cómo utilizar ambos enfoques para trabajar con el Bucle de WordPress:
- Si utilizas un tema clásico, usarás PHP para interactuar con el Bucle.
- Si usas un tema de bloques, utilizarás el método del bloque Bucle de Consulta para interactuar con el Bucle.
Si no estás seguro de qué tipo de tema estás utilizando, puedes consultar las opciones en el menú Apariencia de tu panel de control de WordPress:
- Si ves otras opciones como Personalizar, Widgets y Editor de archivos de tema, entonces estás utilizando un tema clásico.
- Si ves una opción de Editor sin las otras opciones, normalmente significa que estás utilizando un tema de bloques.
Cómo utilizar el Bucle de WordPress con temas clásicos (código)
Si utilizas un tema clásico de WordPress, trabajarás con el Bucle de WordPress dentro de los archivos de plantilla PHP de tu tema.
Aquí tienes un ejemplo de una implementación muy básica del Bucle de WordPress:
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();
endwhile;
else:
_e( 'Sorry, no posts matched your criteria.', 'textdomain' );
endif;
?>Para ayudarte a entender lo que hace este código, lo dividiremos en tres secciones:
- Abrir el Bucle
- Uso de etiquetas de plantilla para controlar qué contenido mostrar
- Cerrar el Bucle
A continuación, nos adentraremos en el tema un poco más avanzado del uso de sentencias condicionales para ajustar el Bucle en función de diferentes situaciones.
Cómo iniciar el bucle de WordPress
Para abrir el bucle de WordPress, tendrás cuatro elementos:
<?php– esto le dice a tu servidor web que vas a utilizar PHP.if ( have_posts() )– esto le dice a tu servidor que debe comprobar si la base de datos de tu sitio tiene alguna entrada que coincida con la consulta, y luego ejecutar el siguiente código si hay entradas. Si no hay entradas, puedes utilizar una sentencia else para añadir un texto alternativo, que veremos más adelante.while ( have_posts() )– Esto indica a tu servidor que debe continuar el bucle mientras haya entradas que mostrar. Por lo general, el límite lo fijará tu elección en el área Configuración → Lectura. Por ejemplo, si configuras tu sitio para mostrar hasta 10 entradas por página, el servidor mantendrá el bucle hasta 10 entradas (siempre que hayas publicado al menos 10 entradas).the_post();– Esto le dice a tu servidor que recupere los datos de cada entrada de la base de datos de tu sitio. Puedes controlar la visualización de estos datos utilizando etiquetas de plantilla, que veremos en la siguiente sección.
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();Cómo controlar el contenido del Bucle de WordPress
Una vez que hayas abierto el bucle de WordPress, puedes utilizar etiquetas de plantilla para controlar qué información quieres incluir en cada entrada, junto con el diseño (layout)* general de ese contenido.
Las etiquetas de plantilla que utilices dentro del Bucle se repetirán para cada entrada mostrada.
Éstas son algunas de las etiquetas de plantilla más comunes que puedes utilizar:
the_title()the_content()the_excerpt()the_post_thumbnail()the_author()next_post_link()the_ID()the_meta()the_shortlink()the_tags()the_time()previous_post_link()the_category()
Si estás construyendo sitios de WordPress más personalizados, puedes incluir datos de campos personalizados en el Bucle de WordPress. La forma más sencilla de hacerlo sería mediante un plugin como Advanced Custom Fields (ACF), Meta Box o Pods, todos ellos incluyen su propia funcionalidad para etiquetas de plantilla que puedes utilizar en el Bucle de WordPress.
Por ejemplo, veamos la sintaxis de un bucle sencillo que sólo muestra el título, la miniatura de la imagen destacada y el extracto de cada entrada.
Esto es lo que podría parecer
// first, we need to open the loop as we showed you in the previous section
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// now, we can use template tags to control what information to display for each post
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();Cómo finalizar el Bucle de WordPress
Para cerrar el Bucle de WordPress, tienes que cerrar el bucle while, la sentencia if y PHP.
Para manejar situaciones en las que WordPress no pueda devolver ninguna entrada, puedes añadir una sentencia else antes de cerrar la sentencia if.
Así es como se cerraría el bucle de nuestro ejemplo anterior, añadiendo la sentencia else para cubrir las situaciones en las que ninguna entrada coincida con la consulta.
// first, we need to open the loop as we showed you in the previous section
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// now, we can use template tags to control what information to display for each post
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();
// once we're finished with the template tags, we can now close the loop
endwhile;
else:
// this tells your site what to do if no posts match the query
_e( 'Sorry, no posts matched your criteria.', 'textdomain' );
endif;
?>Utilizar condicionales para controlar el comportamiento en el Bucle de WordPress
Una vez que entiendas la estructura básica del Bucle, puedes empezar a utilizarlo de formas más avanzadas.
Una de las mejores maneras de empezar es utilizando sentencias condicionales. Éstas te permiten ajustar fácilmente el comportamiento del Bucle para distintos tipos de contenido, como en nuestro ejemplo anterior, en el que podías utilizar un diseño para listar las entradas de la categoría «Entrevistas» y otro para las entradas de la categoría «Noticias».
Estas son algunas de las etiquetas condicionales que puedes utilizar:
is_home()is_admin()is_single()is_page()is_page_template()is_category()oin_category()is_tag()is_author()is_search()is_404()has_excerpt()
Si haces clic en los enlaces anteriores, podrás ver ejemplos de código de cómo modificar el Bucle de WordPress para distintos tipos de condicionales.
Por ejemplo, así es como podría verse al aplicar un estilo diferente a las entradas de la categoría con un ID de «3» utilizando in_category y aplicando un <div> diferente a esas entradas.
<?php
// Start the Loop.
if ( have_posts() ) :
while ( have_posts() ) : the_post();
/* * See if the current post is in category 3.
* If it is, the div is given the CSS class "post-category-three".
* Otherwise, the div is given the CSS class "post".
*/
if ( in_category( 3 ) ) : ?>
<div class="post-category-three">
<?php else : ?>
<div class="post">
<?php endif;
// Display the post's title.
the_title( '<h2>', ';</h2>' );
// Display a link to other posts by this posts author.
printf( __( 'Posted by %s', 'textdomain' ), get_the_author_posts_link() );
// Display the post's content in a div.
?>
<div class="entry">
<?php the_content() ?>
</div>
<?php
// Display a comma separated list of the post's categories.
_e( 'Posted in ', 'textdomain' ); the_category( ', ' );
// closes the first div box with the class of "post" or "post-cat-three"
?>
</div>
<?php
// Stop the Loop, but allow for a "if not posts" situation
endwhile;
else :
/*
* The very first "if" tested to see if there were any posts to
* display. This "else" part tells what do if there weren't any.
*/
_e( 'Sorry, no posts matched your criteria.', 'textdomain' );
// Completely stop the Loop.
endif;
?>Cómo utilizar el Bucle de WordPress en los temas de bloque (Editor del Sitio)
Como hemos mencionado anteriormente, los temas de bloques de WordPress utilizan el Editor de Sitios para controlar las plantillas de tu tema en lugar de los archivos de plantilla PHP.
Por ello, no puedes utilizar PHP para personalizar el Bucle de WordPress si utilizas un tema de bloques. En su lugar, utilizarás el bloque Bucle de Consulta (Query Loop).
Sin embargo, los principios básicos son los mismos.
Básicamente, utilizarás el bloque Bucle de Consulta para abrir el bucle. Dentro del bloque Bucle de Consulta hay un contenedor Post Template y otros contenedores para paginación y «sin resultados».
A continuación, en lugar de utilizar etiquetas de plantilla como haces con PHP, añadirás bloques de temas de WordPress dentro del contenedor Post Template para controlar el diseño de cada elemento del bucle.
Cómo añadir el bloque Bucle de Consulta
Para empezar, ve al Editor del Sitio (Apariencia → Editor) y crea o edita la plantilla correspondiente. También puedes añadir el Bucle a una pieza individual de contenido, como una sola página en la que quieras listar entradas.
En cualquier caso, puedes empezar añadiendo el bloque Bucle de Consulta. A continuación, puedes elegir entre utilizar uno de los patrones de Bucle existentes en tu tema haciendo clic en Elegir o empezar desde un lienzo en blanco haciendo clic en Empezar en blanco.
Para este ejemplo, elegiremos Empezar en blanco.
A continuación, puedes elegir entre distintas variantes de inicio, siendo la opción más sencilla mostrar sólo el título y el contenido de cada elemento.
Una vez hecho esto, puedes utilizar la configuración de la barra lateral del bloque Bucle de Consulta para controlar qué contenido quieres incluir en el Bucle(la «consulta»).
Por defecto, incluirá entradas normales, pero puedes cambiar el tipo de entrada para incluir otros tipos de contenido. También puedes cambiar el orden y utilizar filtros para consultar sólo contenidos específicos, como los que tienen una determinada categoría, proceden de un determinado autor, etc.
Cómo personalizar la plantilla del Bucle
Ahora, puedes utilizar los bloques de la sección Tema para personalizar aún más la Plantilla de Post dentro del Bucle de Consulta. De nuevo, estos bloques sirven para el mismo propósito básico que las etiquetas de plantilla en el código PHP.
Por ejemplo, si quisieras mostrar el autor de cada contenido, podrías añadir el bloque Nombre del Autor donde quieras que aparezca el nombre del autor.
También encontrarás otros bloques para elementos relevantes, como Imagen destacada, Fecha, Categorías, Etiquetas, etc.
Si te fijas en el esquema, puedes ver que todos estos bloques van dentro del grupo Plantilla de Post.
También hay otros grupos para controlar la paginación y las situaciones en las que la consulta no devuelve resultados.
Consejos para trabajar con el Bucle de WordPress
Dado que el Bucle es una parte tan integral de WordPress, cualquier error o equivocación puede causar problemas en tu sitio. Esto es especialmente cierto si trabajas con plantillas PHP, ya que los errores de sintaxis podrían activar el mensaje «Se ha producido un error crítico en tu sitio web».
Para evitar problemas, aquí tienes un par de consejos…
Experimenta y aprende en un entorno de desarrollo local
Si es la primera vez que trabajas con el Bucle de WordPress, probablemente deberás experimentar y jugar con distintos conceptos para comprender mejor cómo funciona.
Para hacerlo con seguridad, puedes utilizar un entorno de desarrollo local de WordPress, que te proporciona una caja de arena segura alimentada por tu ordenador local.
Para crear fácilmente sitios locales de WordPress para probar y aprender, puedes utilizar la herramienta gratuita DevKinsta.
Compatible con Windows y Mac, DevKinsta te permite crear fácilmente tantos sitios de desarrollo locales como necesites.
Trabajar en un entorno staging para sitios en producción
Si estás trabajando en el Bucle de WordPress de un sitio web de WordPress en producción, te recomendamos encarecidamente que lo hagas todo en un sitio staging antes de aplicar los cambios a tu sitio web de WordPress en producción.
Si alojas tu sitio de WordPress con Kinsta, puedes utilizar la herramienta de staging integrada de Kinsta para realizar todos tus cambios en un entorno seguro.
Una vez que hayas comprobado que todo funciona, puedes transferir fácilmente los cambios a la versión real de tu sitio web.
Alternativas de plugins para evitar trabajar directamente con el Bucle de WordPress
Si te resulta un poco intimidante trabajar directamente con el Bucle de WordPress, hay varios plugins populares que te ofrecen formas alternativas de hacer «bucles» de contenido sin necesidad de utilizar PHP o el bloque Bucle de Consulta.
Aquí tienes algunas alternativas de plugins para el Bucle de WordPress que puedes tener en cuenta, aunque no se trata en absoluto de una lista completa.
Elementor Pro
Elementor es un popular plugin constructor de páginas visual, de arrastrar y soltar. Con Elementor Pro, puedes acceder a la funcionalidad completa de construcción de temas para diseñar los archivos de plantilla de tu tema utilizando Elementor. En 2022, Elementor añadió la función Loop Builder a Elementor Pro, lo que te permite controlar y personalizar contenido «en bucle» a través de la interfaz visual de Elementor
Hemos escrito una guía completa sobre el uso de Elementor, junto con muchos otros contenidos sobre Elementor en el blog de Kinsta.
Bricks
Bricks es otro popular constructor visual de sitios para WordPress. Como parte de sus muchas herramientas de diseño, incluye su propio constructor de Bucle de Consultas que utiliza un enfoque de código simplificado, junto con un montón de opciones adicionales en la interfaz gráfica.
También tenemos una guía sobre cómo crear sitios WordPress con Bricks.
WP Show Posts
WP Show Posts no te ofrece tanta flexibilidad como los dos plugins anteriores. Sin embargo, si buscas una forma sencilla de listar entradas de WordPress en varios formatos, puede ser la herramienta más sencilla para el trabajo.
Es gratuito y proviene del mismo desarrollador que el popular tema GeneratePress. Aunque el desarrollador ya no añade nuevas funciones al plugin, sigue manteniendo la funcionalidad existente.
Resumen
Para mejorar tus habilidades de desarrollo en WordPress, debes comprender el Bucle de WordPress. El Bucle forma parte integral de cómo WordPress muestra el contenido; aprender a utilizarlo te dará más control sobre cómo mostrar el contenido en tu sitio.
Dicho esto, los temas de bloques de WordPress más recientes ya no se basan en plantillas PHP como los temas clásicos, por lo que puede que no necesites utilizar PHP para trabajar con el Bucle. En su lugar, si estás adoptando la tendencia de los temas de bloques, utilizarás el bloque Bucle de Consulta para conseguir efectos similares.
En cualquier caso, aprender a utilizar el Bucle de WordPress de forma más eficaz te reportará beneficios en el futuro.
Dado que el Bucle de WordPress es una parte tan fundamental de WordPress, cualquier problema en el Bucle podría romper tu sitio. Para evitar problemas, te recomendamos que aprendas en un sitio de desarrollo local con DevKinsta o que utilices las herramientas staging que ofrece el alojamiento para WordPress de Kinsta para trabajar en un entorno seguro.
Deja una respuesta