0 servicios - 0,00€
  • Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página
Mantenimiento WordPress y Creación de Páginas Web

Donde Tu Web te Lleve - Eva F. Quintana

Mantenimiento WordPress y Creación de Páginas Web

  • Sobre mí
  • Orden en el caos
  • Contenido Gratuito
    • Blog
    • Diccionario de WordPress
    • Configurar Cookies en WordPress
    • 5 Tips WooCommerce
  • Trabaja Conmigo
Inicio / Blog / WordPress desde 0 / Todo sobre los Menús en WordPress

Todo sobre los Menús en WordPress

Todo sobre los menús en WordPress

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?
    • Según Ubicación
    • Tipos de Menú WordPress según Aspecto
  • Gestión de Menús
    • Crear Menú en WordPress
    • Quitar Menú WordPress
    • ¿Cómo editar un Menú WordPress?
  • 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?

¿Qué es un Menú de WordPress?

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.

¿Qué tipos de Menú hay en WordPress?

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.

Ejemplo de menú secundario WordPress, ubicado justo encima del principal
Ejemplo de Menú Secundario WordPress, ubicado encima del Principal y utilizado para dar acceso a un área privada y al carrito de la tienda.

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ú WordPress en el footer de esta página
Menú en el Footer de esta web.

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.

Tipos de Menú WordPress según Aspecto

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.

2 menús en el pie de un eCommerce
2 Menús Verticales en el pie de una tienda online.

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

Menú desplegable "Contenido Gratuito" de esta web
Ejemplo de Menú Desplegable en esta misma web.

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.

Ejemplo de Mega Menú WordPress
Ejemplo de Mega Menú en WordPress.

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.

Menú Hamburguesa Cerrado
Menú Hamburguesa cerrado, con su icono característico.
Opciones desplegadas del menú hamburguesa
Mismo Menú desplegado.

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.

Gestión de Menús

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.

Crear Menú en WordPress

Desde la pantalla tradicional de crear Menús (Apariencia > Menús):

  1. Haz clic sobre el enlace Crea un nuevo Menú de la parte superior de la página (flecha roja de la imagen inferior).
  2. Dale un nombre (flecha verde). Trata de que sea descriptivo para poder identificarlo cuando tengas varios.
  3. 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.
  4. 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.
  5. Guarda tu Menú.
Cómo Crear Menú WordPress
Clic para ampliar.

Desde el Personalizador de WordPress:

  1. Utiliza el botón Crea un nuevo Menú que aparece en la primera pantalla.
  2. Dale el nombre que quieras.
  3. Si quieres utilizar el Menú en una de las ubicaciones preestablecidas por tu theme, selecciónala en esa misma pantalla.
  4. Haz clic sobre el botón Siguiente para pasar a configurar las opciones.
  5. Utiliza el botón Añadir Elementos para mostrar los desplegables de opciones (iguales a los que vimos anteriormente).
  6. Añade aquellos que quieras y cuando termines utiliza el botón Publicar.

Quitar Menú WordPress

Tanto en una pantalla de configuración como en la otra, basta con usar el botón rojo Borrar Menú.

¿Cómo editar un Menú WordPress?

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.

Preguntas Frecuentes al crear Menús en WordPress

¿Cómo se crea un Menú Ancla?

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.

¿Cómo se crea un Menú WordPress sin enlace?

Menú WordPress sin enlace usando un ancla

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.

¿Cómo hacer un Menú WordPress que se abre en otra ventana?

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.

¿Cómo se añade CSS a un Menú WordPress?

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.

¿Cómo oculto un Menú en una página concreta?

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.

¿Cómo hago que el Menú de mi WordPress sea responsive?

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.

¿Y cómo incluyo un Menú Lateral? (o en el Footer, en el Menú Secundario…)

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.

¿Cómo poner iconos en un Menú WordPress?

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.

  • Web Facturación, para vender online
    Web Facturación
  • Página Web Profesional
    Web Profesional
  • Web Presencia Online
    Web Presencia Online
También te interesará...
La invasión de los móviles y el diseño responsive
Mobile First, Responsive y por qué no es oro todo lo que reluce.
El tamaño sí importa. (El de las fotos...)
Reducir y comprimir imágenes para tu web. Por qué debes hacerlo siempre.
Imágenes libres de derechos (o cómo librarte de una buena)
Fotos Libres de Derechos
Compartir en LinkedIn Compartir en Twitter Compartir en Facebook Compartir en WhatsApp Compartir en Telegram Compartir en Email

WordPress desde 0 Configuración Básica en WordPress, Diseño y Contenido

5 Tips de WooComerce para VENDER MAS

Los pequeños detalles marcan la diferencia.

Con estos tips para WooCommerce harás de tu tienda online la favorita de tus clientes.

Ayúdame a vender más con estos tips

Cláusula de Privacidad: La finalidad de estos datos es mandarte la guía de Tips WooCommerce. Además, también te enviaré la newsletter, así como información relevante sobre WordPress, marketing online y otros temas afines a estos. Puedes leer más sobre la protección de tus datos en la Política de Privacidad.

guia-tips-woocommerce-s

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

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

Footer

  • Contacto
  • Orden en el caos
0 servicios - 0,00€

© 2023 · Donde Tu Web te Lleve - Eva F. Quintana

  • Política de Privacidad
  • Política de Cookies
  • Configurar Cookies
  • Condiciones Generales de Contratación
  • Aviso Legal y Condiciones de Uso
  • Iniciar Sesión
  • Acceder
  • Registro
¿Has olvidado la contraseña?
¿Has perdido tu contraseña? Por favor, introduce tu nombre de usuario o dirección de correo electrónico. Recibirás por correo electrónico un enlace para crear una nueva contraseña.

Supongo que te lo imaginas, pero tengo que contártelo.

Esta web utiliza cookies propias y de terceros con distintas finalidades técnicas y analíticas. En las Política de Cookies dispones de información detallada sobre ellas.

Puedes activarlas todas o configurarlas manualmente.

Configurar Cookies
Resumen de privacidad
Mantenimiento WordPress y Creación de Páginas Web

Esta web utiliza cookies para mejorar tu experiencia mientras navegas por ella. Las he clasificado como Estrictamente Necesarias y Cookies de terceros no técnicas.

Las Cookies Estrictamente necesarias cumplen funciones técnicas y son esenciales para el correcto funcionamiento del sitio. Las Cookies de terceros no técnicas me ayudan a analizar y comprender cómo se usa la web, pero sin ellas el portal sigue funcionando. Estas últimas sólo se instalan en tu navegador si lo autorizas.

Cookies estrictamente necesarias

Estas cookies son fundamentales para que la web funcione correctamente, por eso no pueden desactivarse.

Son las relativas a inicio de sesión, funcionamiento del carrito, seguridad, almacenamiento de tu propia configuración de cookies, etc.

Si quieres desactivarlas debes hacerlo desde las preferencias de tu navegador. Antes de hacerlo debes saber que te arriesgas a que ciertas funcionalidades de la web fallen.

Cookies de terceros no técnicas

Las cookies de terceros no técnicas que utilizo son de carácter analítico. Sólo recogen información estadística que me permite saber el número de visitas que recibe la web, desde qué países y ciudades llegan (utilizan tu IP para ello), qué contenidos son los más leídos, etc.

Si las activas no notarás ninguna diferencia en tu navegación, pero junto con el resto de visitas sabré qué temas interesan más para tenerlo en cuenta a la hora de crear nuevos contenidos.

Por eso es importante que las dejes activadas, aunque puedes desactivarlas si quieres y la web seguirá funcionando.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Cookies adicionales

Son básicamente cookies y píxeles publicitarios que utilizo cuando tengo alguna campaña de anuncios activa. Estas cookies y píxeles se basan en tus visitas a esta web para saber si deben mostrarte un determinado anuncio o no.

Por ejemplo, si haces clic en el anuncio de una determinada oferta y acabas comprando, dejarás de ver dicho anuncio. Si estas cookies estás desactivadas, seguirás viéndolo.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Powered by  GDPR Cookie Compliance