Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo añadir una barra de búsqueda al menú de WordPress (paso a paso)

Si hay algo que tu menú de WordPress necesita, es una barra de búsqueda. En nuestra experiencia en la gestión de numerosos sitios de WordPress, hemos descubierto que una barra de búsqueda bien colocada puede marcar una gran diferencia en la participación del usuario y la navegación del sitio.

Cuando un menú no tiene barra de búsqueda, hemos observado que a los visitantes les cuesta encontrar un contenido concreto, sobre todo en sitios grandes con archivos extensos.

Sin embargo, añadir una barra de búsqueda al menú de WordPress no siempre es sencillo, especialmente si utilizas un tema clásico. Por eso hemos elaborado esta guía para mostrarte cómo añadir fácilmente una barra de búsqueda al menú de WordPress, independientemente del tema que utilices.

Adding a Search Bar to WordPress Menu

¿Por qué añadir 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 WordPress. Esto puede mejorar la experiencia del usuario, hacer que los visitantes permanezcan más tiempo en el sitio y aumentar la participación.

Por eso, la mayoría de los diseñadores y expertos en sitios web recomiendan añadir una barra de búsqueda en el menú de navegación, donde los usuarios puedan encontrarla fácilmente.

Add a search bar to WordPress menu

Dependiendo del tema que utilices, la forma de añadir una barra de búsqueda a tu menú será diferente. Si utilizas un tema clásico, entonces necesitarás un plugin de búsqueda de WordPress.

En cuanto a los usuarios de temas en bloque, pueden utilizar simplemente el Full Site Editor (FSE).

Teniendo esto en cuenta, repasemos los dos métodos uno por uno. Puedes utilizar los enlaces rápidos que aparecen a continuación para saltar a la sección que desees:

Método 1: Añadir una barra de búsqueda en el menú de un tema clásico de WordPress

Este primer método es para aquellos que utilizan 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 utiliza un tema clásico, sólo puede añadir el widget de búsqueda de WordPress a las zonas preparadas para widgets, como la barra lateral, no al menú de WordPress.

Para solucionar este problema, necesitará un complemento que le permita añadir una barra de búsqueda a otras áreas de su 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 muy bien con cualquier tema, y no tendrá un impacto negativo en el rendimiento de su sitio. Además, no requiere el plugin premium SearchWP.

Lo primero que tienes que hacer es instalar y activar el plugin SearchWP Modal Search Form. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, debe añadir la barra de búsqueda a su menú de WordPress. Simplemente vaya a Apariencia ” Menús y asegúrese de seleccionar el menú principal en el menú desplegable “Seleccionar menú para editar”.

Make Sure the Primary Menu Is Selected

A continuación, haga clic en el botón “Seleccionar”.

A continuación, haga clic en el cuadro Formularios de búsqueda emergente de SearchWP hacia la izquierda de la pantalla.

The SearchWP native search template

Puedes ver que el plugin ha añadido automáticamente una plantilla de búsqueda ‘Native WordPress’. Siga adelante y marque la casilla ‘WordPress nativo’.

A continuación, haga clic en el botón “Añadir al menú”.

Adding a search bar to the WordPress navigation menu

WordPress añadirá un nuevo elemento / artículo 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 se trata de un campo de búsqueda.

Para realizar este cambio, basta con escribir “Buscar” en el campo “Etiqueta de navegación”.

Adding a Search label to the WordPress navigation menu

Después, haz clic en el botón “Guardar menú” para guardar los 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 adaptarla a tu tema de WordPress, como puedes ver en las siguientes imágenes.

Search Preview

Método 2: Añadir una barra de búsqueda en el menú de un tema WordPress en bloque

Si utilizas un tema de WordPress en bloque, puedes utilizar el Editor del sitio completo para añadir una barra de búsqueda a tu menú de navegación.

Para hacerlo, simplemente vaya a Apariencia Editor en el área de administración de WordPress.

Selecting the Full-Site Editor from the WordPress admin panel

Ahora verás una lista de opciones para personalizar tu tema.

Aquí, basta con hacer clic en “Navegación”.

Selecting Navigation in WordPress Full Site Editing

A continuación, haga clic en el botón “Editar”.

Esto le dirigirá al editor de bloques.

Clicking the pencil edit button for Navigation in WordPress Full Site Editing

En esta fase, puede hacer clic en el botón “+ Añadir bloque” en cualquier lugar de la pantalla.

A continuación, seleccione el bloque Buscar.

Adding the search block to the navigation menu in Full Site Editor

Su menú de navegación debería tener ahora una barra de búsqueda.

Además, puedes editar el texto del marcador de posición y cambiarlo por algo como “¿Qué estás buscando?”. En la barra lateral de configuración del bloque, puedes personalizar el aspecto de la barra de búsqueda.

Adding a placeholder text in the search bar with Full Site Editor

Cuando estés satisfecho con el bloque de búsqueda, haz clic en “Guardar”.

Además de añadir una barra de búsqueda a su menú de navegación, hay muchas más formas de mejorar su experiencia de búsqueda en WordPress.

Una es usar SearchWP. Es el mejor plugin de búsqueda de WordPress para personalizar su algoritmo de búsqueda sin tocar ningún código.

Por ejemplo, puede hacer que su formulario de búsqueda sea aún más fácil de usar añadiendo resultados de búsqueda en directo mediante la tecnología Ajax. Esto mostrará automáticamente al visitante los resultados de búsqueda relevantes a medida que escriba la consulta, al igual que Google.

Para más información, puede leer nuestro artículo sobre cómo añadir la búsqueda Ajax en directo a su sitio WordPress.

Live Search Preview

Añadir una barra de búsqueda SearchWP también es fácil. Si utilizas el SearchWP Search Modal Form en el Método 1, entonces también puedes utilizar el plugin SearchWP con él.

Si utilizas un tema de bloques, SearchWP incluye un bloque de formulario de búsqueda integrado que puedes añadir en cualquier parte de tu sitio, incluido el menú de navegación.

Choosing between multiple search forms in WordPress

Aquí tienes otros consejos y trucos para mejorar la búsqueda en WordPress:

Esperamos que este artículo te haya ayudado a aprender cómo añadir una barra de búsqueda a un menú de WordPress. También puedes consultar nuestras guías sobre cómo dar estilo a los menús de navegación de WordPress y cómo añadir la función de búsqueda por voz a tu sitio 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.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

30 comentariosDeja una respuesta

  1. Angel Rodriguez

    Thanks for this, this plugin worked great and saved me from having to replace or edit my theme again.

    • WPBeginner Support

      Glad our recommendation was helpful!

      Administrador

  2. Maricel

    Thank you! Very helpful and very easy.

    • WPBeginner Support

      Glad to hear our article was helpful!

      Administrador

  3. Rawan

    These plugins are untested for WP version 5.8.1

    Is it still ok to install them or is there other plugins that are tested for that version?

  4. jafrin

    hi
    This video is very helpful for me.But I want bar menu is like amazon page .Please help me .How do create big search bar like in amazon page

  5. Erin

    Is there a way to display the results that are generated by the plugin differently? I get a list of images and descriptions but they display images in all different sizes. I would like them to display in the same way as my product pages do with 24 results per page, and 4 columns.
    thank you

    • WPBeginner Support

      For customizing the results page you would want to check with the plugin’s support and they should be able to assist.

      Administrador

  6. Okereke Divine

    As usual, wpbeginner has always been helpful. Thanks alot

    • WPBeginner Support

      You’re welcome, glad our guide could be helpful :)

      Administrador

  7. Parwez

    Sir, how did u create logo, search bar and menu in header side by side

    • WPBeginner Support

      Our theme is custom created so we manually set that up with the creation of the theme :)

      Administrador

  8. Angelica

    Really helpful! I find the default style is not visually pleasing, but the sliding option works a treat. Thanks for this.

    • WPBeginner Support

      You’re welcome, glad our article could be helpful :)

      Administrador

  9. Rochelle

    I would like the search item to appear as the first item in the menu, not the last. Is this possible?

    • WPBeginner Support

      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

  10. Anupam Kumar

    Hi,

    How to style the social icons like you did in your site for, with those gaps and lines , i dont know css,

    Thanks

  11. Rubb

    The explain it not right, the screens images is wrong and I think it is the wrong plugin

    • WPBeginner Support

      It appears the plugin has updated since this article was last updated, we will take a look into updating this post.

      Administrador

  12. James King

    This doesn’t work guys. There’s no such plugin for a start.

    • WPBeginner Support

      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

  13. Raymond

    Why is every solution on this website a plugin? Plugins bloat websites and slow them down; one would expect you to know that. There are better solutions than installing a plugin for everything!

    • WPBeginner Support

      We strive to make the solutions as simple as possible for our users which is why our articles tend toward plugins. This way if a user is not comfortable editing their site’s files they have a plugin option that can be easily removed from their site should it not work for them.
      Also, it’s not as simple as all plugins slow down your site. Poorly coded plugins slow down your site. https://www.wpbeginner.com/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/

      Administrador

  14. Ann

    why does my setting doesnt have an ADD TO SEARCH MENU

    • Dan Conway

      Not sure if it is due to an update but I noticed the same thing. But it seems the option can be found under ‘Ivory Search > Settings’ then you should be presented with the first settings which are ‘Menu search’ and the first expandable option to select a menu to add it to.

  15. Aditi Bisen

    Hi,
    Can we choose whether the search appears only for mobile/tablet version and not for desktop?

  16. Ihsan

    unfortunately, it doesn’t display correctly as it mess up with the nav menu. I’ve tried different plugins and all of those are the same. For newbie, seems like no other way but asking to the theme developer or professional help to code it manually.

    • Damith

      No, You don’t need to become developer or professional to make small custom CSS.

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.