La forma más fácil de agregar búsqueda en vivo
Publicado: 2023-04-21¿Está buscando el mejor complemento de WordPress de búsqueda AJAX?
Agregar la búsqueda en vivo con tecnología AJAX a WordPress es una excelente manera de mejorar la experiencia del usuario (UX) de su sitio y aumentar la capacidad de descubrimiento del contenido.
En esta publicación, aprenderá paso a paso cómo configurar la búsqueda AJAX en WordPress utilizando una solución completamente libre de código.
De hecho, puede estar listo y funcionando en solo unos minutos, mientras aún tiene acceso a la funcionalidad para refinar cómo funciona la búsqueda AJAX de su sitio.
Todo lo que necesitas hacer es:
- Instale el complemento Otter Blocks.
- Agregue el bloque de búsqueda donde desea que aparezca su cuadro de búsqueda de AJAX WordPress y habilite la alternancia de búsqueda en vivo.
- Personalice la funcionalidad de búsqueda en vivo de AJAX según sea necesario, como configurarla para buscar solo publicaciones de blog pero no páginas.
Si desea ir directamente al tutorial, puede hacer clic en este enlace de salto.
De lo contrario, comenzaremos con un resumen rápido de cómo funciona la búsqueda AJAX y algunas de las diferentes formas de configurar la funcionalidad de búsqueda AJAX de WordPress.
¿Qué es la búsqueda de AJAX para WordPress?
Es probable que utilice la función de búsqueda en vivo en el día a día. Por ejemplo, todos los principales motores de búsqueda y sitios de videos como YouTube brindan este tipo de función.
Comienza a escribir en el cuadro de búsqueda e instantáneamente ve una lista de consultas sugeridas (o resultados sugeridos), sin necesidad de cargar la página.
Si bien WordPress tiene su propia barra de búsqueda, no usa AJAX de manera predeterminada. En su lugar, los usuarios ingresan un término de búsqueda en el cuadro, presionan Intro y se carga una nueva página con resultados.
Para agregar búsqueda en vivo a su sitio, necesitará la ayuda de un complemento, de eso se trata esta publicación.
Los beneficios de la búsqueda AJAX en vivo en WordPress
Cualquier cosa que pueda introducir que mejore la UX ofrecerá valor a su sitio. Sin embargo, la búsqueda en vivo de AJAX para WordPress puede brindarles a sus usuarios algo especial:
- Puede proporcionar una manera para que los usuarios "auto-atiendan" sus necesidades. Tendrán una forma rápida de buscar en todo su sitio y encontrar la página correcta.
- Los elementos interactivos pueden proporcionar una mayor conexión entre su sitio y los usuarios. Esto se debe a que puede proporcionar resultados de búsqueda relevantes más rápido y sin necesidad de hacer clic en botones adicionales.
- También puede reducir al mínimo los tiempos de carga de la página, ya que la búsqueda AJAX en vivo no necesita realizar más solicitudes HTTP ni cargar otras páginas.
Por qué una solución de codificación manual para la búsqueda en vivo podría no ser la mejor
Dado que AJAX usa JavaScript, podría considerar "hacer su propia solución" usando el lenguaje de programación.
Esta es una buena idea en teoría, pero no será el mejor método para agregar la búsqueda AJAX en vivo a WordPress. Este es el por qué:
- Primero, solo puede crear una solución que sea tan buena como sus habilidades. Si no tiene conocimientos de JavaScript de nivel experto, esto se mostrará en los resultados.
- Además, también deberá conocer la estructura de archivos de WordPress, la estructura de la plantilla y mucho más. Hay muchos engranajes que componen la rueda de WordPress.
- Incluso si tiene las habilidades necesarias para codificar una solución de búsqueda en vivo, también necesitará tiempo y dinero para desarrollarla e implementarla. Esto puede ser difícil de conseguir, especialmente si el desarrollo no es su principal empleo.
- Si necesita solucionar su solución manual, esto puede consumir más tiempo, dinero y recursos. Podrías estar mordiendo más de lo que puedes masticar.
En cambio, hay una mejor manera de implementar la funcionalidad correcta dentro de WordPress: los complementos. Echemos un vistazo a cómo funciona esto a continuación.
Use un complemento de WordPress de búsqueda AJAX en su lugar
Para la mayoría de las personas, usar un complemento de WordPress de búsqueda AJAX es una opción mucho mejor.
Si bien hay muchos complementos de WordPress de búsqueda AJAX para elegir, no todos son iguales. Por ejemplo, algunos complementos están limitados cuando se trata de opciones de estilo o de controlar en qué contenido buscar.
Por esa razón, vamos a usar el complemento Otter Blocks para este tutorial.
Como sugiere el nombre, Otter Blocks es una colección de elementos para el editor de bloques nativo de WordPress.
En términos de la funcionalidad de búsqueda de AJAX, la característica más relevante es el bloque de búsqueda.
Te permite elegir en qué tipos de publicaciones buscar y personalizar completamente el diseño de tu cuadro de búsqueda. Puede agregarlo a cualquier parte de su sitio, incluidas publicaciones, páginas, barras laterales y más.
Más allá de la funcionalidad de búsqueda de WordPress de AJAX, Otter Blocks le brinda algunas formas adicionales de darle vida a sus diseños y diseños:
- Puede agregar encabezados con un mayor nivel de personalización que el que obtendrá de manera predeterminada.
- Existe la opción de crear una sección receptiva que incluye personalización avanzada y espacio para seis columnas.
- Podrás agregar animaciones asombrosas, como efectos Lottie y cartas invertidas.
- Si vende productos a través de su sitio, Otter Blocks incluye tablas de precios, la capacidad de implementar botones "agregar al carrito", horarios comerciales y mucho más.
De hecho, Otter Blocks brinda funcionalidad adicional para todos los Blocks que se ofrecen, incluso los nativos. Por ejemplo, puede establecer condiciones de visibilidad, CSS personalizado y más desde la interfaz típica del Editor de bloques.
Cómo usar Otter Blocks para agregar búsqueda AJAX en vivo a WordPress
Solo necesitará unos pocos pasos para configurar Otter Blocks para agregar la búsqueda AJAX en vivo a WordPress. Comencemos con el proceso de instalación:
- Instalar y activar Otter Blocks
- Habilite la búsqueda AJAX en vivo para WordPress dentro de la configuración de Otter Blocks
- Modifique la configuración para refinar la experiencia de búsqueda en la parte frontal de su sitio
1. Instala y activa Otter Blocks
En primer lugar, deberá instalar Otter Blocks y activarlo para su sitio web. Hay muchas maneras de hacer esto, pero repetiríamos lo que ya está en nuestro otro artículo en el blog de ThemeIsle.
Esto le mostrará cómo instalar las versiones gratuita y premium de Otter Blocks. Sin embargo, para esta publicación, necesitará la versión premium, ya que le brinda la funcionalidad de búsqueda en vivo.
2. Habilite la búsqueda AJAX en vivo para WordPress dentro de la configuración de Otter Blocks
Una vez que haya instalado el complemento, use el insertador de bloques para agregar el bloque de búsqueda de Otter Blocks.
Después de hacer esto, agregará un campo de formulario y un botón a su diseño de página.
Esto implementa la funcionalidad de búsqueda principal, pero no es una búsqueda AJAX en vivo en WordPress.
En su configuración predeterminada, actuará como lo hace la búsqueda típica de WordPress.
Para habilitar la función de búsqueda AJAX de WordPress, active la opción Habilitar búsqueda en vivo en la barra lateral derecha:
3. Modifique la configuración para refinar la experiencia de búsqueda en la parte frontal de su sitio
Una vez que tenga la funcionalidad de búsqueda en vivo en su sitio, puede refinarla de varias maneras.
Por supuesto, hay una serie de opciones cosméticas y de UX.
Por ejemplo, puede cambiar la posición del botón, ya sea que use una etiqueta para el cuadro de búsqueda y modificar los colores, las animaciones y los bordes de la sección de búsqueda:
A partir de ahí, también puede darle a la búsqueda sus límites de dónde buscar en su sitio eligiendo en qué tipos de publicaciones buscar.
Para esto, usará el cuadro Buscar en en la barra lateral derecha:
Esto le permite agregar "entidades" donde desea que opere la búsqueda.
Por ejemplo, puede elegir buscar solo dentro del contenido de su publicación o entre los productos de su tienda.
Si deja este campo vacío, Otter Blocks buscará en todo el contenido de su sitio.
Configure la funcionalidad de búsqueda de AJAX de WordPress hoy
Si puede proporcionar una mayor interactividad en su sitio web, esto podría traducirse en una mejor UX en general. La búsqueda en vivo de AJAX en WordPress es una forma fantástica de ofrecer a los usuarios la posibilidad de encontrar lo que necesitan en tiempo real.
Sin embargo, WordPress no ofrece esto por defecto. En su lugar, puede usar Otter Blocks para agregar esto a su sitio. No hay código involucrado y obtienes mucha más funcionalidad que solo la búsqueda AJAX en vivo.
Si bien Otter Blocks es un complemento gratuito, la versión premium brinda la capacidad de configurar la búsqueda AJAX en vivo en WordPress, entre otras opciones.
¿Todavía tiene alguna pregunta sobre cómo configurar la búsqueda en vivo de AJAX en WordPress? ¡Pregúntanos en los comentarios a continuación!