Búsquedas instantáneas en WordPress (como en Facebook)

La realidad es tozuda, y por mucho que nos empeñemos en usar los métodos tradicionales el usuario actual de la red está acostumbrado a una inmediatez que no siempre ofrecemos en nuestras webs.

Un ejemplo claro son los formularios de búsqueda …

Cualquier usuario de Internet actual está ya acostumbrado a buscar de manera que mientras escribe se van mostrando resultados, ya sea en Facebook o en el buscador Spotlight integrado en Mac OSX, así que cuando llega a una web hecha al «estilo tradicional«, en la que se ve obligado a cargar otra página para elegir resultados de búsqueda es bastante probable que estemos dando una pobre impresión, antigua, de nuestra querida web.

Afortunadamente esto tiene fácil solución, cómo no en WordPress.

Al rescate viene una pequeña maravilla en forma de plugin llamado Ajaxy live search, que ofrece precisamente eso, resultados instantáneos de búsqueda al estilo Facebook, algo que les resultará muy familiar, y práctico, a nuestros visitantes, aumentando su fidelidad.

Ahora bien, como todas las cosas buenas de la vida requiere un pequeño esfuerzo, y es que este plugin no es «instalar y listo«, requiere un pequeño hack para que funcione.

Y es que una vez lo actives comprobarás que no funciona a la primera, antes hay que toquetear un poquito tu tema, para lo que tenemos 2 posibles opciones:

  1. Cambiar el nombre / desactivar el formulario de contacto del tema activo: para esto busca en la carpeta de tu tema el fichero llamado searchform.php y cámbialo al nombre que quieras, el caso es que se desactive. No lo borres para tenerlo de repuesto por si un día cambias de idea.
  2. Añadir una función: si tu tema no tiene archivo searchform.php, o simplemente quieres añadir la búsqueda instantánea en cualquier parte de tu tema, siempre puedes agregar este código donde desees:
    <?php ajaxy_search_form(); ?>

Y ya debería funcionar.

También tienes la opción de usar el widget de búsqueda que instala, para los más miedosos.

Las virtudes de este plugin son muchas, pues no solo tienes la búsqueda instantánea en los artículos que hayas creado como entradas, sino que también busca en categorías, páginas, y si tienes un foro bbPress igualmente lo identifica ofreciendo resultados de búsqueda como temas, como nombre de foro e incluso en las respuestas. No lo he probado pero creo que también funciona igualmente en tipos de entrada personalizadas.

También, si lo hubiese, muestra una miniatura de imagen de los resultados, haciendo la experiencia aún más interesante y visualmente atrayente para el visitante.

En la página de ajustes del plugin tienes el modo de modificarlo a tu gusto. Lo primero es elegir como funcionará:

Lo mejor de todo es que puedes elegir qué quieres mostrar, y editando cada «template» vas a poder refinar el nombre y otras configuraciones, como en este ejemplo:

Para finalizar, tienes a elegir 3 posibles CSS, el por defecto igualito que Facebook, otro azul más claro y uno más oscuro, y en otra pantalla ver como quedará en tu sitio:

Y, cómo no podía ser de otro modo, no he podido menos que instalarlo aquí mismo. Queda bastante bien, pero sobre todo funciona de maravilla ¿no?.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(4 votos, promedio: 4)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

34 comentarios en “Búsquedas instantáneas en WordPress (como en Facebook)”

  1. Me parece excelente. Es cierto cuando mencionas eso de que no podemos seguir con un modelo tradicional en cuanto a la experiencia de los visitantes en nuestros sitios. Veré en que sitios lo probaré pero de ante mano me gusta. Gracias Fernando por la recomendacion.

    PD. tu sistema de comentarios sale un poco raro.

  2. Me parece muy interesante pero a mi no me funciona bien, en el previo se ve bien pero en la búsqueda normal aparece un array seguido de numerosos {name}, {name} que devuelve errores ¿?

  3. Hola Fernando, muy buen artículo. La verdad es que funciona bastante bien.

    Yo he quitado el formulario en el tema hijo que tengo de suffusion y lo he cambiado por la línea de código de la función que has puesto.

    Solo tengo un par de dudas. La primera es como editar el cuadro de búsqueda para cambiar el fondo y color de la letra del «Buscar …» que aparece dentro.

    La segunda pregunta que tengo es que no se como quitar el «Buscar por…» que aparece. Es que en las opciones he visto como cambiar el letrero pero el letrero es el de dentro y a mi eso me aparece encima del cuadro de búsqueda.

    1. Todo eso está en los ajustes del plugin, que crea su propio menú en la barra lateral de menús de WordPress, así lo he hecho yo, las capturas son de aquí mismo y todo lo he modificado como he indicado y se ve en las capturas.

  4. Si he visto las opciones pero es que la opción de texto modifica lo que aparece dentro del cuadro y lo modifica bien pero a mí me aparece «Buscar por…» encima del cuadro, si quieres entra en mi web y lo ves.

    Respecto al estilo del formulario de búsqueda no he visto nada en las opciones para cambiar el estilo, en concreto quiero cambiar el fondo y el color de la letra para dejarlo con el estilo que tiene mi tema.

    Muchas gracias Fernando.

  5. A mi me ocurre lo mismo que Juan. ¿Alguien sabe que hay que hacer para eliminar el «Buscar por» que aparece encima del recuadro?

  6. La solución para que los no pueden eliminar el «Buscar por…» que aparece sobre el cuadro de búsqueda:

    Ingresen al explorador de archivos desde el CPanel, y vayan al directorio /wp-content/plugins/ajaxy-search-form/
    Desde acá editen el archivo «sf.php» borrando la línea que dice lo siguiente:

    ' . __('Search for:') . '

    Guardan el archivo y listo… 🙂

    Nota: Intenté editar el plugin desde el editor de plugins de WordPress, pero no se puede guardar…

  7. Hermann Bravo

    De paso, nunca me funcionó la búsqueda en vivo (ni antes ni después de arreglar lo de «Buscar por…»). Sólo funciona en el panel de administración del plugin (Preview). Alguna idea del por qué?
    En mi nombre, en este comentario, dejé enlazada mi web.

  8. Bueno, he contactado con el creador y me ha dado la solución. Os explico, se trata de usar las opciones de css de las opciones del plugin.

    Para quitar lo de buscar por vale con poner esto
    .screen-reader-text {display:none}

    Respecto a modificar el color de fondo del cuadro de búsqueda se trata de modificar todos los elementos del mismo, es decir, relleno, relleno del boton, borde, etc… Yo lo he conseguido y os lo pongo aquí para que sepáis las clases CSS que son y que hay que modificar. Los ajustes de distancia son para mi blog porque he puesto el cuadro en la barra de menús y lo he querido alejar del borde para que quede mejor cuando salen los resultados. También se puede modificar color y tipo de letra etc…

    .sf_search .sf_input{
    color:#e4e4e4 !important;
    background:#707070 !important;
    }

    .sf_search .sf_button,.sf_search .searchsubmit{
    background-color:#707070 !important;
    }

    .sf_search
    {
    border-radius:4px;
    background:#707070;
    border:0px !important;
    top:7px !important;
    right:140px !important;
    }

    Espero que os sirva.

  9. Saludos a todos instale el plugin en mi sitio y me lanza un error 500 cuando llama con ajax al archivo admin-ajax.php
    y no me funcinan las busquedas

  10. Además también tenemos que eliminar para que desaparezca la barra blanca donde hay escrito «Buscar por:» y su correspondiente

    Saludos.

  11. Buenas,
    alguien sabe que líneas hay que tocar para personalizar los textos de «category», «post», etc… tal y como ha hecho Fernando poniendo «en artículos del blog»,…
    Muchas gracias

  12. Un plugin muy util, pero tengo un problema con él y es que cuando desde el admin voy a «Templates» y pincho en «post» para que me permita cambiar el nombre de la categoría, me sale el contenido en blanco sin posibilidad de cambiar nada (adjunto imagen), y luego en la web cuando voy a hacer una búsqueda no me salen los resultados más que como «post» ¿es debido a un tema de memoria o a que puede ser debido?
    ¿Alguien puede ayudarme?
    Gracias a todos.

    1. Tuve el mismo problema, lo solucione editando el campo sf_template_post de la tabla wp_options , le puse este valor:

      {post_image_html}{post_title} Posted by {post_author} on {post_date_formatted}

  13. hola Fernando, excelente sitio y ayudas.

    Tengo el siguiente problema con el plugin en mi theme. Resulta que segui tus consejos para instalarlo, pero al buscar una palabra en el buscador aparece que tiene disponible 4 resultados, pero no los muestra. Y al apretar enter, el resultado que me muestra es totas las paginas que contengan la palabra, no solo en el titulo sino tambien en el contenido.

    Sitio: test.yogananda.cl

    Te envio una imagen para que se entienda mejor.

    Saludos

    Cristian

  14. Hola,

    Gracias por el aporte, estoy creando un blog y he instalado el plugin pero como novato que soy me gustaria saber si puedo poner el buscador en algunas paginas en concreto del blog y en otras no,

    si alguien me puede ayudar le estaria muy agradecido

    salut

  15. Su Pagina Web

    Tengo un buscador de un directorio especifico, habrá forma de insertarle que recomiende entre el contenido de items?

  16. Buenas Fernando…realizado los pasos que indicas con el tema Mystile en wordpress y sigue sin funcionar el plugin en la caja de busquedas que trae por defecto el tema. Supongo que al eliminar el searchform, debería utilizar el buscador del plugin, pero se vé que no es así. A ver si me puedes echar una mano.

    Saludos

Deja un comentario

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

 

Ir arriba Ir al contenido