Los Menús WordPress son cruciales en tu web. Con ellos «dices» a tus usuarios qué páginas quieres que visiten, facilitas información adicional importante para ellos o proporcionas acceso a ciertas secciones privadas, entre otras muchas cosas.
Por eso es importante que sepas gestionarlos correctamente de principio a fin. Desde crearlos hasta mejorarlos con diseño o iconos, pasando por mostrarlos sólo donde quieras.
Y eso es lo que te voy a explicar en este artículo. ¿Vamos allá?
Índice
- ¿Qué es un Menú de WordPress?
- ¿Qué tipos de Menú hay en WordPress?
- Gestión de Menús
- Preguntas Frecuentes al crear Menús en WordPress
- ¿Cómo se crea un Menú Ancla?
- ¿Cómo se crea un Menú WordPress sin enlace?
- ¿Cómo hacer un Menú WordPress que se abre en otra ventana?
- ¿Y que sea Nofollow?
- ¿Cómo se añade CSS a un Menú WordPress?
- ¿Cómo oculto un Menú en una página concreta?
- ¿Cómo hago que el Menú de mi WordPress sea responsive?
- ¿Y cómo incluyo un Menú Lateral? (o en el Footer, en el Menú Secundario…)
- ¿Cómo poner iconos en un Menú WordPress?
- ¿Y añadir una Barra de Búsqueda?
En realidad un Menú no es algo exclusivo de WordPress, sino que está presente en todo tipo de páginas webs.
Se trata de algo tan sencillo como un conjunto de enlaces, generalmente con un objetivo común, que permite desplazarse por distintas áreas de una web o acceder a sitios externos.
Cuando me refiero a un objetivo común quiero decir que hay Menús cuya finalidad es facilitar el acceso a diversas secciones de la web, otros proporcionar información adicional, como la legal, otros permiten gestionar sesiones y acceder a áreas privadas, etc.
Aunque esto suele ser lo habitual, nada impide añadir enlaces con distintas finalidades en un mismo Menú. Por ejemplo, el inicio de sesión junto a los enlaces legales o un enlace externo en el Menú Principal de la web.
Una vez más, los tipos de Menú no son exclusivos de nuestro CMS favorito. Y lo cierto es que, aunque existen muchos tipos de Menú, ignoro si existe alguna clasificación «oficial». Honestamente, nunca me lo había planteado hasta sentarme a escribir este artículo.
Así que te explicaré los tipos de Menú que puedes usar en WordPress de la manera más ordenada que se me ha ocurrido.
Según Ubicación
Puedes poner Menús en cualquier parte de tu web que se te ocurra, especialmente ahora, con los maquetadores y la nueva funcionalidad de WordPress que permite la edición completa.
Sin embargo, existen algunas ubicaciones, llamémoslas estándar.
Menú Principal
Es el Menú WordPress que permite a tus usuarios desplazarse por la web según el camino que tú les hayas trazado.
Suele estar ubicado en la parte superior, aunque no necesariamente tiene por qué ser el primer elemento de la página. En él debes incluir aquellos enlaces que son fundamentales para tu negocio.
Menú Secundario
No todos los themes cuentan con él.
Aunque no necesariamente tiene por qué estar ahí, lo habitual es que el Menú Secundario WordPress esté ubicado en la parte más alta de la página, por encima del Principal.
Suele utilizarse para facilitar acceso a áreas privadas, al carrito en tiendas online, etc. Es frecuente que se trate de un área de widgets donde también puedes añadir información destacada, como el teléfono de contacto, por ejemplo.
Menú Lateral
Como su propio nombre indica, es un Menú que se encuentra al lado del contenido de la web.
Hace unos años solía ser el Menú Principal en la mayor parte de los sitios, pero la aparición de los móviles trasladó este a la parte superior.
Actualmente, los Menús Laterales están cada vez más en desuso y suelen usarse para proporcionar enlaces adiciones o un Menú Secundario en ciertas partes de la web. Lo más habitual es incluirlos a través de un widget.
Menú Footer
El Menú del Footer está presente cada vez en más sitios, ya que es un sitio ideal para incluir todos los enlaces legales (política de privacidad y cookies, condiciones de contratación, etc.).
Adicionalmente, muchas webs utilizan la zona de widgets al final de las páginas para añadir Menús Personalizados adicionales (ahora llamados Menús de Navegación).
Menús Personalizados WordPress
WordPress permite crear Menús sin una ubicación establecida y que pueden ser insertados en las distintas áreas de widgets de la web.
Actualmente, con la nueva forma de gestión de WordPress, puedes utilizar bloques para añadir Menús de Navegación en cualquier parte de tus páginas.
Seguro que te has dado cuenta al navegar por internet de que existen muchos tipos de Menús. No mencionaré todos los existentes, sólo los que más se utilizan en la actualidad.
Horizontales y Verticales
No tienen mucho misterio, ya que son la mayoría de Menús que puedes ver en cualquier web.
Los Horizontales presentan sus enlaces uno al lado del otro (por ejemplo, el Menú Principal de esta página), mientras los Verticales los presentan uno encima de otro.
Desplegables
Los Menús Desplegables son aquellos en los que, al hacer clic o ponerte encima, no te dirigen a ningún sitio sino que muestran una lista de alternativas, lo que se conoce como Submenú.
Mega Menús
Se trata de Menús Desplegables que, en lugar de mostrar una lista de ítems, abren todo un área de opciones, generalmente compuesta por varios Menús Personalizados.
Dentro de un Mega Menú WordPress también es frecuente encontrar otros elementos como imágenes, contenido destacado o llamadas a la acción.
Se trata de una alternativa muy adecuada en aquellos sitios que necesitan mostrar muchas secciones de contenido al mismo tiempo y de una manera visual y ordenada. También para las webs de una sola página que quieren mostrar contenido adicional sin añadir URLs.
Hamburguesa
Los Menús Hamburguesa son aquellos que aparecen totalmente compactados bajo una única opción, que se despliegan al hacer clic, para mostrar el resto de enlaces de manera vertical y ocupando toda o parte de la pantalla.
Recibe este nombre porque la opción visible suele ser un icono compuesto por 3 rayas horizontales apiladas, que recuerdan en cierta forma a esta comida.
Aunque su uso está pensado para móviles, donde la navegación puede ser complicada, cada vez son más frecuentes en todo tipo de dispositivos, incluidos los de pantalla grande.
Fijos, Flotantes o Sticky
Un Menú Fijo, Flotante o Sticky (pegajoso en inglés) en realidad puede ser cualquiera de los anteriores, pero con la característica específica de estar siempre visible.
Independientemente de su ubicación y el scroll que se haya hecho dentro de la página, los Menús Fijos siempre son accesibles.
La gestión de Menús WordPress se puede hacer desde dos sitios:
- Menú Apariencia > Menús
- Menú Apariencia > Personalizar > Menús (Personalizador WordPress)
Aunque ambas opciones son diferentes visualmente, funcionan de manera bastante similar.
Desde la pantalla tradicional de crear Menús (Apariencia > Menús):
- Haz clic sobre el enlace Crea un nuevo Menú de la parte superior de la página (flecha roja de la imagen inferior).
- Dale un nombre (flecha verde). Trata de que sea descriptivo para poder identificarlo cuando tengas varios.
- Añade las opciones que necesites utilizando los desplegables de la izquierda (flecha azul izquierda). Cada una de las opciones se irá colocando en la zona marcada por la flecha azul de la derecha. Puedes añadir a tu Menú WordPress páginas, entradas, enlaces personalizados (tú indicas la URL), categorías, etiquetas y cualquier otro tipo de post o taxonomía que tengas en tu web, por ejemplo, productos y categorías de WooCommerce.
- Si quieres que tu Menú se muestre en alguna de las ubicaciones configuradas por tu theme (por ejemplo, como Menú Principal), selecciona la que corresponda (flecha morada). Estas ubicaciones varían según el tema que estés utilizando. Suelen tener como mínimo una, pero también pueden tener varias o ninguna.
- Guarda tu Menú.
Desde el Personalizador de WordPress:
- Utiliza el botón Crea un nuevo Menú que aparece en la primera pantalla.
- Dale el nombre que quieras.
- Si quieres utilizar el Menú en una de las ubicaciones preestablecidas por tu theme, selecciónala en esa misma pantalla.
- Haz clic sobre el botón Siguiente para pasar a configurar las opciones.
- Utiliza el botón Añadir Elementos para mostrar los desplegables de opciones (iguales a los que vimos anteriormente).
- Añade aquellos que quieras y cuando termines utiliza el botón Publicar.
Tanto en una pantalla de configuración como en la otra, basta con usar el botón rojo Borrar Menú.
Es posible que una vez creado tu Menú quieras añadir algunos cambios.
Cuando ya tienes Menús creados, en el Personalizador verás un listado desde donde podrás acceder a cada uno de ellos haciendo clic encima.
En la pantalla tradicional de configuración verás un desplegable junto al enlace para crear un nuevo Menú (si has creado más de uno). Selecciona el que quieras y haz clic sobre el botón Seleccionar.
Ya sólo tienes que aplicar los cambios que quieras. Puedes:
- Cambiar el orden arrastrando los distintos ítems.
- Crear Submenús anidando opciones. Sólo tienes que arrastrar horizontalmente.
- Cambiar el texto del enlace. Despliega las opciones y modifica el campo Etiqueta de Navegación.
- Borrar ítems del Menú. Despliega las opciones y utiliza el enlace Eliminar.
Recuerda publicar o guardar cuando termines.
Un enlace ancla es un enlace que lleva a un punto dentro de la misma página.
Para incluir un Menú Ancla en WordPress debes utilizar los Enlaces Personalizados, poniendo como URL una almohadilla seguida del ID del elemento al que quieras desplazarte (#IDelemento).
En realidad es el mismo principio que ya explicamos en los enlaces ancla del editor de bloques.
Esto suele ser necesario cuando queremos incluir un Menú que no lleve a ninguna parte, sino que abra un Submenú con opciones que dependen de él.
No pueden crearse Menús sin enlace, pero sí se pueden simular.
Para ello basta con utilizar los Enlaces Personalizados y poner como URL una almohadilla (#).
Es decir, un enlace ancla al inicio de la propia página.
Una pregunta habitual entre los novatos en WordPress es «¿Qué plugin instalo para abrir Menús en otra ventana?». Ninguno. WordPress puede hacerlo, pero por defecto esta opción aparece deshabilitada.
Para activarla debes ir a Apariencia > Menús. Da igual si estás usando el Personalizador de WordPress, debes acceder a esta sección de tu web.
Allí, abre la pestaña Opciones de Pantalla, en la parte superior derecha. Por último, marca la casilla Destino del Enlace.
Automáticamente verás que, al abrir las opciones de cualquier opción de tu Menú, cuenta con una casilla Abrir el Enlace en una Pestaña Nueva. Márcala y tu Menú se abrirá en otra ventana.
También tendrás la casilla en el Personalizador, si prefieres gestionar tus Menús WordPress desde ahí.
¿Y que sea Nofollow?
Debes seguir los pasos del punto anterior y, en este caso, activar la casilla Relación con el Enlace (XFN) de las opciones de pantalla.
No puedes poner reglas CSS directamente sobre el Menú. Pero sí puedes añadir una o varias clases.
Para ello vuelve a seguir los pasos de las preguntas anteriores y en las opciones de pantalla activa la casilla Clases CSS.
Las reglas CSS para esa clase puedes incluirlas desde Aparienca > Personalizar > CSS Adicional o, todavía mejor, desde la hoja de estilos de tu Child Theme.
Si quieres que un Menú sólo se vea en determinadas páginas de tu WordPress (por ejemplo, en esta web el Menú de la Home oculta algunas opciones), necesitas usar un plugin.
Puedes usar Menu Item Visibility Control, Conditional Menus o If Menu, según lo que necesites.
Hay plugins que te permiten crear un Menú Mobile, pero si el Menú de tu WordPress no se adapta a los dispositivos móviles por defecto, no te compliques la vida. Cambia de tema a uno más actual que sea Mobile First.
Si tu theme no se adapta correctamente a versiones móviles, el Menú no será lo único que te dé problemas en las pantallas pequeñas. Así que acabarás sobrecargando tu web con plugins para corregir de mala manera lo que debería estar haciendo el theme.
Si no sabes cómo cambiar de tema, puedo ayudarte.
Si no tienes una posición predefinida por tu tema para estas zonas, entonces tendrás que recurrir a los widgets.
Primero crea tu Menú WordPress tal como ya hemos visto, pero sin elegir ninguna de las posiciones preestablecidas.
Luego ve a la gestión de widgets y, en el área que quieras, añade un bloque Menú de Navegación (antes Menú Personalizado).
Por último, elige en el desplegable el Menú que has creado y actualiza o publica la pantalla.
Aquí tienes dos maneras de hacerlo, manualmente y mediante plugins.
Manualmente basta con que elijas el Dashicon que quieras y copies el código que aparece al hacer clic sobre el enlace Copy HTML. Luego ve a tu Menú y pega dicho código en la etiqueta de navegación.
Puedes hacer lo mismo con FontAwesome, pero para que funcione, tu theme ya debe estar usando este tipo de fuentes.
Si todo esto te parece muy complicado y prefieres optar por la vía del plugin, tienes varias opciones. Personalmente me gusta Menu Icons by ThemeIsle, sencillo y vistoso. Si quieres un poco más de control o, incluso, añadir tus propias imágenes personalizadas, entonces puedes recurrir a Menu Image, Icons made easy.
¿Y añadir una Barra de Búsqueda?
En este caso lo primero que debes hacer es revisar si tu theme incluye esta opción, ya que muchos ya lo hacen.
Si no es así, puedes recurrir a plugins como Ivory Search.
Poco más queda por decir de los Menús WordPress. Aunque inicialmente pueden parecer un poco difíciles de gestionar, una vez que te atreves a probar sólo es cogerles el tranquillo.
Y si no se lo coges y prefieres dejar de perder el tiempo a la hora de crear tu web, puedes recurrir a manos expertas, para que puedas dedicarte a lo que de verdad sabes hacer y se te da bien.
Deja una respuesta