';

Information

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus risus mauris, et commodo lectus hendrerit ac. Nam consectetur velit et erat fermentum aliquet. In laoreet, sem sit amet faucibus pulvinar, purus tellus tincidunt ex, vel blandit nibh dui sit amet justo.

Menú

Cómo crear una barra de búsqueda expandible y responsive

Muchas páginas web requieren de una barra de búsqueda para que el usuario encuentre más rápido aquello que está buscando. Estas barras suelen estar más en sitios web de gran envergadura o en un blog.

El objetivo de este artículo es personalizar una barra de búsqueda expandible y que sea responsive.

Ejemplo de barra de búsqueda expandible

Inicialmente, sólo se muestra un botón con un icono de búsqueda que al hacer clic en él, mostrará una barra de búsqueda deslizándose o expandiéndose hacia afuera. Cuando se escriba algo en la barra, buscará al hacer clic en el icono o pulsando Enter en el teclado. La barra de búsqueda se cerrará si hacemos clic en el icono con la barra vacía o en cualquier parte de la página web.

Todo ello lo lograremos con un poco de HTML, CSS y JavaScript. Recordar que este artículo es sólo para personalizar una barra de búsqueda, para que encuentre búsquedas hay que programarlo luego. Fijaos en algún buscador para ver como se ha implementado o utilizar uno que ya funcione y personalizarlo.

A continuación podéis probar el buscador en la página de CodePen. Cambiar el CSS para que quede mejor en vuestro sitio web.

Ver ejemplo en CdePen

Código para implementar el buscador

Para empezar descargamos los archivos, el enlace se encuentra más abajo. Dentro del archivo descargado encontramos tres carpetas. Abrimos la carpeta js que contiene tres archivos. Copiamos y pegamos los archivos classie.js y uisearch.js a nuestra carpeta js y los enlazamos preferiblemente desde el archivo functions.php del Child Theme si utilizáis WordPress. El archivo modernizr.custom.js sólo lo pondremos si no tenemos ya enlazada esta librería.

También debemos poner el siguiente script o bien en el footer o en la hoja de estilos js que tengáis.

<script>
new UISearch( document.getElementById( 'sb-search' ) );
</script>

Para el icono de la lupa he utilizado Font Awesome la versión 4. Podéis utilizar el siguiente enlace para incluirlo en vuestro sitio web.

https://use.fontawesome.com/13bf04a6da.js

Luego abrimos la carpeta que dice css, copiamos todo lo que hay dentro del archivo uisearch.css y lo pegamos dentro de nuestro archivo principal css .

Solo nos quedará añadir el HTML. Tenéis el código en el archivo dentro de la carpeta demo. Ponerlo en el lugar donde queráis que se muestre el buscador. El código es un div con las clases del buscador que engloba un formulario dentro. Se puede poner que la barra de búsqueda quede expandida desde un inicio ya, para hacer esto, hay que cambiar la clase del div de la siguiente forma.

<div id="sb-search" class="sb-search"> cambiarlo a <div id="sb-search" class="sb-search sb-search-open">

Una vez puesto todo ya debería estar viéndose la barra de búsqueda, si algo no se ve bien retocar el css. A continuación os dejo el enlace de descarga con todos los archivos.

Cómo crear una barra de búsqueda con un shortcode para WordPress

Es una manera muy sencilla de crear nuestra barra de búsqueda y con muy poco código, sólo tenemos que hacer lo siguiente.

Abrimos el archivo functions.php que se encuentra dentro de la carpeta de nuestro Child Theme. Copiamos y pegamos el siguiente código dentro.

// Crear barra de búsqueda con un shortcode
function wpbsearchform( $form ) {

    $form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
    <div><label class="screen-reader-text" for="s">' . __('Esto es un ejemplo:') . '</label>
    <input type="text" placeholder="Buscador Iborra Web Design" value="' . get_search_query() . '" name="s" id="s" />
    <input type="submit" class="" id="searchsubmit" value="'. esc_attr__('Buscar') .'" />
    </div>
    </form>';

    return $form;
}

add_shortcode('wpbsearch', 'wpbsearchform');

Esto es sólo un ejemplo, podéis editar o eliminar cualquier parte para que quede mejor. Donde dice class=”” podéis poner dentro las clases de CSS para darle un aspecto más bonito. Y al principio, en action=””,  podéis poner dentro de las comillas la url donde queráis que se realice la búsqueda en concreto, por ejemplo, si queréis que solo busque en la sección del blog esa primera línea quedaría de la siguiente forma.

$form = '<form role="search" method="get" id="searchform" action=" . home_url( '/blog/' ) . " >

Sino busca dentro de la página del blog y solo queréis que el buscador muestre los artículos, dejar el action como antes y añadir la siguiente línea de código, por ejemplo entre los dos <input>.

<input type="hidden" name="post_type" value="post" />

Para que este código funcione, debemos añadir el siguiente shortcode dentro del contenido de una página o post donde queramos que se muestre.

[wpbsearch]

Si queréis añadir el shortcode dentro de una página con código PHP se debe poner de la siguiente forma.

<?php echo do_shortcode( '[wpbsearch]' ); ?>

!Si te gustó este artículo, no dejes de visitar el blog o suscribirte a la newsletter! | Iborra Web Design

Comentarios
Compartir
Paco (Iborra Web Design)

Artículos destacados

Hay 2 comentarios en este artículo
  1. Israel
    13 agosto 2019, 11:20

    Muy bueno. Lo pienso poner en práctica. Muchas gracias.

    • Paco (Iborra Web Design)
      13 agosto 2019, 13:59

      Hola Israel,

      Gracias a ti por comentar, me alegro que te guste. Es sencillo de poner, cualquier duda me dices.

      Un saludo.

Deja un comentario

¿Necesitas ayuda? Escríbeme por Whatsapp