Guía definitiva para dominar un Menú WordPress

Ahora quiero que hagas lo siguiente: si usas gafas, límpialas; pon el móvil en silencio y dale un buen sorbo a tu café; adopta una postura cómoda en tu silla de trabajo y usa todos tus sentidos porque… esto es lo que vas a ser capaz de hacer después de leer con detenimiento este post:

¡Empecemos!

1 - Localizar correctamente el menú

Esta es la parte más fácil de toda la guía, y seguro que ya la conoces. Pero por si acaso, los menús es en el Dashboard de tu web, en la ruta Apariencia > Menús.

2 - Saber qué contenido puede colocarse en el menú.

Este punto puede parecer muy obvio, porque todo el mundo sabe que en el menú de una web van las páginas. Pero, puede que no sepas o no te hayas dado cuenta de que, dependiendo de los plugins o temas que tengas activados en tu WordPress, podrás mostrar en la barra de menú diferentes items.

Date cuenta de los menús desplegables de la parte izquierda, en la configuración de menús:

y asegúrate de que tienes todas las Cajas activadas en el desplegable de Opciones de pantalla.

3 - Diferencias entre menú primario y menú secundario

Dependiendo del tema o plantilla que estés utilizando, tendrás ciertos espacios designados para menús. Normalmente un tema básico suele tener 2 posiciones: menú primario y menú secundario.

El menú primario se suele encontrar en la posición “tradicional” de una web, tal y como te la estás imaginando ahora mismo. Si la plantilla es algo más moderna y tiene el menú lateral, esa suele ser la posición para ese tipo de plantillas.

El menú secundario suele ser menos visible. Secundario se refiere a “menos visible”. Suele estar posicionado en el pié de página (footer).

Si en el cuadro de opciones de menú en tu web, ves que tienes más posiciones, querrá decir que, efectivamente, la plantilla que utilizas ofrece más posiciones de menú. Dichas posiciones vienen indicadas en la documentación de la plantilla.

Las plantillas más comunes suelen ofrecer una tercera posición de menú (menú terciario) en la parte más alta de la web, antes del menú primario. Esta posición se suele usar para dejar fácilmente a la vista tus datos de contacto o enlaces a las redes sociales, carrito de compra, etc.

Si tu plantilla ofrece otros espacios dedicados a menús, ten en cuenta que muchos menús pueden “liar” a tus visitantes, y a nivel de usabilidad web, no es recomendable dar tantas opciones de navegación.

4 - Cómo colocar un menú dentro de otro menú

Llegados a este punto quizás ya has aprendido algo nuevo que no sabías. Y si no, verás cómo a partir de ahora viene “lo bueno”.

Hay veces que confeccionas un menú, y necesitas ponerlo en varias partes de tu web. Una de esas partes a veces es dentro de otro menú.

Y te preguntarás: ¿Para qué sirve poner un menú dentro de otro menú?. Ten en cuenta que por ejemplo, si ofreces varios servicios y estos son muy variados o cambiantes y cada uno tiene una página dedicada dentro de tu web, puede que prefieras crear un menú que los englobe a todos automáticamente conforme vayas creando o eliminando páginas de servicios (como veremos más adelante). Lo más fácil en este caso es simplemente añadir ese “menú de servicios” como submenú dentro del propio apartado “Servicios” en tu menú principal. (perdón por el trabalenguas).

Y ahora te preguntarás: ¿Y cómo se hace eso? WordPress no me deja hacerlo. ¡No hay problema! Para eso están los plugins. Este es el primero de varios plugins específicos que vamos a explicar, para cumplir diferentes funciones en el menú.

El plugin se llama Navception y al instalarlo y activarlo, verás que una nueva opción llamada Menús de navegación aparece en la barra lateral dentro de la configuración de menús en el Dashboard.

Simplemente activa el menú que desees emplear dentro de otro menú, y colócalo donde mejor te convenga.

5 - Cómo colocar el menú de Login/Logout.

Cuando tienes una instalación por defecto de WordPress, ¿te has fijado que en la zona de Widgets siempre hay un Widget llamado Meta con el link de Acceder o Registrarse, pero no encuentras esas opciones en tu configuración de menús? ¿Quieres saber cómo hacer que aparezca en tu menú principal?

No problem my friend. (Anónimo).

Tienes que usar el plugin llamado Login Logout Menu. Este fabuloso plugin creará una nueva opción en la configuración de tus menús, llamada Login/logout links. Con las opciones que te ofrece, podrás configurar tu menú para que:

• Si el usuario está logueado, aparecerá en el menú la opción de Cerrar sesión.
• Si no está logueado, aparecerá la opción de Acceder y de Registrarse (Recuerda tener activada la opción de permitir a los visitantes registrarse en tu sitio web).

6 - Cómo duplicar menús de forma sencilla

Seguro que a más de uno se le ha dado el caso de tener que duplicar un menú con muchas opciones, y se ha encontrado con que no existe dicha opción por defecto en WordPress. A partir de ahora, seguro que te gustará utilizar el plugin Duplicate Menu.

Nota importante: Cuando activas este plugin, la opción de duplicar menús se encuentra en Apariencia, no dentro del subapartado de menús, tal y como hemos visto hasta ahora.

Su uso es muy sencillo. Elige el menú que quieras duplicar, y escribe un nombre nuevo. Al duplicarlo, aparecerá ese nuevo menú en las opciones de menú.

7 - Cómo colocar iconos en los ítems del menú (incluidos los de tus redes sociales)

Toca ahora una parte muy bonita de esta guía. ¿Has visto alguna vez en otras webs esos menús tan chulos con iconos al lado de los títulos? ¿Siempre has querido tener uno así? ¡Pues en menos de 1 minuto vas a saber cómo crear el tuyo propio!

Para este apartado vamos a usar el plugin Iconos de Menu (Menu Icons).

Su uso te va a permitir:

• Elegir un icono representativo del item de menú.
• Elegir si quieres que aparezca solamente el icono (opción Ocultar etiqueta).
• Situar el icono a la derecha o la izquierda del item de menú.
• Alinear el icono verticalmente.
• Elegir el tamaño del icono

Las opciones de los iconos se encuentran en la parte derecha de la interfaz, tras pinchar la opción de Icono: Selección. También cuenta con un buscador interno de iconos, y una vista previa.

Nota: Para poner iconos a redes sociales, te recomiendo usar el plugin Menu Social Icons (el uso es muy parecido. La única diferencia es que las opciones las encuentras en el lateral de las opciones de menú, en Enlaces Personalizados).

8 - Saber qué son y dominar los menús condicionales

Este apartado es quizás mi favorito. Un menú condicional es un menú “normal”, pero que va a mostrar diferentes elementos, dependiendo de lo que esté ocurriendo en ese momento en tu web. Algunos ejemplos de condicionamientos (cosas ocurriendo) podrían ser:

• Mostrar/esconder un item de menú solo a un determinado rol de usuario.
• Mostrar/esconder un item de menú en determinadas páginas.
• Mostrar/esconder un item de menú sólo en la página de inicio.
• Mostrar/esconder un item de menú si la web se visita desde móviles.
• Etc.

Para cumplir esta función que no viene por defecto con WordPress, recurrimos de nuevo a plugins. Esta vez te propongo dos: uno sencillo y otro más avanzado.

Nota previa importante: no actives los dos plugins a la vez, pues suelen dar problemas. Si ya te ha ocurrido algo al activarlos a la vez, siempre puedes acceder por FTP a tu carpeta de plugins y renombrar o eliminar cualquiera de los dos plugins para arreglar el cuelgue de la página.

El plugin más sencillo tiene el nombre de If Menu y vas a ver que de una manera muy intuitiva (ojo, en inglés), vas a poder configurar tu menú de manera condicional, y te vas a sentir como un verdadero hacker.

Para usuarios un poco más avanzados y familiarizados con las condiciones de WordPress, recomiendo el plugin Menu Item Visibility Control. Este plugin hace uso de las etiquetas condicionales (en inglés) de WordPress, y aun manejando material avanzado, es un plugin muy intuitivo de utilizar.

9 - Crear automatizaciones en los menús

Vamos ahora con una parte muy interesante de esta guía de menús para WordPress. El siguiente truco te va a permitir tener un menú como reflejo de tu contenido web (páginas, posts, etc).

Para verlo más claro, pondré un ejemplo: una web de un restaurante crea una página (parent) llamada “Menú del día” (Qué bien traído ¿eh?) y un child (sub-página) para cada plato.

El menú degustación se compone de 12 platos diferentes incluidos postre y café de importación. (¿¿te imaginas que atracón de comida??)

El administrador de la web está constantemente cambiando los platos y odia tener que cambiar el menú de WordPress al mismo tiempo. Qué mágico sería si hubiera algo que hiciera que bajo la página de “Menú del día”, no importa los cambios que hagas, se verá reflejado automáticamente en el menú de WordPress.

¡El frotar se va a acabar! (anuncio antiguo)

Te presento el plugin Gecka Submenu. Lo que hace este simple pero efectivo plugin es evitar horas de trabajo.

Basta con marcar la opción Automatically populate with child pages (Auto-popular con subpáginas) en la página que quieras automatizar (en nuestro ejemplo la página de “Menú del día”) y se solucionará tu problema.

Nota: este plugin sirve para cualquier contenido jerárquico de tu web.

10 - Controlar quién ve qué en los menús, dependiendo del Rol de usuario.

Este nuevo consejo es parecido a los menús condicionales, solo que esta vez nos concentramos en los roles de usuario (administrador, editor, etc). También sirve para los roles que hayas creado tú.

En esta ocasión vamos a utilizar otro plugin para menu WordPress llamado Nav Menu Roles, que sirve para ocultar elementos del menú en base a los roles de tu web.

Las opciones que da son 3:

• Mostrar a usuarios conectados (Aquí puedes elegir el Rol que quieras).
• Mostrar a usuarios desconectados.
• Mostrar a todos.

Como ves es un plugin muy sencillo, con una función muy específica a la vez que útil.

11 - Incluir un cuadro de búsqueda directamente en el menú.

A veces cuando una web necesita mostrar de manera continua un cuadro de búsqueda de contenido (blogs, wikis, etc). El cuadro de búsqueda por defecto de WordPress se queda un poco escondido al venir con función de Widget. (tendríamos que usar un Sidebar para mostrarlo, y no siempre es la opción más deseada).

En este apartado vamos a ser muy breves. Utiliza el plugin llamado Box Search Box Item Type for nav menus para incluir el cuadro de búsqueda de WordPress dentro del menú.

Al instalar y activar el plugin te encontrarás con una nueva opción en la configuración de menú, llamada Search Box. Basta con arrastrarla a donde quieras que se coloque. (normalmente la final del todo, para que aparezca lo más a la derecha posible en el menú).

12 - Eliminar elementos del menú en bloque (todos a la vez).

Nos queda muy poquito para terminar esta guía definitiva de menús de WordPress, y toca ahora hablar de una joyita para los que tengan webs con menús con muchos elementos en él, y les suponga un verdadero dolor de cabeza el eliminar elementos de un menú en concreto (ya que actualmente WordPress sólo permite borrar items de uno en uno, y no lo hace de manera jerárquica).

Con el plugin llamado sTRASHo, podrás pinchar y arrastrar a una papelera (literalmente) los ítems del menú, tanto individualmente, como en bloque.

Una verdadera pasada de funcionalidad para el menú de WordPress, que, en mi opinión, debería de integrar por defecto.

13 - Crear un menú especial para tus visitas desde móvil o tablets.

Como bien sabemos, hoy en día es fundamental que una web no solo se adapte a móviles, si no que muchas veces se crear versiones de una misma web para móvil.

A veces, cuando una plantilla o tema de WordPress se “auto-ajusta” a pantallas más pequeñas, el menú no siempre queda como queremos. Esto tiene solución.

Lo que te traigo es un plugin muy conocido, llamado Responsive Menu, el cual creará un menú específico para cuando tus visitas vengan desde móvil o tablet.

Y hasta aquí esta Guía definitiva para convertirse en un experto de los menús de WordPress. ¿Qué te ha parecido? ¿Conoces algún plugin o truco que pueda complementar mejor nuestro artículo?

¡Hasta la próxima!