Más allá de que Joomla! incluye su propio buscador de contenido/artículos (al igual que Wordpress o cualquier otro CMS medianamente decente), muchos deseamos delegar esa tarea a los expertos: Google. En este artículo voy a explicar paso a paso, y detalladamente, cómo crear un motor de búsqueda personalizado de Google e integrarlo en nuestro sitio Joomla!, sin necesidad de utilizar plugins, módulos ni componentes de terceros.



La idea de este artículo es crear un pequeño módulo personalizado para realizar búsquedas (no asustarse porque es una tarea verdaderamente trivial, y el código HTML del módulo está publicado en este artículo) y luego mostrar los resultados (provistos por Google) dentro de una página específica de nuestro sitio Joomla!. Esto involucra varios pasos:

  1. Crear un motor de búsqueda personalizado que sólo muestre resultados de nuestro sitio Web.
  2. Crear una página que muestre los resultados de dicha búsqueda provistos por el motor creado en el primer paso.
  3. Crear un menú para que dicha página sea accesible desde una URL amigable.
  4. Crear un módulo que permita realizar una búsqueda.

Parecen muchos pasos pero son muy simples de realizar y no requieren conocimiento alguno de programación.

Crear un motor de búsqueda personalizado

Google permite crear un motor de búsqueda personalizado que realice búsquedas exclusivamente dentro del contenido de nuestro sitio. Esto se hace desde el sitio Google Custom Search Engine. De esta forma es posible aprovechar la potencia, eficiencia y características avanzadas de Google, en lugar de implementar nuestro propio buscador en nuestro sitio.

Acceder al sitio cse.google.com con nuestra cuenta de Google y crear un nuevo motor de búsqueda personalizado:

Indicar los dominios sobre los cuales restringir la búsqueda. Si se desea buscar sólo en nuestro sitio Web y subdominios, indicar el dominio con un asterisco (tal como lo sugiere Google). Por ejemplo *.linuxito.com.

Además, seleccionar el idioma para la página de resultados.

Desde la pestaña "Look and feel", seleccionar el tipo de página. Sólo nos interesan los resultados (ya que crearemos un módulo para facilitar la búsqueda), de esta forma, seleccionar "Results only":

El motor de búsqueda personalizado es altamente configurable, incluso es posible crear nuestro propio estilo para la página de resultados. Recomiendo revisar detenidamente todas las opciones y pestañas.

A continuación guardar y obtener el código HTML para la página de resultados:

Finalmente, el paso más importante consiste en especificar el parámetro GET en la URL a través del cual se enviará la consulta para la búsqueda. Presionar el botón "Search Results Details" e indicar un nombre de variable. Típicamente se utiliza la letra 'q' (diminutivo de query, consulta en inglés):

Guardar los cambios.

Esto significa que, cualquiera sea la página de nuestro sitio donde se muestren los resultados de la búsqueda personalizada de Google, deberá indicar el criterio de búsqueda en una variable GET llamada q.

Seleccionar y copiar el código fuente HTML dentro del recuadro gris.

Crear una página en el sitio Joomla!

El siguiente paso consiste en crear un artículo en nuestro sitio Joomla! donde mostrar los resultados de la búsqueda. Crear un nuevo artículo y pegar el código fuente copiado previamente:

Contenido > Gestor de Artículos > Añadir nuevo Artículo

Seleccionar un título adecuado para la página y guardar el artículo.

Crear una URL amigable para acceder a la página de resultados

En Joomla! es posible crear una URL amigable a través de un elemento de menú. El objetivo es que la página recién creada sea accesible a través de una URL conocida y fácil de memorizar, por ejemplo: https://www.linuxito.com/buscar. A su vez, como previamente hemos definido la variable q para pasar el criterio de búsqueda a la página de resultados, la URL completa será https://www.linuxito.com/buscar?q=CRITERIO.

Crear un nuevo menú que será llamado "Oculto", pues no tendrá un módulo asignado y por ende no será visualizado en el sitio. Sólo existe a fin de poder crear URLs amigables:

Menús > Gestor de Menú > Añadir nuevo Menú

No agregar un módulo para este menú, sino pasar directamente a agregar un nuevo elemento de menú para nuestra página de resultados:

Menús > Oculto > Añadir nuevo elemento de Menú

Seleccionar un título para el menú, pero más importante indicar un alias corto y fácil de reconocer para dicha página: "buscar".

El tipo de elemento de menú es un artículo simple. Seleccionar el artículo creado anteriormente, el cual muestra la página de resultados de la búsqueda personalizada de Google:

Guardar el elemento de menú y verificar su funcionamiento accediendo a la URL amigable que hemos definido, especificando un criterio de búsqueda cualquiera, por ejemplo "Debian":

https://www.linuxito.com/buscar?q=Debian

Implementar nuestro propio cuadro de búsqueda

El último paso consiste en implementar nuestro propio recuadro de búsqueda para insertar en cualquier parte de la plantilla del sitio.

Crear un módulo personalizado:

Extensiones > Gestor de Módulos

Presionar el botón "Nuevo" y seleccionar "Personalizar HTML". Indicar un título para el módulo y pegar el siguiente código:

<div>
<script>
function limpiar(elem) {
	if (elem.value == "Buscar...") {
		elem.value = "";
	}
}
function restaurar(elem) {
	if (elem.value == "") {
		elem.value = "Buscar..."
	}
}
</script>
<form action="https://www.linuxito.com/buscar" style="margin: 0" >
<input type="text" name="q" value="Buscar..." onfocus="limpiar(this)" onblur="restaurar(this)" style="width: 190px" />
</form>
</div>

Cambiar el action del form adecuadamente.

Es importante desactivar el editor WYSIWYG desde la configuración global de Joomla! para que el código HTML del módulo no se vea afectado:

Seleccionar una posición en la plantilla y guardar los cambios.

Este módulo muestra un formulario simple y minimalista para realizar búsquedas en el sitio:

Este campo permite indicar un criterio de búsqueda y presionar enter para ver los resultados:

Como mencioné anteriormente, son muchos pasos, pero no es nada muy complicado.

Referencias


Tal vez pueda interesarte


Compartí este artículo y dejá tu comentario