Crear menús en WordPress de forma fácil

Por: Pablo Velasco,
14 de mayo del 2019

Un elemento fundamental de nuestra página web será disponer de uno o varios menús con los que lo usuarios puedan acceder a los distintos apartados de la web.

En este artículo vamos a repasar los pasos a seguir para la crear menús en WordPress.

Al final del mismo, encontrarás un vídeo donde repasaré todo lo que vamos a ver aquí.

Cómo gestionar los menús en WordPress

Todo lo relativo a los menús de WordPress se gestiona desde la administración de la web, entrando en Apariencia > Menús.

tutorial menus wordpress

Si estamos creando una nueva web inicialmente no tendremos ningún menú todavía.

Esto no quiere decir necesariamente que no se muestre ningún menú en el frontal de la web, ya que se podría cargar a partir de las páginas que hayamos añadido en WordPress.

Este menú automático se puede cargar o no dependiendo del tema que estemos utilizando en nuestro WordPress, pero no es recomendable su uso, ya que no nos permitirá estructurarlo a nuestro gusto.

Crear menús en WordPress

El primer paso a seguir será crear nuestro primer menú. Para ello simplemente deberemos introducir el Nombre del menú y pulsar en el botón Crear menú.

crear menú wordpress

Te recomiendo poner un nombre que te ayude a identificar el menú, como «Menú principal», «Menú cabecera» o «Menú pie».

Dentro de un WordPress se pueden crear varios menús, que se podrán cargar en distintas posiciones.

El tema que estemos usando en WordPress dispondrá de varias posiciones para mostrar menús, pudiendo cambiar estas posiciones y el número de menús de un tema a otro.

Lo normal es que, como mínimo, tenga una posición para el menú principal y otra para un menú secundario, pero puede haber más.

También podremos crear menús que se podrán mostrar en un widget de tipo Menú, el cuál ya no irá relacionado con el tema.

Una vez que hayamos añadido el menú veremos en la parte inferior los Ajustes de menú.

ajustes del menú wordpress

En primer lugar veremos un parámetro para añadir de forma automática las nuevas páginas creadas al menú actual.

No te recomiendo activarlo, ya que de esta forma no tendrás control sobre la estructura de menú, además de que resulta fácil y rápido configurar el menú de forma manual.

Después veremos varias casillas para decidir dónde se verá el nuevo menú. Estas posiciones disponibles son las que dependen del tema activo en WordPress, tal como comentaba antes.

En la captura de pantalla que he puesto se ven 3 posiciones disponibles para colocar el menú, cuyos nombres ya nos darán una pista sobre dónde se cargarán.

Si estás creando creando tu primer menú, y var a ser el que se cargue en la parte superior de la web como principal, tendrás que seleccionar la casilla correspondiente y guardar los cambios.

Ten en cuenta que un mismo menú se puede asignar a diversas posiciones. Por ejemplo, podremos cargarlo en la posición para el menú principal y en la posición para el menú del pie.

Otra cosa a tener presente es que el comportamiento de los menús puede cambiar de una posición a otra.

Mientras que el menú principal suele estar listo para mostrar elementos de submenú con desplegables, no suele ocurrir los mismo para otras posiciones, como el menú del pie.

Por último, se verá un enlace para Borrar el menú. De esta forma se eliminará con todos los elementos que le hayamos añadido. Esta acción es irreversible, por lo que hay que tener cuidado al usarla.

Si lo necesitamos, podremos crear nuevos menús. Para ello solo deberemos pulsar en el enlace crea un nuevo menú que veremos en esta página (solo se mostrará si ya tenemos creado algún menú).

crear un nuevo menú wordpress

De esta forma podremos añadir el nuevo menú, siguiendo los mismos pasos que usamos para crear el primer menú, es decir, poner el nombre del menú, guardar los cambios y, opcionalmente, asignarlo a una posición.

En el caso de que tengamos varios menús creados veremos un selector con el que podremos elegir el menú con el que queremos trabajar.

seleccionar menú wordpress

En esta lista desplegable veremos el nombre que le hayamos puesto al menú y, entre paréntesis, la posición que tiene asignada, en caso de que tenga alguna.

Después de seleccionar el menú con el que queremos trabajar solo deberemos pulsar en el botón Elegir, y ya veremos tanto el menú, como los elementos que le hayamos añadido.

Para tener más claro donde se carga cada menú del tema podemos pulsar en el botón Gestionar con vista previa.

gestionar vista previa menús wordpress

Accedemos a la página de personalización del tema de WordPress que tengamos activo, donde además de poder asignar una posición para cada menú, podremos ver una vista previa del resultado.

Otra forma de asignar los menús a las posiciones disponibles en el tema será pulsando en la pestaña Gestionar ubicaciones.

gestionar ubicaciones menús wordpress

Se mostrará una lista desplegable para cada menú donde podremos asignar un menú a cada posición.

Recuerda que no es obligatorio asignar una posición del tema a todos los menús, ya que es posible que no lo necesitemos (por ejemplo, para un menú que cargue desde un widget).

Añadir elementos al menú

Una vez que tengamos creado y seleccionado un menú, ya estaremos listo para añadirle contenido.

Esto podremos hacerlo desde el apartado que veremos en la parte izquierda de la página de gestión de menús de WordPress.

añadir elementos al menú

Como se puede ver aquí, los elementos de menú se mostrarán agrupados según su tipo.

Por defecto, se pueden añadir páginas, entradas, enlaces personalizados y categorías de las entradas.

Pulsando en la pestaña Opciones de pantalla de la parte superior veremos un apartado Cajas donde podremos seleccionar los tipos de elementos que podremos añadir.

tipos de elementos menú wordpress

Como se ve aquí, no está seleccionada la opción de añadir etiquetas de las entradas. Esto es normal, ya que es muy poco común añadir elementos de menú que carguen los artículos relacionados con una etiqueta en concreto, aunque nada nos impide hacerlo.

Dependiendo de los plugins que tengamos instalados es posible que se muestren nuevos tipos de elementos que podremos añadir al menú.

Por ejemplo, si tenemos instalado el plugin de tienda WooCommerce veremos un grupo nuevo para añadir productos y otro para añadir categorías de productos.

Vamos a repasar ahora los tipos de elementos de menú que se pueden añadir por defecto.

Añadir páginas al menú

En la caja Páginas veremos un listado con las distintas páginas que tenemos creadas en nuestro WordPress y, a la izquierda de su nombre, una casilla o checkbox.

Marcando una o varias casillas y pulsando en el botón Añadir al menú veremos que los elementos seleccionados se agregan al menú con el que estemos trabajando. Dichos elementos permitirán cargar las páginas añadidas.

seleccionar páginas para menú

Si añades varias páginas de una vez y ves que no se muestran en el orden que quieres usar, no te preocupes, ya que podrás personalizar el orden con el que muestran los elementos de menú, como veremos luego.

Encima del listado de páginas veremos 3 pestañas: Más reciente, Ver todo y Buscar.

En la primera solo veremos las últimas páginas que hayamos creado, por lo que es posible que no se muestren todos los elementos que queremos añadir.

En la segunda sí que veremos un listado con todas las páginas creadas, con un sistema de paginación en caso de que tengamos muchas.

Por último, en la tercera pestaña podremos buscar por su nombre la página o páginas a añadir.

Añadir entradas al menú

La forma de proceder para añadir entradas es exactamente igual que la utilizada para añadir páginas, por lo que no es necesario explicar cómo hacerlo.

Normalmente no se añaden entradas como elementos de menú, ya que la forma lógica de mostrar las entradas es a través de la vista blog, es decir, mostrar un listado de artículos del blog o de una categoría en concreto.

Si se quiere mostrar una entrada de forma aislada lo correcto es que en lugar de tener una entrada tengamos una página con ese contenido.

Añadir enlaces personalizados al menú

Este apartado nos permitirá añadir al menú enlaces a páginas externas a nuestra web, o enlaces internos que no podamos agregar con las otras opciones.

Para ello tendremos que introducir la url completa de la página que queremos cargar, así como el texto que se mostrará en el menú para este elemento.

enlaces personalizados menú wordpress

Gracias a esto, no tendremos limitaciones a la hora de elegir los enlaces que cargaran desde los menús de WordPress.

Añadir categorías al menú

Aquí podremos seleccionar las categorías de entradas de WordPress que queremos añadir al menú, de forma que al pulsar sobre estos elementos se mostrará un listado con las entradas asociadas con esa categoría.

añadir categorías al menú wordpress

La forma de añadir las categorías será similar a la que hemos visto para añadir páginas, por lo que no voy a entrar en más detalles.

Editar la estructura y los elementos del menú

Una vez que hayamos añadido los elementos a nuestro menú, tocará organizarlos y configurarlos.

En el apartado Estructura del menú podremos ver los elementos que hemos añadido hasta ese momento. Esto se listan en el mismos orden con el que se mostrarán en el frontal de la web.

organizar menú wordpress

Ordenar y organizar los elementos de menú

Para cambiar este orden pulsaremos sobre el elemento que queremos mover y, sin soltar el botón del ratón, lo arrastraremos a la nueva posición.

Con este sistema de arrastrar y soltar veremos que también podemos hacer que un elemento de menú sea un submenú de otro elemento, lo que normalmente se verá en la web como un menú desplegable que se muestra al colocarse sobre el elemento de menú padre.

Así podremos darle una estructura de árbol al menú, de forma que unos elementos podrán ser hijos de otros.

Aunque se puedes añadir varios niveles de submenús (un elemento que sea submenú de otro, que a su vez es submenú de otro, etc.) no conviene añadir demasiados para no dificultar la navegación de los usuarios.

Con 2 niveles de profundidad debería ser suficiente para tener un menú bien estructurado. En otros casos bastará con un nivel o ninguno.

Recuerda que, una vez que hayas aplicados los cambios en el orden y en la estructura deberás pulsar en Guardar menú para almacenar los cambios.

Configurar elementos de menú

Pulsando sobre la flecha que hay a la derecha de cada elemento de menú añadido podremos ver sus características y editarlas.

configurar elementos de menú

Cuando añadimos una página, entrada o categoría al menú, por defecto el texto del enlace coincidirá con el nombre del elemento añadido, cosa que podremos cambiar.

Esto se hace desde el campo Etiqueta de navegación, donde dispondremos de la opción de introducir el nuevo texto.

Por ejemplo, si añadimos una página con título «Quiénes somos» el elemento de menú tendrá ese texto en el enlace, pero lo podemos cambiar por otro como «Nosotros».

Debajo veremos una serie de enlaces con los que podremos mover el elemento de menú hacia arriba, hacia abajo, al inicio, o hacerlo submenú del elemento de menú anterior.

Lo siguiente que veremos es un enlace junto al texto «Original». Pulsando sobre él podremos ver el contenido que se cargará con este elemento de menú.

Por último, tendremos enlaces para quitar el elemento del menú actual o para cancelar los cambios aplicados.

Además de estos propiedades por defecto, podremos activar otras que pueden ser de mucha utilidad. Para ello pulsamos en la pestaña Opciones de pantalla de la parte superior.

propiedades avanzadas del menú wordpress

Aquí veremos una serie de propiedades avanzadas de menú que podremos activar. Al hacerlo veremos más campos para configurar en los elementos de menú.

Activándolas todas se mostrará lo siguiente:

configurar propiedades avanzadas del menú

Vamos a ver para que sirven cada una de estas nuevas propiedades:

  • Atributos del título: añade un título al enlace, que se podrá ver cuando colocamos el cursor del ratón sobre el mismo. Puede ser útil para temas de SEO.
  • Abrir enlace en una pestaña nueva: activando esta casilla conseguiremos que el enlace de este elemento de menú se abra en una pestaña nueva. Esto es recomendable hacerlo si dicho enlace va a cargar una página externa.
  • Clases CSS (opcional): permite añadir estilos CSS para elementos de menú individuales. Puede usarse si queremos destacar un elemento de menú sobre los demás.
  • Relación con el enlace (XFN): añade una etiqueta rel para el enlace, que permite establecer una relación con la página de destino. Se suele usar para los microformatos.
  • Descripción: el texto que aquí se ponga se mostrará debajo del elemento de menú, para dar una información más amplia sobre el mismo. Hay que tener en cuenta que esto depende del tema que estemos utilizando, ya que hay plantillas de WordPress que no cargarán este contenido.

Conclusiones

Como habrás podido ver, la configuración de los menús en WordPress es muy sencilla.

Aunque se disponga de multitud de parámetros para configurar, lo normal es que apenas usemos unos pocos, limitándonos básicamente a añadir los elementos que queremos mostrar y ordenarlos.

Un menú con demasiados elementos o mal organizados empeorarán la experiencia del usuario, por lo que te recomiendo tomarte tu tiempo para definir su estructura.

Os dejo con un vídeo donde se explica todo lo necesario para crear y gestionar los menús en WordPress.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *