Campo de búsqueda dinámico para nuestra web

En el diseño web no se puede dejar ningún detalle al margen. Un campo de búsqueda bonito y elegante debe aparecer con un diseño acorde al resto de nuestra página.

Si bien la he nombrado innumerables ocasiones, Sandra Sanmartín, en su blog eSandra (ya abandonado, pero aún permanece, lo recomiendo), tiene un simple botón con una lente dibujada que, al clicarlo, se abre un campo donde introducir la palabra clave que buscamos. Pues lo mismo he querido hacer yo, pero obviamente sin plugins ni themes de terceros.

 

Previos

Como se puede ver en el artículo ‘Añadiendo búsqueda de texto a tu tema‘, podemos utilizar la función get_search_form() para generar automáticamente un pequeño formulario de búsqueda de texto.

Campo de búsqueda por defecto
Campo de búsqueda por defecto

Esta función nos genera el siguiente código HTML:

En un artículo posterior, ‘Implantación de Bootstrap (II). Otros elementos‘, vimos otra forma de incorporar el mismo formulario de búsqueda, de manera que podíamos añadirle el icono de la lente al botón ‘submit’.

Sin embargo, este no era el resultado deseado. Por lo tanto me puse a pensar cómo conseguir un campo de búsqueda más dinámico.

 

Creación de un campo de búsqueda dinámico

Código HTML

Para ello, partimos de un código HTML en el que vamos a eliminar las etiquetas <form></form>. En mi caso, al ubicarlo en la barra de menú superior, lo incluyo en el archivo header.php.

De momento, en PHP no tenemos que tocar nada.

Código jQuery

Ahora vamos a ver las diferentes solicitudes que hacemos al campo de búsqueda:

  • Al apretar el botón, si el campo está oculto, se debe visualizar dinámicamente.
  • También al apretar el botón, pero en este caso el campo se ve, si tiene contenido realizará la búsqueda. Si no es así, lo ocultará dinámicamente.
  • Si pulsamos fuera del campo, haciendo que éste pierda el foco, se ocultará.
  • Si pulsamos la tecla retorno realizará la búsqueda.

Con estos requisitos, hay que generar el siguiente código jQuery:

He intentado incorporar todos los comentarios posibles para su comprensión. Este código, obviamente, lo guardamos en un fichero, por ejemplo, campobusqueda.js.

Código PHP

Finalmente, ahora sí que tenemos que hacer un enqueue (anidado) de los scripts en functions.php.

Fijaros que hago el enqueue de estilos y scripts en el hook wp_footer para posponer la carga de estos elementos.

Código CSS

Finalmente, los estilos en el archivo campobusqueda.css:

 

Todo ello nos ofrece un campo de búsqueda dinámico más en línea con nuestro diseño web.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *