Buscador a pantalla completa en Genesis

Mi parte de diseñador estaba cansada ya de esa «cajita» con la palabra «buscar» dentro de ella. Vamos, del típico buscador de WordPress. Si es cierto que concede mucha accesibilidad en cuanto a que la gente lo reconoce y no cuesta encontrarlo, pero desde hace un tiempo, y gracias a las apps de móvil, también se reconoce el icono de la lupa.

Un día dediqué un buen rato a buscar alternativas. No sólo a nivel creativo, si no a nivel funcional de cara a no perder accesibilidad en WordPress. Encontré varias. Una de las más sencillas de implementar y que da buen resultado es la del plugin WordPress Full Screen Search Overlay de WPBeginner. 

Instalar el plugin

El plugin es sencillo. Lo  podemos instalar directamente desde nuestro WordPress o descargarlo para subirlo por FTP. de cualquier manera, tan sólo tendremos que activarlo para que funcione. No hace falta configuración ni tiene ningún tipo de ajuste extra. Sólo con activarlo funciona.

¿Pero que hace falta para que funcione? ¿Que es lo que activa la pantalla completa con el campo de búsqueda? Una vez que está activado, haciendo clic en una campo de búsqueda o en el botón de búsqueda, se mostrará la búsqueda a pantalla completa. 

Buscador a pantalla completa en WordPress
Buscador a pantalla completa en WordPress

El código

Esto está bien, pero no me dejó contento. No me quitaba de ver esa «cajita» de la que yo estaba cansado. Así que me puse a revisar y leer detenidamente el código. Encontré la manera de que el buscador a pantalla completa se activase a través de un botón. Un enlace apuntando #search donde quiera que lo pusiese. No tenía más que retocar un poco el archivo JavaScript para que funcionase. En la línea 8 añadí a[href="#search"] como elemento para «detonar» el buscador. 

A partir de ahí sólo tenéis que añadir un enlace con la dirección «#search» en cualquier parte de la página y eso disparará el buscador. El código del enlace de mi web es así: 

<li id="menu-item-798" class="search-toggle menu-item menu-item-type-custom menu-item-object-custom menu-item-798">
	<a href="#search">Buscar</a>
</li>

Ya sólo queda, si lo necesitáis darle un poco de estilo con CSS.

Una buena solución para deshacernos de la «cajita» ;). 

Para cualquier duda, aportación o pregunta podéis dejarme un comentario justo debajo. O también me podéis mandar un mensaje a través del formulario de contacto. Si sois suscriptores no os olvidéis de hacerlo a través de la Intranet, pues os daré preferencia a la hora de contestar emails.

El soporte en comentarios está sólo disponible para los suscriptores.

Puedes identificarte aquí o bien registrate en este enlace.

¿Olvidaste tu contraseña?