Cualquier web que tenga una cantidad considerable de contenido, tiene o debería tener un buscador para facilitar a los usuarios la búsqueda de posts, páginas, categorías… Estos buscadores pueden funcionar de varias formas, una de ellas y la más común, es que los usuarios pongan un término en el buscador y al pulsar Enter se le muestre una página con los resultados que coinciden con su búsqueda. Otra, es que el propio buscador vaya mostrando los resultados en la misma página mientras el usuario va escribiendo en él. En este post vamos a ver como instalar uno de estos últimos que nos muestran los resultados de búsqueda instantáneos o en tiempo real. Podéis ver un ejemplo de ello en esta misma web en el buscador que se encuentra en la derecha de la pantalla o en la siguiente captura.
Configurando un Buscador Instantáneo
La configuración de este buscador la vamos a hacer utilizando un plugin por lo que no te preocupes si no tienes conocimientos de programación o no te desenvuelves demasiado en WordPress. A continuación, vamos a ver los pasos necesarios para que puedas utilizar un buscador de este tipo en tu web con WordPress.
Lo primero será instalar y activar el plugin que nos permitirá adaptar el widget del buscador de WordPress en un buscador instantáneo. El plugin se llama Instant Search & Suggest y lo podemos descargar desde ese enlace o buscarlo desde el menú de plugins de WordPress.
Una vez instalado en nuestra web ya estaría funcionando si teníamos en funcionamiento el widget de buscador de WordPress en nuestro sitio. Vamos a ver como añadirlo en el caso de que no lo estuvieras utilizando.
Vamos a Apariencia > Widget y lo arrastramos al sidebar que deseemos de nuestro theme.
Como hemos dicho en el paso anterior, el buscador ya estaría funcionando en el momento que instalamos el plugin. Ahora podemos ir a Ajustes > Instant search desde nuestro panel de WordPress para configurar sus ajustes a nuestras necesidades.
Lo más interesante de su configuración sería poder filtrar los resultados para que solo mostrase el contenido de un determinado tipo como pueden ser las categorías, post, páginas, tags…
También tenemos la opción de limitar el número de resultados que se muestran en la búsqueda instantánea (Suggestion Count) o activar el Magic Mode para que mientras los usuarios escriban en el buscador sean llevados directamente al resultado que sea más similar de lo que han escrito.
Css para Search & Suggest
El estilo de los resultados instantáneos puede que no se adapte demasiado al diseño de nuestra web por lo que tocará echar mano de la hoja de estilos CSS si queremos adaptarlo un poquito a nuestra web. A continuación te dejamos un ejemplo de código CSS para modificar este buscador en tiempo real para que lo puedas modificar después a tu gusto si lo deseas.
.iss-on { background: none!important; } .iss_results { background: #232329; border-radius: 0 0 3px 3px; box-shadow: 0 5px 10px rgba(0,0,0,.4); } .iss_results li { font: 19px open, tahoma; padding: 10px 20px; } .iss_results li:last-child, .iss_results li.ac_over:last-child { border-radius: 0 0 3px 3px; } .iss_over { background: #008ae6 !important; cursor: pointer; color: white; } span.iss-sub { color: #232329; } .iss_over span.iss-sub { color: #008ae6!important; } .iss_results li.iss-more { text-align: center; background: #ddd; padding: 3px; display:none; }