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.
Indice
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.
Esta función nos genera el siguiente código HTML:
|
1 2 3 4 5 6 7 |
<form role="search" method="get" id="searchform" class="searchform" action="http://localhost/wordpress/"> <div> <label class="screen-reader-text" for="s">Buscar:</label> <input type="text" value name="s" id="s"> <input type="submit" id="searchsubmit" value="Buscar"> </div> </form> |
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.
|
1 2 3 4 |
<div id="busqueda" class="busqueda"> <input type="text" value name="s" id="s" style="display: none;"> <button onclick="clickBusca();"><span class="glyphicon glyphicon-search"></span></button> </div> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
// La función clickBusca abre y cierra el input del search function clickBusca() { if( jQuery('#s').css('display') == 'none' ) { // Primero lo hacemos de ancho 0 y luego lo visualizamos jQuery('#s').width('0px'); jQuery('#s').show(); bucleExpandir( 0 ); jQuery('#s').focus(); } else { if( jQuery('#s').val().length < 1 ) { // Lo hacemos al reves, primero lo estrechamos y luego lo ocultamos jQuery('#s').focus(); bucleContraer( 200 ); setTimeout( function() {jQuery('#s').hide();}, 1000); } else { document.location.href = jQuery(location).attr('href')+'?s='+jQuery('#s').val(); } } } // Con el evento keypress controlamos las teclas pulsadas jQuery('#s').keypress( function(e) { if( e.which == 13 ) { // Código de la tecla retorno document.location.href = jQuery(location).attr('href')+'?s='+jQuery('#s').val(); } }); // Con el evento focusout cerramos el input al perder el foco jQuery('#s').focusout( function() { bucleContraer( 200 ); setTimeout( function() {jQuery('#s').hide();}, 1000); }); // Los bucles para mostrar y ocultar el input function bucleExpandir( contador ) { if( contador < 200 ) { setTimeout( function() { contador++; jQuery('#s').width( contador+'px' ); bucleExpandir(contador); }, 2); } } function bucleContraer( contador ) { if( contador > 0 ) { setTimeout( function() { contador--; jQuery('#s').width( contador+'px' ); bucleContraer(contador); }, 2); } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
add_action( 'wp_footer', 'stmdivino_cargar_scripts' ); function stmdivino_cargar_scripts() { // Cargamos sólo la hoja de estilos que necesitamos // NOTA: Quizás deberiamos hacer hook en el footer. De esa manera cargaría más rápida if( is_home() || is_front_page() ) { wp_enqueue_style( 'glyphicons', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css', false ); wp_enqueue_style( 'frontpage', get_theme_root_uri() . '/divino/css/campobusqueda.css', false ); wp_enqueue_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js', false ); wp_enqueue_script( 'campobusca', get_theme_root_uri() . '/divino/js/campobusqueda.js', false ); } } |
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:
|
1 2 3 4 5 6 7 8 9 10 |
.busqueda { float: right; padding-top: 9px; padding-right: 10px; } #s { border: #b8d0ff 1px solid; background-color: rgba( 168, 192, 255, 0.5); } |
Todo ello nos ofrece un campo de búsqueda dinámico más en línea con nuestro diseño web.
