El bloque Bucle de Consulta de WordPress ya viene con un panel de Filtros, pero ninguno de ellos está pensado para tus visitantes.
Esas taxonomías, autores y opciones de palabras clave residen en la configuración del bloque del editor, donde deciden qué publicaciones muestra el bucle antes de que alguien cargue la página.
Eso significa que un blog de viajes con una cuadrícula de 60 publicaciones muestra las mismas 60 publicaciones a cada lector. Alguien que planea un viaje a Portugal todavía tiene que desplazarse por todas las guías de Japón y México para encontrar la que buscaba.
Para agregar filtros al bloque Bucle de Consulta de WordPress que los visitantes puedan hacer clic, necesitas agregar código personalizado o contratar a un desarrollador. Pero un plugin como WPFilters coloca un filtro de categoría junto a tu Bucle de Consulta, actualiza los resultados sin recargar la página y te da un enlace filtrado que puedes compartir.
En este artículo, te mostraremos cómo agregar filtros al bloque Bucle de Consulta de WordPress sin necesidad de codificar.
Por qué los filtros integrados del bloque Bucle de Consulta no son suficientes
El bloque Bucle de Consulta muestra una lista dinámica de publicaciones, páginas u otro contenido en cualquier página o plantilla.
Tú decides qué entra en esa lista desde la configuración del bloque, incluido el tipo de publicación, el orden y cuántas publicaciones aparecen por página.
El panel Filtros del bloque Bucle de Consulta reduce aún más esa lista por categoría, etiqueta, autor o palabra clave.
Tú tomas esas decisiones mientras editas la página, y los visitantes solo ven el resultado.
No hay ninguna casilla de verificación ni menú desplegable en el front-end que permita a un lector cambiar lo que muestra el bucle.
Los filtros para visitantes colocan esas casillas de verificación y menús desplegables en el front-end, para que los lectores puedan reducir el bucle por sí mismos.
¿Por qué agregar filtros para visitantes a un Bucle de Consulta?
Hemos notado que un Bucle de Consulta largo funciona bien hasta que un sitio crece más allá de unas pocas docenas de publicaciones.
Surgen cuatro problemas una vez que la cuadrícula se alarga:
- Los lectores no pueden reducir la lista. Los filtros del lado del editor son fijos, por lo que cada visitante recibe la misma cuadrícula sin importar lo que buscaba.
- Las cuadrículas largas entierran tu mejor contenido. Un lector que tiene que desplazarse página tras página de publicaciones a menudo se rinde antes de llegar a la que quería.
- La ruta del código necesita un desarrollador. WordPress permite a los desarrolladores cambiar los resultados del Bucle de Consulta con el hook query_loop_block_query_vars, pero eso significa escribir y mantener PHP.
- Las recargas completas de página ralentizan la navegación. Cada vez que un filtro recarga toda la página, el lector pierde su lugar y espera a que todo vuelva a cargarse.
Un plugin de filtros agrega filtros clicables junto a tu Bucle de Consulta existente, para que no tengas que cambiar su configuración ni escribir PHP.
Cómo agregar filtros al bloque Bucle de Consulta de WordPress con WPFilters
Recomendamos WPFilters como la forma más sencilla de añadir filtros de visitantes a un bloque Query Loop.
WPFilters es el mejor plugin de filtrado para WordPress, construido por el mismo equipo detrás de SearchWP.
Te permite crear filtros a partir de las categorías, etiquetas y campos personalizados que tu sitio ya tiene, y luego colocarlos junto a cualquier Query Loop sin escribir código.
Estas son algunas de las características que hacen de WPFilters una buena opción para las páginas de Query Loop:
- Funciona con el bloque Query Loop. WPFilters se conecta al bloque Query Loop automáticamente, por lo que no hay ningún ajuste adicional que activar.
- Siete tipos de elementos. Puedes elegir entre Casilla de verificación, Radio, Desplegable, Desplegable (multiselección), Control deslizante, Búsqueda y Restablecer, dependiendo de cómo quieras que los visitantes filtren la lista.
- Sin recargas de página. Cuando un visitante selecciona un filtro, WPFilters utiliza AJAX para actualizar los resultados del Query Loop en el lugar.
- URL de filtros compartibles. Cada selección se guarda en la URL de la página, por lo que un lector puede marcar o compartir una vista filtrada.
Con esto, veamos cómo puedes usar WPFilters para añadir filtros a tu bloque Query Loop.
Paso 1: Instalar y activar WPFilters
Para empezar, puedes suscribirte a un plan de WPFilters en el sitio web de SearchWP.
Una vez que te hayas suscrito, puedes dirigirte a la pestaña Descargas en tu panel de cuenta.
Desde allí, procede a descargar el archivo ZIP del plugin WPFilters.
Mientras estás allí, copia también tu clave de licencia, ya que la necesitarás en un momento.
A continuación, puedes iniciar sesión en tu panel de WordPress e instalar el plugin.
Si nunca antes has instalado un plugin desde un archivo ZIP, consulta esta guía paso a paso que te lo explica.
Después de la activación, se abrirá el asistente de bienvenida. Puedes hacer clic en Empezar y seguir las instrucciones en pantalla para comenzar.
Con eso hecho, WPFilters está listo y puedes crear tu primer filtro de Query Loop.
Paso 2: Crear un Elemento de Filtro de Categoría
Para crear el filtro, puedes dirigirte a WPFilters » Elementos desde tu panel de WordPress.
Desde allí, haz clic en el botón Añadir nuevo en la parte superior de la pantalla.
Se abrirá un nuevo elemento con un título predeterminado, y puedes hacer clic en el icono del lápiz junto a él para renombrarlo a algo claro, como "Filtrar por destino".
A continuación, puedes encontrar la sección Campos de filtro y seleccionar Casilla de verificación.
Nos gusta la Casilla de verificación para las páginas de Query Loop porque permite a los lectores elegir más de una categoría a la vez, como Portugal y Japón juntas.
Después de eso, puedes desplazarte hacia abajo hasta la sección Origen de datos y abrir el desplegable.
En el grupo Taxonomías, procede a seleccionar Categorías (category).
Una vez que tu origen de datos esté configurado, puedes ajustar el aspecto del filtro.
En la configuración del Contenedor, puedes activar el interruptor Mostrar título para que los visitantes vean una etiqueta encima de las casillas de verificación.
Los interruptores Colapsable y Horizontal también están ahí, si deseas un filtro que se pliegue o se sitúe en una sola fila.
En la configuración de Elementos, recomendamos activar Conteo de elementos, que muestra cuántas publicaciones hay en cada categoría.
También puedes dejar Mostrar vacíos desactivado, para que las categorías sin publicaciones permanezcan ocultas.
A medida que cambias estos ajustes, el panel Vista previa en vivo muestra cómo se verá el filtro.
Cuando estés satisfecho, haz clic en Guardar.
Paso 3: Añadir el Filtro Junto a tu Bloque Query Loop
A continuación, puedes abrir la página donde quieres el filtro en el editor de bloques (Gutenberg).
Si la página aún no tiene un Bucle de consulta, puedes añadir un bloque Bucle de consulta y configurarlo para mostrar tus publicaciones.
Después de eso, haz clic en el insertador + encima del Bucle de consulta y busca el bloque Elemento WPFilters.
Una vez que el bloque esté en la página, puedes abrir Seleccionar elemento en los ajustes del bloque y elegir “Filtrar por destino”.
Y
Puedes colocar el filtro encima del bucle, o usar un bloque de Columnas para ponerlo en una columna lateral junto al bucle.
Cuando todo esté en su lugar, guarda o publica la página.
Nota: Cuando probamos dos bloques de Bucle de consulta en una página, ambos mostraron los mismos resultados filtrados, porque WPFilters aplica el filtro a cada bloque de Bucle de consulta en la página. Si necesitas una segunda lista que permanezca sin filtrar, como una sección de “Publicaciones recientes”, puedes usar el bloque Últimas publicaciones en su lugar.
Si prefieres no usar el bloque, el botón Incrustar en la pantalla del elemento te ofrece un shortcode y una opción de código PHP.
Paso 4: Prueba tus Filtros de Query Loop
Ahora puedes visitar la página en el frontend de tu sitio y probar el filtro.
Para la primera prueba, marca la casilla “Portugal”. El Bucle de consulta debería actualizarse de inmediato para mostrar solo tus publicaciones de Portugal, sin recargar la página.
También notarás que la URL de la página cambia para incluir tu selección.
Para la segunda prueba, haz clic en la siguiente página de resultados. La página dos debería seguir mostrando solo publicaciones de Portugal, con la casilla aún marcada.
También puedes copiar la URL y abrirla en una nueva ventana del navegador. Debería cargarse la misma vista filtrada, lo que significa que los visitantes pueden compartirla o marcarla.
Extra: Añadir un Botón de Restablecer o Búsqueda por Palabra Clave
Una vez que tu filtro de categoría funcione, puedes añadir más elementos junto a él.
El elemento Restablecer añade un botón que borra todas las selecciones a la vez, lo cual hemos cubierto en nuestra guía sobre cómo añadir un botón de filtro de restablecimiento en WordPress.
El elemento Buscar añade un cuadro de palabras clave, para que los visitantes puedan reducir la lista escribiendo una palabra, como “playas”.
Cuando SearchWP está activo en tu sitio, ese elemento Buscar utiliza el motor de búsqueda de SearchWP en lugar del buscador predeterminado de WordPress.
Preguntas Frecuentes
1. ¿Puedo filtrar el bloque Bucle de consulta sin un plugin?
Solo desde el lado del editor. El panel Filtros del bloque Bucle de consulta te permite elegir qué categorías, etiquetas, autores o palabras clave muestra el bucle, pero los visitantes no pueden cambiar esas opciones.
Permitir a los visitantes filtrar el bucle sin un plugin significa escribir PHP personalizado con el hook query_loop_block_query_vars.
2. ¿WPFilters funciona con un Bucle de consulta que muestra productos de WooCommerce?
WPFilters se conecta al bloque Plantilla de producto de WooCommerce de la misma manera que se conecta al bucle de consulta estándar.
Puedes crear el filtro a partir de datos de productos, como Categorías de productos (product_cat) en el grupo Taxonomías bajo Origen de datos.
3. ¿Seguirán funcionando mis filtros de bucle de consulta en la siguiente página de resultados?
Sí, los filtros seleccionados permanecen en la URL cuando un visitante hace clic en la siguiente página.
La siguiente página se carga con los mismos filtros aplicados y las mismas casillas marcadas.
4. ¿Puedo filtrar dos bloques de bucle de consulta por separado en la misma página?
No, WPFilters aplica el filtro a todos los bloques de bucle de consulta de una página, por lo que dos bucles mostrarán los mismos resultados filtrados.
Si necesitas una segunda lista que permanezca sin filtrar, puedes usar el bloque Últimas entradas en su lugar.
Qué sigue...
Ahora tienes un filtro de categoría junto a tu bloque de bucle de consulta, con resultados que se actualizan sin recargar la página y una URL que tus lectores pueden compartir.
También te puede interesar ver nuestras guías sobre cómo filtrar por taxonomías múltiples en WordPress y configurar filtros en WordPress sin código.
¿Listo para que tus lectores filtren tu bucle de consulta? Puedes empezar con WPFilters aquí. Todos los planes incluyen una garantía de devolución de dinero de 14 días.
