• iborra
    borde slide
    DESCUBRE A TRAVÉS DE
    borde slide
    NUESTRO BLOG
    Artículos de interés sobre diseño web

Crea una barra de búsqueda en Wordpress

barra busqueda

Muchos temas de Wordpress suelen llevar añadido estas barras de búsqueda, se suelen ver más en tiendas online o sitios web de gran envergadura. Hay temas donde la barra de búsqueda no está incluida y tenemos la necesidad de ponerla.

Uno de los primeros elementos con los que interactúan los usuarios en un sitio web es la barra de búsqueda. Aunque el menú de navegación esté completo y bien categorizado, una persona querrá encontrar de forma más rápida lo que está necesitando, por eso se le debe dar el control y accesibilidad a aquellas páginas a las cuales son más difíciles de llegar.

A continuación paso a explicar varios métodos de poner la barra de búsqueda en un sitio de Wordpress, que carece de ella, y haciéndolo de la forma más sencilla:

Crear barra de búsqueda con Código corto (Shortcode)

Es una manera muy sencilla de crear nuestra barra de búsqueda y con muy poco código, sólo tenemos que seguir los siguientes pasos:

  1. Abrimos el archivo functions.php que se encuentra dentro de la carpeta de nuestro tema.
  2. Copiamos y pegamos el siguiente código al final del archivo justo delante del cierre de php ?>.
  3. 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');
    
  4. Esto es sólo un ejemplo, podéis editar cualquier parte. Donde dice class="" podéis poner dentro las clases de CSS que creéis para darle un aspecto más bonito o ponerlo en el <input> que queráis. Eso ya es cosa de vuestra creatividad el poner colores, iconos, bordes redondeados, barra más corta, etc.
  5. Para que este código funcione, nos vamos a nuestra administración de Wordpress y añadimos el siguiente Código corto o Shortcode dentro del contenido de una página o post donde queramos que se muestre.
  6. [wpbsearch]
    
  7. A continuación os pongo un ejemplo de cómo quedaría, le he añadido un class="real-btn btn" para que quede algo más vistoso.

Y con estos sencillos pasos tendremos lista nuestra barra de búsqueda con un Shortcode.

Crear barra de búsqueda instantánea con un plugin gratuito

Este maravilloso plugin llamado Ajaxy Live Search, nos ofrece resultados instantáneos de búsqueda al estilo Facebook, es decir, mientras escribes se van mostrando los resultados. Para instalarlo y hacerlo funcionar, se deben seguir los siguientes pasos:

  1. Primero nos vamos al siguiente enlace para descargar el plugin en la página oficial de Ajaxy Live Search.
  2. Una vez instalado y activado el plugin, lo encontraremos en la columna de la izquierda de nuestra administración con el nombre de Ajaxy.
  3. Antes que nada, para que funcione, hay que hacer lo siguiente:
     Cambiar de nombre el archivo searchform.php que se encuentra dentro de la carpeta de nuestro tema para desactivarlo, no lo borres para tenerlo de repuesto por si acaso cambias de idea algún día.

     Si nuestro tema no tiene el archivo searchform.php, y queremos añadir la búsqueda instantánea en cualquier parte de nuestro tema, debemos agregar el siguiente código donde queramos, por ejemplo, en header.php:
  4. <?php ajaxy_search_form(); ?>
    
  5. El resultado será parecido a esto.
  6. Para eliminar el texto Search for: abrir el archivo sf.php que se encuentra dentro de la carpeta del plugin, y en la línea 1304 lo veréis (si no se busca), tan solo hay que borrarlo o editarlo.

Luego ya es cosa vuestra aplicar CSS para que quede más bonito y traducirlo. Este plugin busca en categorías y páginas mostrando una miniatura de imagen de los resultados. También tienes la opción de usar el Widget. Echar un vistazo a las opciones que da el plugin desde la administración.

Otros plugins gratuitos y que están bastante bien son YITH WooCommerce Ajax Search y el plugin SearchWP Live Ajax Search.

Crear barra de búsqueda a través de Google

Vamos a explicar como crear la barra de Google de búsqueda personalizada siguiendo los siguientes pasos:

  1. Primero nos vamos al Motor de búsqueda personalizado de Google y hacemos clic en Crear un motor de búsqueda personalizado.
  2. Añadimos la URL de nuestra página, seleccionamos el idioma, nombre del motor de búsqueda y le damos clic en Crear.
  3. En la siguiente página, veremos una notificación de que se ha creado con éxito el motor de búsqueda personalizada. Nos da una opción para agregarlo a nuestro sitio u obtener la dirección URL pública. Para añadir este motor de búsqueda personalizada en nuestro sitio web, hacemos clic en el botón Obtener código. Copiamos el código porque lo vamos a necesitar en el paso siguiente.
  4. Abrimos el archivo searchform.php que está dentro de la carpeta de nuestro tema, si este archivo no existe lo creamos y pegamos el código anterior.
  5. Luego nos vamos a nuestra administración siguiendo la ruta Apariencia->Widgets, arrastramos y soltamos nuestro buscador en el lugar que queramos en la parte de la derecha.

Con sólo hacer esto ya lo tendremos listo el buscador. Para personalizarlo solo hay que ir al Motor de búsqueda personalizado y lo podremos editar. Los colores y la fuente se cambian en Apariencia->Personalizar. Encontraremos muchas otras opciones.

Crear barra de búsqueda avanzada con un plugin de pago

Wordpress es un buen sistema de gestión de contenidos, pero la función de búsqueda por defecto no es tan buena. Muchos usuarios les resulta insuficiente y quieren sustituirla por una alternativa mejor. SearchWP es un plugin de búsqueda de Wordpress, fácil de usar y muestra resultados más relevantes que la búsqueda por defecto y de manera rápida.

No vamos a profundizar en este plugin, todo el material y documentación lo podéis encontrar en su web. Recordar que es un plugin de pago pero muy completo. Más información en la página oficial de SearchWP.

Y con esto finalizamos este tutorial! Espero que os sea útil estas diferentes formas de poder crear una barra de búsqueda para Wordpress.

Actualización Agosto 2016: Parece que el plugin Ajaxy Live Search actualmente no se encuentra.

Comenta y comparte este post!

¿Tienes alguna sugerencia, idea, consejo, duda, pregunta, agradecimiento, encuentras algún error o este post no está actualizado? Entonces esperamos tu comentario.

También puedes recomendar y compartir este post. Estamos muy agradecidos por tu apoyo!

Comentarios (0)

No hay Comentarios todavía en este post. Podrías ser el primero!

Deja un comentario

Este blog se nutre de los comentarios de los visitantes! Así que vamos, únete a nosotros!

Por favor esperamos que entiendas que se eliminarán aquellos comentarios que no tengan nada que ver con el contenido de este post o siempre que se utilicen palabras ofensivas.

COMENTARIO PARA ESTE POST

Imagen mínimo: 300x300 - Formato: jpg o png - Tamaño máximo: 10Mb

CAPTCHA code