Blog de SearchWP

Tutoriales, consejos y recursos de WordPress para ayudarte a hacer crecer tu negocio

Cómo agregar una búsqueda en vivo a WordPress gratis

Imagínese esto: un visitante llega a su sitio, escribe una pregunta en la barra de búsqueda y presiona Enter. Esperan a que la página se recargue. Escanean una lista simple de resultados. Luego se van.

Hemos visto este patrón repetirse en innumerables sitios, y lo frustrante es que la mayoría de los propietarios de sitios no saben que está sucediendo.

El problema no es que falte su contenido. El problema es que WordPress no tiene una búsqueda en vivo incorporada.

Cada formulario de búsqueda predeterminado funciona de la misma manera: el visitante envía una consulta, WordPress recarga la página y aparecen los resultados. Es en esa recarga donde pierde a la gente.

La buena noticia es que puede agregar búsqueda en vivo a WordPress de forma gratuita, sin claves API, sin cuenta en la nube y sin tocar una sola línea de código.

En este artículo, le mostraremos cómo agregar búsqueda en vivo a WordPress de forma gratuita.

¿Qué es la búsqueda en vivo en WordPress?

La búsqueda en vivo, también llamada búsqueda AJAX o búsqueda mientras escribe, muestra los resultados en un menú desplegable debajo del formulario de búsqueda a medida que el visitante escribe.

No hay tecla Enter, no hay recarga de página, no hay esperas. Los resultados se actualizan con cada pulsación de tecla.

Por ejemplo, simplemente escriba "con" en una barra con búsqueda en vivo habilitada, y vería inmediatamente opciones como "Contáctenos", "Guía de marketing de contenidos" y "Silla de contorno" aparecer debajo de la entrada en tiempo real.

Para los visitantes, la experiencia resulta familiar porque así es como funciona la búsqueda en Google, YouTube y la mayoría de los sitios web modernos. Cuando su sitio ofrece la misma retroalimentación instantánea, es más probable que los visitantes sigan buscando en lugar de rebotar.

Por qué su sitio de WordPress necesita búsqueda en vivo

Agregar una búsqueda en vivo a su sitio web no se trata solo de mantenerse al día con las tendencias tecnológicas.

Aquí hay algunas formas en que la búsqueda en vivo le permite servir mejor a sus clientes y le ayuda a mantenerse por delante de sus competidores:

  1. Resultados rápidos: Los usuarios ven los resultados al instante mientras escriben, lo que acelera significativamente el proceso de búsqueda. Esto les permite saber si tienes lo que buscan. Al respetar su tiempo, valoras a tus clientes.
  2. Reducción de las tasas de rebote: Los resultados rápidos y relevantes mantienen a los usuarios comprometidos e interesados. Este compromiso reduce las posibilidades de que abandonen tu sitio por frustración, disminuyendo así las tasas de rebote de tu sitio.
  3. Aumento de conversiones: Las búsquedas más rápidas ayudan a los usuarios a tomar decisiones más rápidamente. Esta velocidad puede conducir a tasas de conversión más altas, ya que es más probable que los usuarios completen compras o registros sin dudarlo.
  4. Mejora de la accesibilidad: La búsqueda en vivo es particularmente beneficiosa para los usuarios que pueden no recordar los términos exactos o la ortografía correcta de lo que buscan sin la consulta completa. Esto les facilita y acelera la búsqueda de sus artículos deseados.
  5. Mejora de la experiencia del usuario: La búsqueda en vivo transforma la experiencia de búsqueda al proporcionar un viaje interactivo y receptivo. Este enfoque moderno hace que tu sitio web se sienta más dinámico y fácil de usar.
  6. Las herramientas de pago crean costos y complejidad innecesarios: Hemos trabajado con muchos propietarios de sitios que miraron servicios como Algolia o ElasticPress y se alejaron porque la configuración de la API, los precios basados en el uso y el almacenamiento de datos externo se sintieron exagerados para sus necesidades. Sus datos deben permanecer en su propio servidor.

¿Listo para solucionar esto? Veamos cómo.

Cómo añadir búsqueda en vivo a WordPress gratis

Una vez que decida agregar búsqueda en vivo a su sitio web, ¡el resto es fácil! Todo lo que necesita hacer es usar el complemento gratuito SearchWP Live Ajax Search.

Es un potente complemento de búsqueda de WordPress que hace que la compleja tarea de agregar búsqueda en vivo a WordPress sea muy fácil y amigable para principiantes.

Cualquiera puede agregar búsqueda en vivo a su sitio web de WordPress utilizando el complemento Live Ajax Search con solo unos pocos clics; no se requieren conocimientos de codificación.

Veamos cómo agregar búsqueda en vivo a WordPress de forma gratuita, paso a paso.

Paso 1: Instalar el plugin SearchWP Live Ajax Search

Para comenzar, vaya a Complementos » Agregar nuevo complemento desde su panel de WordPress.

Desde aquí, escriba “SearchWP Live Ajax Search” en el campo de búsqueda y encuentre el plugin de SearchWP.

Cómo añadir búsqueda en vivo a WordPress gratis: Instalar Búsqueda Ajax en Vivo Paso 2

Haga clic en Instalar ahora y, a continuación, haga clic en Activar una vez que finalice la instalación.

¿No está seguro de cómo instalar un plugin? Consulte esta guía para principiantes sobre cómo instalar un plugin de WordPress.

Cómo añadir búsqueda en vivo a WordPress gratis: Instalar Búsqueda Ajax en Vivo Paso 3

Una vez que el plugin esté activo, verá la página de configuración.

Notará que el interruptor Activar búsqueda en vivo estará activado por defecto.

Cómo añadir búsqueda en vivo a WordPress gratis: Modificar Resultados de Búsqueda Paso 1

Paso 2: Crear un formulario de b extit{usqueda}

A continuación, es hora de crear su primer formulario de búsqueda en vivo.

Para empezar, puede ir a SearchWP » Formularios de búsqueda desde el panel de WordPress.

Cómo añadir búsqueda en vivo a WordPress gratis: Crear Formulario de Búsqueda en Vivo Paso 1

Aquí, puede agregar nuevos formularios o seleccionar formularios existentes.

Para empezar, haga clic en Añadir nuevo para crear su primer formulario de búsqueda en vivo.

Cómo añadir búsqueda en vivo a WordPress gratis: Crear Formulario de Búsqueda en Vivo Paso 2

Después de eso, dé a su formulario de búsqueda un nombre adecuado. En este caso, llamémoslo “Búsqueda de página de inicio”.

Luego, puede elegir un tema para su formulario de búsqueda entre los temas de diseño predefinidos.

Cómo añadir búsqueda en vivo a WordPress gratis: Crear Formulario de Búsqueda en Vivo Paso 3

Después de seleccionar un diseño, puede editar aún más el formulario.

Simplemente personalice el estilo del formulario de búsqueda para que coincida con la estética de su sitio. Puede ajustar todo, desde los colores hasta el tamaño de las fuentes.

Cómo añadir búsqueda en vivo a WordPress gratis: Crear Formulario de Búsqueda en Vivo Paso 4

Cuando haya terminado, haga clic en Guardar para finalizar la creación de su formulario de búsqueda en vivo.

Eso es todo, su formulario de búsqueda está listo.

Cómo añadir búsqueda en vivo a WordPress gratis: Crear Formulario de Búsqueda en Vivo Paso 5

Consulte nuestra guía sobre cómo añadir un cuadro de búsqueda a una página de WordPress para obtener un tutorial completo.

Paso 3: Personalizar la apariencia de los resultados de b extit{usqueda}

También puede personalizar la apariencia de los resultados de búsqueda para asegurarse de que aparezcan como usted desea.

Para ello, simplemente navegue a SearchWP » Ajustes desde el panel de WordPress.

Cómo añadir búsqueda en vivo a WordPress gratis: Modificar Resultados de Búsqueda Paso 1

A continuación, puede desplazarse hacia abajo para elegir un tema.

SearchWP ofrece 4 temas de diseño predefinidos para la apariencia de los resultados.

Cómo añadir búsqueda en vivo a WordPress gratis: Modificar Resultados de Búsqueda Paso 2

A continuación, puede desplazarse hacia abajo hasta la sección Resultados.

Aquí, puede establecer la posición del panel de resultados en relación con el formulario de búsqueda, ajustar el número de resultados mostrados por página, establecer el número mínimo de caracteres antes de que se active la búsqueda en vivo y personalizar el mensaje que ven los visitantes cuando no se encuentran resultados.

La sección Estilo personalizado de arriba controla el estilo visual de cada resultado: tamaño de imagen, color del título y (si WooCommerce o EDD están activos) estilo de precio y añadir al carrito.

Cómo añadir búsqueda en vivo a WordPress gratis: Modificar Resultados de Búsqueda Paso 3

Cuando haya terminado, simplemente desplácese de nuevo a la parte superior.

Luego haga clic en “Guardar” para aplicar los cambios.

Cómo añadir búsqueda en vivo a WordPress gratis: Modificar Resultados de Búsqueda Paso 4

Paso 4: Mostrar el formulario de búsqueda

Ahora que ha creado su primer formulario de búsqueda en vivo y ha personalizado la apariencia de los resultados. El siguiente paso es mostrarlo en su sitio web.

Hay varias formas de añadir formularios de búsqueda a su sitio web. Veamos cómo añadir un formulario de búsqueda en vivo a WordPress utilizando el bloque de Gutenberg.

Para ello, edite la página donde desea mostrar el formulario de búsqueda.

Añadir el bloque de formularios de SearchWP en WordPress

Luego, busque la ubicación deseada y haga clic en el botón + Añadir bloque. Después de eso, busque el bloque “SearchWP Form” y selecciónelo.

A continuación, deberá elegir el formulario que creó para mostrar en esta ubicación en el menú desplegable “Seleccionar un formulario”.

Elige tu formulario en el desplegable

Cuando termine, simplemente haga clic en el botón Guardar o Actualizar y haga que el formulario de búsqueda en vivo esté disponible para sus visitantes.

Ahora confirmemos que todo funciona. Para ello, puede visitar el front-end de su sitio y hacer clic en cualquier formulario de búsqueda.

Comience a escribir una consulta parcial y observe cómo aparece el menú desplegable de resultados debajo del campo de entrada a medida que escribe. Debería ver que los títulos de las publicaciones y las páginas se actualizan en tiempo real con cada carácter que agrega.

¡Aqu extit{i} est extit{a} el formulario de b extit{usqueda en vivo} en acci extit{on}!

Cómo añadir búsqueda en vivo a WordPress gratis: Así se ve la búsqueda en vivo finalmente

Cuando actualice a SearchWP, puede crear múltiples Motores de Búsqueda que muestren contenido diferente y asignar un motor diferente a cada Formulario de Búsqueda en su sitio.

Extra: Potencie su búsqueda en vivo con SearchWP

SearchWP Live Ajax Search utiliza la consulta de búsqueda nativa de WordPress, que coincide con los títulos de las publicaciones, los extractos y el contenido.

Si un visitante busca un SKU de producto, un valor de campo personalizado o contenido dentro de un PDF, el plugin gratuito no lo encontrará.

Ahí es donde entra el plugin completo de SearchWP.

La instalación de SearchWP actualiza los resultados de búsqueda en vivo a un motor de relevancia personalizado que busca campos personalizados, atributos de productos de WooCommerce, etiquetas, categorías, PDF y más.

Los sitios que ejecutan WooCommerce pueden agregar la extensión de WooCommerce para buscar también atributos y SKUs de productos.

Cambiar la configuración del nuevo motor

Para obtener el tutorial completo de actualización, consulte nuestra guía sobre cómo agregar búsqueda de autocompletado en vivo a WordPress.

Preguntas frecuentes sobre la búsqueda en vivo en WordPress

1. ¿La búsqueda en vivo ralentiza mi sitio de WordPress?

SearchWP Live Ajax Search utiliza solicitudes AJAX ligeras que se limitan, lo que significa que solo se activan después de que el visitante pausa la escritura durante un breve momento. Cada solicitud recupera solo los resultados de la búsqueda, no una página completa. En la mayoría de los sitios de WordPress, la carga añadida por la búsqueda en vivo es insignificante en comparación con la recarga de una página completa, y la experiencia se siente más rápida para los visitantes, aunque todavía hay una solicitud al servidor involucrada.

2. ¿La búsqueda en vivo funcionará con mi tema de WordPress existente?

Sí. Según nuestras pruebas, funciona con Elementor, Divi, Astra, Kadence, GeneratePress y la mayoría de los otros temas y constructores de páginas populares directamente. No se requieren ediciones del tema.

3. ¿Puedo mostrar productos de WooCommerce en el menú desplegable de búsqueda en vivo?

Sí. Cuando WooCommerce está activo en su sitio, SearchWP Live Ajax Search lo detecta automáticamente. Para una configuración completa de búsqueda de WooCommerce, consulte nuestra guía sobre cómo agregar un widget de búsqueda personalizado de WooCommerce.

4. ¿Cuál es la diferencia entre el plugin gratuito y SearchWP?

SearchWP Live Ajax Search es gratuito y proporciona menús desplegables de búsqueda en vivo impulsados por la consulta de búsqueda nativa de WordPress, que coincide con los títulos y el contenido de las publicaciones. El plugin de pago SearchWP actualiza esos resultados a un motor de relevancia personalizado que también busca campos personalizados, taxonomías y documentos PDF en el nivel Estándar. La adición de la extensión WooCommerce (Pro y superior) amplía la búsqueda a los atributos y SKUs de los productos de WooCommerce.

5. ¿Cómo agrego una barra de búsqueda en vivo a la cabecera o al menú de mi WordPress?

Añade un widget de formulario de búsqueda a un área de widget que aparece en tu encabezado, o coloca un bloque de formulario de búsqueda en tu plantilla de encabezado usando el editor de bloques. Una vez que un formulario de búsqueda esté presente en cualquier lugar de la página, SearchWP Live Ajax Search lo mejorará con un menú desplegable en vivo automáticamente, sin configuración adicional.

¡Eso es todo! Has añadido búsqueda en vivo a tu sitio de WordPress de forma gratuita, sin claves API, sin cuentas en la nube y sin código. Los visitantes ahora pueden obtener resultados instantáneos de cualquier formulario de búsqueda en tu sitio en el momento en que comiencen a escribir.

Esperamos que este artículo te haya ayudado a aprender cómo añadir búsqueda en vivo a WordPress de forma gratuita. También puedes consultar nuestras guías sobre cómo crear formularios de búsqueda avanzados en WordPress y cómo personalizar la página de resultados de búsqueda de WordPress.

¿Listo para llevar tu búsqueda en vivo más allá? Puedes empezar con SearchWP aquí.

Cree hoy mismo una mejor experiencia de búsqueda en WordPress

No vuelva a perder visitantes por resultados de búsqueda inútiles. SearchWP facilita la creación de su propia búsqueda inteligente en WordPress.

Obtén SearchWP Ahora
Icono de múltiples motores de búsqueda