Un menú de navegación bien estructurado es esencial para guiar a los visitantes a través de su sitio de WordPress y garantizar que puedan encontrar fácilmente la información que necesitan.
Tanto si está estableciendo su primer sitio web como si está intentando mejorar la experiencia del usuario en uno ya existente, aprender a añadir y personalizar un menú de navegación es una habilidad importante.
WordPress viene con una interfaz de menú de arrastrar y soltar que puede utilizar para crear fácilmente menús de cabecera, menús con opciones desplegables y mucho más.
A lo largo de los años, hemos creado una gran variedad de menús para nuestras diferentes marcas, lo que nos ha proporcionado experiencia de primera mano en el diseño de estilos de menús. Hemos aprendido qué tipos de menús funcionan mejor para los distintos negocios, qué enlaces y páginas incluir y cómo optimizar la navegación para mejorar la experiencia del usuario.
En esta guía paso a paso, le mostraremos cómo añadir fácilmente un menú de navegación en WordPress.
¿Qué es un menú de navegación?
Un menú de navegación es una lista de enlaces que apuntan a áreas importantes de un sitio web. Suelen presentarse como una barra horizontal de enlaces en la parte superior de cada página de un sitio WordPress.
Estos menús estructuran su sitio y ayudan a los visitantes a encontrar lo que buscan. Este es el aspecto del menú de navegación en WPBeginner:
Con WordPress es muy fácil añadir menús y submenús. Puede añadir enlaces a sus páginas, categorías o debates más importantes, entradas de blog e incluso enlaces personalizados, como su perfil en los medios sociales.
La ubicación exacta de su menú dependerá de su tema de WordPress. La mayoría de los temas tendrán varias opciones, por lo que puede crear diferentes menús que se pueden mostrar en diferentes lugares.
Por ejemplo, la mayoría de los temas de WordPress tienen un menú principal que aparece en la parte superior. Algunos temas también pueden incluir un menú secundario, un menú de pie de página o un menú de navegación móvil.
Dicho esto, veamos cómo crear un menú de navegación personalizado en WordPress.
- Creating Your First Custom Navigation Menu
- Creating Drop-Down Menus in WordPress
- Adding Categories to WordPress Menus
- Adding Custom Links to Your WordPress Navigation Menus
- Editing or Removing a Menu Item in WordPress Navigation Menus
- Adding Navigational Menus in Full Site Editor (FSE)
- Adding WordPress Menus in Sidebars and Footers
- Going Further with Navigation Menus
- Video Tutorial
- FAQs About WordPress Menus
Cómo crear su primer menú de navegación personalizado
Para crear un menú de navegación, debe visitar la página Apariencia ” Menús en su escritorio de administrador de WordPress.
Nota: Si no ves la opción‘Apariencia ” Menús‘ en tu sitio y solo ves‘Apariencia ” Editor‘, significa que tu tema tiene activada la edición completa del sitio (FSE). Puede hacer clic aquí para omitir la sección FSE que aparece a continuación.
Una vez allí, dale un nombre al menú, por ejemplo “Menú de navegación superior”, y haz clic en el botón “Crear menú”.
Esto expandirá el área del menú, y se verá así:
A continuación, puede elegir las páginas que desea añadir al menú. Puede añadir automáticamente todas las páginas nuevas de nivel superior o seleccionar páginas concretas de la columna de la izquierda.
Primero, haz clic en la pestaña “Ver todo” para ver todas las páginas de tu sitio. Después, haga clic en la casilla situada junto a cada una de las páginas que desee añadir a su menú y, a continuación, haga clic en el botón “Añadir al menú”.
Una vez añadidas las páginas, puede desplazarlas arrastrándolas y soltándolas en la sección “Estructura del menú”.
De este modo, puede cambiar su orden y reorganizarlos.
Nota: Todos los elementos del menú aparecen en una lista vertical (de arriba a abajo) en el editor de menús. Cuando pongas el menú en funcionamiento en tu sitio, se mostrará vertical u horizontalmente (de izquierda a derecha), dependiendo de la ubicación que selecciones.
La mayoría de los temas tienen varias ubicaciones diferentes donde puedes poner menús. En este ejemplo, estamos utilizando el tema Astra, que tiene 5 ubicaciones diferentes.
Después de añadir páginas al menú, seleccione la ubicación en la que desea mostrarlo y haga clic en el botón “Guardar menú”.
Consejo: Si no está seguro de dónde se encuentra cada ubicación, intente guardar el menú en diferentes sitios y, a continuación, visite su sitio para ver cómo queda. Probablemente no quiera utilizar todas las ubicaciones, pero sí más de una.
Para más detalles sobre este tema, puede consultar nuestro tutorial sobre cómo crear un menú de navegación vertical en WordPress.
Aquí está nuestro menú terminado en el sitio:
Creación de menús desplegables en WordPress
Los menús desplegables, a veces llamados menús anidados, son menús de navegación con elementos de menú padre e hijo.
Cuando sitúe el cursor sobre un elemento / artículo principal, todos los elementos secundarios aparecerán debajo de él en un submenú.
Para crear un submenú, arrastre un elemento / artículo debajo del elemento principal y luego arrástrelo ligeramente hacia la derecha. Lo hemos hecho con 3 subelementos debajo de “Servicios” en nuestro menú:
Incluso puedes añadir varias capas de desplegables para que tu submenú tenga un submenú. Esto puede terminar pareciendo un poco desordenado, y muchos temas no son compatibles con menús desplegables de varias capas.
Para obtener instrucciones más detalladas, consulte nuestro tutorial sobre cómo crear un menú desplegable en WordPress.
Aquí está el submenú en vivo en nuestro sitio de demostración:
Añadir categorías a los menús de WordPress
Si tiene un blog en WordPress, puede añadir las categorías de su blog en el menú desplegable de WordPress.
Nosotros hacemos esto en WPBeginner y tenemos múltiples categorías como noticias, temas, tutoriales y más.
Puede añadir fácilmente categorías a su menú haciendo clic en la pestaña Categorías situada en la parte izquierda de la pantalla del menú. También puede hacer clic en la pestaña “Ver todo” para ver todas las categorías.
Sólo tiene que seleccionar las categorías que desea añadir al menú y, a continuación, hacer clic en el botón “Añadir al menú”.
Las categorías aparecerán como elementos de menú normales en la parte inferior de su menú.
A continuación, puede arrastrarlas y soltarlas en su posición. Por ejemplo, vamos a colocar todas estas categorías bajo el elemento / artículo Blog.
Para más instrucciones, consulte nuestra guía para principiantes sobre cómo añadir debates en los menús de navegación de WordPress.
Así es como aparecen las distintas categorías en el menú de navegación de nuestro sitio de demostración:
Añadir enlaces personalizados a los menús de navegación de WordPress
Minientrada a las categorías y páginas, WordPress también hace que sea superfácil añadir enlaces personalizados a tu menú. Puedes enlazar con tus perfiles en medios sociales, tu tienda online y otros sitios web de tu propiedad.
Para ello, tendrá que utilizar la pestaña “Enlaces personalizados” de la pantalla Menú. Simplemente añada el enlace junto con el texto que desea utilizar en su menú y haga clic en el botón “Añadir al menú”.
Incluso puede ser creativo y añadir iconos de medios sociales a su menú o botones de llamada a la acción para conseguir más conversiones.
Editar o eliminar un elemento / artículo en los menús de navegación de WordPress
Cuando añades páginas o categorías a tu menú de navegación personalizado, WordPress utiliza el título de la página o el nombre de la categoría como texto del enlace. Puede cambiar esto si lo desea.
Cualquier elemento del menú puede editarse al hacer clic en la flecha hacia abajo situada a su lado.
Desde aquí puede cambiar el nombre del elemento / artículo del menú. También puede hacer clic en “Quitar / eliminar” para eliminar el enlace de su menú.
Si tiene problemas con la interfaz de arrastrar y soltar, también puede desplazar el elemento / artículo del menú al hacer clic en el enlace “Mover” correspondiente.
Añadir menús de navegación en Full Site Editor (FSE)
El nuevo editor de sitios completo te permite personalizar tus temas de WordPress mediante el editor de bloques. Se activó / activo en WordPress 5.9 y le permite añadir diferentes bloques a sus plantillas para crear un diseño único.
Para añadir un menú de navegación utilizando el editor completo del sitio, visite Apariencia ” Editor desde su escritorio de WordPress.
Usaremos el tema por defecto Twenty Twenty-Three para este tutorial. Para más detalles, puedes consultar nuestro artículo sobre los mejores temas de WordPress para la edición completa del sitio.
Una vez en el editor, haz clic en la pestaña “Navegación” para ampliarla.
Se abrirán nuevos ajustes en la columna de la izquierda.
Desde aquí, basta con hacer clic en el icono “Editar” de la parte superior.
Se abrirá el editor del sitio completo en su pantalla, donde podrá hacer clic en el icono “+” para añadir un elemento / artículo al menú de navegación.
Se abrirá una indicación y podrá seleccionar una opción del menú desplegable.
Sin embargo, si desea añadir un enlace personalizado, puede añadir una etiqueta y una URL para el elemento del menú de navegación en el panel de bloque. También puede añadir una opción de búsqueda a su menú.
Una vez añadido un elemento, pase a la pestaña “Estilos” de la columna de la derecha.
Ahora puede cambiar la tipografía, el aspecto, la altura, el espaciado, las mayúsculas y minúsculas y la decoración del texto de sus elementos de menú.
También puede añadir un submenú al hacer clic en su icono en la barra de herramientas del bloque.
Cuando hayas terminado, puedes obtener una vista previa de los cambios para ver cómo queda el menú en tiempo real. Luego no olvides hacer clic en el botón “Guardar” de la parte superior.
Añadir menús de WordPress en barras laterales y pies de página
No tienes por qué ceñirte únicamente a las ubicaciones de visualización de tu tema. Puedes añadir menús de navegación en cualquier zona que utilice widgets, como la barra lateral o el pie de página.
Simplemente ve a Apariencia ” Widgets y luego haz clic en el botón ‘Añadir Bloque’ (+) en la parte superior y añade el bloque de widget ‘Menú de Navegación’ a tu barra lateral.
A continuación, añada un título para el widget y elija el menú correcto en la lista desplegable “Seleccionar menú”.
Cuando haya terminado, sólo tiene que hacer clic en el botón “Actualizar”.
Este es un ejemplo de un menú de pie de página de WordPress personalizado creado en el sitio web de nuestro fundador, Syed Balkhi.
Ir más allá con los menús de navegación
Si quieres crear un menú realmente épico con un montón de enlaces, tenemos un tutorial sobre cómo crear un mega menú en WordPress.
Esto le permite crear un desplegable con muchos elementos / artículos, incluyendo imágenes.
Los mega menús son una gran opción si tienes un sitio grande, como una tienda online o un sitio de noticias. Este tipo de menú lo utilizan sitios como Reuters, Buzzfeed, Starbucks, etc.
Tutorial en vídeo
Si prefiere ver este tutorial, marque / compruebe nuestro vídeo a continuación:
Preguntas frecuentes acerca de los menús de WordPress
Estas son algunas de las preguntas más comunes que los principiantes hacen acerca de los menús de navegación de WordPress.
1. ¿Cómo añadir un enlace de página de inicio a un menú de WordPress?
Para añadir tu página de inicio a un menú de navegación, tendrás que hacer clic en la pestaña “Ver todo”, debajo de Páginas. A partir de ahí, deberías ver tu página de inicio.
Marque la casilla siguiente a “Inicio” y haga clic en “Añadir al menú”. Recuerda guardar los cambios.
2. ¿Cómo añadir varios menús de navegación en WordPress?
En WordPress, puedes crear tantos menús como quieras. Para colocar un menú en tu sitio web, tendrás que añadirlo a una de las ubicaciones de menú de tu tema o a una zona de widgets, como hemos mostrado anteriormente.
Si desea añadir varios menús de navegación a su sitio WordPress, primero cree los menús siguiendo nuestro tutorial anterior.
Para colocarlas en su sitio, haga clic en la pestaña “Gestionar ubicaciones”.
Desde aquí, puede seleccionar qué menú desea mostrar en las ubicaciones de menú disponibles en su tema.
Si desea añadir una nueva ubicación de menú a su sitio, consulte nuestro tutorial sobre cómo añadir menús de navegación personalizados a los temas de WordPress.
Esperamos que este artículo te haya ayudado a aprender cómo añadir un menú de navegación en WordPress. Puede que también quieras comprobar nuestras guías sobre cómo dar estilo a los menús de navegación en WordPress y cómo crear un menú de navegación flotante fijo en 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.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk
Regarding adding pages to the menu, don’t know how to solve the search problem? Or if you haven’t met him. I have a website where there are currently about 600 pages, which are mainly used for dictionary purposes. The problem is, when I want to add one of the pages to the menu, I write its link in the search, so wordpress does not find it and I have to first display all and find it alphabetically. It delays my work quite a bit and I haven’t figured out where the problem is.
WPBeginner Support
You would want to try writing the title of the page, otherwise you could use custom links and link to the page if you have the URL directly.
Administrador
Jiří Vaněk
Yes, I do. I type the site name into the search box and WordPress lists similar sites, but usually not the one I’m looking for. So I will search further where the problem might be.
David Keevis
Thanks so much for a really excellent tutorial. We’re building our site with multiple CPT’s and this post clearly explained what was needed. Had it implemented in a couple minutes. We’re using Generate Press/Generate Blocks and the query loop is exceptionally powerful. Y’all just made our day!!!!
WPBeginner Support
Glad to hear our guide helped!
Administrador
NPH LLC
If I “remove” a link within my main navigation menu, can I bring it back easily? We want to take a page offline while we are reconfiguring it.
Thanks!
WPBeginner Support
Yes, you can easily add and remove menu items and if the menu items even if the item is not currently on the menu. You would want to ensure you clear any caching on your site so your visitors see the up-to-date menu.
Administrador
Akanksha
Thank you ..This was very helpful to me
WPBeginner Support
Glad it was helpful!
Administrador
Sunny
A very basic question. How can you link your website URL to your homepage? Meaning, having the website URL, also as your homepage section in the menu. Thanks
WPBeginner Support
You could either set the menu to the homepage you have set under Settings>General for your site or create a custom URL and add your domain there to point to your homepage.
Administrador
Lisa
I’m confused about how to get my posts where I want them to go… I have a recipe blog. On the top of my site, I have categories you can click such as “Dinner recipes” and “Side dishes”… How do I get my specific posts to go on those specific pages when you click on the title at the top of the page?
aberry
Is there a way that when you add a category it automatically adds the sub categories?
WPBeginner Support
You would want to take a look at one of our older articles covering this below for showing subcategories on the parent category page:
https://www.wpbeginner.com/wp-tutorials/display-subcategories-on-category-pages-in-wordpress/
Administrador
HJ
Very basic question, but how to enable menu on a subpage? I designed some subpages, but the menu is not visible on top. In my main pages the menu is visible. How to enable the menu to make it visible on the sub-pages?
WPBeginner Support
You would want to reach out to the support for your specific theme, it sounds like your theme may remove the menu for certain pages. If you reach out to the support they should let you know how to add the menu back.
Administrador
Janien
I’m trying to get a navigation menu that is sticky and is not transparent. I’ve tried everything. Am I allowed to change the navigation bar in a theme?
WPBeginner Support
You are but it would require some coding knowledge, we would recommend reaching out to your theme’s support and they can normally assist.
Administrador
Miranda
I have made a navigation menu but it won’t show up on the mobile site and when I go to navigation menu settings it does not have mobile menu as an option. Do you know how I can fix this or do I need to find a different theme?
WPBeginner Support
You would need to reach out to the support for your specific theme for it not displaying properly and they would be able to assist.
Administrador
sadik
Thenk you Wp Begginer
WPBeginner Support
You’re welcome
Administrador
Nanyc
This helped a lot. I wanted a heads up before I started. Presented very well.
WPBeginner Support
Glad our article was helpful
Administrador
atta
Thanks for the detailed guide. I have a question: how can we add a navbar (for a landing page) which links the landing page sections/elements instead of navigating to other pages. An example is Wikipedia. On any Wikipedia page, you can click on the name of the section and it will immediately go down to that section.
WPBeginner Support
For that, you would want to use anchor links which we cover in our article below:
https://www.wpbeginner.com/beginners-guide/how-to-easily-add-anchor-links-in-wordpress-step-by-step/
Administrador
Gina
Hi,
I created categories and added to my menu so that once a reader clicks they can find all the blog posts on that category. My problem is that I don’t want the blog name to appear at the top of the page, that is, Blogging category => Blogging category description => blog posts, how do I remove that?
WPBeginner Support
That would depend on your specific theme’s styling. If you reach out to your theme’s support they should be able to assist with changing what is shown
Administrador
wan
i try to add menu item on my menu structure. even when i save menu, the website doesn’t change. why?
WPBeginner Support
You would want to ensure your site or your hosting provider does not have a cache that could be causing your issue.
Administrador
Keith
Great resources
WPBeginner Support
Thank you
Administrador
Linda McMillan
Hello, I am using Elementor and OceanWP. I set up a custom link in my menu so that when clicking on it goes to the Home page. How can I make it go instead of just to the Home page, but down the page to a certain section? I appreciate your help.
WPBeginner Support
You would want to take a look at making an anchor link: https://www.wpbeginner.com/beginners-guide/how-to-easily-add-anchor-links-in-wordpress-step-by-step/
Administrador
Annie
Pretty much there with the navigation. One question though, I have one point in my navigation “products” from there it splits into 3 other sections (drop down menu coming up). I don’t want visitors be able to access this product page as it will be empty, I want them to choose directly from the drop down menu instead of accessing the products page first. So products will be still displayed in the navigation but will be inaccessible, visitors have to click onto the drop down menu to choose what they are after. How do I do this? I m I m removing the whole products section it wont be displayed in the navi anymore, how can I make the products page inaccessible?
WPBeginner Support
You can create a custom link under Appearance>Menus titled Products and link it to either a different page or # which should keep the users on the same page they are on.
Administrador
Ishan
Thank you for your help.I was facing the same problem
Terry L. Cooper
How old is this anyway?? I’m not seeing any of this on the WP page.
WPBeginner Support
The steps in this article should still work for WordPress.org sites, are you on WordPress.com? https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Administrador
Azizi
Sorry sir, which WordPress theme you’re using on WPbeginner.com?????
WPBeginner Support
We are using a theme we created for our site built on the Genesis Framework, for more on what we’re using on our site you would want to take a look at our blueprint page here: https://www.wpbeginner.com/blueprint/
Administrador
Inzamam ul haq
It really helped me. very informative.Thanks
Natalie V
Hi! Thanks so much for this post. It helped me a lot. I have the “Karuna” theme. Whenever I add more menu options (I have 4) they are displayed in two row. I would like them all to be in one row. Is there a way to fix this? Thank you so much!
David
Needed to link a buy now button to woo commerce cart page. Spent two days going in circles. Tried to contact woo with little success. Then found you guys who helped solve the problem.
Often it is the little things which can stop us in our tracks. A big thank you for the simplified set of clear instructions.
Elliot Kershaw
Hello,
I am making a website with Ocean WP and Elementor, however I am unable to see the menu at the top of all of my pages. It only appears at the top of the home page. So people can navigate to any page from the home page, however if anyone wanted to navigate back to the home page or to another page from there, it would tricky. Do you have a solution for this? Thank you!