Guía para principiantes sobre el bloque Bucle de consulta de WordPress: configuración y personalización

El Bucle de consulta es un bloque muy útil de WordPress que te permite mostrar una lista de entradas de blog, productos y páginas relacionados. Si estás empezando, quizá te preguntes cómo aprovechar esta función.

Por suerte, el bloque Bucle de consulta es relativamente fácil de usar. Puedes elegir tu diseño prediseñado favorito o crear uno desde cero. Además, puedes configurar cómo se muestran tus bloques anidados y personalizar completamente el diseño.

En esta guía, analizaremos con más detalle el bloque Bucle de consulta de WordPress. Después, te mostraremos cómo usarlo y hablaremos de casos de uso concretos.

¿Qué es el bloque Bucle de consulta de WordPress?

El bloque Bucle de consulta es una herramienta que permite a los usuarios de WordPress mostrar una lista dinámica de entradas basada en atributos específicos. Por ejemplo, se puede configurar para recorrer todas las entradas de una categoría determinada y mostrar el título y la imagen de cada una.

Este bloque puede ser bastante técnico de configurar. Por eso, quienes están empezando suelen evitarlo y optan por el bloque Lista de entradas, que es una versión más sencilla del Bucle de consulta.

Aunque el bloque Bucle de consulta es más complejo, también ofrece mayor flexibilidad. Por ejemplo, puedes crear una página llena de tus mejores recetas o mostrar un portafolio de proyectos.

Cuándo usar el bloque Bucle de consulta en WordPress

El bloque Bucle de consulta ofrece muchas posibilidades para promocionar tu contenido. Estos son algunos de los resultados que puedes conseguir con él:

Estos son solo algunos ejemplos. Hay muchas formas de configurar el bloque Bucle de consulta.

Cómo usar el bloque Bucle de consulta en WordPress

Para empezar a usar el bloque Bucle de consulta, tendrás que ir a la entrada o página donde quieras utilizarlo. Después, haz clic en + para añadir un bloque nuevo y busca Bucle de consulta.

buscar el bloque Bucle de consulta en WordPress

También puedes insertar el bloque mediante el selector de patrones de bloques. Cambia a Patrones y selecciona Consulta en el menú desplegable. Después, elige el diseño que prefieras.

elegir un diseño para el bloque Bucle de consulta

Hay muchos diseños del Bucle de consulta entre los que elegir. Por ejemplo, puedes presentar tus entradas en una cuadrícula, con una imagen a la izquierda, o mantener el formato predeterminado.

Como alternativa, haz clic en Empezar desde cero para crear tu Bucle de consulta desde cero y controlar por completo el diseño de tu contenido.

empezar con un bucle de consulta en blanco

Tendrás que elegir una variación para empezar. Puedes mostrar la imagen, la fecha y el título de tu entrada, o presentar únicamente el título y el extracto.

elegir una variación del Bucle de consulta

Tanto si has creado el bloque desde cero como si has usado una plantilla, verás una vista previa del bloque en el editor.

ver una vista previa del bloque Bucle de consulta

El bloque Bucle de consulta consta de varios subbloques diferentes, como títulos de entradas, imágenes destacadas y mucho más. Si haces clic en el icono Ajustes de visualización de la barra de herramientas, puedes configurar el número de elementos por página.

ajustes del Bucle de consulta para el feed

También puedes usar los ajustes del bloque del panel de la derecha para personalizar aún más el Bucle de consulta. Puedes decidir cambiar el orden de los elementos, crear entradas nuevas para tu feed, aplicar filtros, cambiar los colores y mucho más.

¿Qué subbloques se encuentran dentro del bloque Bucle de consulta?

Dentro del bloque Bucle de consulta encontrarás varios subbloques agrupados. Aunque sus nombres contienen la palabra «entrada», también pueden aplicarse a otros contenidos, como páginas, elementos del portafolio o productos.

Veamos cada subbloque.

1. Título de la entrada

El bloque Título de la entrada muestra el título de cada entrada. Puedes convertir el título en un enlace y ajustar la fuente y el color en los ajustes del bloque.

2. Fecha de la entrada

Con este bloque puedes mostrar la fecha de publicación de tu contenido. Puedes cambiar el formato predeterminado, mostrar la fecha de última modificación y enlazar a una entrada desde los ajustes.

3. Contenido de la entrada

El bloque Contenido de la entrada muestra todo el contenido de tu entrada o página dentro del Bucle de consulta. Esto podría hacer que el bloque fuera muy largo, lo que puede desanimar a los visitantes.

4. Extracto de la entrada

El Extracto de la entrada muestra un resumen de cada contenido. Los visitantes podrán ver tu extracto y encontrar un enlace «Leer más». Puedes añadir este enlace en una línea nueva o al final del extracto. Además, puedes modificar el texto de anclaje, cambiar el color del enlace y definir un nuevo tamaño de fuente.

5. Imagen destacada de la entrada

Si eliges incluir este bloque en tu Bucle de consulta, podrás mostrar la imagen destacada de tus entradas o productos. Además, puedes activar un enlace en la imagen para dirigir a los visitantes al contenido al hacer clic.

6. Categorías de la entrada

Al añadir un bloque Categorías de la entrada dentro del Bucle de consulta, puedes mostrar las categorías asociadas a ese contenido. Es una excelente forma de mostrar entradas de blog que tratan un tema similar o productos de la misma categoría. También puedes cambiar el color y las fuentes desde los ajustes.

7. Etiquetas de la entrada

El bloque Etiquetas de la entrada te permite mostrar las etiquetas añadidas a tu entrada. Es otra forma útil de mostrar contenido similar.

8. Paginación (entrada anterior y entrada siguiente)

La paginación es uno de los bloques más útiles que puedes añadir a tu Bucle de consulta, ya que muestra enlaces a tus entradas anteriores o siguientes. La paginación consta de tres bloques independientes:

  • Anterior
  • Números de página
  • Siguiente

Para usarla, primero tendrás que seleccionar el bloque Plantilla de entrada mediante la Vista de lista. Después, puedes hacer clic en + para añadir el bloque Paginación.

9. Autor de la entrada

Como su nombre indica, Autor de la entrada muestra los datos del autor, como su nombre, avatar y biografía. Si eliges incluir este bloque, tendrás que seleccionar al usuario en el menú desplegable de los ajustes del bloque. Aquí también puedes configurar la visibilidad del avatar, cambiar su tamaño, ocultar o mostrar la biografía del autor y cambiar el color y las dimensiones.

10. Biografía del autor de la entrada

Si no quieres incluir el nombre ni el avatar del autor en tu bloque Bucle de consulta, pero quieres que la biografía del autor sea visible, este es el bloque que necesitas. Tus visitantes solo podrán ver la biografía. Además, puedes personalizar su apariencia y ajustar las dimensiones, la fuente y el color.

Ejemplos de casos de uso del bloque Bucle de consulta

Ahora que conoces un poco mejor el bloque Bucle de consulta, veamos tres formas de utilizarlo.

1. Crea una sección de «entradas recientes»

Esta sección puede hacer que tu contenido publicado recientemente sea más visible.

bloque Bucle de consulta configurado para mostrar entradas recientes

Para empezar, tendrás que usar dos bloques Bucle de consulta. Añade el primero y, después, elige un patrón o empieza desde cero. Para entradas visuales, como las recetas, Imagen, fecha y título puede ser una buena opción.

opciones del bucle de consulta

Si ya has configurado tu Bucle de consulta, tus entradas aparecerán aquí. Si no, haz clic en Crea una entrada nueva para este feed para escribir y publicar las entradas que quieras incluir.

Como aquí aparecerá tu entrada más reciente, solo querrás mostrar un contenido. Ve a los Ajustes de visualización. Junto a ENTRADAS POR PÁGINA, introduce «1».

seleccionar una entrada para el feed

Ahora solo deberías ver tu entrada más reciente en la lista del bloque.

Después puedes añadir un segundo bloque Bucle de consulta para mostrar otras entradas recientes. Elige el diseño que prefieras. A continuación, ve a la barra de herramientas y cambia de Vista de lista a Vista de cuadrícula. De este modo, el lector podrá ver más recetas a la vez.

configurar una vista de cuadrícula para el bloque Bucle de consulta

Ahora haz clic en Ajustes de visualización y cambia el valor de DESPLAZAMIENTO a «1». Así eliminarás tu entrada más reciente del segundo bloque Bucle de consulta.

configurar el valor de desplazamiento del bloque Bucle de consulta

También puedes personalizar el diseño del bloque. Por ejemplo, quizá quieras reducir el tamaño de fuente de los encabezados para mejorar la legibilidad del texto. Puedes hacerlo desde la barra de herramientas.

ajustes de los títulos de las entradas del blog

También puedes reducir el tamaño de la fecha. Puedes hacer estos cambios en los ajustes del bloque. Busca Tipografía y selecciona un tamaño de fuente más adecuado.

ajustar el tamaño de fuente de la fecha de la entrada

También puedes establecer nuevas dimensiones para tus imágenes destacadas y cambiar la alineación de los títulos de tus recetas. Cuando estés listo, haz clic en Guardar borrador o Publicar. 

2. Añade el bloque Bucle de consulta a una plantilla de índice

Si utilizas un tema de bloques, puedes añadir el bloque Bucle de consulta a una plantilla. Esto puede resultar útil al establecer estilos globales para los bucles de consulta y sus subbloques.

En tu panel de WordPress, ve a Apariencia → Editor.

añadir un bloque Bucle de consulta a una página de índice

Haz clic en el menú desplegable que actualmente está configurado como Inicio o Página (según tu tema) y selecciona Explorar todas las plantillas.

elegir una plantilla de página para editar

En la lista de plantillas, selecciona la que quieras editar. La plantilla Índice suele ser una buena opción, ya que es la que indexa y muestra las entradas del sitio web.

conjunto de tres entradas del blog en la plantilla de página de índice

Si eliges Índice, verás que la plantilla ya incluye un bloque Bucle de consulta, pero puedes eliminarlo y añadir el tuyo. Después, puedes ajustar el diseño cambiando entre Vista de lista y Vista de cuadrícula. 

También puedes personalizar el texto «Leer más» haciendo clic en el subbloque y escribiendo la llamada a la acción que prefieras.

editar el diseño de la entrada del blog

También encontrarás todos los ajustes disponibles del bloque si vas a la barra de herramientas y haces clic en Mostrar más ajustes. Aquí puedes cambiar el tamaño y el color del texto, así como establecer nuevas dimensiones para tus imágenes.

3. Establece estilos globales para tus bloques Bucle de consulta

Si tienes previsto utilizar bloques Bucle de consulta con frecuencia en tu sitio, puede llevar mucho tiempo crear y configurar el bucle una y otra vez. Por eso es buena idea establecer estilos globales para tus bucles de consulta y bloques anidados.

Para acceder al editor de estilos globales, haz clic en el icono de Estilos en la esquina superior derecha de la pantalla:

seleccionar estilos globales para el bloque

A continuación, selecciona Bloques en la parte inferior de la barra lateral:

seleccionar la opción Bloques para los estilos globales

Desplázate por la lista de bloques disponibles y busca Bucle de consulta. Después, haz clic en Colores:

buscar los ajustes de color del bloque Bucle de consulta

Aquí puedes gestionar las combinaciones de colores de los distintos elementos y bloques de tu sitio. Si quieres añadir más colores personalizados a tu paleta predeterminada, haz clic en Paleta y busca PERSONALIZADO.

Ahora, haz clic en el + para añadir nuevos colores a tu paleta.

añadir colores a la paleta de colores

A continuación, vuelve a los colores del bucle del bloque Bucle de consulta. Verás una lista de elementos como el fondo, los enlaces y los encabezados.

También puedes establecer estilos predeterminados para estos componentes. Para hacerlo, selecciona el elemento que quieras editar.

seleccionar de una paleta de colores

Por ejemplo, puedes cambiar el color de fondo de tus bloques Bucle de consulta.

cambiar el color de fondo

Si decides deshacer alguno de los cambios que has aplicado, solo tienes que hacer clic en Borrar.

También puedes establecer estilos globales para el fondo y el color del texto de tus encabezados. Además, puedes asignar colores al pasar el cursor sobre tus enlaces. Cuando termines, haz clic en Guardar para aplicar nuevos estilos predeterminados a tus bloques.

Ampliar el bloque Bucle de consulta

Aunque ya sabes cómo crear y personalizar un bloque Bucle de consulta en WordPress, quizá quieras ampliar aún más el bloque. Mediante la API de variaciones de bloque, puedes especificar ciertos ajustes predeterminados, desactivar opciones de personalización y mucho más.

Por ejemplo, es posible que nunca uses el atributo Fijo en tu Bucle de consulta. Es posible que el campo Autor tampoco sea relevante para tus entradas. Por lo tanto, puedes desactivar estos controles para que no sean visibles.

En este caso, el código de la variación tendría este aspecto:

{
/** ...variation properties */
allowedControls: [ 'inherit', 'order', 'taxQuery', 'search' ],
}

De este modo, tus usuarios podrán acceder a las funciones inherentes, de ordenación, taxonomías y búsqueda, pero los campos de autor y de contenido fijo no se mostrarán.

Como alternativa, quizá prefieras ocultar la opción de búsqueda para los usuarios, en cuyo caso tu propiedad tendría este aspecto:

{
/** ...variation properties */
allowedControls: [ 'inherit', ‘postType’, 'order', ‘sticky’, 'taxQuery', ‘author’, ],
}

Si por algún motivo quieres ocultar todos los controles disponibles para tu bloque Bucle de consulta, puedes establecer una matriz vacía junto a allowedControls.

Como puedes ver, este método requiere ciertos conocimientos técnicos. Si no sabes programar, quizá prefieras limitarte a las opciones de personalización disponibles en el editor de bloques.

Solución de problemas habituales del bloque Bucle de consulta

El bloque Bucle de consulta no muestra ninguna entrada

Normalmente, esto significa que los ajustes de los filtros son demasiado restrictivos. Comprueba lo siguiente:

  1. ¿El tipo de entrada está seleccionado correctamente en la barra lateral?
  2. ¿Tus filtros de taxonomía excluyen todo el contenido disponible?
  3. ¿La opción «Heredar la consulta de la plantilla» está activada cuando no debería? Desactívala para establecer manualmente los parámetros de la consulta.

El bloque Bucle de consulta muestra las entradas incorrectas

Abre los ajustes de consulta de la barra lateral y comprueba los filtros Tipo de entrada, Orden y Taxonomía. Si estás usando una plantilla (por ejemplo, la plantilla de índice), desactiva «Heredar la consulta de la plantilla» para controlar manualmente qué entradas aparecen.

La paginación no funciona en el bloque Bucle de consulta

La paginación debe colocarse dentro del Bucle de consulta. En la Vista de lista, despliega el Bucle de consulta y añade el bloque Paginación después de la Plantilla de entrada (para que aparezca debajo de la lista de entradas), no fuera del Bucle de consulta. Si los enlaces de paginación devuelven un error 404, vuelve a guardar Ajustes → Enlaces permanentes para actualizar las reglas de reescritura y confirma que los enlaces permanentes de tu servidor funcionan correctamente.

El bloque Bucle de consulta no funciona con un tema clásico

El bloque Bucle de consulta funciona dentro del contenido de entradas y páginas con cualquier tema. Sin embargo, la edición a nivel de plantilla (a través de Apariencia → Editor) requiere un tema de bloques. Si utilizas un tema clásico y necesitas bucles de consulta a nivel de plantilla, plantéate cambiar a un tema de bloques como Twenty Twenty-Four.

Al bloque Bucle de consulta le falta el bloque «Sin resultados»

El bloque Sin resultados es un bloque anidado dentro del propio bloque Bucle de consulta. En la vista de lista, despliega tu bloque Bucle de consulta y busca el bloque Sin resultados. Si no está ahí, haz clic en el icono + dentro del bloque Bucle de consulta y busca «Sin resultados».

Preguntas frecuentes

Aunque hemos intentado cubrir todos los aspectos del bloque Bucle de consulta, es posible que aún tengas algunas preguntas sobre esta función. Veamos las más habituales.

¿Qué es una consulta de WordPress?

Query se traduce como «preguntar» o «dar una orden». Por tanto, dentro del bloque Bucle de consulta, la parte «Query» permite a los usuarios solicitar cierta información para incorporarla al bucle. Así es como Bucle de consulta muestra todas las entradas o páginas de una etiqueta, categoría o cualquier otro criterio específico.

¿Qué es un bucle de WordPress?

Un bucle de WordPress es una forma de mostrar información similar en un formato cíclico. Por ejemplo, puedes crear un bucle de entradas de blog que muestre artículos relacionados en tu página, con el título de la entrada, el extracto, la imagen destacada y mucho más.

Los datos se extraen de tu contenido publicado y se colocan en el bucle, que aparece en tus páginas para los visitantes. De este modo, te ayuda a dirigir a los usuarios hacia otras piezas de contenido relevante y a mantener su interés en tu sitio.

¿Qué puedes hacer con el bloque Bucle de consulta?

Hay muchas cosas que puedes conseguir con el bloque Bucle de consulta. Por ejemplo, podrías mostrar una lista de productos relacionados o destacados.

Además, podrías dirigir a los usuarios hacia otras recetas de tu sitio que compartan las mismas etiquetas o categorías. Si tienes un sitio web de portafolio, incluso puedes mostrar tus trabajos más recientes o destacados dentro de un bloque Bucle de consulta.

¿Cómo puedes ampliar el bloque Bucle de consulta?

Puedes controlar con detalle cómo se muestra tu Bucle de consulta añadiendo ajustes personalizados al bloque. Con la API de variaciones de bloque, puedes crear nuevas funciones, desactivar determinados elementos y aplicar tus propios ajustes preestablecidos.

¿El bloque Bucle de consulta es gratuito?

Sí, el bloque Bucle de consulta es un bloque gratuito del núcleo de WordPress incluido a partir de WordPress 5.8. No necesitas ningún plugin prémium ni una suscripción a Jetpack para usar las funciones básicas de Bucle de consulta.

¿Bucle de consulta funciona con tipos de entrada personalizados?

Sí, el bloque Bucle de consulta es totalmente compatible con los tipos de entrada personalizados. En los ajustes del bloque, desactiva «Heredar la consulta de la plantilla» y utiliza el menú desplegable «Tipo de entrada» para elegir tu tipo de entrada personalizado (por ejemplo, Portafolio, Testimonios o Productos). También puedes filtrar los resultados por taxonomías personalizadas.

¿Cómo afecta Bucle de consulta a la velocidad del sitio web?

Los bloques Bucle de consulta pueden afectar al tiempo de carga de la página si no están configurados correctamente. Para optimizar el rendimiento:

  1. Limita a 12 o menos el número de elementos por página
  2. Usa la paginación en lugar de cargar todos los resultados
  3. Implementa el almacenamiento en caché con plugins como Jetpack Boost o WP Super Cache
  4. Optimiza las imágenes del bucle.

Un bloque Bucle de consulta bien configurado añade una sobrecarga mínima.

Bucle de consulta frente al bloque de últimas entradas: ¿cuál debería usar?

Usa el bloque de últimas entradas para mostrar entradas recientes de forma sencilla y con una personalización mínima. Usa el bloque Bucle de consulta cuando necesites:

  1. Compatibilidad con tipos de entrada personalizados
  2. Filtrado avanzado (etiquetas, categorías y autores)
  3. Control total sobre los bloques anidados
  4. Diseños de cuadrícula con estilos personalizados.

El bloque Bucle de consulta es más potente, pero también más complejo.

Crea un bloque Bucle de consulta en WordPress

El bloque Bucle de consulta es un bloque útil de WordPress que te permite mostrar entradas destacadas, páginas relacionadas o productos de una categoría determinada. También puedes usarlo para mostrar contenido de tipos de entrada personalizados, como testimonios y proyectos de portafolio

El bloque Bucle de consulta es muy personalizable. Puedes configurar los subbloques que contiene, como el título de la entrada, el nombre del autor y las imágenes destacadas. Además, puedes ampliar el bloque y añadir ajustes personalizados con la API de variaciones de bloques. 

Otra forma de ayudar a los visitantes a encontrar el contenido adecuado de tu sitio es usar Jetpack Search. Ideal para sitios web grandes, puedes ofrecer resultados de búsqueda instantáneos y utilizar filtros potentes para mejorar la experiencia de usuario. ¡Empieza a usar Jetpack Search hoy!

Explora las ventajas de Jetpack

Descubre cómo Jetpack puede ayudarte a proteger, acelerar y hacer crecer tu sitio de WordPress.

Explorar planes

¿Tienes alguna pregunta?

La sección de comentarios está cerrada para este artículo, pero seguimos aquí para ayudarte. ¡Visita el foro de soporte y estaremos encantados de responder a tus preguntas!

Ver foro de soporte