Cómo agregar un filtro de taxonomías Ajax en la búsqueda de WordPress

La búsqueda predeterminada de WordPress presenta a los visitantes una larga lista de publicaciones sin forma de reducirla.

Cuando no pueden filtrar por categoría, etiqueta o tipo de publicación, la mayoría se rinde y regresa a Google.

Agregar un filtro de taxonomías Ajax a tu búsqueda de WordPress soluciona eso. Permite a los visitantes reducir instantáneamente los resultados por categoría, etiqueta, campo personalizado o tipo de publicación, lo que puede generar una experiencia más amigable para el usuario.

En esta guía, te mostraré cómo agregar un filtro de taxonomías Ajax a tu sitio de WordPress. Al final, podrás ofrecer a tus visitantes una experiencia de búsqueda rápida e intuitiva.

¿Por qué usar un filtro de taxonomías Ajax en la búsqueda de WordPress?

La búsqueda con Ajax es más rápida y proporciona una mejor experiencia de usuario que la función de búsqueda predeterminada de WordPress. Ajax significa que los resultados se actualizan en la página en tiempo real, sin una recarga completa de la página.

Por ejemplo, el sitio web de un concesionario de automóviles podría tener taxonomías personalizadas para tipos de vehículos, rangos de precios, modelos y más. Con los filtros Ajax, los visitantes pueden reducir rápidamente sus opciones y encontrar exactamente lo que necesitan sin recargar la página.

Puedes agregar filtros similares a tu propio sitio de WordPress para mejorar la navegación y ayudar a los usuarios a encontrar contenido más fácilmente.

Detrás de escena, las taxonomías de WordPress (como categorías y etiquetas) también facilitan a los propietarios del sitio la organización del contenido de manera estructurada.

Sin embargo, la búsqueda predeterminada de WordPress no es tan potente y no ofrece la capacidad de filtrar contenido basado en taxonomías, entre otras cosas. Si usas taxonomías personalizadas en tu sitio, la búsqueda predeterminada funciona aún peor.

Aquí es donde necesitarás un plugin de WordPress para ayudarte. En las siguientes secciones, cubriré dos métodos sobre cómo agregar un filtro de taxonomías Ajax a una búsqueda de WordPress.

El primer método mejora el algoritmo de búsqueda de WordPress para que incluya taxonomías en los resultados de búsqueda. El segundo método agrega una UI de filtro Ajax visible que se integra de forma nativa con el primer método, para que los visitantes puedan reducir los resultados con un clic.

Simplemente haz clic en los enlaces a continuación para saltar a tu sección preferida:

¿Listo? Empecemos.

Método 1: Agregar taxonomías Ajax a la búsqueda de WordPress usando SearchWP

La forma más fácil de agregar taxonomías Ajax a la búsqueda de WordPress es usando SearchWP. Es el mejor plugin de búsqueda para WordPress y facilita que los usuarios encuentren lo que buscan en tu sitio web.

Va más allá de usar solo el contenido de tus publicaciones y páginas de blog para buscar cosas. SearchWP utiliza campos personalizados, taxonomías, atributos de productos de WooCommerce, archivos de texto, tablas personalizadas y más.

Para obtener más información sobre el plugin, consulta nuestra extensa reseña de SearchWP.

Paso 1: Regístrate en SearchWP

Primero, visitemos el sitio web de SearchWP y registremos una cuenta. El plan Estándar ($99/año, 1 sitio) cubre todo lo que necesitas para este método.

Si planeas agregar una interfaz de filtro en el front-end (el Método 2 a continuación usa WPFilters, también de SearchWP), el paquete All Access ($399/año) incluye ambos plugins y te ahorra el costo de comprarlos por separado.

Después de eso, puedes descargar e instalar el plugin en tu sitio. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Tras la activación, deberás ir a SearchWP » Ajustes desde el panel de administración de WordPress. Desde aquí, simplemente introduce la clave de licencia, que puedes encontrar fácilmente en tu área de cuenta.

Paso 2: Crea tu algoritmo de búsqueda

Ahora, puedes ir a SearchWP » Algoritmo desde el panel de control de WordPress.

Desde aquí, puedes editar la relevancia de la búsqueda para tu sitio web. Por ejemplo, puedes aumentar los pesos para el título, el contenido, el slug y el extracto para ayudar a los usuarios a encontrar lo que buscan.

Para agregar taxonomías a la relevancia de la búsqueda, puedes hacer clic en el botón ‘Agregar/Eliminar Atributos’.

Esto abrirá una nueva ventana.

Puedes hacer clic en el menú desplegable 'Taxonomías' y seleccionar si deseas incluir categorías, etiquetas, formatos o todas ellas en la búsqueda de WordPress.

Después de seleccionar las taxonomías, no olvides hacer clic en el botón ‘Listo’.

Ahora deberías ver las taxonomías para el algoritmo de búsqueda de publicaciones de blog de WordPress. Puedes usar el control deslizante para aumentar su relevancia en las búsquedas de WordPress.

También puedes hacer clic en el botón ‘Editar Regla’ para determinar qué contenido puede y no puede aparecer en los resultados de búsqueda.

Por ejemplo, SearchWP incluirá todas las categorías de tu sitio web. Puedes eliminar categorías de las cuales no deseas que aparezca contenido o agregar múltiples condiciones para personalizar los resultados de búsqueda.

No olvides hacer clic en el botón ‘Listo’ cuando hayas terminado.

Ahora puedes editar el algoritmo de búsqueda para tus páginas, archivos multimedia, productos de WooCommerce y más para que aparezcan en SearchWP.

Ahora, cada vez que un visitante busque páginas y publicaciones en tu sitio web, SearchWP incluirá las taxonomías durante el proceso de búsqueda.

Método 2: Agrega una UI de filtro de frontend con WPFilters

El Método 1 hizo que el algoritmo de búsqueda de WordPress tuviera en cuenta las taxonomías en el backend. El Método 2 agrega la interfaz de filtro visible con la que los visitantes interactúan en el front-end.

WPFilters es la combinación natural: está desarrollado por el mismo equipo de SearchWP y se integra con SearchWP de inmediato. Viene con un constructor de arrastrar y soltar, por lo que puedes configurar casillas de verificación, menús desplegables, deslizadores y filtros de búsqueda sin tocar código. También es compatible con Advanced Custom Fields y cualquier tipo de publicación personalizada, lo que lo convierte en una opción sólida si has creado contenido personalizado en tu sitio.

Colocar el elemento WPFilters en la barra lateral de los resultados de búsqueda (o en cualquier área de widgets que se muestre en la página de resultados de búsqueda) permite a los visitantes acotar los resultados de SearchWP en tiempo real, sin recargar la página.

Para más detalles, puedes consultar nuestra reseña completa de WPFilters.

Paso 1: Instalación del plugin WPFilters

Para empezar, necesitarás crear una cuenta de WPFilters en el sitio web de SearchWP. WPFilters es desarrollado por el equipo de SearchWP, por lo que se integra de forma nativa con la configuración de SearchWP que acabas de completar en el Método 1.

Si compraste el paquete SearchWP All Access en el Método 1, WPFilters ya está incluido en tu suscripción: simplemente descarga el ZIP de WPFilters desde tu área de cuenta de SearchWP y salta al Paso 2.

De lo contrario, haz clic en el botón 'Obtener WPFilters ahora' en la página del producto WPFilters, elige un plan y completa el proceso de pago. El plan Estándar ($49/año, 1 sitio) cubre todo lo que necesitas para este tutorial.

Al registrarte, querrás descargar el archivo ZIP del plugin a tu computadora y copiar tu clave de licencia.

A continuación, instalarás y activarás el plugin en tu sitio de WordPress.

En tu área de administración de WordPress, ve a Plugins » Agregar Nuevo.

A continuación, puedes hacer clic en el botón 'Subir plugin'.

En el cargador de archivos, simplemente haz clic en el botón 'Elegir archivo' para subir tu archivo zip de WPFilters desde tu computadora. Haz clic en 'Instalar ahora' y luego en 'Activar' cuando aparezca para completar la instalación.

Para obtener detalles, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Una vez que el plugin esté activo, WPFilters te guiará a través de un asistente de configuración para completar la configuración inicial. Recomiendo seguir cada paso cuidadosamente para que el plugin esté listo antes de que comiences a crear tus filtros.

Hecho esto, puedes hacer clic en ‘Guardar y Completar’.

Paso 2: Configuración de filtros de taxonomía Ajax

Ahora, es hora de crear tu primer filtro.

Desde tu panel de WordPress, ve a WPFilters » Elementos y haz clic en ‘Añadir Nuevo’ para crear un nuevo elemento de filtro.

Se te pedirá que le pongas un nombre a tu elemento de filtro.

Elige algo descriptivo que te ayude a identificarlo más tarde, como “Filtro de Categoría” o “Filtro de Tipo de Producto”.

A continuación, deberás elegir un tipo de filtro.

WPFilters te ofrece varias opciones de visualización para elegir, que incluyen:

• Casillas de verificación – ideales para permitir que los usuarios seleccionen varias opciones a la vez
• Botones de radio – ideales cuando quieres que los usuarios elijan solo una opción
• Listas desplegables – una opción compacta que funciona bien cuando tienes muchas opciones de filtro
• Lista desplegable (Selección múltiple) – Permite a los usuarios elegir más de una opción de una sola lista desplegable
• Búsqueda – Añade un cuadro de búsqueda para que los usuarios puedan encontrar rápidamente lo que necesitan
• Deslizador – Ideal para seleccionar rangos, como precios u otros valores numéricos
• Botón de reinicio – Permite a los usuarios borrar todos los filtros aplicados con un solo clic

Para este tutorial, usaremos el tipo de filtro de Casilla de verificación porque permite a los usuarios seleccionar varias categorías o etiquetas al mismo tiempo. Les da la mayor flexibilidad al acotar su búsqueda.

Los otros tipos de filtro se adaptan a diferentes trabajos: usa un Deslizador para rangos de precios o valores numéricos, una Lista desplegable cuando una taxonomía tiene más de 10 términos y el espacio vertical es limitado, Botones de radio para atributos de valor único como el orden de clasificación, y Búsqueda cuando hay demasiados términos para escanear visualmente.

Una vez que estés satisfecho con el tipo de filtro, desplázate hacia abajo hasta la sección ‘Fuente de datos’ . Aquí es donde conectarás tu filtro a una taxonomía real en tu sitio.

Puedes seleccionar entre cualquiera de las taxonomías disponibles en tu sitio de WordPress, como:

• Categorías – las categorías de contenido predeterminadas de WordPress
• Etiquetas – las etiquetas predeterminadas de WordPress
• Taxonomías personalizadas – cualquier taxonomía personalizada que hayas creado para tu sitio

Te recomiendo que te tomes un momento aquí para pensar qué taxonomía tiene más sentido para tus visitantes. Elegir la correcta hará que tu filtro sea mucho más útil e intuitivo para las personas que navegan por tu sitio.

Paso 3: Personalización de tu elemento de filtro

Ahora que has configurado tu filtro y lo has conectado a una taxonomía, es hora de personalizar su apariencia y comportamiento en tu sitio. WPFilters te ofrece una buena gama de opciones de visualización para ayudarte a que el filtro coincida con el diseño de tu sitio y las necesidades de tus visitantes.

En la sección ‘Contenedor’, encontrarás opciones como:

• Título del filtro – muestra un encabezado encima de tu filtro para que los visitantes sepan por qué están filtrando.
• Elementos colapsables – permite a los visitantes expandir o colapsar el filtro, lo cual es útil si tienes varios filtros en una página.
• Ver más/menos – muestra un enlace Ver más para colapsar tu lista si es demasiado larga.
• Mostrar más después – si habilitas ‘Ver más/menos’, puedes especificar el número de elementos a mostrar inicialmente antes de mostrar el enlace.
• Diseño horizontal – organiza tus opciones de filtro una al lado de la otra en lugar de apiladas, lo que puede funcionar bien para diseños más anchos.

Adelante, activa los que quieras.

A continuación, puedes personalizar cómo se muestran los elementos de tu filtro, como por ejemplo:

• Recuento de elementos – muestra el número de publicaciones disponibles bajo cada término de filtro, para que los visitantes sepan qué esperar antes de hacer clic.
• Mostrar vacíos – elige si mostrar o no los términos de taxonomía que no tienen contenido coincidente.
• Jerárquico – activar la visualización jerárquica facilita mucho a los lectores la navegación por tu contenido, lo que puede mejorar la experiencia del usuario.

Esto es lo que ves en la pantalla:

Una vez que estés satisfecho con tu configuración, haz clic en ‘Guardar’ para almacenar la configuración de tu filtro.

Tu elemento de filtro estará listo para ser agregado a cualquier publicación o página en tu sitio de WordPress.

Si deseas crear otro elemento de WPFilters, simplemente puedes repetir el proceso.

Paso 4: Incrustación de tus filtros en WordPress

Ahora que tu elemento de filtro está guardado, es hora de agregarlo a tu sitio para que los visitantes puedan usarlo.

Para la combinación de SearchWP + WPFilters que configuramos en el Método 1, la ubicación más útil es el widget de la barra lateral en tu página de resultados de búsqueda; ahí es donde aparecen los resultados de SearchWP, y el filtro los reducirá en tiempo real a medida que los visitantes hagan clic.

WPFilters te ofrece tres opciones de ubicación:

• Widget de barra lateral (recomendado para filtrar resultados de búsqueda) – aparece en cada página que utiliza tu barra lateral, incluida la página de resultados de búsqueda.
• Bloque de Gutenberg – coloca el filtro en una página específica (bueno si también deseas páginas de archivo filtradas, como una página de destino de “Buscar por categoría”).
• Shortcode – pega en cualquier lugar donde se admita un shortcode, incluidos los constructores de páginas y los widgets clásicos.

Para agregar el filtro a tu barra lateral, ve a Apariencia » Widgets en tu área de administración.

Desde aquí, busca la barra lateral de tu tema (por ejemplo, una Barra lateral principal o Barra lateral de búsqueda) en la lista de áreas de widgets disponibles. Haz clic en ella para expandirla y ver los widgets existentes.

A continuación, haz clic en el ícono de más para agregar un nuevo widget, luego agrega el widget Elemento WPFilters.

En el panel Configuración del elemento, selecciona tu filtro del menú desplegable.

Puedes agregar múltiples widgets de filtro si deseas ofrecer más opciones de filtrado (un widget por taxonomía funciona bien; por ejemplo, un filtro de Categoría y un filtro de Etiqueta uno al lado del otro).

Una vez que hayas seleccionado tu filtro, haz clic en ‘Actualizar’ o ‘Publicar’ para guardar tus cambios.

Tu filtro de taxonomía Ajax ahora aparecerá en la barra lateral de tu página de resultados de búsqueda, permitiendo a los visitantes acotar los resultados de SearchWP en tiempo real.

Consejos adicionales: Más cosas que puedes hacer con SearchWP

Una vez que hayas agregado el filtrado de taxonomías Ajax, hay aún más formas de mejorar la búsqueda de tu WordPress con SearchWP. Aquí hay algunas características adicionales que vale la pena revisar:

🌫️ Usa la búsqueda difusa para una mejor coincidencia

Por defecto, la búsqueda de WordPress solo busca coincidencias exactas. Eso significa que si un visitante escribe mal una palabra o usa una frase ligeramente diferente, es posible que no encuentre lo que busca.

La búsqueda difusa resuelve ese problema mostrando resultados que son lo suficientemente cercanos, como al captar errores tipográficos o formas de palabras similares. Es una forma sencilla de personalizar la búsqueda de WordPress para que sea más inteligente.

Consulta nuestra guía sobre cómo agregar búsqueda difusa en WordPress para más detalles.

📄 Haz que los archivos PDF sean buscables

Si compartes archivos PDF en tu sitio, como manuales, libros electrónicos o folletos, SearchWP puede indexar el contenido dentro de esos archivos. Esto significa que cuando alguien usa tu barra de búsqueda, los resultados pueden incluir lo que está escrito dentro de los PDF, no solo los títulos de los archivos.

Es especialmente útil para sitios de negocios, blogs con muchos recursos e incluso escuelas.

Obtén más información en nuestra guía sobre cómo agregar indexación y búsqueda de PDF en WordPress.

🛍️ Mejora la búsqueda de productos en WooCommerce

Si tienes una tienda en línea, SearchWP también puede mejorar la búsqueda de tus productos.

En lugar de depender de la búsqueda predeterminada de WooCommerce, puedes crear una búsqueda de productos más inteligente que priorice títulos, categorías, etiquetas o incluso campos personalizados. Esto ayuda a los clientes a encontrar el producto adecuado más rápido, y eso puede generar más ventas.

Consulta nuestra guía sobre cómo hacer una búsqueda inteligente de productos en WooCommerce.

Y para más consejos y trucos, puedes consultar nuestra guía sobre cómo mejorar la búsqueda de WordPress con SearchWP.

Preguntas frecuentes sobre filtros de taxonomía Ajax en WordPress

Antes de terminar, aquí hay algunas preguntas comunes que nuestros lectores hacen sobre cómo agregar filtros de taxonomía Ajax en WordPress.

¿Necesito habilidades de codificación para agregar filtros Ajax en WordPress?

No, no necesitas ninguna habilidad de codificación. Ambos métodos anteriores funcionan sin código: SearchWP se configura a través de su panel de configuración, y WPFilters utiliza un constructor de arrastrar y soltar más un bloque o widget de Gutenberg.

¿Necesito tanto SearchWP como WPFilters, o puedo usar solo uno?

Hacen trabajos diferentes. SearchWP hace que el motor de búsqueda de WordPress sea consciente de las taxonomías en el backend. WPFilters agrega la interfaz de usuario de filtro visible en el frontend. Puedes usar SearchWP solo si solo quieres mejores resultados de búsqueda, o combinar ambos para la experiencia completa de filtrado Ajax. El paquete All Access incluye ambos a un solo precio.

¿Puedo usar filtros de taxonomía en productos de WooCommerce?

Sí, los filtros de taxonomía funcionan muy bien para tiendas WooCommerce. Puedes permitir que los clientes filtren productos por categorías, etiquetas, atributos (como tamaño o color) y más, similar a la experiencia de filtrado en grandes sitios de comercio electrónico.

¿Cuál es la diferencia entre el filtrado Ajax y el filtrado regular?

Con el filtrado Ajax, los resultados se actualizan instantáneamente sin recargar la página. El filtrado regular recarga toda la página cada vez que un usuario selecciona una opción, lo que puede sentirse más lento.

¿Agregar filtros Ajax ralentizará mi sitio web?

No, no necesariamente. En la mayoría de los casos, los filtros Ajax mejoran la experiencia del usuario al cargar solo los resultados filtrados en lugar de recargar toda la página. Solo asegúrate de estar usando un plugin bien optimizado.

Mejora tu sitio de WordPress con búsqueda y filtros avanzados

Espero que este artículo te haya ayudado a agregar un filtro de taxonomía con potencia Ajax a la búsqueda de WordPress en tu sitio.

A continuación, también te recomendamos consultar nuestras guías sobre:

• Cómo permitir que los usuarios filtren publicaciones y páginas en WordPress
• Cómo crear un portafolio filtrable en WordPress
• Cómo configurar el filtro de productos de WooCommerce
• Cómo solucionar problemas de búsqueda de WordPress que no funciona
• Cómo ver analíticas de búsqueda en WordPress

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.