Hoy vamos a ver cómo crear una barra de búsqueda con ancho completo en la cabecera de Genesis Sample, en principio oculta, pero que se mostrará al pulsar el botón de buscar que nosotros mismos vamos a crear.
Desde hace tiempo le he querido dedicar tiempo a este tutorial para integrar la barra de búsqueda en el diseño de algunos themes. Y por fin lo he terminado.
En la parte de desarrollo me he basado en el plugin Full screen search overlay que es lo que usaba hasta ahora.
En cuestión de diseño, siempre me gustó la barra de búsqueda de Outfitter Pro Theme,así que de ahí me vino la inspiración.
En la anterior versión de mi web, Full Screen Search Overlay era el plugin que usaba como alternativa a la clásica barra de búsqueda, con alguna modificación y personalización eso sí. Para la nueva versión, tenía varios objetivos y uno de ellos era integrar la barra de búsqueda en el diseño.Concretamente en la cabecera.
Os dejo unas capturas de ejemplo. La primera del icono de buscar posicionado junto al menú.
Esta otra habiendo hecho clic en el botón de buscar. La barra de buscar es ahora visible.
Y esta última de la barra de búsqueda en pantallas pequeñas de móviles. Concretamente de 420px de ancho.
Importante!: Este tutorial está escrito para Genesis Sample, pero con algunas variaciones se podría adaptar a cualquier otro Genesis Child Theme.
Crear el formulario y añadir el icono
Dos elementos son necesarios para este tutorial. El formulario en sí y el botón de búsqueda.
Para crear y posicionar ambos, icono y formulario de búsqueda vamos a crear un archivo PHP con el snippet de código que dejo a continuación, al cual llamaremos custom-header-search.php. Lo alojaremos en la carpeta /lib de nuestro Genesis Sample Theme.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Con la primera función del snippet mostramos el icono de búsqueda junto al menú, pero de manera independiente. De manera que, en pantallas pequeñas, cuando el menú se oculte tras el icono de hamburguesa, el icono de buscar se mantendrá visible.
Efectos y comportamiento con JS
Ahora le toca el turno al JS. Crearemos un archivo llamado custom-header-search.js que será el encargado de aportar efectos y mostrar u ocultar el formulario cuando hagamos clic en el botón de búsqueda. Introduce en él el siguiente código y alójalo en la carpeta /js del theme.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Llamamos a los archivos desde functions.php
Ya casi lo tenemos. Ahora editaremos el archivo functions.php para llamar a estos archivos. Introduce este snippet de código al final del archivo functions.php.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Me encanta hacer de las cosas de esta manera. Me refiero a organizar los snippets por separado y luego llamarlos desde el functions.php. Así tendremos todo ordenado y no nos costará encontrar los archivos y las funciones cuando las busquemos para editarlos.
Estilos necesarios
En esta ocasión los estilos CSS no son cosa de diseño ni de integración con el resto del theme. Son necesarios para maquetar tanto el formulario como el icono de búsqueda junto al menú.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Añade el siguiente código al final del archivo styles.css de Genesis Sample theme.
He añadido media queries, para darle adaptabilidad completa.
Conclusion
Tenía muchas ganas de hacer este tutorial. Primero, porque me serviría para mi propia web, ahí puedes verlo en acción. Y segundo, porque es algo que usaré en varios proyectos. Una manera muy creativa y accesible para agregar la función de buscar. Con un efecto de «fade in» suave y nada brusco. Claro para el usuario y nada invasivo. Además que nos libra de ese widget de barra de búsqueda, que en algunos proyectos no sabía ni donde incluir.
Ya sabes, ahora es tu turno para incluirlo en tus proyectos o web personales. Y si haces alguna modificación interesante, no dudes en decirlo.
Para dudas con el código, deja un comentario abajo. 🙂