Logotipo horizontal de Diego C Martín colores invertidos, blanco y naranja para findo negro

Crear menú WordPress arrastrando los elementos en el gestor visual

Categorías:  Autor: Diego C Martin 
baby wp

Actualizado en Abril 2017

Crear un menú WordPress es sencillo e intuitivo. Nadie tiene escusa para no tener un sitio web competente en WordPress sin necesidad alguna de saber lenguajes de programación o utilizar complicadas herramientas de desarrollo.

El menú es el panel de navegación con el que el usuario puede acceder a las diferentes páginas o apartados de tu web y suele estar en a parte superior de la página.

Este es el menú principal de mi propia página hecha en WordPress:

ejemplo de menú principal en WordPress

El aspecto y posibilidades de menús en WordPress viene determinado por el tema que uses. De este dependerá no sólo el aspecto, sino también las ubicaciones disponibles para menús. Ya que en WordPress podemos crear todos los menús que queramos y luego asignarlos a las posiciones disponibles.

Acceder a la gestión de menús en WordPress

La creación de menús en WordPress es tan sencilla e intuitiva que la podemos clasificar dentro de esta serie de tutoriales de WordPress básico. Nadie tiene escusa para no tener un sitio web bastante competente en WordPress sin necesidad alguna de saber lenguajes de programación o a utilizar complicadas herramientas de desarrollo.

Nos dirigimos a Apariencia –> Menús para gestionarlos. Una vez allí encontraremos algo como esto:Menús en WordPress pantalla principal

En el panel izquierdo encontraremos los elementos que podemos agregar a nuestros menús, en el panel derecho organizaremos los elementos que hemos agregado tal y como queramos que aparezcan en nuestra página.

En el área superior encontramos un enlace para crear menús adicionales y un selector en el caso de que tengamos más de uno creado. En la imagen anterior no aparece porque en este momento sólo existe un menú llamado ‘Main‘.

Crear un nuevo menú WordPress desde 0

Hacemos clic en el enlace ‘crea un nuevo menú‘ del área superior. Entonces veremos cómo el panel derecho se transforma en un cuadro de texto para introducir el nombre del nuevo menú que vamos a generar. En mi caso ‘Principal‘. Una vez que pongamos un nombre y guardemos, aparecerá una pantalla como la imagen anterior, pero con el selector de menús en la parte superior.

selector de menús WordPress

Desde el selector podríamos cambiar al menú ‘Main‘ para trabajar con él. En este momento el menú activo es ‘Principal‘.

Opciones del menú

En la parte inferior del panel de la derecha encontramos las opciones del menú. La primera, ‘Añadir páginas automáticamente‘, si está activada la casilla de verificación, conseguirá que las nuevas páginas que creemos se agreguen automáticamente a este menú. Dependiendo del uso que vayamos a hacer puede que esta opción nos convenga, aunque se suele tener desactivada.

Opciones del Menú WordPress

Con la opción ‘Ubicación del tema‘, asignaremos este menú ‘Principal‘ a una de las áreas para menús de las que permita nuestra plantilla. En el ejemplo a continuación sólo podemos seleccionar una, llamada ‘Main Menu‘, además entre paréntesis podemos ver que este área actualmente está asignada al menú ‘Main‘, por tanto, si seleccionamos y guardamos, estaremos cambiando el menú que en el caso de la plantilla ‘Nova‘ aparece en la cabecera de la página.

Agregando elementos

tipos de elementos para agragar al menu wordpress

 A menos que tengamos instalados plugins adicionales en el sistema, los elementos que podemos agregar a los menús son páginas, enlaces o categorías.

Agregar páginas al menú WordPress

Agregar páginas al menú WordPress

Desde aquí podemos agregar cualquiera de las páginas que tengamos creadas en el sistema. ¡Ojo!, páginas y no entradas. Podemos buscar o visualizar todas desde las pestañitas de la parte superior.

Para agregarlas seleccionamos las casillas de verificación al lado de cada una de las páginas que queramos agregar y hacemos clic en el botón ‘Añadir al menú‘. Veremos que en ese momento aparecen en el panel de la derecha.

Agregar enlaces al menú en WordPress

agregar enlace externo al menú WordPress

Esto sirve para agregar enlaces a sitios externos. Copiamos y pegamos una URL o dirección web en el cuadro en el cuadro ‘URL‘, en el ejemplo ‘https://diegocmartin.com‘, y le ponemos en el recuadro ‘Enlace de texto‘, el texto que queramos que aparezca en el elemento del menú.

En el ejemplo ‘Diego C Martin Blog‘. Hacemos clic en el botón para añadir al menú. De esta forma también podemos agregar un enlace a una de nuestras entradas introduciendo su URL, la cual podemos copiar desde la página de edición de cada entrada.

Agregar categorías al menú de WordPress

El procedimiento para agregar categorías es exactamente igual que para agregar páginas, lo que ocurre es que en este caso, el elemento del menú nos llevará a una página que contendrá todas entradas asignadas a la categoría que agreguemos. Para el ejemplo voy a agregar la categoría ‘Humor‘. el resultado en el panel derecho después de esto es el siguiente:

ejemplo estructura del menú WordPress

Y el resultado en el sitio web:

ejemplo configuración de menú 01 WordPress

Echa un vistazo aquí para ver cómo se crean categorías de producto para tiendas vistuales con Woocommerce: Categorías Woocommerce en menú de WordPress

Organizando los elementos del menú:

Para organizar los elementos del menú basta con arrastrar los elementos del panel ‘Estructura del menú‘ a la posición deseada, teniendo en cuenta que los podemos mover hacia arriba y hacia abajo para reordenarlos, o bien hacia la derecha e izquierda para meter unos elementos dentro de otros y así crear submenús.

Ejemplo de reordenación:

Muevo el elemento ‘Contacto‘ hacia abajo y lo coloco debajo de ‘Diego C Martin Blog‘. Guardo los cambios.

ejemplo de reordenación de menú en WordPress

Resultado:

resultado ejemplo reordenación menú WordPress

Ejemplo de submenús:

Muevo los elementos Contacto y Humor un paso hacia la derecha, por debajo de ‘Diego C Martin Blog’ y guardo los cambios.

ejemplo submenú WordPress

Resultado:

resultado ejemplo de submenú en WordPress

Ejemplo de anidar elementos:

También podemos anidar elementos, metiéndolos dentro de otros.

Ejemplo menús anidados WordPress

Resultado:

ejemplo de subelemento en menú de wordpress

Controles avanzados en los menús de WordPress

En la parte superior derecha de la pantalla, al igual que en muchos otros apartados de WordPress, puedes encontrar las Opciones de pantalla, desde a que puedes activar o desactivar opciones adicionales.

habilitar que el menu de wordpress que se abre en pestaña nueva

Un ejemplo de una muy útil es la “Destino del enlace”, que nos va a permitir que los elementos de nuestro menú se abran en una nueva pestaña. Funcionalidad esencial si enlazamos páginas fuera de nuestro sitio web.

¡Recibe un cupón de un 10% sólo por darte de alta!

Usaré la info para informarte de novedades y ofertas sobre mis cursos y servicios.

* Más info en el Aviso legal.

Deja una respuesta

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

Artículos de la misma categoría

crossmenu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram