Cómo usar el bloque de bucle de consulta de WordPress

El editor de WordPress se está convirtiendo en un creador de sitios completo. Gracias a la edición completa del sitio y a los nuevos bloques temáticos como Query Loop Block, puede mostrar fácilmente listas de contenido dinámico para cualquier tipo de publicación en cualquier lugar de WordPress.

En este artículo, profundizaremos en el bloque de bucle de consulta de WordPress para que pueda comprender mejor qué es y cómo usarlo.

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

El Query Loop Block es uno de los bloques temáticos de WordPress más avanzados disponibles en el nuevo Site Editor. Se agregó a WordPress Core en la versión 5.8 y es una versión más compleja del Bloque de publicaciones más recientes. Permite que cualquier persona construya visualmente un bloque que extraiga y muestre el contenido de la publicación dinámicamente en una página o plantilla. El Query Loop Block tampoco se limita a mostrar publicaciones de blog. Puede usarlo para extraer contenido de cualquier tipo de publicación personalizada que pueda tener. Incluso puede usarlo con WooCommerce Blocks para mostrar productos.

¿Qué son las "consultas" y los "bucles"?

En la terminología de WordPress, un "bucle" es una forma de mostrar información similar repetidamente. Por lo tanto, un bucle de publicaciones de blog es una serie de publicaciones de blog con atributos comunes, como el título del blog, la imagen destacada, el nombre del autor, la fecha de publicación y una breve descripción. El ciclo extrae estos datos de las publicaciones (o cualquier tipo de publicación) y los coloca en un ciclo. Luego, el bucle muestra las publicaciones a los visitantes del sitio.

El aspecto de consulta de un "bucle de consulta" significa que un usuario puede consultar, o ordenar, cierta información para entrar en el bucle. Entonces, un Query Loop Block puede extraer y mostrar todas las publicaciones o publicaciones de categorías específicas, por nombrar solo un par de opciones. Esto permite que alguien muestre publicaciones en la "Categoría A" y no publicaciones de la Categoría B o C.

Los bloques de bucle de consulta pueden mostrar:

• Publicaciones de blog
• Páginas del sitio web
• Productos WooCommerce
• Otros tipos de publicaciones personalizadas

Cualquier tipo de publicación es un juego justo para mostrar en un bucle dinámico.

Bloques anidados de bucle de consulta

Hay dos "Bloques anidados" inmediatos que pertenecen al bloque de bucle de consulta:

• Bloque de plantilla de publicación: contiene más bloques anidados que muestran los metadatos de la publicación (título, imagen destacada, autor, etc.)
• Bloque de paginación: permite que las publicaciones se desborden en las páginas para que se muestren más

No cubriremos estos bloques anidados en este artículo, pero puede hacer clic en cualquiera de sus hipervínculos anteriores para obtener toda la información sobre cómo funciona cada uno dentro de un bloque de bucle de consulta.

Cómo agregar el bloque de bucle de consulta a una plantilla de índice de WordPress

En este ejemplo, estamos usando el tema predeterminado de WordPress "Twenty Twenty-two". Este fue el primer tema predeterminado que incluyó la edición a través del Editor del sitio (anteriormente llamado "Editor del sitio completo").

Veremos cómo agregar un bloque de bucle de consulta de WordPress a una plantilla en el Editor del sitio. Para llegar allí, primero, pase el cursor sobre "Apariencias" y luego haga clic en "Editor".

Luego, haga clic en el icono en la parte superior izquierda para desplegar el menú desplegable. En ese menú, haga clic en "Plantillas".

Ahora, de la lista de plantillas presentadas, busque la plantilla que desea editar. Una de las plantillas más naturales para este bloque es la plantilla "Índice", ya que es la plantilla que indexa o muestra las publicaciones del sitio web.

Ahora se encuentra en la plantilla de índice de Twenty Twenty-two. Notarás que ya viene con un Query Loop Block configurado. Pero, si está utilizando un tema de bloque diferente, es posible que no venga con él.

Para agregar un nuevo bloque de bucle de consulta, haga clic en el icono "(+)". Desplácese hacia abajo hasta los bloques "Tema" o escriba "Bucle de consulta" en la barra de búsqueda. Arrastre el bloque Query Loop al Editor del sitio.

WordPress tiene "Patrones" predefinidos que pueden darle una ventaja inicial en el diseño de su Query Loop. Puede elegir un patrón específico si sabe que hay uno que se ajuste a sus necesidades, o puede comenzar en blanco. Vamos a hacer clic en "Comenzar en blanco".

Hay cuatro variaciones predeterminadas para aplicar a un bucle de consulta. Para este ejemplo, haga clic en la variación "Título y fecha".

Esto creará el bucle de consulta con la variación "Título y fecha".

Observe que los bloques anidados aparecen dentro del bloque de bucle de consulta de WordPress. Esto se debe a que esos bloques proporcionan las funciones necesarias para Query Loop. Dado que elegimos la variación "Título y fecha", esos bloques anidados deben incluirse para mostrar la información de "Título" y "Fecha". Una variación diferente habría cargado una disposición diferente de bloques anidados.

Ahora que un bloque de bucle de consulta está en una plantilla, exploraremos la barra de herramientas y la configuración de este bloque de tema avanzado.

Barra de herramientas y configuración del bloque de bucle de consulta

Cada bloque dentro del Editor del sitio y el Editor de bloques tiene sus propias opciones de barra de herramientas y una barra lateral de más configuraciones.

Barra de herramientas de bloque de bucle de consulta

Para encontrar la barra de herramientas para el bloque de bucle de consulta, es más fácil ir a la Vista de lista y seleccionar el bloque, asegurándose de que no esté seleccionado un bloque anidado.

La primera opción única de la barra de herramientas para el bloque de bucle de consulta es la "Configuración de pantalla". Al hacer clic en eso, se mostrarán tres opciones:

• Elementos por página: controla el número de publicaciones que se muestran a la vez en el ciclo
• Desplazamiento: salta el punto de inicio de las publicaciones en una cantidad determinada
• Página máxima para mostrar: limita el número de páginas que se muestran, incluso si la consulta tiene más resultados

El siguiente en la barra de herramientas es el botón "Reemplazar". Esto da la opción de eliminar el patrón del bloque de bucle de consulta y reemplazarlo con un patrón diferente.

La última opción exclusiva de la barra de herramientas para el bloque de bucle de consulta es alternar entre la vista de lista y la vista de cuadrícula. La vista de lista muestra el bucle de publicaciones "como una lista" con las publicaciones apiladas. La vista de cuadrícula muestra el bucle de publicación como una cuadrícula con más de un diseño de tabla para que llenen las publicaciones.

Barra lateral de configuración de bloque de bucle de consulta

El bloque Query Loop tiene configuraciones adicionales en la barra lateral "Más configuraciones". Para revelar la barra lateral, haga clic en la opción "Mostrar más configuraciones" anidada en la barra de herramientas o haga clic en el ícono "Engranaje" en la esquina superior derecha mientras el Bloque de bucle de consulta está seleccionado.

La primera configuración de la barra lateral visible brinda a los propietarios de sitios la capacidad de crear una nueva publicación para el bucle de consulta desde esta página de edición. Después de eso, está el cambio de diseño que afecta la forma en que los bloques anidados usan el ancho del diseño en comparación con el bloque de bucle de consulta; más sobre eso más adelante. El conmutador de configuración permite seleccionar una consulta personalizada o heredada para el bloque; más sobre eso también a continuación.

Opciones de diseño

La configuración de "Diseño" para bloques anidados permite a un diseñador alternar configuraciones adicionales (azul). Estas configuraciones permiten elegir si esos bloques usan porcentajes de contenido y ancho. También revela una opción para la justificación del contenido a la izquierda, al centro o a la derecha. Con él desactivado (gris), los elementos anidados se establecen en ancho completo de forma predeterminada.

Configuración de consultas

Cuando la consulta "Configuración" no está activada (gris), puede seleccionar exactamente qué consultar. La primera opción es "Publicaciones", que pueden ser páginas, publicaciones o tipos de publicaciones personalizadas. A continuación, los usuarios pueden elegir entre orden ascendente o descendente para la fecha de publicación o alfabéticamente. Por último, hay una opción para incluir o excluir publicaciones fijas en la consulta.

Al alternar "Configuración" (azul) se configura el bloque de bucle de consulta para heredar la consulta de la plantilla utilizada.

Filtros de consulta

A continuación, con la consulta "Filtros", los usuarios tienen la opción de personalizar aún más la consulta filtrando las publicaciones por:

• Categorías de publicaciones: lista de categorías separadas por comas
• Etiqueta de publicación: lista de etiquetas separadas por comas
• Autor de la publicación: lista desplegable de autores
• Publicar palabra clave: ingrese una lista de palabras clave para filtrar

Opciones de color y configuración avanzada

Por último, tenemos Configuración de color y Configuración avanzada. Las opciones de color permiten a los diseñadores elegir colores para:

• Color de texto
• Color de fondo
• Color de enlace

La configuración avanzada incluye la capacidad de agregar una clase CSS al bloque de bucle de consulta de WordPress y/o asignar un elemento HTML al bloque.

Cada bloque anidado dentro del bloque de bucle de consulta tiene sus propias opciones de barra de herramientas y configuraciones de barra lateral. Visite la lista anterior de bloques anidables para obtener más información sobre cada uno y las configuraciones que tienen.

Consejos y mejores prácticas para usar el bloque de bucle de consulta en WordPress

Los bucles de consulta son bloques poderosos. Siga estos consejos y prácticas recomendadas para aprovecharlos al máximo.

Establecer estilos globales para bucles de consulta y bloques anidados

Los estilos globales se pueden establecer en base a un tipo de bloque por tipo de bloque. Esto permite a los diseñadores crear estilos predeterminados globales que se aplican a todas las instancias de un bloque en todo el sitio web. Este es un gran ahorro de tiempo.

Actualmente, en el tema 2022, el bloque de bucle de consulta le permite agregar estilos globales para el color del texto, el fondo y los colores de los enlaces. Para acceder al editor de estilos globales, haga clic en el icono "Estilos globales" (círculo relleno a la mitad), seleccione "Bloques" y busque el Bloque de bucle de consulta.

También puede asignar estilos globales separados a cada uno de los bloques de temas anidados (como plantilla de publicación, título de publicación, etc.) dentro de un bucle de consulta.

Use múltiples bloques de bucle de consulta en una sola página para crear una sección de blog destacada

Al crear una plantilla de página de blog, es posible que desee crear una publicación destacada que se destaque porque es la publicación más reciente publicada en su sitio. A continuación se muestra una versión simple del concepto.

Será necesario que haya dos bloques de bucle de consulta en nuestra plantilla "Índice". El bloque de bucle de consulta superior tendrá una pantalla de "Vista de lista" y solo mostrará una sola publicación. Asegúrese de que no tenga un bloque de paginación anidado en este primer bucle de consulta.

Con el segundo Bloque de bucle de consulta inferior, configúrelo en "Vista de cuadrícula". Debería mostrar varias publicaciones en columnas y establecer el "Desplazamiento" en 1. Un desplazamiento de 1 omitirá la primera publicación de la consulta. Esto es deseable ya que el bucle de consulta anterior contiene la publicación destacada.

Use un diseño consistente para los bucles de consulta que muestren los mismos tipos de publicaciones

Los bucles de consulta utilizados para "artículos de blog" deberían tener un aspecto similar. Si usa Bloques de bucle de consulta para otros tipos de publicaciones, considere un estilo ligeramente diferente para los visitantes de su sitio para que puedan diferenciar qué son "Publicaciones de blog" y qué son otros tipos de contenido. Esto hará que la experiencia de usuario del sitio web sea clara.

Uso del módulo de blog de Divi: una alternativa de bloque de bucle de consulta con más opciones de diseño

Si usa Divi, el módulo de blog funciona de manera muy similar al bloque de bucle de consulta nativo de WordPress. Y agregar el módulo de blog de Divi a una página o plantilla es simple, lo que le brinda todas las opciones que necesita para personalizar los parámetros, el diseño y el diseño del contenido dinámico de la publicación.

El contenido que se muestra en el Módulo de blog también es completamente flexible, lo que le permite seleccionar un determinado tipo de publicación, categorías de tipo de publicación y la cantidad de publicaciones que desea incluir. Se pueden agregar o eliminar elementos de módulos individuales, como imágenes destacadas, títulos, metatexto, texto del cuerpo, leer más enlaces, paginación, etc.

Cada uno de estos elementos del módulo se puede diseñar completamente utilizando las amplias opciones de diseño de Divi. Obtenga más información sobre el uso del módulo de blog de Divi en plantillas.

Preguntas frecuentes sobre el bucle de consulta

Respondiendo algunas de las preguntas más frecuentes sobre el Query Loop Block de WordPress.

¿Cuál es la diferencia entre el bloque de bucle de consulta y el bloque de últimas publicaciones?

El bloque Query Loop es similar al bloque Latest Posts en que tiene la capacidad de mostrar dinámicamente una lista de las últimas publicaciones en su blog. Sin embargo, Query Loop Block es mucho más avanzado y le permite crear su "lista" de publicaciones, páginas u otros tipos de publicaciones desde cero al integrar otros bloques anidados. Por ejemplo, si tiene un tipo de publicación personalizada para recetas, puede usar el Bloque de bucle de consulta para crear una página completa de recetas personalizadas a su gusto.

¿El bloque Query Loop requiere conocimientos de codificación?

No, el bloque de bucle de consulta de WordPress no requiere conocimientos de codificación porque la funcionalidad ya está integrada. Este bloque le permite mostrar un bucle de publicaciones en su sitio de WordPress utilizando configuraciones de bloque personalizables en la interfaz.

¿Dónde puedo usar el bloque de bucle de consulta?

El bloque de bucle de consulta de WordPress recorre las publicaciones y páginas publicadas para mostrarlas. Se actualizará automáticamente a medida que las nuevas páginas/publicaciones cumplan con los parámetros de consulta. Esto hace que este bloque sea útil en muchos lugares, como plantillas de publicación o archivo, o en páginas estáticas en las que desea mostrar cosas como publicaciones recientes de forma dinámica.

¿Ha utilizado el Query Loop Block en su sitio de WordPress? ¿Qué descubrimientos has hecho? Háganos saber en los comentarios a continuación.

Imagen destacada de Dmitry Kostrov / shutterstock.com