Integrar Google Custom Search Engine (CSE) en tu WordPress

No quiero empezar diciendo que el buscador de WordPress sea malo, cumple con su objetivo de filtrar nuestras búsquedas, pero seamos sinceros de cara al posicionamiento de nuestro sitio y que este tenga una buena reputación en Google, es más que cómodo integrar el Google Custom Search Engine (CSE) en nuestro sitio de WordPress es por ello que aquí te explicaré como hacerlo. Pasito a pasito OK.NO

Pues empecemos

1) Ingresar a https://cse.google.com

2) Si aún no tenemos una sesión de nuestra cuenta de google se nos pedirá iniciar sesión.

3) Ya iniciada la sesión nos saldrá una pantalla como la que tenemos debajo:

3) En mi caso yo tengo 2 sitios web asociados por ello los colores azules pero a ustedes le saldrá la opción nuevo motor de búsqueda. (Ver imagen debajo)

4) Llegado a este punto tenemos que rellenar los campos que nos solicita, el primero es la url de donde queremos que se realicen las búsqueda, podemos ver que hay distintas formas de agregar los parámetros: Páginas sueltas, todo el sitio, partes del sitio o todo el Dominio pues elegimos las que mejor les parezca.

5) Elegimos el idioma en el que se encuentra nuestra web.

6) Y por último elegimos un nombre identificable para nuestra primera búsqueda.

Creíste que allí acababa todo, pues no, ahora tendremos que configurarlo para dejarlo a nuestro gusto.

7) Tendremos una lista de apartados importantes. (Ver imagen debajo)

8) Vamos a centrarnos en el primero (Configuración) y el segundo (Apariencia).

El primero tiene un apartado de 4 pestañas con Aspectos básicos, Obtener ingresos, Admón y Opciones avanzadas

En Aspectos básicos veremos casi lo mismo que hemos tocado al crearlos, con 2 opciones adicionales: Palabras clave del motor de búsqueda y Sitios en los que buscar; estas dos opciones podemos modificarlas al gusto, las otras pestañas también pueden tocarlas un poco, la verdad es que es muy intuitivo

9) En el apartado apariencia veremos lo siguiente:

10) Podemos elegir el diseño que mejor se adapte a lo que nosotros queremos, en mi caso yo he elegido el de 2 páginas. Ya veremos después porque.

11) Nos desplazamos hacia abajo y elegimos Guardar y obtener código. Y veremos la siguiente pantalla.

Llegados a este punto podemos realmente hacer cualquier cosa con el código y no solamente integrarlo a wordpress sino a cualquier CMS o página web que estemos creando ya que es Javascript lo que tenemos delante.
Yo lo haré en WordPress como pudieron leerlo en el título.

12) Este primer código que vemos es el del cuadro de búsqueda, aquí que tendremos que buscar un lugar donde ponerlo, podemos hacerlo en un sidebar dentro de un widget.

Si somos un poco intuitivos nos habremos percatado que cuando buscamos algo en wordpress por defecto, nos devuelve una ruta parecida a: http://zirtrex.net/?s=hola y debajo los resultados ordenados de acuerdo al theme que estemos usando.
Pues usaremos esto a nuestro favor ya que para nuestra suerte Google también nos permite especificar una variable para mostrar los resultados. En este caso vemos que es la letra “q” pues la cambiamos por la letra “s” y listo. (Ver imagen)

13) Ahora, Buscamos en nuestro theme de WordPress el archivo search.php
Nota: Esto puede variar de acuerdo al theme que estés usando. Y podemos reemplazar el código que crea wordpress o ponerlo al lado o arriba para probar, ya depende de ustedes. Yo lo he puesto arriba. (Ver Imagen)

14) Y por último, este es el resultado:

Este ejemplo es funcional, pero se puede mejorar bastante, pero ello ya pueden revisarlo en la documentación oficial, hasta la próxima, no olviden consultar si tienen dudar o revisar mis otras publicaciones.

Tags: ,


Rafael Contreras

Creador de zirtrex.net
Diseñador, Desarrollador y Programador, actualmente domino Web, escritorio y movil


Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *