Cómo añadir un buscador en tiempo real a WordPress

20/06/2020

Muy buenas a todos y bienvenidos un nuevo sábado a otro tutorial de WordPress en unboxpress.com. El día de hoy vamos a tener un tutorial practico, en el que vamos a aprender a añadir un buscador en tiempo real a WordPress.

Añadir un buscador en tiempo real a WordPress

Una de las afirmaciones más recurrentes en artículos y tutoriales pasados, es que la velocidad es uno de los aspectos más importantes que tenemos que tener en cuenta en nuestras páginas web.

Esta afirmación no se aplica únicamente a la velocidad en la que nuestras web cargan, sino que se aplica también a la velocidad con la que interactuamos con cada uno de los elementos individuales que las componen.

El buscador es el elemento encargado de ayudar a los usuarios a encontrar lo que quieren de nuestra web, lo que significa que cuanto más rápido e intuitivo sea este, mejor va a ser la experiencia de los usuarios.

Es por esto que el día de hoy vamos a aprender a modernizar el sistema de búsqueda por defecto de WordPress, y esto lo vamos a hacer añadiendo un sistema de búsqueda en tiempo real por medio de Algolia.

Videotutorial: Añadir un buscador en tiempo real a WordPress

Como siempre antes de empezar con el tutorial escrito, vamos a dejar el videotutorial en el que explicamos el proceso paso a paso que tenemos que seguir para añadir un buscador en tiempo real a WordPress.

Para ver este videotutorial tenés que estar suscrito a Unboxpress. Por favor inicia sesión o suscribite para acceder a este contenido.

Ahora sí, empecemos con el tutorial escrito.

Paso 1. Instalar y activar el plugin

Para añadir un buscador en tiempo real a nuestras páginas WordPress, el primer paso que vamos a tener que seguir es instalar y activar el plugin que nos va a permitir esto.

Esta es la razón por la que nos vamos a dirigir al administrador de plugins haciendo click en la sección “Plugins – Añadir nuevo” que se encuentra en el menú lateral de nuestro escritorio.

Una vez que nos encontremos en el instalador de plugins vamos a escribir el nombre del plugin que vamos a usar (“WP Search With Algolia“) en la barra de búsqueda ubicada en la sección superior derecha de la pantalla.

instalacion-del-plugin-wp-search-with-algolia
ii(Instalación del plugin “WP Search with Algolia”)

Y cuando carguen los resultados vamos a dirigirnos al plugin señalado en la imagen superior, vamos a hacer click en el botón “Instalar ahora” y al finalizar la instalación vamos a hacer click en el botón “Activar”.

Nota: en el caso de que no estés muy seguro de cómo instalar plugins en WordPress te dejamos un artículo que escribimos donde explicamos paso a paso cuál es el proceso que tenemos que seguir.

Paso 2. Crear una cuenta en Algolia

¡Genial, ya tenemos el plugin instalado y activo en nuestra página web! El siguiente paso que vamos a tener que seguir es el de crear una cuenta en Algolia para vincularla con nuestra web.

Para esto vamos a dirigirnos a la nueva sección de nuestro menú, la cual vamos a poder encontrar haciendo click en el apartado “Aloglia Search” de nuestro menú lateral.

Y en esta página vamos a hacer click en el enlace “Follow this link” que se encuentra señalado en la imagen inferior:

enlace-para-crear-nuestra-cuenta
(Enlace para crear nuestra cuenta)

Este enlace nos va a redirigir a la página de registro de Algolia, en donde vamos a tener que ingresar nuestro correo electrónico, una contraseña y después hacer click en el botón “Create an account” para crear nuestra nueva cuenta.

pagina-de-registro-de-algolia
(Página de registro de Algolia)

Y una vez hecho esto vamos a tener que dirigirnos al correo que ingresamos para seguir el clásico procedimiento de confirmar nuestro correo electrónico.

Paso 3. Completar el proceso de registro

Ya tenemos nuestra cuenta de Algolia creada y activa, así que el siguiente paso que vamos a seguir es el de completar el registro para tener una cuenta completamente habilitada.

Para esto vamos a tener que rellenar un formulario bastante sencillo de tres pasos con nuestra información:

proceso-de-registro-de-algolia
(Proceso de registro de Algolia)

Y una vez hecho esto vamos a ser redirigidos a una pantalla de confirmación, en donde vamos a tener que hacer click en el botón “Go to dashboard” señalado en la imagen inferior:

pagina-de-confirmacion-de-registro
(Página de confirmación de registro)

Este botón nos va a enviar al escritorio de nuestra cuenta, y lo último que nos va a quedar por hacer es seleccionar el tipo de plan que vamos a usar.

Para esto vamos a tener que dirigirnos a la pantalla de facturación, por lo que vamos a hacer click en la sección “Billing” ubicada en la sección inferior del menú lateral.

seleccion-del-plan-de-nuestra-cuenta
(Selección del plan de nuestra cuenta)

Y en esta página vamos a seleccionar el plan “Community” (que es completamente gratuito), y vamos a hacer click en el botón “Change plan” para guardar estos cambios.

Nota: el plan “Community” se encuentra únicamente disponible para los proyectos sin fines comerciales, en el caso de que el nuestra web tenga propósitos comerciales vamos a tener que optar por un plan más avanzado.

Paso 4. Vincular claves API

Una vez tengamos nuestra cuenta completamente configurada, lo siguiente que vamos a hacer es vincularla con nuestra página web, y esto lo vamos a lograr por medio de nuestras claves API.

Para esto vamos a tener que dirigirnos a la pestaña “API Keys” la cual se encuentra ubicada en nuestro menú lateral:

pagina-de-api-keys
(Página de API Keys)

En esta pantalla vamos a poder encontrar las tres claves API que vamos a necesitar para vincular nuestra cuenta de Algolia con nuestra página web, las cuales son:

  • La Aplication ID.
  • La Search-only API Key.
  • Y la Admin API key.

Así que vamos a copiar una por una estas tres claves y vamos a ingresarlas en los campos correspondientes de nuestra web.

vinculacion-de-las-api-key-con-nuestra-pagina-web
(Vinculación de las API Key con nuestra página web)

Y una vez hecho esto, vamos a hacer click en el botón “Guardar cambios” para confirmar las modificaciones.

Paso 5. Configurar opciones de búsqueda

Ya tenemos nuestra página web vinculada con el sistema de Algolia, por lo tanto el ultimo paso que vamos a tener que seguir es el de configurar las opciones de búsqueda en nuestra web.

Para esto nos vamos a dirigir a la sección “Algolia Search – Autocomplete”, la cual vamos a poder encontrar en el menú lateral del escritorio de nuestra web.

opciones-de-busqueda-de-algolia
(Opciones de búsqueda de Algolia)

Y en esta página vamos a tener que seguir 3 simples pasos:

  • En primer lugar vamos a seleccionar los tipos de contenidos que queremos que se tengan en nuestro sistema de búsqueda.
  • En segundo lugar vamos a comprobar que la opción “Enable autocomplete” se encuentre activa.
  • Y por último vamos a hacer click en el botón “Guardar cambios” ubicado en la sección final de la pantalla.
configuracion-de-algolia-finalizada
(Configuración de Algolia finalizada)

Una vez guardados los cambios vamos a dirigirnos a los contenidos que seleccionamos (los cuales en este caso son ‘Entradas’ y ‘Páginas’), y vamos a hacer click en el botón “Re-index” ubicado en el margen derecho de estos elementos.

busqueda-en-tiempo-real-con-algolia
(Búsqueda en tiempo real con Algolia)

¡Y listo, una vez hayamos seguido todos estos pasos ya vamos a contar con la funcionalidad de buscador en tiempo real gracias a Algolia!

¡Así que, hasta acá llegó este tutorial de cómo añadir un buscador en tiempo real a WordPress! Esperamos que te haya sido de mucha utilidad y cualquier duda o problema que tengas podes comunicarte con nosotros a través del formulario de contacto y vamos a estar encantados de ayudarte! 😄

Nos vemos mañana con un nuevo tutorial de WordPress, como siempre a las 17:00 hora Argentina!