Una alternancia de búsqueda limpia y deslizante puede hacer que tu sitio de WordPress se sienta instantáneamente elegante y moderno. En lugar de mostrar una barra de búsqueda completa en tu encabezado o esconderla por completo, un efecto de alternancia mantiene tu diseño ordenado y facilita el acceso a la búsqueda.
Hemos visto que este pequeño detalle de la interfaz de usuario marca una gran diferencia, dando a los sitios un aspecto más pulido y profesional sin añadir desorden.
¿La mejor parte? Hay formas de hacerlo de manera inteligente y eficiente.
En este tutorial, te mostraremos exactamente cómo agregar un efecto de alternancia de búsqueda suave y deslizante en WordPress. Ya sea que tengas un blog, un sitio de negocios o una tienda en línea, esta mejora ayudará a mejorar la experiencia de tu usuario con un toque simple y elegante. 🎨
¿Qué es el efecto de alternancia de búsqueda en WordPress?
El efecto de alternancia de búsqueda es una técnica de diseño web que te permite, en lugar de mostrar un formulario de búsqueda, mostrar un ícono de búsqueda. Cuando un usuario hace clic en él, el formulario de búsqueda aparece con una animación deslizante.
El formulario de búsqueda predeterminado de WordPress no se ve muy bien. Muchos temas populares de WordPress ya reemplazan el formulario predeterminado con sus estilos.
Sin embargo, si tu tema todavía usa un formulario de búsqueda estático y simple, puedes usar este tutorial para hacerlo más fácil de usar.
Con esto en mente, te mostraremos cómo agregar fácilmente el efecto de alternancia de búsqueda en WordPress y hacer que tu sitio sea más interactivo. Aquí tienes un resumen rápido de todos los temas que cubriremos en esta guía:
- Agregar un efecto de alternancia de búsqueda en WordPress
- Solución de problemas del efecto de alternancia del formulario de búsqueda
- Consejo adicional: Agrega una mejor búsqueda de WordPress para tu sitio web
- Preguntas frecuentes: Agregar un efecto de alternancia de búsqueda en WordPress
- Más guías para mejorar tu búsqueda en WordPress
💡 Consejo interno: Este tutorial es más adecuado para usuarios de WordPress de nivel intermedio y avanzado, ya que requiere conocimientos básicos de HTML / CSS.
Empecemos.
Agregar un efecto de alternancia de búsqueda en WordPress
Para agregar un efecto de alternancia de búsqueda en WordPress, necesitarás colocar un bloque o widget de formulario de búsqueda en tu sitio web y luego agregar algo de código CSS personalizado.
Primero, asegúrate de que tienes un formulario de búsqueda en tu sitio web.
Agregar un formulario de búsqueda en un tema de bloques con edición completa del sitio
Si estás utilizando un tema de bloques de WordPress con la función de edición completa del sitio, así es como agregarás el formulario de búsqueda a tu sitio web.
Simplemente visita Apariencia » Editor desde tu panel de WordPress. En la pantalla de edición, querrás agregar el bloque 'Buscar' donde quieras mostrar el formulario de búsqueda.
Después de eso, no olvides hacer clic en el botón ‘Guardar’ para almacenar tus cambios.
Agregar un formulario de búsqueda en otros temas de WordPress
Para temas de WordPress sin la función de edición completa del sitio, puedes agregar el bloque o widget de búsqueda a tu barra lateral o a cualquier área lista para widgets.
Para hacer esto, dirígete a Apariencia » Widgets desde tu panel de WordPress. Luego, puedes agregar 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 ícono de búsqueda.
Para este tutorial, estamos usando esta imagen, ya que es adecuada para fondos oscuros (siéntete libre de usarla en tu sitio web).
Si necesitas crear tu propio ícono de búsqueda, sería genial crear una imagen PNG transparente con dimensiones de no más de 50x50 píxeles.
El siguiente paso es subir el ícono a tu sitio web. Simplemente ve a Medios » Añadir nuevo y haz clic en 'Seleccionar Archivos' para subir tu imagen del ícono de búsqueda.
Una vez cargado, querrás hacer clic en el botón ‘Copiar URL al portapapeles’ y pegar la URL en un editor de texto plano como el Bloc de notas o TextEdit.
Ahora que todo está en orden, necesitarás agregar CSS personalizado a tu sitio web de WordPress. Recomendamos usar WPCode, el mejor plugin de fragmentos de código, para guardar tu CSS personalizado.
WPCode te permite agregar fragmentos de código personalizados en WordPress fácilmente. Es fácil de usar y tu código no se verá afectado por las actualizaciones del tema ni cuando cambies a un tema diferente.
Algunas de nuestras marcas asociadas lo usan para agregar y administrar sus fragmentos personalizados. Les ha funcionado excepcionalmente bien, y puedes obtener más información al respecto en nuestra reseña detallada de WPCode.
Así que, instalemos y activemos el plugin gratuito WPCode. Si necesitas ayuda, puedes ver nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Después de la activación, simplemente visita la página Fragmentos de código » + Agregar fragmento en tu panel de administración de WordPress.
En la siguiente pantalla, verás la Biblioteca de fragmentos de WPCode.
Pasa el cursor sobre la opción 'Agregar tu código personalizado (Nuevo fragmento)' en la biblioteca y haz clic en el botón 'Agregar fragmento personalizado' cuando aparezca.
Después de eso, aparecerá una lista de tipos de código en la pantalla. Debes seleccionar la opción 'Fragmento de HTML' para este tutorial.
Esto se debe a que cargarás el CSS personalizado en el encabezado del sitio web usando HTML.
A partir de ahí, necesitas proporcionar un título para este fragmento de código.
Podría ser cualquier cosa que te ayude a identificar el fragmento.
Ahora, puedes 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 olvides reemplazar /url/to/search-icon.png con la URL de la imagen que copiaste anteriormente.
Después de eso, necesitarás cambiar el interruptor 'Inactivo' a 'Activo'.
Luego, no olvides hacer clic en el botón 'Guardar fragmento'.
¡Y eso es todo!
Si visitas tu sitio web, puedes ver tu formulario de búsqueda con el efecto de alternancia en acción.
Solución de problemas del efecto de alternancia del formulario de búsqueda
El método anterior funcionaría con la mayoría de los temas de WordPress que usan bloques de widgets modernos. Sin embargo, para algunos temas, este método podría no funcionar.
Esto podría suceder si el formulario de búsqueda en tu tema de WordPress no tiene las clases wp-block-search__inside-wrapper y wp-block-search__input.
En ese caso, necesitarás usar la herramienta Inspeccionar elemento para averiguar qué clases CSS utiliza tu tema de WordPress.
Por ejemplo, en la siguiente captura de pantalla, nuestro tema de demostración utiliza estas clases CSS para el formulario de búsqueda.
Ahora, puedes modificar el código a continuación y usar estas clases CSS en su lugar.
Aquí tienes 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í es como se veía en nuestro sitio web de prueba:
Consejo adicional: Agrega una mejor búsqueda de WordPress para tu sitio web
El efecto de alternancia solo hace que tu formulario de búsqueda de WordPress se vea bien. No afecta la calidad de los resultados de búsqueda de tu sitio web.
WordPress viene con una función de búsqueda muy básica por defecto. Esta función a menudo es lenta, imprecisa y podría mostrar resultados en blanco.
Aquí es donde entra SearchWP, el mejor plugin de búsqueda de WordPress. Te permite reemplazar fácilmente la función de búsqueda predeterminada con un potente motor de búsqueda.
Lo hemos probado para explorar todas sus funciones, y puedes ver nuestra reseña completa de SearchWP para obtener más información al respecto.
SearchWP reemplaza automáticamente los formularios de búsqueda, por lo que no necesitas editar ningún archivo del tema. Busca coincidencias en todas partes 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, tiene soporte completo para eCommerce, lo que te permite crear una experiencia de búsqueda inteligente de WooCommerce en tu tienda en línea.
Para obtener instrucciones paso a paso, no dudes en consultar nuestra guía sobre cómo mejorar la búsqueda de WordPress con SearchWP.
Preguntas frecuentes: Agregar un efecto de alternancia de búsqueda en WordPress
¿Tienes preguntas sobre cómo funciona el interruptor de búsqueda o cómo personalizarlo en tu sitio de WordPress? Aquí tienes algunas preguntas comunes que recibimos, con respuestas claras para ayudarte.
¿Necesito saber de codificación para agregar un efecto de interruptor de búsqueda?
Realmente no. Si bien una comprensión básica de HTML o CSS puede ayudar, puedes seguir los pasos de esta guía sin experiencia en codificación.
¿Qué pasa si mi tema no muestra el efecto del interruptor correctamente?
Algunos temas pueden necesitar ajustes adicionales. Si el interruptor no se muestra correctamente, puedes usar la herramienta Inspeccionar del navegador para encontrar las clases CSS de tu tema y modificar el CSS personalizado como se muestra en el tutorial.
¿Este interruptor de búsqueda funcionará en dispositivos móviles?
¡Sí! El efecto del interruptor es receptivo y debería funcionar bien tanto en escritorio como en dispositivos móviles. Solo asegúrate de probarlo en diferentes tamaños de pantalla para confirmar que todo se ve bien.
¿Puedo usar cualquier imagen para el ícono de búsqueda?
Sí, pero es mejor usar un ícono PNG transparente que resalte sobre el fondo de tu sitio. Recomendamos mantenerlo por debajo de 50×50 píxeles para que se vea nítido y cargue rápido.
Más guías para mejorar tu búsqueda en WordPress
Esperamos que este artículo te haya ayudado a aprender cómo agregar un efecto de alternancia de búsqueda en WordPress. A continuación, es posible que encuentres útiles estas guías:
- Cómo agregar una barra de búsqueda al menú de WordPress
- Cómo buscar por categoría en WordPress
- Cómo agregar búsqueda multilingüe en WordPress
- Cómo incluir tipos de contenido personalizado en los resultados de búsqueda de WordPress
- Cómo crear un directorio de miembros buscable en WordPress
- Cómo crear una base de datos buscable en WordPress
- Cómo excluir páginas de los resultados de búsqueda de WordPress
- Cómo agregar capacidad de búsqueda por voz a tu sitio de WordPress
- Los mejores plugins de búsqueda para usuarios de WordPress
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Prad
Gracias por esto.
La interfaz de usuario del bloque de búsqueda predeterminado es bastante insípida. Me gusta esta implementación. Sin embargo, cuando se selecciona "Solo botón", al hacer clic en el ícono de búsqueda, la barra de búsqueda aparece a la izquierda, empujando el menú y esto arruina la interfaz de usuario. ¿Hay alguna forma de hacer que la barra de búsqueda aparezca debajo del botón de búsqueda como en muchos sitios web? Ese enfoque parece mucho más limpio, en mi opinión.
Gracias.
Soporte de WPBeginner
That can be a little more complex depending on the implementation but we may look into something like that for a possible future update to the article
Administrador
Dennis Muthomi
Tengo este efecto en el sitio web de un cliente.
Una cosa que deberías considerar al implementar esta función es la experiencia móvil.
En pantallas más pequeñas, podría ser beneficioso ajustar el CSS para asegurar que la barra de búsqueda expandida no se superponga con otros elementos.
Jiří Vaněk
Estaba buscando una manera de ahorrar espacio en mi menú principal, donde el cuadro de búsqueda ocupaba bastante espacio. Honestamente, no se me ocurría cómo ahorrar espacio porque el menú era bastante largo. Así que intenté reducir el tamaño del cuadro de búsqueda. Después de leer este artículo, apliqué tu solución y es exactamente lo que estaba buscando. La búsqueda en mi sitio web no se usa con mucha frecuencia, y esta es una solución elegante para dar espacio al menú principal y reducir el cuadro de búsqueda al tamaño necesario. Gran trabajo.
Soporte de WPBeginner
¡Me alegra que te haya resultado útil!
Administrador
James Burns
Muchas gracias. Exactamente la información que necesitaba, presentada en un formato fácil de entender.
Soporte de WPBeginner
You’re welcome, glad you found our content helpful
Administrador
Osh
Hola,
Estoy usando un tema hijo, ¿debería agregar esos códigos a los archivos del tema padre?
Intenté hacer eso y no funciona, ¡¡¡por favor ayuden!!!
Gracias
Soporte de WPBeginner
Querrás agregar el código a tu tema hijo
Administrador
Benjamin Rutledge
¿Es posible implementar esto solo en móvil? Mi tema tiene una bonita función de búsqueda animada en escritorio, pero solo un interruptor para mostrar/ocultar el cuadro de búsqueda en lugar de mi logo en móvil.
Beth Terry
Hola. Muchas gracias por este código. Tuve que jugar con el posicionamiento para que el botón de búsqueda apareciera donde quería, y como solo quería que apareciera en la versión móvil, también agregué CSS a la consulta de medios para pantallas de más de 800px para mostrar el campo de búsqueda completo en lugar del icono. Lo hice funcionar muy bien, pero creo que es un poco complicado para personas que solo quieren algo para conectar y usar.
Puedes ver los resultados aquí:
Para todos los que dudan, definitivamente no se necesita JavaScript.
Beth Terry
Además, quiero agregar que estoy usando un tema hijo de Twenty Twelve, que viene con el código de búsqueda HTML4. Agregar el soporte HTML5 a functions.php no lo solucionó, así que copié y pegué el código de búsqueda HTML5 que publicaste arriba en el encabezado de mi tema donde quería que estuviera el cuadro de búsqueda.
Emily G
Hola – estoy implementando esto en un sitio web y me gustaría usar FontAwesome en lugar de una imagen. Sin embargo, no puedo hacer que el ícono se muestre. ¿Tienes algún consejo? Estoy agregando la fuente y la familia de fuentes del ícono: FontAwesome;
content: “\f002″; a .search-form input[type=”search”]
¡Gracias!
Bradley
Intenta esto:
font: normal normal normal 1em/1 FontAwesome;
Steve
Tenía muchas esperanzas de que esto funcionara para mí. Pegué el código en el área CSS Adicional de mi tema (twentytwelvechild), agregué search-icon.png a la carpeta de mi tema usando FTM y agregué add_theme_support('html5', array('search-form')); a mi archivo functions.php del tema. No veo ningún cambio y me pregunto qué me he perdido. Espero que alguien pueda darme una pista. Gracias.
Harmandeep Singh
No funciona.
Multitud
Muchas gracias, funciona a la perfección.
¿Crees que hay una forma de hacer que el campo de búsqueda aparezca de derecha a izquierda (a diferencia de izquierda a derecha como ahora)?
Marimar
Alinear el texto a la derecha
text-align: right;
Se desliza hacia el otro lado.
Tony López
¡Gracias! Funciona perfectamente.
Cato
Sí… justo como pensaba, esto no funciona para nada. ¿Cómo se supone que funcione sin JS de todos modos?
Cato
Hmmm, esto es algo viejo pero… ¿no se requiere JavaScript aquí realmente? ¿Qué tipo de magia oscura es esta?
Soporte de WPBeginner
En lugar de JS, esta técnica usa CSS.
Administrador
SiRetu
Gracias por el código… ¿Es responsivo? Quiero decir, quiero que el campo de búsqueda se muestre completamente cuando esté en el móvil. ¿Es posible?
Panfi
Not working for me and wonder why
Cassy
Logré que esto funcionara en Genesis, pero mi formulario de búsqueda está en mi barra de navegación y, cuando el ancho de la pantalla es relativamente pequeño, el formulario de búsqueda se mueve hacia abajo.
Sohan
¡Funciona!
¡Muchísimas gracias!
Anur
No creo que esto funcione en Genesis
Cassy
Logré que funcionara en Genesis. Tienes que mover search-icon.png a la carpeta de imágenes de tu tema hijo de Genesis. Luego, dependiendo de dónde coloques tu formulario de búsqueda, el mío está en la barra de navegación, así que es un poco diferente, ajustas el estilo CSS a tu gusto. Tuve que modificar la clase “.genesis-nav-menu .search input” para que funcionara.
Laura
Hola Cassy, ¿Puedes dar un poco más de información sobre cómo modificaste la clase .genesis-nav-menu .search input? No parece que funcione. ¡Gracias!
Maria
¡Hola! Estoy usando Genesis y no consigo que este efecto funcione. ¿Algún consejo sobre por qué?
Anur
Sí, el mismo problema, estoy en Genesis con el tema Enterprise Pro y no funciona.
¿Alguien tiene una solución para que esto funcione en Genesis..
Roy
¡esto es realmente genial! ¿Es posible hacer que el ícono se quede estático a la derecha mientras el formulario se desliza hacia la izquierda? ¡No parece que pueda resolverlo!
Joshua Farr
Saludos – Gracias por este gran fragmento de código. He intentado insertarlo en el sitio de un cliente en el que estoy trabajando, usando la versión HTML5 del código, coloqué el fragmento adicional en functions.php y agregué todo el CSS. Puse un ícono de búsqueda y logré que el formulario apareciera como quiero en el sitio – incluso hará todos los efectos de alternancia como se desea – pero cuando ingreso texto que quiero buscar para probarlo, no puedo enviar la búsqueda para ver los resultados. Estamos usando un tema de woocommerce, “Mystile”, que tiene un formulario de búsqueda predeterminado (que funciona cuando se ingresa) pero prefiero mucho la apariencia y funcionalidad del formulario como se menciona en esta página.
Intentamos colocar el código del formulario de búsqueda de woocommerce al lado del código que proporcionaste arriba, intentamos intercambiar partes para “fusionar” los dos… pero sin éxito.
Cualquier recomendación sería de gran ayuda.
¡Gracias!
-Josh
Soporte de WPBeginner
Podría haber muchas cosas que causen esto, no es posible que ayudemos con problemas de compatibilidad de temas.
Administrador
Rajeesh Nair
Ahora, eso es algo interesante. Aunque soy un simple principiante y en realidad uso la opción de búsqueda que viene por defecto con el tema del blog, que es como una ventana emergente (aunque no exactamente emergente ya que es CSS y no javascript) y muestra la barra de búsqueda.
Pero lo que estoy buscando exactamente es cómo mostrar la Búsqueda de Google junto con la búsqueda del blog, como se encuentra en blogs populares como ListVerse y otros. ¡Por favor, guíame a través de esto!
Soporte de WPBeginner
Echa un vistazo a nuestra guía sobre cómo agregar la búsqueda de Google en WordPress.
Administrador
adolf witzeling
Otro gran tutorial. Lo agregaré a mi sitio, solo porque es genial.
alexisnicholson
El código se ve fabuloso, aprecio tus esfuerzos, seguro que probaré este para mi proyecto de WordPress.
Codingbrains
Shahraar Khan
Sería útil una demostración... ¿Y qué significa el uso del atributo role=\"search\" en la etiqueta form? ¿Para qué se usa el atributo \"role\"?
Susan Silver
He estado buscando un tutorial sencillo sobre esto. ¡Gracias! ¿Ya has hecho uno sobre los menús deslizables como los de la aplicación móvil de Facebook? Estos menús se están volviendo muy populares, incluso para aplicaciones de escritorio.
Soporte de WPBeginner
De hecho, lo hemos hecho, echa un vistazo a cómo agregar un menú de panel deslizante en WordPress.
Administrador