Descubre cómo mostrar un título en el bloque de bucle de consulta (query block) de WordPress solo cuando hay resultados disponibles, y ocultarlo si no los hay.
El bloque nativo de WordPress que permite mostrar un listado de entradas, ahora denominado «bucle de consulta» (query block), ha mejorado muchísimo en las últimas actualizaciones.
De hecho, en este tutorial repaso todas las opciones que ofrece en su interfaz de usuario. Aunque son bastantes, no llega al grado de personalización al que podemos llegar modificando los parámetros de WP_Query
.
Por ejemplo, uno de mis clientes me pidió crear una página con diferentes bucles de consulta para categorías concretas, y cada uno con su encabezado introduciendo dicha categoría.
Sin embargo, al tratarse de contenidos temporales o con fecha de caducidad, no siempre todos los bucles de consulta devolvían resultados. Y en esos casos quedaba fatal que se mostrara el encabezado sin que apareciera nada más después.
¿Quieres saber cómo lo solucioné? Creando un encabezado condicional que se muestra solo cuando el query block devuelve resultados y se oculta cuando no los hay.
Aquí te enseño cómo lo hice:
Pasos para controlar la visualización del título según haya o no resultados en un bloque de consultas (query block)
En primer lugar, añade un bloque de bucle de consulta y configura los ajustes a tu gusto.
1. Examina el ID del bloque
Una vez que hayas creado el bloque, ve al modo «editor de código» y examina el HTML.
Pro tip: utiliza el atajo de teclado Cmd + Alt + Shift + M
para ir más rápido.
A la altura de donde has creado el bloque verás algo similar a:
<!-- wp:query {"queryId":8,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
La parte que te interesa es la de queryId
ya que todos los bloques de contenido tienen un identificador numérico. En este caso es 8.
2. Modifica la consulta del bloque elegido
Añade el siguiente snippet al fichero functions.php o a tu plugin de funcionalidades:
Para ver este código y los otros 2055 snippets de esta web,
identifícate o suscríbete aquí.
Este snippet verifica si hay publicaciones que coincidan con los criterios de la consulta dentro del bloque de consulta con queryId
8. Si hay resultados, añade el título «Próximas» antes del contenido del bloque. Si no hay resultados, tampoco muestra este encabezado.
Por supuesto, puedes cambiar la queryId
y el texto o nivel del encabezado a tu gusto.
Eso sí, si tu CPT tiene una taxonomía personalizada tendrás que indicarlo en el código. En el siguiente snippet te dejo un ejemplo con la taxonomía book-series
. Sustitúyela por la de tu CPT:
Para ver este código y los otros 2055 snippets de esta web,
identifícate o suscríbete aquí.
Ten en cuenta que al estar usando un filtro de PHP tienes la limitación de que el resultado solo lo verás en la parte frontal de la web, en el backend no se reflejarán los cambios.
Conclusiones
Ya ves qué fácil es mostrar un título sobre el bloque de bucle de consulta (query block) de WordPress solo cuando este devuelve resultados.
Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.
Todo ventajas de ser suscriptor. 😉