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:
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:
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:
Otro estilo es la superposición del menú, que los usuarios pueden abrir y cerrar:
Alternativamente, podría considerar usar un menú de la barra lateral:
O puede incorporar un menú desplegable, también llamado a veces menú «anidado»:
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:
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ú:
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ú:
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.
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:
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:
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:
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:
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í:
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:
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:
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:
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ú:
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:
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:
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:
Entonces, marque la casilla de las clases de CSS:
Esto agregará un campo de Clases CSS a cada página de su 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.
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ú:
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:
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:
Al colocar los menús, puede ser útil ver cómo se verán en el frente.
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:
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:
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ú»:
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:
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:
- Código mal escrito: Compruebe que cualquier CSS personalizado que haya añadido es correcto, y que está usando las clases CSS como se describe en el paso 4.
- Incompatibilidad de los enchufes: Intente deshabilitar cualquier plugin relacionado con el menú que haya instalado, para ver si eso resuelve el problema.
- El anticuado jQuery: Actualice a la última versión de jQuery e intenta abrir el menú desplegable de nuevo.
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.
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.
