Un efecto conmutador de búsqueda puede hacer que su sitio de WordPress tenga un aspecto elegante y moderno, ya que sustituye un voluminoso formulario de búsqueda por un simple icono.
Al hacer clic en el icono, aparece el formulario de búsqueda con una suave animación deslizante. Creemos que es una forma eficaz de mantener su sitio limpio y fácil de usar.
En esta guía, le guiaremos a través de la adición de la búsqueda de alternar efecto a su sitio de WordPress. Vamos a utilizar WPCode, un plugin que utilizamos a menudo, porque es fácil y no requiere ninguna habilidad de codificación de su parte.
¿Qué es el efecto conmutador de búsqueda en WordPress?
El efecto conmutador de búsqueda es una técnica de diseño web para mejorar la experiencia de búsqueda en un sitio web WordPress.
En lugar de mostrar un formulario de búsqueda, mostrará un icono de búsqueda. Cuando un usuario haga clic en él, aparecerá el formulario de búsqueda con una animación de deslizamiento.
El formulario de búsqueda por defecto de WordPress no se ve muy bien. Muchos de los mejores temas de WordPress ya reemplazan el formulario por defecto con sus estilos.
Sin embargo, si su tema sigue utilizando un formulario de búsqueda estático y sencillo, puede utilizar este tutorial para hacerlo más fácil de usar.
Con esto en mente, veamos cómo añadir fácilmente el efecto conmutador de búsqueda en WordPress y hacer que su sitio sea más interactivo.
Nota: Este tutorial es más adecuado para usuarios de WordPress de nivel intermedio y avanzado, ya que requiere algunos conocimientos básicos de HTML / CSS.
Añadir un efecto conmutador de búsqueda en WordPress
Para añadir un efecto de conmutador de búsqueda en WordPress, deberá colocar un bloque o widget de formulario de búsqueda en su sitio web y, a continuación, añadir código CSS personalizado.
En primer lugar, asegurémonos de que dispone de un formulario de búsqueda en su sitio web.
Añadir un formulario de búsqueda en un tema de bloques con edición completa del sitio
Si estás utilizando un tema en bloque de WordPress con la característica de edición completa del sitio, así es como añadirás el formulario de búsqueda a tu sitio web.
Simplemente visite Apariencia ” Editor desde su escritorio de WordPress. En la pantalla de edición, tendrá que añadir el bloque “Buscar” donde desea mostrar el formulario de búsqueda.
Después, no olvides hacer clic en el botón “Guardar” para guardar los cambios.
Añadir un formulario de búsqueda en otros temas de WordPress
En el caso de los temas de WordPress sin la característica de edición completa del sitio, puede añadir el bloque de búsqueda o el widget a la barra lateral o a cualquier zona preparada para widgets.
Para ello, deberás dirigirte a Apariencia ” Widgets desde tu escritorio de WordPress. A continuación, puedes añadir el bloque/widget “Buscar” a la barra lateral donde quieras mostrar el formulario de búsqueda.
A continuación, busquemos una imagen transparente para el icono de búsqueda.
Para este tutorial, estamos utilizando esta imagen, ya que es adecuado para fondos oscuros (no dude en utilizarlo en su sitio web).
Si necesitas crear tu propio icono de búsqueda, entonces sería genial crear una imagen PNG transparente con unas dimensiones de no más de 50×50 píxeles.
El siguiente paso es subir el icono a su sitio web. Simplemente vaya a Medios ” Añadir nuevo y haga clic en “Seleccionar archivos” para subir la imagen del icono de búsqueda.
Una vez subido, haz clic en el botón “Copiar URL al portapapeles” y pega la URL en un editor de texto sin formato como Notepad o TextEdit.
Ahora que todo está en su lugar, tendrá que añadir un poco de CSS personalizado a su sitio web de WordPress. Recomendamos usar el plugin WPCode para guardar tu CSS personalizado.
WPCode te permite añadir fácilmente fragmentos de código personalizados en WordPress. Es fácil de usar, y su código no se verá afectado por las actualizaciones de tema o cuando cambie a un tema diferente.
Así que, vamos a instalar y activar el plugin gratuito WPCode. Si necesitas ayuda, puedes consultar nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activado, visite la página Fragmentos de código en su escritorio de administración de WordPress. A continuación, haz clic en el botón “Añadir nuevo” de la parte superior.
En la siguiente pantalla, verás la biblioteca de fragmentos de código WPCode.
Vaya a la opción “Añadir código personalizado (nuevo fragmento)” de la biblioteca y haga clic en el botón “Añadir fragmento personalizado” situado debajo.
Después de eso, una lista de tipos de código aparecerá en la pantalla. Tienes que seleccionar la opción ‘HTML Snippet’ para este tutorial.
Esto se debe a que cargará el CSS personalizado en la cabecera del sitio web utilizando HTML.
A partir de ahí, debe proporcionar un título para este fragmento de código. Puede ser cualquier cosa que le ayude a identificar el fragmento.
Ahora, puede pegar el siguiente código en el cuadro “Vista previa del código”:
<style type="text/css">
.wp-block-search__inside-wrapper
.wp-block-search__input {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.wp-block-search__inside-wrapper
.wp-block-search__input:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
</style>
Importante: No olvide sustituir /url/to/search-icon.pngporla URL de la imagen que ha copiado anteriormente.
Después, tendrás que cambiar el conmutador “Inactivo” a “Activo”.
Una vez hecho esto, es hora de hacer clic en el botón “Guardar fragmento de código”.
¡Y ya está!
Si visita su sitio web, podrá ver su formulario de búsqueda con el efecto conmutador en acción.
Diagnosticar problemas Buscar formulario Efecto conmutador
El método anterior funcionaría con la mayoría de los temas modernos de WordPress que utilizan bloques de widgets. Sin embargo, para algunos temas, este método puede no funcionar.
Esto puede ocurrir si el formulario de búsqueda de tu tema de WordPress no tiene las clases wp-block-search__inside-wrapper y wp-block-search__input.
En ese caso, tendrá que utilizar la herramienta Inspeccionar para averiguar qué clases CSS utiliza su tema de WordPress.
Por ejemplo, en la captura de pantalla siguiente, nuestro tema de demostración utiliza estas clases CSS para el formulario de búsqueda.
Ahora, puede modificar el código de abajo y utilizar estas clases CSS en su lugar. He aquí un ejemplo:
<style type="text/css">
.search-wrap input.s {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.search-wrap input.s:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
</style>
Así se ve en nuestro sitio web de prueba:
Consejo extra: Añadir una mejor búsqueda de WordPress para su sitio web
El efecto conmutador solo hace que el formulario de búsqueda de WordPress parezca más bonito. No afecta a la calidad de los resultados de búsqueda de su sitio web.
WordPress viene con una característica de búsqueda muy básica por defecto. Esta característica suele ser lenta, imprecisa y puede mostrar resultados en blanco.
Aquí es donde entra SearchWP.
SearchWP es el mejor plugin de búsqueda para WordPress del mercado. Le permite reemplazar fácilmente la característica de búsqueda por defecto con un potente motor de búsqueda.
SearchWP sustituye automáticamente los formularios de búsqueda, por lo que no es necesario editar ningún archivo de tema. Busca coincidencias en cualquier parte de tu sitio web y mejora drásticamente la calidad de los resultados de búsqueda.
También viene con una extensión de búsqueda en vivo que muestra instantáneamente los resultados a medida que los usuarios escriben sus consultas. Además, es compatible con / dar soporte completo de comercio electrónico, lo que le permite crear una experiencia de búsqueda inteligente WooCommerce en su tienda en línea.
Para obtener instrucciones paso a paso, no dudes en marcar / comprobar nuestra guía sobre cómo mejorar la búsqueda en WordPress con SearchWP.
Esperamos que este artículo te haya ayudado a aprender cómo añadir un efecto conmutador de búsqueda en WordPress. A continuación, puede que también quieras ver nuestra guía sobre cómo añadir capacidad de búsqueda por voz a tu sitio de WordPress y cómo excluir páginas de los resultados de búsqueda de WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
James Burns
Thank you so much. Exactly the info I needed, presented in an easy-to-understand format.
WPBeginner Support
You’re welcome, glad you found our content helpful
Administrador
Osh
Hi,
I’m using a child theme, should i add those codes to the parent theme’s files?
I tried to do that and it is not working, please help !!!
Thanks
WPBeginner Support
You would want to add the code to your child theme
Administrador
Benjamin Rutledge
Is it possible to implement this only on mobile? My theme has a nice animated search function on desktop, but only a toggle to show/hide search box in place of my logo on mobile.
Beth Terry
Hi. Thank you very much for this code. I did have to play around with the positioning to get the search button to appear where I want it, and since I only wanted it to appear in the mobile version, I also added css to the media query for over 800px screens to show the full search field instead of the icon. I got it working great, but I do think it’s a little complicated for folks who just want something to basically plug and play.
You can view the results here:
To everyone who doubts, javascript is definitely not needed.
Beth Terry
Also, I want to add that I am using a Twenty Twelve child theme, which comes with the HTML4 search code. Adding the HTML5 support to the functions.php did not fix it, so I copied and pasted the HTML5 search code that you posted above into my theme header where I wanted to search box to be.
Emily G
Hi there – implementing this on a website and would like to use FontAwesome instead of an image. I cannot get the icon to show yup, however. Do you have any tips? I am adding the font and icon font-family: FontAwesome;
content: “\f002″; to the .search-form input[type=”search”]
Thanks!
Bradley
Try this:
font: normal normal normal 1em/1 FontAwesome;
Steve
I was so hoping this would work for me. I pasted in the code in the Additional CSS area of my theme (twentytwelvechild), added the search-icon.png to my theme folder using FTM and added add_theme_support(‘html5’, array(‘search-form’)); to my theme’s functions.php file. I see no change and wonder what I have missed. I hope someone can offer me a clue. thank you.
Harmandeep Singh
Its not working.
Crowd
Thank you very much, works like a charm.
Do you think there’s a way to make the search field appear from right to left (unlike from left to right like now)?
Marimar
Align the text to the right
text-align: right;
It slides to the other side.
Tony López
Thanks! It work perfectly.
Cato
Yeah… just like I thought, this doesn´t work at all. How is it supossed to work with no JS anyway?
Cato
Hmmm this is kind of old but… no javascript required here really? what kind of dark magic is this?
WPBeginner Support
Instead of JS, this technique uses CSS.
Administrador
SiRetu
Thanks for the code… Is this responsive? I mean, I want the search field is fully showed when in mobile. Is it possible?
Panfi
Not working for me and wonder why
Cassy
I got this working on genesis but my search form is in my nav bar, and when the screen width is relatively too small, the search form moves down.
Sohan
It works!
Thank you soooooooooooooo much!
Anur
I dont think this works on Genesis
Cassy
I got it working on Genesis. You have to move the search-icon.png into your genesis child theme images folder. Then, depending on where you put your search form, mine is in the nav bar so it is slightly different, you adjust the css style to your likes. I had to modify the “.genesis-nav-menu .search input” class to get it working.
Laura
Hi Cassy, Can you give a little more info on how you modified the .genesis-nav-menu .search input class? I can’t seem to get it working. Thanks!
Maria
Hi! I’m using Genesis and I can’t get this effect to work. Any tips as to why?
Anur
yea the same problem im on genesis with enteprise pro theme doesnt work.
Anyone who has solution to make this work on genesis..
Roy
this is really great! Is it possible to get the icon to sit static at the right while the form slides out to the left? I can’t seem to figure it out!
Joshua Farr
Greetings – Thank you for this great bit of code. I’ve tried inserting it into a client’s site that I’m working, using the HTML5 version of the code, I placed the extra bit into functions.php and added all of the css. I put in a search icon and got the form to show up how I want on the site – it will even do all of the toggle-ing effect as desired – but when I enter text that I want to search to test it out, I can not submit the search to view search results. We are using a woocommerce theme, “Mystile”, which has a default search form (which works when entered) but I much prefer the looks and functionality of the form as mentioned on this page.
We tried putting the wocommerce search form code side by side with the code you gave above, tried swapping out bits and pieces to “merge” the two…but no luck.
Any reccomendations would be extremely helpful.
Thank you!
-Josh
WPBeginner Support
There could be many things that may cause this, it is not possible for us to help out with theme compatibility issues.
Administrador
Rajeesh Nair
Now that’s some interesting stuff there. Though I am a mere beginner and I actually use the search option that has come default with the blog theme which is like a pop-up (not exactly a pop-up though as its CSS and not javascript) and displays search bar.
But what I am exactly looking for is that how to display Google Search along with Blog search as found in popular blogs like ListVerse and others. Please guide me through this!
WPBeginner Support
Take a look at our guide on how to add Google search in WordPress.
Administrador
adolf witzeling
Another great tutorial. I will add this to my site-just because it’s cool.
alexisnicholson
Code looks fabulous , I appreciate your efforts , surely gonna try this one for my word press project .
Codingbrains
Shahraar Khan
A demo would be helpful.. Also what does the use of role=”search” attribute in the form tag, what is the attribute “role” used for?
Susan Silver
I have been looking for a simple tutorial on this. Thanks! Have you done one yet on the sliding menus like those on the Facebook mobile app? These menus are becoming very popular, even for desktop apps.
WPBeginner Support
Actually we have, checkout how to add a slide panel menu in WordPress.
Administrador