En esta guía completa de cómo crear un menú de navegación en WordPress con todas las opciones y truquillos explicados para sacarle todo el partido al sistema de gestión de menús. Y aprenderás a poner iconos en el menú de WordPress y como crear un menú con subniveles en WordPress y también veremos cómo crear mega menús en WordPress con plugin.

¿Qué es el menú de WordPress?

Es una pregunta fácil que seguramente ya todos sabemos, el menú de navegación de WordPress son los enlaces que nos permite navegar entre las diferentes páginas de nuestra web.

Cuando creamos un menú en WordPress tenemos que tener en cuenta su función, su ubicación y su estructura para mantener una buena experiencia de usuario.

Tenemos que pensar como estructurar el menú de WordPress y saber exactamente que ponemos en el menú de navegación ya que si no ordenamos los elementos correctamente vamos a marear a los usuarios de nuestra página web.

Debemos elegir bien que páginas y categorías vamos a mostrar en el menú en WordPress, por ejemplo un menú de una revista digital quiere mostrar las categorías en el menú para sugerir a los usuarios noticias sobre temas concretos pero una página comercial únicamente mostrara las páginas de inicio, sobre mi contacto etc, para convencer al usuario de que compren sus servicios o productos.

Tipos de menú en WordPress

Podemos configurar diferentes tipos de menú en WordPress que pueden variar según nuestro tema de WordPress.

Menú Principal

El menú principal normalmente se ubica en la parte superior de la Web, este menú es el más utilizado por los usuarios y donde tenemos que tener las paginas principales de nuestra web.

Menú Inferior de WordPress

El menú de la parte del Footer o menú inferior. Este menú sirve para redirigir a los usuarios a otras páginas una vez han visto nuestro contenido y han llegado al final de la página web.

Normalmente también ponemos en este menú las páginas de Aviso Legal, Políticas de Coockies, Política de empresa y todas esas páginas legales que jamás nadie se leerá.

Menú Secundario superior de WordPress

El menú secundario de WordPress se encuentra en la parte superior de nuestra página web por encima del menú principal y normalmente este menú se utiliza para poner las páginas de una tienda online como el carrito de la compra, zona de cupones descuento, perfil de usuario etc…

Solo lo podemos configurar dependiendo del tema de WordPress que utilicemos, aunque cada vez es más común verlo.

Menú de la Barra latera de WordPress

Es el menú de la barra lateral en WordPress que se muestra normalmente en un blog o en una tienda online para navegar entre las diferentes categorías.

Este menú se crea con un WidGet de WordPress con un módulo de menú.

Elementos en el menú de WordPress

Los elementos que pueden aparecer en el menú de WordPress son:

Páginas: Las páginas principales de nuestro propio sitio web que tengamos creadas en WordPress.

Categorías: Podemos mostrar las categorías pero normalmente no se muestran las categorías en el menú principal excepto si tu web es de tipo revista o periódico digital o las categorías de los productor en el caso de las tiendas online.

Entradas de los post: si tenemos un post de nuestro blog que tenga una importancia enorme y queramos destacar podemos mostrarlo también en el menú principal, aunque no es muy común.

Enlaces Personalizados: Podemos mostrar enlaces a otras páginas web que no sean la nuestra mediante enlaces en nuestro menú principal.

Como configurar el menú principal en WordPress

Vamos a configurar el menú principal de WordPress, para ello nos dirigimos en el menú de administración de WordPress Apariencia > Menú.

Crear un menú en WordPress

A continuación pulsamos en Crear un Nuevo Menú y configuramos un nombre para este menú, este nombre no lo verán tus usuarios es solo para que sea más fácil organizarlos.

Y después de poner el nombre pulsamos el botón azul Crear Menú.

Ya está creado el menú pero está todavía vacío, hay que añadirle las páginas, categorías y enlaces al menú de navegación.

Añadir páginas, categorías, entradas y enlaces personalizados al menú de WordPress

Una vez creado el menú vamos a introducir en él las páginas, entradas, enlaces o categorías para que se muestren en el menú principal.

Normalmente una página web estándar solo muestra las paginas principales en el menú principal.

Ejemplo: INICIO, SERVICIOS, BLOG, SOBRE MI, CONTACTO

Para ello tenemos que hacer clic en la casilla de cada página en la parte derecha y pulsar el botón Añadir al Menú.

También podemos añadir categorías o post a nuestro menú de navegación.

Ahora vemos como las páginas aparecen en el apartado de estructura del menú. En este apartado podemos reordenar las páginas del menú de WordPress para que se muestren en el orden que queremos.

Para ordenarlas simplemente las arrastramos con el ratón hasta la posición que queramos.

Configurar la ubicación del menú en WordPress

Una vez hemos creado el menú tenemos que indicar en que parte queremos que este menú se muestre.

Para cambiar la ubicación del menú de WordPress simplemente configuramos las casillas en el apartado de Opciones del Menú.

Dependiendo del tema de WordPress que tengas instalado podemos configurar el menú en varios lugares de la web.

En WordPress normalmente podemos elegir entre dos ubicaciones para el menú.

El menú principal y el menú inferior / Footer.

Pero podemos encontrar otros tipos de menú, como un menú superior que se encuentra por encima del menú principal.

Crear submenús en WordPress

Si queremos crear submenús en WordPress simplemente tenemos que arrastrar los elementos del menú que queramos que sean sub-apartados un poco a la derecha en la estructura del menú.

Es muy útil si queremos que las categorías del blog se muestren en el menú principal o si tenemos una página por cada servicio que ofrecemos en la web.

Menú desplegable del tema Divi

Enlaces personalizados en el menú de WordPress

Podemos introducir cualquier URL como elemento del menú. Es muy útil cuando queremos que en nuestro menú aparezca una página web amiga o relacionada.

También es necesaria cuando la página principal de nuestra web es el Blog, ya que en la página principal mostramos las entradas de nuestra web y no tenemos una página creada que se llama inicio.

En este caso podemos crear en el menú un enlace personalizado e introducir nuestra URL principal y llamarlo INICIO.

Otro uso para los enlaces personalizados en el menú de WordPress es crear enlaces que no lleven a ningún lugar. Y antes de que te hagas la pregunta ¿Y para que quiero que un enlace no lleve a ningún lugar de mi web?

Pues es un truco que se utiliza para crear un elemento vacío en el menú y organizar los sub menús sin que el elemento principal lleve a ninguna parte.

Es decir que solo sirve para organizar sub menús sin que el primer menú sea un enlace.

Para ello simplemente creamos un elemento del menú con enlace personalizado y como enlace ponemos una almohadilla #.

Cambiar el titulo de los elementos del menú de WordPress

Si hacemos clic en la pestaña de los elementos del menú se nos muestran más opciones que podemos configurar como cambiar los títulos en el menú, mover o eliminar los elementos.

Si las páginas que queremos que se muestren en nuestro menú son demasiados largos nuestro menú principal quedara feo o se verá mal en dispositivos móviles.

Podemos cambiar la etiqueta de navegación de los elementos del menú y hacerla más corta si fuera necesario.

Solo cambia el título del menú y se conserva el título original para las páginas.

Activar opciones ocultas de los elementos del menú de WordPress

Hay opciones ocultas que nos permiten personalizar más los menús en WordPress y sirven para tener más control sobre nuestro menú.

La verdad es que no están ocultas, simplemente no están activadas por defecto en WordPress.

Para activar las opciones ocultas haz clic en la pestaña “Opciones de pantalla” que se muestra en la parte superior.

Vamos a marcar todas las opciones para que aparezcan en la configuración de los elementos.

Las cajas de opciones que aparecen dependen del tema que tengamos instalado en WordPress.

Normalmente las opciones que aparecen sin marcar son:

• Formato: Activa los elementos en el menú según los formatos de las entradas ya sean vídeo audio imágenes.
• Destino del enlace: activa la opción que nos permite abrir la página en una nueva pestaña del navegador.
• Atributos del título: sirve para modificar los atributos HTML de los menús.
• Clase CSS: podemos aplicar clases CSS personalizadas con esta opción.
• Relación con el enlace: Esta opción sirve para ponerle la etiqueta “nofollow” en los enlaces para que los buscadores no sigan ese enlace.
• Descripción: Puedes añadir una descripción del contenido que se encontrara dentro del enlace del menú, algunos temas muestran esta descripción.

Como he dicho antes dependiendo del tema que utilices en WordPress pueden aparecer más opciones para los menús de navegación.

Marcamos todas las opciones y hacemos clic en un elemento del menú de WordPress para ver todas las opciones nuevas que hemos activado y configurarlas.

Menú de WordPress en la barra lateral

Podemos crear un menú en WordPress mediante un Widget para que se muestre en la barra lateral.

Los menús en la barra lateral de WordPress se utilizan normalmente en las páginas del blog y dentro de los post para mostrar las categorías o etiquetas del blog.

Para crear un menú en la barra lateral de WordPress vamos a Apariencia > Widgets.

Arrastramos el Widget de menú personalizado y elegimos un menú creado previamente.

Menú de WordPress con iconos

Si queremos agregar iconos en el menú de WordPress para hacer más visual nuestro menú o destacar alguno de sus elementos podemos hacerlo mediante plugins.

Hay muchos plugins para añadir iconos en el menú yo he probado dos.

Menú icons

El plugin Menú Icons es sencillo y muy fácil de utilizar. Simplemente instálalo desde WordPress y en las opciones de los elementos del menú de WordPress aparecerá una nueva opción para integrar los iconos.

Font Awesome For Menus

Font Awesome For Menus es un plugin que nos permite poner iconos en los menús de navegación en WordPress y utiliza la librería de iconos de Font Awesome. Es uno de los más utilizados para este fin.

Para añadir iconos en el menú de WordPress con este plugin debes primero dirigirte a la página web de Font Awesome donde encontraras un listado de todos los iconos disponibles.

Lo seleccionamos y tenemos que copiar el nombre del icono “fa-nombredeicono”.

Después pegamos el nombre del icono en un elemento del menú de WordPress en el apartado de “CSS personalizado”

Y el resultado de mostrar estos iconos en el menú de WordPress es genial, muy visuales y destacan los elementos de nuestros menús.

Imágenes en el menú de WordPress

Si queremos añadir imágenes al menú de WordPress como elemento del menú podemos hacerlo con código HTML en el campo de etiqueta de navegación.

Así podemos introducir por ejemplo imágenes personalizadas para las redes sociales en nuestro menú de WordPress.

Si no sabes HTML puedes poner la imagen en el editor de texto de WordPress y copiar el código que se crea en la pestaña de HTML.

Si utilizas esta opción recuerda en crear la imagen o icono personalizado en el tamaño exacto en el que se mostrara para optimizar la velocidad de carga.

Como duplicar menús en WordPress

Si queremos duplicar un menú en WordPress debemos utilizar un plugin ya que WordPress no tiene por defecto una opción para duplicar los menús.

El plugin para duplicar un menú es Duplicate Menú

Es muy sencillo, simplemente añade el apartado Apariencia > Duplicate Menú donde encontraremos un desplegable con los menús ya creados y un campo para darle nombre al nuevo menú.

Cambiar la Apariencia del menú en WordPress

Si queremos personalizar el menú y cambiar el tamaño de la letra, el color, el formato del menú, y otras opciones tenemos que buscar las opciones de nuestro tema de WordPress.

Estas opciones cambian dependiendo de la plantilla pero suelen estar en un apartado del menú de WordPress que puede llamarse “Opciones del tema” o “Theme Options”.

Y dentro de las opciones del tema hay que configurar el apartado “Menú principal” o “Header”.

Esta es una captura de pantalla del Tema Bridge de WordPress donde podemos ver la sección y algunas opciones de configuración del menú en bridge. Este tema en concreto tiene muchísimas opciones de personalización para el menú.

Hay plantillas que ya tienen un personalizador de menú visual como el caso de Divi, es una tendencia a la que van evolucionando las plantillas de WordPress.

Esta es una captura de pantalla del Tema Divi. Este tema incluye un personalizador en tiempo real en la parte visual de WordPress donde podemos hacer los cambios y ver cómo queda sin tener que estar guardando constantemente.

Como podemos ver en las dos capturas hay decenas de opciones para configurar el menú en WordPress que permiten:

• Personalizar el tamaño tipo y color de la letra del menú
• Cambiar la altura, color, transparencia del fondo del menú.
• Configurar el comportamiento del menú pudiendo crear menús sticky que se queden pegados siempre en la parte superior de la pantalla.
• Y elegir la disposición de los elementos dentro del menú como poner el logo en el centro del menú.
• Cambiar la apariencia del menú según los dispositivos, móvil, Tablet, PC.

En el caso de que nuestra plantilla no tenga opciones de personalización del menú de WordPress tenemos que modificar el tema con código CSS. Podemos modificar el código CSS mediante plugins como CSS HERO o Site Origin CSS

Mega menú en WordPress

Un mega menú de WordPress es un menú con muchísimas opciones de personalización perfecto para las páginas web que usan un montón de múltiples niveles de menús y nos permite crear menús desplegables, mucho más visuales e informativos que los menús desplegables tradicionales.

Existen múltiples plugins para crear mega menús en WordPress.

Max mega menú

Max mega menú es un plugin gratuito que nos permite crear un mega menú en WordPress, tiene muchas opciones de personalización como iconos y efectos y una interfaz Drag and drop.

Tiene una versión Pro que cuesta 19 dólares con muchísimas más opciones, menú Sticky, menú vertical, menú acordeón, integración con WooCoomerce, 600 iconos extra, iconos personalizados, caja de búsqueda, fuente de Google y personalizadas

Página web de Max Mega Menú

Max Mega Menú (Versión Gratuita del repositorio de WordPress)

Vídeo para que veas un poco como funciona este plugin

UberMenu

UberMenu es un plugin de pago que cuesta solo 9 dólares y es una auténtica maravilla para crear mega menús en WordPress.

Es totalmente responsive y compatible con dispositivos móviles.

Tiene una interfaz de rejilla para separar los elementos dentro del menú y poder organizar los elementos de menú.

Permite personalizar el menú con Columnas, tabulaciones, filas, imágenes, iconos, mapas, formularios y más.

Puedes ver más información, tutoriales y una demo de UberMenu en el siguiente enlace.

Plugin Uber Menú

Conclusión

El menú de navegación es el principal camino por el que los usuarios se mueven dentro de nuestra página web y por eso hay que prestarle la debida dedicación.

Si no tenemos clara la arquitectura de nuestro menú desde el principio los usuarios acabaran vagando por tus contenidos sin saber a dónde van y seguramente acaben abandonando la página web.

En el menú principal siempre hay que mostrar nuestras páginas que tengan interés para el lector y dejar las páginas legales en el Footer, nadie se lee las páginas legales como la ley de cookies pero deben de poder encontrarse.

Puedes utilizar los iconos para destacar el menú y darle un aire más visual o utiliza el icono solo en un elemento del menú para destacarlo del resto.

Poner iconos en el menú puede incrementar el número de clics en el elemento destacado, así que es un factor a tener en cuenta para de redirigir usuarios.

Si tienes una tienda online con muchos submenús debes crear un mega menú para ordenar con precisión las categorías y productos de la tienda.

También hay que tener en cuenta que cada vez más se navega mediante dispositivos móviles donde la navegación es diferente y con los temas de WordPress responsive podemos configurar menús hamburguesa de un solo botón.

Así que ya tengas una web modesta, un blog con categorías o una tienda online piensa como quieres que los usuarios naveguen por ti web.