Articles

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

La navegación del sitio es clave para ayudar a los usuarios a llegar a donde quieren ir. Un menú bien diseñado puede ayudar en gran medida a mejorar la experiencia de usuario (UX) e incluso disminuir la tasa de rebote. Sin embargo, una mal hecha puede hacer exactamente lo contrario.

Afortunadamente, WordPress te permite crear menús personalizados que se ajusten a las necesidades de tu sitio. Incluso puedes usar funciones nativas para agregar un menú desplegable compacto de WordPress que ahorra espacio, a la vez que proporciona una dirección clara para tus visitantes.

En esta publicación, discutiremos por qué la navegación en el sitio web es importante y cómo los menús desplegables pueden ser particularmente útiles. Luego te guiaremos a través de cómo crearlos en WordPress y compartir algunos complementos que pueden ayudar.

Vamos a bucear!

Una introducción a los Menús Desplegables y de navegación de WordPress

Aunque pueden ser sencillos, 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, a la vez que dan a los visitantes primerizos una idea de lo que tienes para ofrecer:

ejemplo de menú

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 tu producto, formulario de suscripción por correo electrónico u otro contenido de conversión, tendrás un tiempo más sencillo para que realicen una compra o se registren.

Además, si los usuarios pueden encontrar su camino con confianza en tu sitio, no tendrán que rebotar en tus páginas porque terminaron en el lugar equivocado. Ayudarles a hacerlo bien la primera vez puede mejorar la experiencia de usuario 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 diseñar y colocar su menú o menús.

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

ejemplo de menú de encabezado

Un ejemplo de un menú de encabezado típico

A menudo también 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:

ejemplo de menú de pie de página

Un ejemplo de menú de pie de página

Otro estilo es la superposición de menús, que los usuarios pueden abrir y cerrar a voluntad:

ejemplo de menú superpuesto

Un ejemplo de menú superpuesto

Alternativamente, puede considerar usar un menú de barra lateral:

ejemplo de menú de barra lateral

Un ejemplo de menú de barra lateral

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

ejemplo de menú desplegable

Un ejemplo de p>

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 barra de encabezado grande o un menú de barra lateral.

Al ocultar algo de contenido hasta que sea necesario, ahorrarás espacio en la pantalla y, al mismo tiempo, proporcionarás a los usuarios una manera 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. Mediante el uso de las funciones de menú nativas disponibles en WordPress, puede crear un sistema de navegación personalizado que se adapte a sus necesidades en solo cinco pasos.

Paso 1: Crea tus elementos de menú

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

Menú de WordPress

Acceder al editor de menús en el panel de WordPress

Lo que vea en el editor de menús variará ligeramente según su tema.

Sin embargo, lo que es importante tener en cuenta por ahora es la primera opción en la pestaña Editar menús. Debería ver una opción donde puede seleccionar uno de sus menús existentes para editar, así como una opción para crear un nuevo menú:

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

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

Para este ejemplo, elegiremos la última opción y crear un nuevo menú. Esto implica agregar 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, al tiempo que proporciona a los usuarios suficiente información para llegar a donde quieren ir.

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

Hay varias formas diferentes de agregar los elementos de menú. Las dos primeras son Páginas y Publicaciones, y funcionan de manera muy similar.

Agregar páginas al menú

Agregar páginas al menú

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

Su siguiente opción es incorporar enlaces personalizados. Esto implica proporcionar la URL de la página a la que desea dirigir a los usuarios y, a continuación, crear una etiqueta corta pero descriptiva para ella. Después de eso, puede hacer clic en Agregar al menú de nuevo:

Agregar un enlace personalizado al menú

Agregar un enlace personalizado al menú

Finalmente, también puede agregar Categorías de páginas y publicaciones a su menú de navegación. Esto llevará a los usuarios a una página de archivo donde podrán ver todo el contenido de un tema en particular.

Los blogs y otros sitios con mucho contenido pueden encontrar esta función especialmente útil:

Agregar categorías al menú

Agregar categorías al menú

Al igual que con las opciones de Páginas y publicaciones, simplemente seleccione las casillas de verificación de las categorías que desea incluir y elija Agregar al Menú.

Paso 2: Organiza tu menú de WordPress

Una vez que hayas agregado todos los elementos de menú, deberías verlos listados en mosaicos individuales bajo Estructura de menús en el editor:

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

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

Inicialmente, los elementos de menú aparecerán en el orden en que se agregaron. 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 funcionalidad desplegable.

Hay un par de maneras de agregar desplegables a tu menú de WordPress.

Lo más sencillo es continuar arrastrando y soltando, pero comenzar a anidar ciertos elementos de menú bajo otros:

Crear un menú desplegable de WordPress

Anidar categorías bajo la página del blog

Por ejemplo, en la imagen de arriba, hemos movido las tres categorías de publicaciones que agregamos al menú bajo el Blog, haciéndolas «subtemas». En la interfaz, esto creará un menú desplegable que se ve así:

WordPress menú desplegable

Ejemplo de un menú desplegable en WordPress

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

Crear una etiqueta de categorías para el menú

Crear una etiqueta de categorías para el menú

Puede agregar todas sus categorías al menú y anidarlas bajo esta etiqueta. Se puede hacer clic en cada categoría, pero la etiqueta no será:

El menú desplegable Categorías

El menú desplegable Categorías

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

Agregue otro enlace personalizado, usando » # «como URL y «Menú» como etiqueta. Luego, anida todos los demás elementos del menú debajo de ese:

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

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

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

Como puede ver en el elemento Categorías a continuación, 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

Al usar 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 de menú pueden ser confusos para los usuarios.

Suscríbete al Boletín de Noticias

Nuestro tráfico creció un 1,187% con WordPress. Te enseñaremos cómo.

¡Únete a más de 20,000 personas que reciben nuestro boletín semanal con consejos de WordPress de expertos!

Suscríbase ahora

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

Paso 3: Incorpora imágenes en tu Menú de WordPress

Si al final del Paso 2, tu 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 incorporar elementos visuales en sus menús para proporcionar más 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 a dónde conduce un enlace de navegación en particular.

Es posible agregar imágenes usando CSS personalizado, que discutiremos en breve. Sin embargo, recomendamos elegir un complemento como Imagen de menú, Iconos Fáciles de Usar:

Menú desplegable de WordPress con imágenes junto a los enlaces de navegación

Menú desplegable de WordPress con imágenes

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

Simplemente instale el complemento y luego vuelva a los menús Apariencia > :

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

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

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 haya terminado.

Paso 4: Agregue CSS personalizado a su Menú Desplegable

Aunque no se recomienda para principiantes, es posible que los usuarios intermedios y avanzados deseen incorporar su propio estilo en sus menús desplegables de WordPress. Sin embargo, antes de saltar directamente a tu CSS, necesitarás agregar una clase a tu menú.

Si omites este paso, tu CSS personalizado puede causar problemas en cualquier otro menú de tu sitio. Por ejemplo, puede aplicar estilo inadvertidamente a su menú de pie de página que solo quería decir para su menú desplegable principal.

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

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

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

:

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

La casilla 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ús

El campo Clases CSS en el editor de menús

Una vez que agregue una o más clases CSS a sus elementos de menú, cualquier código personalizado que incluya en su hoja de estilos solo se aplicará a los elementos de su menú con la clase que especifique.

Cansado de una lenta acogida para su sitio de WordPress? Proporcionamos servidores increíblemente rápidos y soporte de clase mundial 24/7 de expertos en WordPress. Echa un vistazo a nuestros planes

ahora Usted puede dirigirse a su hoja de estilos o el Personalizador, y empezar a trabajar en tu estilo personalizado.

Paso 5: Publica tu Menú en ubicaciones Principales

Una vez que tu menú desplegable de WordPress esté estructurado para satisfacer tus necesidades y hayas incorporado cualquier personalización que desees, estarás listo para publicarlo en tu sitio.

Este proceso variará ligeramente dependiendo de tu tema y de las ubicaciones de menú que admita. Para este ejemplo, vamos a usar el tema Veinte Veinte.

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

La sección de Configuración del menú en el editor

La sección de Configuración del menú en el editor

Puede seleccionar la primera casilla de verificación si desea que se agreguen automáticamente nuevas páginas a su menú. Si recién estás comenzando con tu sitio y aún no has agregado todas tus páginas clave, esto puede ser útil. Sin embargo, tenga cuidado de no agregar demasiados elementos accidentalmente a su menú.

Debajo de esta opción, verás una lista de casillas de verificación que indican las diferentes áreas de tu sitio donde puedes mostrar tu menú.

El tema Twenty Twenty incluye diferentes áreas de menú: Menú Horizontal de Escritorio, Menú Ampliado de 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 se encuentra en el encabezado del sitio:

Menú Horizontal del escritorio para el tema Twenty Twenty

Menú Horizontal del escritorio para el tema Twenty Twenty

Área de menús de su panel de control. Aquí puede ver todas las ubicaciones de menú que son compatibles con su tema, así como el menú que ha asignado a cada uno:

La pestaña Administrar ubicaciones

La pestaña Administrar ubicaciones

Al colocar sus menús, puede ser útil ver cómo se verán en la interfaz.

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, utilizando el Personalizador de WordPress:

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

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

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

Plugins de WordPress para Mejorar tus Menús desplegables

Aunque puedes crear menús de navegación de WordPress completamente funcionales sin herramientas adicionales, a veces puede ser útil ampliar la funcionalidad de tu menú. Si ese es el caso con su sitio, es posible que desee buscar en algunos complementos de menú de WordPress populares.

Las páginas anidadas son una forma eficiente de crear menús desplegables para blogs con mucho contenido. Si bien se utiliza principalmente para organizar publicaciones y páginas, este complemento también generará automáticamente un menú que refleja la estructura de su contenido:

páginas anidadas

Páginas anidadas Plugin de WordPress

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

Si ese es el caso de tu sitio, Max Mega Menu puede ayudarte a combinar tus menús de WordPress existentes para formar un»mega menú»:

max mega menu

Complemento de WordPress Max Mega Menu

Con la navegación móvil en aumento, la clave es garantizar que sus menús sigan siendo legibles en dispositivos móviles.

El menú WP Mobile se empareja con cualquier tema sensible para ayudarlo a crear un sistema de navegación para los usuarios de su sitio que están en movimiento:

menú wp mobile

Plugin de WordPress para menús WP Mobile

Finalmente, como ya hemos discutido, puede haber situaciones en las que los elementos de menú descriptivos no sean suficientes. En estas situaciones, es posible que desee usar Imágenes de menú, Iconos Fáciles de Usar como se describió en el Paso 3 anterior.

Puede usar cualquiera de estos complementos para mejorar su sistema de navegación actual y hacer que su menú desplegable de WordPress sea más efectivo. Solo recuerda que a veces, cuando se trata de navegación, más simple es mejor. Solo agregue características adicionales si mejorará su experiencia de usuario y evitará saturar su sitio.

Solución de problemas Del menú desplegable de WordPress

Si has configurado el menú como se describe anteriormente, pero la funcionalidad desplegable no funciona, hay varias causas posibles.

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

A menudo, un menú que no funciona correctamente es el resultado de un código conflictivo entre el menú personalizado y el tema. Lo primero que debe hacer si su menú no funciona es cambiar a un tema predeterminado como Twenty Twenty. Si tu menú vuelve a funcionar, sabrás que el problema está relacionado con tu tema. A continuación, puede ponerse en contacto con el desarrollador de su tema para buscar una solución.

Algunas otras causas posibles incluyen:

  • Código mal escrito: Compruebe que cualquier CSS personalizado que haya agregado es correcto y que está utilizando clases CSS como se describe en el Paso 4.Incompatibilidad de complementos
  • : Intente deshabilitar cualquier complemento relacionado con el menú que haya instalado, para ver si eso resuelve el problema.
  • jQuery obsoleto: Actualice a la última versión de jQuery e intente abrir el menú desplegable de nuevo.

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

Los menús de navegación son clave para la experiencia de usuario de su sitio. Pero, ¿qué pasa si tienes muchos elementos de menú que necesitas incluir? El menú desplegable es el nombre del juego aquí! Echa un vistazo a lo fácil que es crear uno con esta guía Click️Haz clic para twittear

Resumen

Si bien puede parecer un asunto pequeño, la navegación de tu sitio de WordPress puede hacer o romper su éxito. El uso de menús desplegables puede ahorrar espacio en las pantallas de los usuarios, a la vez que les permite moverse fácilmente por su sitio y mejorar sus conversiones.

Si disfrutaste de este tutorial, te encantará nuestro apoyo. Todos los planes de alojamiento de Kinsta incluyen soporte 24/7 de nuestros veteranos desarrolladores e ingenieros de WordPress. Chatea con el mismo equipo que respalda a nuestros clientes de Fortune 500. Echa un vistazo a nuestros planes