Blog de SearchWP

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

Cómo agregar búsqueda Ajax en vivo a tu WordPress sin un plugin

¿Buscas una forma de añadir una búsqueda Ajax en vivo a tu sitio de WordPress sin un plugin?

Te permitirá ofrecer resultados de búsqueda instantáneos a tus visitantes y mejorar su experiencia de usuario.

En esta guía, hablaremos sobre cómo puedes añadir una búsqueda en vivo a tu sitio sin un plugin y las desventajas de este método.

Aquí tienes una tabla de contenido para ayudarte a navegar:

Por qué añadir búsqueda en vivo a tu sitio

Añadir una búsqueda en vivo a tu sitio es útil por varias razones.

Primero, es mucho más conveniente para tus visitantes obtener resultados de búsqueda instantáneos en lugar de verlos en una página nueva y separada donde WordPress los muestra por defecto.

Les permite ahorrar tiempo y averiguar más rápido si el contenido que buscan está en tu sitio o no.

búsqueda en vivo en un sitio

Segundo, te ayuda a aumentar tus páginas vistas, ya que los visitantes que han tenido una experiencia de búsqueda positiva en tu sitio son más propensos a usarlo de nuevo.

También es una excelente manera de atraer más tráfico de los motores de búsqueda, ya que Google presta mucha atención a la duración media de la sesión en un sitio.

Pero añadir una búsqueda en vivo sin un plugin puede ser un objetivo desafiante. Echemos un vistazo más de cerca a por qué esta no es la mejor opción.

Desventajas de añadir búsqueda Ajax en vivo sin un plugin

El principal problema al añadir una búsqueda en vivo a tu sitio sin un plugin es que implica editar el código de tu tema.

Este enfoque tiene un par de desventajas serias que debes tener en cuenta:

  • Requiere conocimientos de codificación. Debes tener experiencia en codificación y un profundo conocimiento de cómo funciona WordPress para editar el código de tu tema con éxito.
  • Lleva más tiempo. En contraste con el uso de un plugin, editar el código de tu tema lleva bastante tiempo para averiguar qué cambios necesitas hacer y dónde ponerlos.
  • No es fiable. Puedes perder fácilmente todas las personalizaciones de tu código si actualizas tu tema o la versión de WordPress.
  • No es conveniente. Un plugin te da mucha más flexibilidad, ya que puedes habilitar y deshabilitar rápidamente las funciones que necesitas según tus necesidades.

Por lo tanto, si no eres un usuario experimentado de WordPress o un desarrollador web, es mejor que utilices otra forma de añadir una búsqueda en vivo a tu sitio.

Una vez que hayamos aclarado eso, veamos cómo puedes añadir una búsqueda en vivo a tu sitio sin editar los archivos de tu tema usando un plugin.

Método 1: Añadir Búsqueda Ajax en Vivo Usando un Plugin

La forma más fácil de añadir una búsqueda Ajax en vivo a tu sitio es usar un plugin como SearchWP.

SearchWP

SearchWP es el mejor plugin de búsqueda de WordPress del mercado, con más de 50.000 instalaciones activas.

Con él, puedes habilitar la búsqueda en vivo en tu sitio en solo unos pocos clics, sin necesidad de codificación.

Y esa es solo una de las muchas otras características de SearchWP. El propósito principal de este plugin es darte control total sobre la búsqueda en tu sitio.

Por ejemplo, usándolo, puedes cambiar el orden de los resultados de búsqueda, hacer que las etiquetas de las entradas, categorías y campos personalizados sean buscables, crear formularios de búsqueda personalizados y más.

Estas son otras características de SearchWP que ayudarán a que su negocio crezca:

Con eso, veamos cómo puede habilitar la búsqueda en vivo en su sitio usando SearchWP.

Paso 1: Instalar y Activar SearchWP en tu Sitio

Para comenzar, deberá visitar el sitio web de SearchWP y obtener su copia de SearchWP.

Una vez hecho esto, vaya a su panel de SearchWP y haga clic en la pestaña Descargas.

Descargar el plugin SearchWP desde el área de cuenta

Luego, presione el botón Descargar SearchWP y guarde el archivo ZIP del plugin en su computadora. Después de descargarlo, también debe copiar su clave de licencia de SearchWP en la misma página. La necesitará más adelante para activar el plugin en su sitio.

Ahora, deberá cargar el archivo ZIP de SearchWP en su sitio e instalar el plugin. Consulte el tutorial sobre cómo instalar un plugin de WordPress si necesita un recordatorio sobre cómo hacerlo.

Una vez que el plugin esté activo, verás la pantalla de bienvenida y el asistente de configuración de SearchWP. Haz clic en el botón 'Iniciar Asistente de Incorporación' y sigue las instrucciones en pantalla.

Asistente de incorporación SearchWP

Una vez que active su licencia, estará listo para pasar al siguiente paso e instalar la extensión de Búsqueda en Vivo.

Paso 2: Instalar la extensión de Búsqueda en Vivo de SearchWP

La instalación de esta extensión de SearchWP le permite habilitar la búsqueda Ajax en vivo en su sitio en unos pocos clics sin escribir una sola línea de código.

Para comenzar, puede navegar a SearchWP » Extensiones desde su panel de WordPress.

Desde aquí, deberá encontrar la extensión Búsqueda en Vivo y hacer clic en el botón Instalar.

Instalar extensión de búsqueda en vivo

Eso es todo. Acaba de agregar con éxito una búsqueda Ajax en vivo a su sitio.

Veamos cómo funciona.

Para ello, ve a tu sitio y realiza una búsqueda.

Por ejemplo, así es como se ve una búsqueda Ajax en vivo de SearchWP en nuestro sitio de prueba:

cómo añadir búsqueda en vivo a tu sitio de WordPress sin un plugin

También puede consultar nuestra guía sobre cómo agregar búsqueda en vivo a WordPress de forma gratuita.

Método 2: Añadir Búsqueda Ajax en Vivo Sin un Plugin

Para agregar una búsqueda Ajax en vivo a su sitio sin usar un plugin, debe tener en cuenta que necesitará agregar mucho código personalizado y realizar cambios en los archivos de su tema.

Ahora, si no es desarrollador, no recomendamos este método. En su lugar, puede seguir el primer método y usar SearchWP para agregar la búsqueda Ajax en vivo.

Antes de comenzar, recomendamos crear un tema hijo de su tema actual que utiliza en su sitio. Le permitirá cambiar rápidamente a su tema principal si hace algo mal y bloquea su sitio.

Puede consultar este tutorial sobre cómo crear un tema hijo de WordPress si necesita ayuda con eso.

También es una buena práctica hacer una copia de seguridad de tu sitio antes de empezar a editar, por si acaso. Hay muchos plugins de copia de seguridad de WordPress entre los que puedes elegir, como Duplicator

A continuación, necesitarás añadir JavaScript, PHP y CSS para configurar la búsqueda Ajax. 

Para ayudarte, aquí tienes una lista de las funcionalidades que necesitarás en tu sitio de WordPress:

  • Integra los resultados en vivo en los formularios de búsqueda de tu sitio.
  • Realiza peticiones Ajax para obtener los resultados.
  • Muestra los resultados en un menú desplegable, para que los visitantes puedan verlos mientras escriben.
  • Maneja la interacción del usuario con los resultados de la búsqueda. Por ejemplo, necesitarás moverte por los resultados con las flechas del teclado, cerrar el desplegable si el usuario hace clic fuera de él o pulsa la tecla ESC.
  • Añade código PHP para manejar la petición Ajax, ejecutar la consulta y devolver los resultados, y enviar una respuesta Ajax.
  • CSS para dar estilo al desplegable y a los resultados de búsqueda que aparecerán.

Dado que esto requiere desarrollo personalizado, es posible que quieras contratar a un desarrollador o un servicio profesional como WPBeginner Pro Services.

De esta manera, podrás explicar tus requisitos y obtener una solución personalizada para tu sitio de WordPress.

Permitirá a tus visitantes obtener resultados de búsqueda al instante y aumentará el número de tus visitas a páginas.

Esperamos que este artículo te haya ayudado a aprender cómo añadir búsqueda Ajax en vivo a tu WordPress sin un plugin. También te pueden interesar nuestras guías sobre cómo buscar entradas por etiquetas en WordPress y cómo excluir categorías de la búsqueda de WordPress.

¿Quieres añadir búsqueda en vivo a tu sitio en unos pocos clics sin programar? 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