¿Cómo crear un menú desplegable en WordPress?

Aunque WordPress es una plataforma web prácticamente automatizada, existen ciertos detalles que solo pueden adquirirse mediante herramientas y la propia imaginación del administrador. En ese sentido, vamos a explicarles cómo crear menu desplegable WordPress, para que mejores el diseño de tu página web.

¿Cómo crear un menú desplegable en WordPress?

La navegación de un usuario en una web es fundamental, ya que sin un buen orden los visitantes no sabrían a dónde ir y se quedarían en la primera página. Y esta es la principal función de un menú, sin embargo uno que esté bien diseñado puede proporcionar una mejor experiencia a los usuarios que ingresan a tu sitio, disminuyendo de esa forma el porcentaje de rebote en el tráfico web, caso contrario a un menú mal diseñado.

Pero como WordPress busca mejorar la experiencia y gestión también de sus usuarios, existen métodos para crear menús desplegables en wordpress totalmente personalizados, que se adaptan a las necesidades de la web.

Incluso existen herramientas que proporcionan menús totalmente funcionales, y sin ocupar mucho espacio del servidor, una excelente opción para darle a los usuarios una experiencia clara con la dinámica de la web.

Pero antes de comenzar explicando cómo crear este tipo de menús, primero vamos a comenzar explicando qué son, porqué son importantes, para posteriormente explicar cómo instalarlos. Teniendo eso en cuenta, ¡Vamos a comenzar!

Una introducción a la navegación de WordPress y a los menús desplegables

Aunque se puedan considerar sencillos hasta el punto de pasar inadvertidos, los menús de navegación son herramientas vitales dentro de cualquier blog. Los menús son los timones dentro de un blog, porque ayudan a orientar a los usuarios para que encuentren el contenido más relevante, para que se hagan una idea de lo que el blog tiene para ofrecer.

No obstante, no todos los menús son buenos ya que muchos pueden llegar a confundir al usuario, espantandolos de la web. Por ese motivo un buen diseño es la clave para incrementar las conversiones, y reducir el porcentaje de rebote, ya que al diseñar un concepto simple pero funcional los usuarios podrán ubicar el contenido de manera más sencilla, incrementando de esa forma la productividad.

Como por ejemplo, supongamos que un blog posee los elementos más importantes dentro de su menú desplegable, como por ejemplo la ubicación de sus productos, los formularios de contacto u otro método de conversión, ¿acaso eso no hará que los usuarios realicen sus compras o registros de manera más simple?

Caso contrario a un blog con un menú que tiene elementos innecesarios, como por ejemplo la jerarquía de la empresa, ubicación, afiliaciones, etc. Si los elementos más importante no están visibles, entonces los usuarios no van a poder encontrarlos y por ende vas a perder audiencia y posicionamiento.

Es por este motivo que los menús son importantes, ellos le dan confianza a los visitantes para navegar con libertad, y a los administradores eso les ayuda a reducir el número de rebotes en sus páginas. Recordemos que los rebotes es la cantidad de abandonos que los usuarios han tenido en tu blog, en un mínimo de tiempo.

Ahora bien, WordPress como dijimos antes, ofrece menús a todos los que usen sus servicios y por ende es una característica de ésta plataforma. Y de hecho existe la posibilidad de mostrar no solo uno, sino varios de ellos. No obstante, los menús no son los únicos que logran esta navegación, también es importante el buen uso de plantillas o temas, ya que ellos proporcionarán ese factor único al blog.

Por ese motivo, el menú de WordPress es diferente para cada blog, ya que cada quién le da su toque personal y agrega lo que considera importante. Sin embargo existen modelos estándar para que los administradores lo adecuen a ellos, y vamos a describir alguno de ellos:

El más común es el menú de cabecera, como indica su nombre son los elementos de navegación que se ubican en la parte superior de un blog, y al darle clic los usuarios serán enviados a las páginas más importantes del blog.

También podemos ubicar un menú tradicional en el final de la página, llamados como menú de pie de página, y ellos pueden ocupar elementos de navegación importantes, aunque no tanto como el menú tradicional. Generalmente ofrece información de la empresa, o contenido opcional al menú principal, como por ejemplo seguridad, dudas, soporte técnico y otras etiquetas que tengan las palabras más buscadas por los usuarios.

Otra opción es la superposición del menú, una opción que los usuarios pueden usar intermitentemente, es decir, este tipo de menús se abren y cierran, y el usuario decide si desea navegar en esos sitios o no.

Otra alternativa es el menú de barra lateral, una opción novedosa que presenta elementos de navegación a un lado del blog. Este tipo de navegación es sumamente popular entre los blogs, porque entrega un menú no tan intrusivo como otros menús y la información que proporciona es simple y llamativa.

Y por último, el menú desplegable, un favorito por su dinamismo y eficiencia. Este tipo de menú puede ocultar elementos dentro de otro, logrando que no se vea sobrecargado pero entregando a su vez, información útil que pueda llamar la atención del usuario. Además, es perfecto para ahorrar espacio en la pantalla, y aunque no lo parezca es el menú más grande pero eficiente de todos.

¿Cómo crear un menú desplegable?

Hemos mencionado algunos tipos de menús, pero para efectos de este artículos vamos a enfocarnos en el menú desplegable. Para ello vamos a utilizar las funciones estándar de un menú tradicional, y a partir de allí vamos a agregar elementos para que se adapten a tus necesidades, todo en 5 pasos.

Paso 1: Crear los elementos del Menú

Lo primero a tomar en cuenta es saber qué vamos a incluir en el menú, ya que eso determinará la cantidad de elementos y por ende el tipo de menú que mejor se adecua a tu blog. No tiene ningún sentido tener 4 elementos y querer un menú desplegable, ya que no se cubrirán el propósito de dicho menú.

Pero si tienes un blog con bastante información, y deseas un menú que abarque la mayoría entonces el primer paso es ubicar «Apariencia» en el cPanel de WordPress. Si lo encontraste notarás que al posicionarse en él, se desplegará varias opciones, en este caso deberá darle clic a la opción «Menús».

Toma en cuenta que lo que veas en el menú del editor será diferente para cada tema, así que no te preocupes, solo ubica la pestaña «Menús de edición/edit menus» y elige alguno de los menús que tienes habilitado para poder configurarlo. En el caso que no te aparezca la opción de seleccionar menú, entonces solo da clic en crear uno nuevo.

Como en esta oportunidad estamos describiendo un paso a paso para crear un menú desplegable en WordPress, vamos a elegir esta última opción. Al hacerlo veremos una casilla que deberemos rellenar, la del título, una vez hecho presionamos el botón «Crear menú/create menu».

De esta forma estarás listo para añadir las etiquetas en tu menú desplegable WordPress. Lo más recomendable es dejar el menú lo más sencillo que se pueda, pero siempre proporcionando la información necesaria para que los usuarios puedan navegar sin problemas en el blog.

Agregar muchas páginas puede abrumar la vista del visitante, consiguiendo de esa forma que el no quiera navegar y como blogger perderías una visita valiosa.

Ahora bien, existen distintas maneras de añadir estos elementos al menú, las más comunes son las páginas y poster, dos opciones bastantes similares. Para añadirlas solo debes pararte en la barra lateral del «Menú editor», y marcar las páginas que quieres añadir en el menú, luego de hacerlo presiona el botón «add to menú ».

En el caso que desees añadir nuevos elementos al menú, entonces es necesario agregar los enlaces personalizados, que es la URL de las páginas a las que los usuarios serán direccionados. Además, estas etiquetas deben llevar un título corto, pero que proporcione la información suficiente para que los usuarios entiendan de qué se trata.

Una vez especificado, debes darle clic a «Agregar al menú» para establecer las nuevas etiquetas. Por último, también tienes la opción de añadir las categorías de páginas y de publicación a dicho menú, de esta forma los usuarios tendrán la posibilidad de encontrar todo el contenido de tu blog, o los temas que solo les interesa.

Pero si deseas añadir otras opciones, fácilmente puedes marcas las casillas que desees en el menú que mencionamos previamente. Además, también puedes añadir categorías específicas en el caso que tengan un alto volumen de visitas.

Paso 2: Organizar el menú

Luego de tener todas las etiquetas que deseas en tu menú, entonces deberías poder visualizarlos de manera independiente en una estructura de menú en el editor. Además, deberías verlo en el orden en el que se fue añadiendo, pero si deseas cambiarlo no te preocupes que la organización puede cambiarse fácilmente, solo debes arrastrarlo y soltarlo en el sitio que deseas.

Además, con este método no solo lograrás crear tu menú desplegable en WordPress, también puedes crear un menú simple si lo deseas, solo debes desplazar las etiquetas en una sola estructura, es decir que ninguna esté dentro de otra.

Ahora bien, si deseas tener tu menú desplegable existen varias formas de hacerlo, una de ellas es desplazar las etiquetas, una de bajo de la otra para anidar el menú. Pero ojo, los elementos deben tener coherencia no puedes añadir una etiqueta debajo de otra si no tiene relación.

La idea consiste en crear sub-temas, para crear el despliegue que deseamos, al inicio se verá un poco desordenado pero el resultado final será increíble.

En el caso que deseas añadir todas las categorías del blog, solo debes agregar un enlace personalizado al menú. Para ello ubica la barra lateral «Custom links», y en donde dice URL coloca el signo # y en «link text» añades el título de categoría.

De esta forma vas a poder anidar todas las categorías al menú, pero obviamente no se verían directamente en dicho menú, para ello el usuario debe pararse en la etiqueta y de esa forma el menú despliega todas las categorías de tu blog.

Con un método similar tienes la posibilidad de transformar tu menú en un solo menú desplegable, ¿de qué manera? ocultando las etiquetas en una sola.

Lo único que debes hacer es seguir las indicaciones que mencionamos anteriormente, es decir te posicionas en la barra Custom links pero en esta oportunidad vas a colocar en «link text» la etiqueta menú, de esta forma anidas todos los elementos del menú en él.

Puede parecer extraño, pero el resultado es bastante increíble porque el menú a primera vista se ve limpio y al seleccionarlo se despliegan las opciones principales del blog; y al posicionarte una vez más en esas etiquetas otros elementos se desplegarán. Es como un submenú dentro de otro, pero si no te convence recuerda que en el editor de menús puedes elegir el orden y la estructura final de tu menú.

Solo debes arrastrar y soltar, la combinación depende de ti pero toma en cuenta que muchos elementos en él solo va a sobrecargar el menú. Esto mismo va para los submenús que vayas a añadir, no tiene sentido tener un menú que sea pulcro y limpio, y al posicionarse en él aparecen miles de opciones para elegir.

Paso 3: Incorporar Imágenes en el menú

Si en el paso 2 obtuviste el diseño ideal para tu menú, entonces no es necesario tomar en cuenta los siguientes pasos, solo avanza hasta el paso 5 para finalizar. No obstante, si deseas mejorar un poco más tu menú entonces continúa con los siguientes pasos que estamos por describirles.

Teniendo eso en cuenta, una buena estrategia para proporcionar un poco más de orientación a los usuarios son los componentes visuales. Si bien es cierto que las etiquetas es la parte más importante de un menú, a veces algo extra como un ícono puede hacer la gran diferencia para incentivar en la navegación.

Si deseas agregar imágenes, entonces puedes recurrir al lenguaje CSS, aunque lo más aconsejable es recurrir a plugins como Menú Image y Icons Made Easyp para que te ayuden.

De esta forma no tendrías que volverte loco por códigos, lo único que necesitas es instalar una extensión para obtener ese aspecto visual en tu menú desplegable.

Si recurres a esta última opción, como dijimos solo es cuestión de instalarlo y de esta forma en el cPanel «Apariencia > Menús» podrás añadir las imágenes que desees. Puedes establecer el tamaño, la imagen y la posición para cada etiqueta, y solo es cuestión de guardarlo y ya.

Paso 4: Agregar CSS personalizado a su menú desplegable

Aunque no es lo más aconsejable, y más aún si eres alguien que no domina el lenguaje CSS, existe la opción de personalizar el menú añadiendo códigos CSS.

Sin embargo como dijimos antes, si no eres un experto en el tema lo mejor es que descargues plugins para poder darle el estilo que deseas, porque de lo contrario puedes poner en riesgo el trabajo realizado con el menú. Además, también es necesario agregar un clase al menú, de lo contrario existe el riesgo de que el menú cause problemas de funcionalidad a cualquier otro menú que tengas en el sitio.

Para ello, en «editor de menús» vas a seleccionar la opción de pantalla que se ubica en la parte superior derecha de la pantalla. Allí debes marcar la opción «Clases de CSS», de esta forma se añadirá un campo de clases CSS a cada etiqueta del menú.

Una vez que lo hayas hecho, entonces el menú estará listo para que añadas los elementos decorativos sin afectar la integridad base del menú, ya que los códigos incluidos solo serán tomados en cuenta para las etiquetas con clases especificadas.

Ahora lo que falta es que comiences a trabajar en tu hoja de estilo CSS de tu blog.

Paso 5: Publicar su menú en las principales localidades

Si ya tienes el menú desplegable de WordPress listo, con todos elementos personalizados que deseas, entonces el último paso es publicarlo en tu web para que los usuarios empiecen a interactuar con él.

Como dijimos antes, el proceso varía para cada tema y para la ubicación del menú, pero básicamente el procedimiento debería ser el mismo.

Debes posicionarte en el «editor de menús», y dirigirte hacia abajo hasta que encuentres el ajuste de «menú/Menu settings».

Allí podrás ubicar unas casillas, en la primera opción es para que las nuevas páginas se agreguen automáticamente a tu menú. Pero preferiblemente esta opción no debería marcarse si ya eres un blog establecido, de lo contrario solo vas a sobrecargar el menú con elementos innecesarios.

Debajo de esta casilla encuentras «display location», una opción que te permite ubicar el menú en distintas áreas de tu blog. Obviamente las opciones dependen del tema que tengas establecido, algunas de ellas pueden ser: Menú horizontal del escritorio, menú ampliado del escritorio, menú móvil, menú de pie de página y menú social.

Seleccionar cualquiera de estas opciones dependerá de tu gusto y plantilla, si deseas un estilo tradicional entonces puedes seleccionar el menú horizontal de escritorio para que se establezca en la cabecera de la web.

También tienes la opción de ir a la segunda pestaña del menú, llamada «Manage locations/Administrar» y ubicar las áreas que son compatibles con tu tema. Además, también tienes la posibilidad de agregar el mismo menú en distintas ubicaciones de blog, y si deseas visualizar la configuración solo debes darle clic a «Manage With live Preview».

Y si estás conforme con lo que ves, para publicarlo solo debes buscar el botón publicar/published ubicado en vista previa. En el caso que desees realizar o eliminar algún cambio, ubica nuevamente el editor de menús y realiza los ajustes pertinentes.

Plugins para mejorar sus menús desplegables

Crear menús desplegables en WordPress es bastante sencillo, y todo sin necesidad de recurrir a extensiones y de conocimientos técnicos de informática. Sin embargo muchas veces podemos extender la funcionalidad de nuestro blog con plugins, y los menús desplegables no son la excepción.

Un buen plugin es Nested Pages, y más aún para blogs que tienen bastante contenido, sin embargo usualmente es usado para otras funciones como por ejemplo para organizar las páginas. Pero si te interesa el plugin, no te preocupes que también proporciona un menú automático.

Otra buena opción es el plugin Max Mega Menú, y de hecho puedes usarla en conjunto con tu menú actual para crear un super menú que son bastantes comunes en páginas empresariales.

Ahora bien, si deseas expandir la visualización de tu menú a todo tipo de dispositivo, como por ejemplo el celular, WP Mobile Menu es para ti. Recordemos que es fundamental proporcionar la mejor experiencia en el sitio, y eso incluye a las personas que navegan desde otros dispositivos móviles.

Solución de problemas del menú desplegable

Si creaste y configuraste tu menú como te indicamos en los pasos anteriores, pero notas que tienes problemas con el despliegue o con otra funcionalidad, significa entonces que los potenciales causantes podrían ser los siguientes:

Generalmente cuando un menú no cumple con sus funciones, significa que algún código del menú y del tema está causando una incompatibilidad.

Para solucionar este problema lo primero que debes intentar es cambiar a un tema por defecto, es decir uno que no haya sido modificado por ti. Si notas que el menú funciona correctamente, entonces la solución será mudarte a un nuevo tema o contactar con el desarrollador de ese tema para que te presente alguna solución.

Otra causa podría ser un código que esté mal escrito, pero esto solo es para aquellos blogger que añadieron códigos CSS a su blog. En el caso que no lo hayas hecho, entonces seguramente esta no es la causa, pero si lo hiciste entonces debes comprobar que estés usando las clases CSS que mencionamos en el paso 4.

El problema también puede ser causado por incompatibilidad de algún plugin que hayas instalado para personalizar el menú, en este caso desinstala el plugin recientemente instalado y comprueba si se soluciona el problema.

Otra posibilidad podría ser que tienes desactualizado jQuery, verifica si tienes la última versión e intenta abrir nuevamente el menú.

Si persistes con el problema, significa entonces que algo más está causando el mal funcionamiento del menú y lo más aconsejable es que comunes el inconveniente en los Foros de Soporte de WordPress. Si aún así no encuentras la ayuda necesaria, también tienes la posibilidad de contratar a un experto en el área para que los solvente, como por ejemplo un desarrollador de WordPress.

Resumen

Los menús pueden considerarse poco importantes, pero el tráfico de una web depende totalmente de la funcionalidad de ellos.

La aplicación de menús desplegables puede impulsar la posición SEO de un blog, pero si deseas saber otras técnicas para lograrlo te dejamos los siguientes artículos:

Deja un comentario