menu de wordpress guia completa

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.

 

menu principal wordpress

 

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á.

 

menu footer wordpress

 

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ú.

 

ubicación de menú wordpress

 

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ú.

apariencia menu wordpress

 

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ú.

 

crear el menu principal wordpress

 

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.

 

agregar paginas menú wordpress

 

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.

 

ordenar el menú de wordpress

 

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ú.

 

ubicación menú wordpress

 

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ú.

 

crear submenu wordpress

 

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.

 

crear menu desplegable wordpress

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.

 

crear menus con enlaces personalizados wordpress

 

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 #.

 

configurar menu wordpress

 

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.

 

etiqueta de navegación en el menú de wordpress

 

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.

 

activar opciones menu wordpress

 

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.

 

activar opciones ocultas menu wordpress

 

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.

 

configuración menús wordpress

 

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ú barra lateral wordpress

 

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

iconos en el menú de wordpress

 

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.

 

poner iconos en el menú wordpress

 

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.

 

iconos en el menu con el plugin font awesome for menu

 

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.

 

iconos para wordpress con plugin

 

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

 

plugin iconos menu wordpress

 

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

 

iconos css menus wordpress

 

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

 

como poner menú wordpress con iconos

 

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.

 

imágenes menú wordpress

 

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ú.

 

duplicar menu wordpress

 

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ú.

 

opciones de apariencia del menu WordPress tema bridge

 

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.

 

personalizar menu wordpress

 

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 menu wordpress

 

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.

 

ubermenu plugin wordpress mega menu

 

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.

 

6 comentarios en “Menú de WordPress Guía Completa

  1. Brutal post. Súper completo y explicado de forma muy sencilla. Nadie tiene excusas para no crear un menú de navegación en WordPress digno con esta guía. Y ya lo de activar opciones ocultas de los elementos del menú de WordPress, me ha dejado loca. Dejaré de ser una “L” gracias a ti, jajaja. Enhorabuena y gracias por el post.

  2. Hola Excelente Post muchas gracias! Lo que me sucede es que tengo una galería que al cliquear abre un lightbox, pero el menú lateral me tapa parte de las imágenes. ¿Como hago para enviar el menú hacia atrás?

Deja un comentario

El email no será publicado. Vas a introducir datos en la web si comentas:

  • Responsable de los datos Gerardo García Asensio
  • Los datos se usarán para gestión de comentarios y medidas de seguridad
  • Legitimación: tu consentimiento.
  • Destinatarios: los datos estarán ubicados en los servidores de Siteground.
  • Derechos: podrás ejercer tus derechos, entre otros, rectificar, limitar y borrar tus datos.

Pin It on Pinterest

Esta web utiliza cookies para su funcionamiento. Lee y acepta el aviso legal o abandona la web. más info

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar