La navegación del sitio es clave para ayudar a sus usuarios a llegar a donde quieren llegar. Un menú bien diseñado puede ayudar mucho a mejorar la experiencia del usuario (UX), e incluso a disminuir su tasa de rebote. Sin embargo, uno mal hecho puede hacer justo lo contrario.

Afortunadamente, WordPress le permite crear menús personalizados que se ajustan a las necesidades de su sitio. Incluso puede utilizar funciones nativas para añadir un menú desplegable compacto de WordPress que ahorra espacio, al tiempo que proporciona una dirección clara para sus visitantes.

En este post, discutiremos por qué es importante la navegación en el sitio web y cómo los menús desplegables pueden ser particularmente útiles. Luego le explicaremos cómo crearlos en WordPress, y compartiremos algunos plugins que pueden ayudar.

¡Vamos a sumergirnos!

Una Introducción a la Navegación de WordPress y a los Menús Desplegables

Aunque pueden ser modestos, los menús de navegación son un elemento vital de cualquier sitio web. Ayudan a los usuarios a encontrar rápidamente las páginas más relevantes para lograr sus objetivos, mientras que también da a los visitantes por primera vez una idea de lo que tiene que ofrecer:

El menú de navegación principal del sitio web de Kinsta

El menú de navegación principal del sitio web de Kinsta

Tener un menú de navegación bien diseñado es clave para aumentar las conversiones y disminuir la tasa de rebote. Cuando los usuarios puedan encontrar fácilmente las páginas donde se encuentra su producto, el formulario de registro de correo electrónico u otro contenido de conversión, le resultará más sencillo conseguir que realicen una compra o se registren.

Además, si los usuarios pueden encontrar con confianza el camino a través de su sitio, no tendrán que rebotar en sus páginas porque terminaron en el lugar equivocado. Ayudarles a hacerlo bien la primera vez puede mejorar el UX y minimizar la frustración.

En WordPress, los menús son una característica inherente. Cualquier sitio creado con la plataforma puede mostrar uno o más de ellos. Sin embargo, los temas de WordPress también juegan un papel importante cuando se trata de estilizar y colocar el menú o los menús.

Por esta razón, su menú de WordPress podría tomar muchas formas diferentes. El más familiar es el menú de cabecera estándar:

Un ejemplo de un típico menú de cabecera

Un ejemplo de un típico menú de cabecera

A menudo también se puede incluir un menú de pie de página adicional en la parte inferior de sus páginas. Puede mostrar el mismo contenido que su menú principal, u ofrecer opciones ligeramente diferentes:

Un ejemplo de un menú de pie de página

Un ejemplo de un menú de pie de página

Otro estilo es la superposición del menú, que los usuarios pueden abrir y cerrar:

Un ejemplo de un menú superpuesto

Un ejemplo de un menú superpuesto

Alternativamente, podría considerar usar un menú de la barra lateral:

Un ejemplo de un menú de la barra lateral

Un ejemplo de un menú de la barra lateral

O puede incorporar un menú desplegable, también llamado a veces menú «anidado»:

Un ejemplo de un menú desplegable

Un ejemplo de un menú desplegable

Este tipo de navegación es ideal para muchos tipos de sitios. No oscurecerá su contenido como un menú superpuesto, pero no es tan intrusivo como una gran barra de encabezado o un menú de barra lateral.

Al ocultar algunos contenidos hasta que se necesiten, ahorrará espacio en la pantalla y al mismo tiempo proporcionará a los usuarios una forma fácil de moverse.

¿Cómo Crear un Menú Desplegable en WordPress? (en 5 Pasos)

Si ha decidido que un menú desplegable puede ser una buena opción para su sitio de WordPress, configurar uno es bastante simple. Utilizando las funciones de menú nativas disponibles en WordPress, puede crear un sistema de navegación personalizado que se adapte a sus necesidades en sólo cinco pasos.

Paso 1: Crear los Elementos del Menú

El primer paso para crear un menú es decidir qué incluir en él. Comience navegando a Apariencia > Menús en su tablero de WordPress:

menús WordPress

Accediendo al editor de menús en el tablero de WordPress

Lo que ve en el menú del editor variará ligeramente dependiendo del tema.

Sin embargo, lo que es importante señalar por ahora es la primera opción en la pestaña de los menús de edición. Debería ver una opción en la que puede seleccionar uno de sus menús existentes para editarlo, así como una opción para crear un nuevo menú:

El crear un nuevo enlace de menú en la parte superior del editor de menú de WordPress

El crear un nuevo enlace de menú en la parte superior del editor de menú de WordPress

Para este ejemplo, elegiremos la última opción y crearemos un nuevo menú. Esto implica añadir un título y luego hacer clic en el botón Crear Menú:

Nombrar y crear el nuevo menú

Nombrar y crear el nuevo menú

Ahora está listo para comenzar a agregar elementos a su menú de WordPress. En la mayoría de los casos, lo mejor es mantener el menú lo más simple posible, y al mismo tiempo dar a los usuarios suficiente información para llegar a donde quieren ir.

Incorporar demasiadas páginas puede abrumar a los visitantes y hacer la navegación más difícil en lugar de más fácil.

Hay varias formas de agregar los elementos del menú. Los dos primeros son Paginas y Postes, y funcionan de manera muy similar.

Añadir páginas al menú

Añadir páginas al menú

En la barra lateral del menú del editor, simplemente seleccione las casillas de verificación de cada página o publicación que desee incluir y haga clic en el botón Agregar al menú:

Su próxima opción es incorporar los Enlaces Personalizados. Esto implica proporcionar el URL de la página a la que se quiere dirigir a los usuarios, y luego crear una etiqueta corta pero descriptiva para la misma. Después de eso, puedes hacer clic en Agregar al menú de nuevo:

Añadir un enlace personalizado al menú

Añadir un enlace personalizado al menú

Por último, también puede agregar las categorías de página y de publicación al menú de navegación. Esto llevará a los usuarios a una página de archivo donde podrán ver todo el contenido sobre un tema en particular.

Los blogs y otros sitios de gran contenido pueden encontrar esta característica especialmente útil:

Adición de categorías al menú

Adición de categorías al menú

Al igual que con las opciones de Páginas y Mensajes, sólo tiene que seleccionar las casillas de las categorías que desee incluir y elegir Añadir al menú.

Paso 2: Organizar el Menú de WordPress

Una vez que haya añadido todos los elementos del menú, debería verlos listados en fichas individuales en Estructura de menú en el editor:

La sección Estructura del menú del editor de menú

La sección Estructura del menú del editor de menú

Inicialmente, los elementos del menú aparecerán en el orden en que los añadió. Sin embargo, puede modificar fácilmente su organización arrastrándolos y soltándolos en su lugar. Esto le permitirá crear un menú simple sin la función de desplegable.

Hay un par de formas de agregar desplegables a su menú de WordPress.

Lo más sencillo es seguir arrastrando y soltando, pero empezar a anidar ciertos elementos del menú debajo de otros:

Categorías de anidamiento bajo la página del Blog

Categorías de anidamiento bajo la página del Blog

Por ejemplo, en la imagen de arriba, hemos movido las tres categorías de post que añadimos al menú bajo Blog, convirtiéndolas en «sub-temas». En la parte delantera, esto creará un menú desplegable que se verá así:

Ejemplo de un menú desplegable en WordPress

Ejemplo de un menú desplegable en WordPress

Si desea agregar un menú desplegable que incluya todas las categorías de su sitio, puede hacerlo agregando un Enlace personalizado a su menú. Use «#» como la URL y «Categorías» o algo similar para la etiqueta:

Creación de una etiqueta de categorías para el menú

Creación de una etiqueta de categorías para el menú

Entonces puedes añadir todas tus categorías al menú y anidarlas bajo esta etiqueta. Se podrá hacer clic en cada categoría, pero no en la etiqueta:

El menú desplegable Categorías

El menú desplegable Categorías

Utilizando una técnica similar, también puede ocultar todos los elementos del menú en un solo menú desplegable.

Añada otro enlace personalizado, usando «#» como URL y «Menú» como etiqueta. Entonces, anida todos sus otros elementos del menú debajo de ese:

Anidando todos los enlaces de navegación bajo una sola etiqueta de menú

Anidando todos los enlaces de navegación bajo una sola etiqueta de menú

El resultado en el frontend será un menú desplegable que incluye las páginas clave de su sitio.

Como puede ver en el artículo de categorías de abajo, cualquier contenido anidado bajo un subítem se mostrará en un submenú:

Un verdadero menú de navegación desplegable de WordPress

Un verdadero menú de navegación desplegable de WordPress

Usando el editor de menús de arrastrar y soltar de esta manera, puede crear cualquier estilo y combinación de menús desplegables de WordPress. Recuerde, sin embargo, que demasiados elementos del menú pueden ser confusos para los usuarios.

También es mejor limitar el número de submenús que incorporas, para evitar sobrecargar la navegación.

Paso 3: Incorporar Imágenes en el Menú de WordPress

Si al final del paso 2, el menú desplegable se ve exactamente como lo imaginaste, puedes saltar al paso 5 para publicarlo. Sin embargo, hay pasos adicionales que puede tomar si desea mejorar su menú con personalizaciones.

Una táctica a considerar es la incorporación de elementos visuales en sus menús para proporcionar una mayor orientación a los visitantes. Si bien las etiquetas descriptivas son vitales, a veces una imagen o un icono pueden ayudar a los usuarios a determinar más rápidamente adónde conduce un determinado enlace de navegación.

Es posible agregar imágenes usando CSS personalizado, lo cual discutiremos en breve. Sin embargo, recomendamos tomar un plugin como Menu Image, Icons Made Easy:

Menú desplegable de WordPress con imágenes

Menú desplegable de WordPress con imágenes

De esta manera, no tiene que preocuparse por molestarse con ningún código para añadir interés visual a su menú desplegable.

Simplemente instale el plugin y luego regrese a Apariencia > Menús:

La sección Imagen de menú en el editor de menú

La sección Imagen de menú en el editor de menú

Verá que ahora hay opciones de imagen para cada página que ha incluido en su menú. Puede seleccionar la foto, el tamaño y la posición de cada página. Recuerde guardar los cambios cuando termine.

Paso 4: Agregar CSS Personalizado a su Menú Desplegable

Aunque no es recomendable para principiantes, los usuarios intermedios y avanzados pueden querer incorporar su propio estilo en sus menús desplegables de WordPress. Sin embargo, antes de saltar a su CSS, tendrá que añadir una clase a su menú.

Si se salta este paso, su CSS personalizado puede causar problemas para cualquier otro menú de su sitio. Por ejemplo, puede aplicar inadvertidamente a su menú de pie de página un estilo que sólo se refería a su menú desplegable principal.

En el editor de menús, haga clic en Opciones de pantalla en la esquina superior derecha:

La pestaña Opciones de pantalla en el editor de menú

La pestaña Opciones de pantalla en el editor de menú

Entonces, marque la casilla de las clases de CSS:

La casilla de verificación Clases CSS en la pestaña Opciones de pantalla

La casilla de verificación Clases CSS en la pestaña Opciones de pantalla

Esto agregará un campo de Clases CSS a cada página de su menú:

El campo Clases CSS en el editor de menú

El campo Clases CSS en el editor de menú

Una vez que añada una o más clases de CSS a sus elementos de menú, cualquier código personalizado que incluya en su hoja de estilo sólo se aplicará a los elementos de su menú con la clase que especifiques.

¿Cansado de un anfitrión lento para su sitio de WordPress? Proporcionamos servidores rápidos y soporte de clase mundial las 24 horas del día, los 7 días de la semana por parte de expertos de WordPress. Consulte nuestros planes

Ahora puede ir a su hoja de estilo o al Personalizador y ponerse a trabajar en su estilo personalizado.

Paso 5: Publicar su Menú en las Principales Localidades

Una vez que el menú desplegable de WordPress esté estructurado para satisfacer sus necesidades, y haya incorporado las personalizaciones que quiera, estará listo para publicarlo en su sitio.

Este proceso variará ligeramente dependiendo del tema y de las ubicaciones de los menús que soporte. Para este ejemplo, vamos a usar el tema de los Twenty Twenty.

En el editor de menús, desplácese hacia abajo hasta la sección Ajustes del menú:

La sección de Ajustes del Menú en el editor

La sección de Ajustes del Menú en el editor

Puede seleccionar la primera casilla de verificación si desea que las nuevas páginas se añadan automáticamente a su menú. Si acaba de empezar con su sitio y no ha añadido todas sus páginas clave todavía, esto puede ser útil. Sin embargo, tenga cuidado de no añadir accidentalmente demasiados elementos a su menú.

Debajo de esta opción, verá una lista de casillas de verificación que señalan las diferentes áreas de su sitio donde puede mostrar su menú.

El tema de Twenty Twenty incluye diferentes áreas de menú: Menú horizontal del escritorio, menú ampliado del escritorio, menú móvil, menú de pie de página, menú social.

En este caso, el menú que hemos creado se adapta mejor a la ubicación del Menú Horizontal del Escritorio, que está en la cabecera del sitio:

Menú horizontal de escritorio para el tema de los Veinte Veinte

Menú horizontal de escritorio para el tema de los Twenty Twenty

También puede considerar la posibilidad de navegar a la pestaña Administrar ubicaciones en el área de Menús de su tablero. Aquí puede ver todas las ubicaciones de los menús que son compatibles con su tema, así mismo se puede ver qué menú ha asignado a cada una:

La pestaña

La pestaña «Manage Locations

Al colocar los menús, puede ser útil ver cómo se verán en el frente.

La opción Administrar con vista previa en vivo

La opción Administrar con vista previa en vivo

Haga clic en el botón Administrar con vista previa en vivo para ver cómo aparecerá su menú en la ubicación que ha elegido para él, usando el Personalizador de WordPress:

Una vista previa en vivo del menú de WordPress en el Personalizador

Una vista previa en vivo del menú de WordPress en el Personalizador

A continuación, puede publicar su menú o menús directamente desde el Personalizador. Si alguna vez necesita añadir o eliminar elementos de su menú desplegable, puede simplemente volver al editor de menús y hacer los ajustes necesarios.

Plugins de WordPress para Mejorar sus Menús Desplegables

Aunque se pueden crear menús de navegación de WordPress con todas las funciones sin necesidad de herramientas adicionales, a veces puede ser útil ampliar la funcionalidad del menú. Si ese es el caso de su sitio, tal vez quiera buscar en algunos plugins de menú de WordPress populares.

Nested Pages es una forma eficiente para que los blogs con mucho contenido creen menús desplegables. Aunque se utiliza principalmente para organizar los mensajes y las páginas, este plugin también generará automáticamente un menú que refleja la estructura de su contenido:

Nested Pages

Nested Pages WordPress plugin

Aunque no es necesariamente aconsejable incorporar un gran número de elementos en sus menús, a veces es inevitable.

Si ese es el caso de su sitio, el Max Mega Menú puede ayudarle a combinar sus actuales menús de WordPress para formar un «mega menú»:

Max Mega Menu

Max Mega Menu WordPress plugin

Con el aumento de la navegación móvil, es fundamental asegurarse de que los menús sigan siendo legibles en los dispositivos móviles.

WP Mobile Menu se empareja con cualquier tema de respuesta para ayudarle a crear un sistema de navegación para los usuarios de su sitio que están en movimiento:

WP Mobile Menus

WP Mobile Menus WordPress plugin

Finalmente, como ya hemos discutido, puede haber situaciones en las que los elementos descriptivos del menú no sean suficientes. En estas situaciones, puede que quieras mirar en el uso de la imagen del menú, Iconos hechos fáciles como se describe en el paso 3.

Puede usar cualquiera de estos plugins para mejorar su sistema de navegación actual y hacer más efectivo su menú desplegable de WordPress. Sólo recuerde que a veces, cuando se trata de la navegación, lo más simple es lo mejor. Sólo añada características adicionales si eso mejora su UX y evita desordenar su sitio.

Solución de Problemas del Menú Desplegable de WordPress

Si ha configurado su menú como se describe arriba, pero la funcionalidad del menú desplegable no funciona, hay varias causas posibles.

Aunque no podemos cubrirlos a todos aquí, podemos ayudarle a reducir la causa de su problema para que pueda encontrar la solución adecuada.

A menudo, un menú que funciona mal es el resultado de un código conflictivo entre su menú personalizado y su tema. Lo primero que debe hacer si su menú no funciona es cambiar a un tema por defecto como Twenty Twenty. Si el menú vuelve a funcionar, sabrá que el asunto está relacionado con su tema. Entonces puede contactar con el desarrollador de su tema para buscar una solución.

Algunas otras posibles causas incluyen:

Sin embargo, como mencionamos antes, las causas potenciales detrás de su menú defectuoso son numerosas. Si ninguna de las soluciones anteriores parece funcionar, recomendamos visitar los Foros de Soporte de WordPress, contactar con nuestro experto Equipo de Soporte de Kinsta WordPress, o contratar a un desarrollador de WordPress para que lo arregle por usted.

Los menús de navegación son la clave de la UX de su sitio. ¿Qué pasa si tiene muchos elementos del menú que necesita incluir? ¡El menú desplegable es el nombre del juego aquí! Comprueba lo fácil que es crear uno con esta guía 📑🗃️Click to Tweet

Resumen

Aunque parezca un asunto menor, la navegación de su sitio de WordPress puede hacer o deshacer su éxito. El uso de menús desplegables puede ahorrar espacio en las pantallas de los usuarios, a la vez que les permite orientarse fácilmente en su sitio y mejorar sus conversiones.


Si le ha gustado este tutorial, entonces le va a encantar nuestro soporte. Todos los planes de hosting de Kinsta incluyen soporte 24/7 de nuestros ingenieros y desarrolladores de WordPress veteranos. Charle con el mismo equipo que ayuda a nuestros clientes de Fortune 500. Conozca nuestros planes