{"id":30800,"date":"2020-01-30T06:16:58","date_gmt":"2020-01-30T14:16:58","guid":{"rendered":"https:\/\/kinsta.com\/?post_type=knowledgebase&p=66027"},"modified":"2025-10-01T21:36:06","modified_gmt":"2025-10-01T19:36:06","slug":"menu-desplegable-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/menu-desplegable-wordpress\/","title":{"rendered":"\u00bfC\u00f3mo Crear un Men\u00fa Desplegable en WordPress? (en 5 Pasos)"},"content":{"rendered":"

La navegaci\u00f3n del sitio es clave para ayudar a sus usuarios a llegar a donde quieren llegar. Un men\u00fa bien dise\u00f1ado puede ayudar mucho a mejorar la experiencia del usuario (UX), e incluso a disminuir su tasa de rebote<\/a>. Sin embargo, uno mal hecho puede hacer justo lo contrario.<\/p>\n

Afortunadamente, WordPress le permite crear men\u00fas personalizados<\/a> que se ajustan a las necesidades de su sitio. Incluso puede utilizar funciones nativas para a\u00f1adir un men\u00fa desplegable compacto de WordPress que ahorra espacio, al tiempo que proporciona una direcci\u00f3n clara para sus visitantes.<\/p>\n

En este post, discutiremos por qu\u00e9 es importante la navegaci\u00f3n en el sitio web y c\u00f3mo los men\u00fas desplegables pueden ser particularmente \u00fatiles. Luego le explicaremos c\u00f3mo crearlos en WordPress, y compartiremos algunos plugins que pueden ayudar.<\/p>\n

\u00a1Vamos a sumergirnos!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Una Introducci\u00f3n a la Navegaci\u00f3n de WordPress y a los Men\u00fas Desplegables<\/h2>\n

Aunque pueden ser modestos, los men\u00fas de navegaci\u00f3n son un elemento vital de cualquier sitio web. Ayudan a los usuarios a encontrar r\u00e1pidamente las p\u00e1ginas m\u00e1s relevantes para lograr sus objetivos, mientras que tambi\u00e9n da a los visitantes por primera vez una idea de lo que tiene que ofrecer:<\/p>\n

\"El
El men\u00fa de navegaci\u00f3n principal del sitio web de Kinsta<\/figcaption><\/figure>\n

Tener un men\u00fa de navegaci\u00f3n bien dise\u00f1ado es clave para aumentar las conversiones y disminuir la tasa de rebote. Cuando los usuarios puedan encontrar f\u00e1cilmente las p\u00e1ginas donde se encuentra su producto, el formulario de registro de correo electr\u00f3nico<\/a>\u00a0u otro contenido de conversi\u00f3n, le resultar\u00e1 m\u00e1s sencillo conseguir que realicen una compra o se registren.<\/p>\n

Adem\u00e1s, si los usuarios pueden encontrar con confianza el camino a trav\u00e9s de su sitio, no tendr\u00e1n que rebotar en sus p\u00e1ginas porque terminaron en el lugar equivocado. Ayudarles a hacerlo bien la primera vez puede mejorar el UX y minimizar la frustraci\u00f3n.<\/p>\n

En WordPress, los men\u00fas son una caracter\u00edstica inherente. Cualquier sitio creado con la plataforma puede mostrar uno o m\u00e1s de ellos. Sin embargo, los temas de WordPress<\/a> tambi\u00e9n juegan un papel importante cuando se trata de estilizar y colocar el men\u00fa o los men\u00fas.<\/p>\n

Por esta raz\u00f3n, su men\u00fa de WordPress podr\u00eda tomar muchas formas diferentes. El m\u00e1s familiar es el men\u00fa de cabecera est\u00e1ndar:<\/p>\n

\"Un
Un ejemplo de un t\u00edpico men\u00fa de cabecera<\/figcaption><\/figure>\n

A menudo tambi\u00e9n se puede incluir un men\u00fa de pie de p\u00e1gina adicional en la parte inferior de sus p\u00e1ginas. Puede mostrar el mismo contenido que su men\u00fa principal, u ofrecer opciones ligeramente diferentes:<\/p>\n

\"Un
Un ejemplo de un men\u00fa de pie de p\u00e1gina<\/figcaption><\/figure>\n

Otro estilo es la superposici\u00f3n del men\u00fa, que los usuarios pueden abrir y cerrar:<\/p>\n

\"Un
Un ejemplo de un men\u00fa superpuesto<\/figcaption><\/figure>\n

Alternativamente, podr\u00eda considerar usar un men\u00fa de la barra lateral:<\/p>\n

\"Un
Un ejemplo de un men\u00fa de la barra lateral<\/figcaption><\/figure>\n

O puede incorporar un men\u00fa desplegable, tambi\u00e9n llamado a veces men\u00fa \u00abanidado\u00bb:<\/p>\n

\"Un
Un ejemplo de un men\u00fa desplegable<\/figcaption><\/figure>\n

Este tipo de navegaci\u00f3n es ideal para muchos tipos de sitios. No oscurecer\u00e1 su contenido como un men\u00fa superpuesto, pero no es tan intrusivo como una gran barra de encabezado o un men\u00fa de barra lateral.<\/p>\n

Al ocultar algunos contenidos hasta que se necesiten, ahorrar\u00e1 espacio en la pantalla y al mismo tiempo proporcionar\u00e1 a los usuarios una forma f\u00e1cil de moverse.<\/p>\n

\u00bfC\u00f3mo Crear un Men\u00fa Desplegable en WordPress? (en 5 Pasos)<\/h2>\n

Si ha decidido que un men\u00fa desplegable puede ser una buena opci\u00f3n para su sitio de WordPress, configurar uno es bastante simple. Utilizando las funciones de men\u00fa nativas disponibles en WordPress, puede crear un sistema de navegaci\u00f3n personalizado que se adapte a sus necesidades en s\u00f3lo cinco pasos.<\/p>\n

Paso 1: Crear los Elementos del Men\u00fa<\/h3>\n

El primer paso para crear un men\u00fa es decidir qu\u00e9 incluir en \u00e9l. Comience navegando a Apariencia > Men\u00fas en<\/b> su tablero de WordPress:<\/p>\n

\"men\u00fas
Accediendo al editor de men\u00fas en el tablero de WordPress<\/figcaption><\/figure>\n

Lo que ve en el men\u00fa del editor variar\u00e1 ligeramente dependiendo del tema.<\/p>\n

Sin embargo, lo que es importante se\u00f1alar por ahora es la primera opci\u00f3n en la pesta\u00f1a de los men\u00fas de edici\u00f3n<\/b>. Deber\u00eda ver una opci\u00f3n en la que puede seleccionar uno de sus men\u00fas existentes para editarlo, as\u00ed como una opci\u00f3n para crear un nuevo men\u00fa<\/b>:<\/p>\n

\"El
El crear un nuevo enlace de men\u00fa en la parte superior del editor de men\u00fa de WordPress<\/figcaption><\/figure>\n

Para este ejemplo, elegiremos la \u00faltima opci\u00f3n y crearemos un nuevo men\u00fa. Esto implica a\u00f1adir un t\u00edtulo y luego hacer clic en el bot\u00f3n Crear Men\u00fa<\/b>:<\/p>\n

\"Nombrar
Nombrar y crear el nuevo men\u00fa<\/figcaption><\/figure>\n

Ahora est\u00e1 listo para comenzar a agregar elementos a su men\u00fa de WordPress. En la mayor\u00eda de los casos, lo mejor es mantener el men\u00fa lo m\u00e1s simple posible, y al mismo tiempo dar a los usuarios suficiente informaci\u00f3n para llegar a donde quieren ir.<\/p>\n

Incorporar demasiadas p\u00e1ginas puede abrumar a los visitantes y hacer la navegaci\u00f3n m\u00e1s dif\u00edcil en lugar de m\u00e1s f\u00e1cil.<\/p>\n

Hay varias formas de agregar los elementos del men\u00fa. Los dos primeros son Paginas<\/b> y Postes<\/b>, y funcionan de manera muy similar.<\/p>\n

\"A\u00f1adir
A\u00f1adir p\u00e1ginas al men\u00fa<\/figcaption><\/figure>\n

En la barra lateral del men\u00fa del editor, simplemente seleccione las casillas de verificaci\u00f3n de cada p\u00e1gina o publicaci\u00f3n que desee incluir y haga clic en el bot\u00f3n Agregar al men\u00fa<\/b>:<\/p>\n

Su pr\u00f3xima opci\u00f3n es incorporar los Enlaces Personalizados<\/b>. Esto implica proporcionar el URL de la p\u00e1gina a la que se quiere dirigir a los usuarios, y luego crear una etiqueta corta pero descriptiva para la misma. Despu\u00e9s de eso, puedes hacer clic en Agregar al men\u00fa de<\/b> nuevo:<\/p>\n

\"A\u00f1adir
A\u00f1adir un enlace personalizado al men\u00fa<\/figcaption><\/figure>\n

Por \u00faltimo, tambi\u00e9n puede agregar las categor\u00edas de p\u00e1gina y de publicaci\u00f3n <\/b>al men\u00fa de navegaci\u00f3n. Esto llevar\u00e1 a los usuarios a una p\u00e1gina de archivo donde podr\u00e1n ver todo el contenido sobre un tema en particular.<\/p>\n

Los blogs y otros sitios de gran contenido pueden encontrar esta caracter\u00edstica especialmente \u00fatil:<\/p>\n

\"Adici\u00f3n
Adici\u00f3n de categor\u00edas al men\u00fa<\/figcaption><\/figure>\n

Al igual que con las opciones de P\u00e1ginas y Mensajes, s\u00f3lo tiene que seleccionar las casillas de las categor\u00edas<\/b> que desee incluir y elegir A\u00f1adir al men\u00fa<\/b>.<\/i><\/p>\n

Paso 2: Organizar el Men\u00fa de WordPress<\/h3>\n

Una vez que haya a\u00f1adido todos los elementos del men\u00fa, deber\u00eda verlos listados en fichas individuales en Estructura de men\u00fa<\/b> en el editor:<\/p>\n

\"La
La secci\u00f3n Estructura del men\u00fa del editor de men\u00fa<\/figcaption><\/figure>\n

Inicialmente, los elementos del men\u00fa aparecer\u00e1n en el orden en que los a\u00f1adi\u00f3. Sin embargo, puede modificar f\u00e1cilmente su organizaci\u00f3n arrastr\u00e1ndolos y solt\u00e1ndolos en su lugar. Esto le permitir\u00e1 crear un men\u00fa simple sin la funci\u00f3n de desplegable.<\/p>\n

Hay un par de formas de agregar desplegables a su men\u00fa de WordPress.<\/p>\n

Lo m\u00e1s sencillo es seguir arrastrando y soltando, pero empezar a anidar ciertos elementos del men\u00fa debajo de otros:<\/p>\n

\"Categor\u00edas
Categor\u00edas de anidamiento bajo la p\u00e1gina del Blog<\/figcaption><\/figure>\n

Por ejemplo, en la imagen de arriba, hemos movido las tres categor\u00edas de post que a\u00f1adimos al men\u00fa bajo Blog<\/b>, convirti\u00e9ndolas en \u00absub-temas\u00bb. En la parte delantera, esto crear\u00e1 un men\u00fa desplegable que se ver\u00e1 as\u00ed:<\/p>\n

\"Ejemplo
Ejemplo de un men\u00fa desplegable en WordPress<\/figcaption><\/figure>\n

Si desea agregar un men\u00fa desplegable que incluya todas las categor\u00edas de su sitio, puede hacerlo agregando un Enlace personalizado<\/b> a su men\u00fa. Use \u00ab#\u00bb como la URL y \u00abCategor\u00edas\u00bb o algo similar para la etiqueta:<\/p>\n

\"Creaci\u00f3n
Creaci\u00f3n de una etiqueta de categor\u00edas para el men\u00fa<\/figcaption><\/figure>\n

Entonces puedes a\u00f1adir todas tus categor\u00edas al men\u00fa y anidarlas bajo esta etiqueta. Se podr\u00e1 hacer clic en cada categor\u00eda, pero no en la etiqueta:<\/p>\n

\"El
El men\u00fa desplegable Categor\u00edas<\/figcaption><\/figure>\n

Utilizando una t\u00e9cnica similar, tambi\u00e9n puede ocultar todos los elementos del men\u00fa en un solo men\u00fa desplegable.<\/p>\n

A\u00f1ada otro enlace personalizado, usando \u00ab#\u00bb como URL y \u00abMen\u00fa\u00bb como etiqueta. Entonces, anida todos sus otros elementos del men\u00fa debajo de ese:<\/p>\n

\"Anidando
Anidando todos los enlaces de navegaci\u00f3n bajo una sola etiqueta de men\u00fa<\/figcaption><\/figure>\n

El resultado en el frontend ser\u00e1 un men\u00fa desplegable que incluye las p\u00e1ginas clave de su sitio.<\/p>\n

Como puede ver en el art\u00edculo de categor\u00edas de<\/b> abajo, cualquier contenido anidado bajo un sub\u00edtem se mostrar\u00e1 en un submen\u00fa:<\/p>\n

\"Un
Un verdadero men\u00fa de navegaci\u00f3n desplegable de WordPress<\/figcaption><\/figure>\n

Usando el editor de men\u00fas de arrastrar y soltar de esta manera, puede crear cualquier estilo y combinaci\u00f3n de men\u00fas desplegables de WordPress. Recuerde, sin embargo, que demasiados elementos del men\u00fa pueden ser confusos para los usuarios.<\/p>\n

Tambi\u00e9n es mejor limitar el n\u00famero de submen\u00fas que incorporas, para evitar sobrecargar la navegaci\u00f3n.<\/p>\n

Paso 3: Incorporar Im\u00e1genes en el Men\u00fa de WordPress<\/h3>\n

Si al final del paso 2, el men\u00fa 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\u00fa con personalizaciones.<\/p>\n

Una t\u00e1ctica a considerar es la incorporaci\u00f3n de elementos visuales en sus men\u00fas para proporcionar una mayor orientaci\u00f3n 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\u00e1s r\u00e1pidamente ad\u00f3nde conduce un determinado enlace de navegaci\u00f3n.<\/p>\n

Es posible agregar im\u00e1genes usando CSS personalizado, lo cual discutiremos en breve. Sin embargo, recomendamos tomar un plugin como Menu Image, Icons Made Easy<\/a>:<\/p>\n

\"Men\u00fa
Men\u00fa desplegable de WordPress con im\u00e1genes<\/figcaption><\/figure>\n

De esta manera, no tiene que preocuparse por molestarse con ning\u00fan c\u00f3digo para a\u00f1adir inter\u00e9s visual a su men\u00fa desplegable.<\/p>\n

Simplemente instale el plugin y luego regrese a Apariencia > Men\u00fas:<\/b><\/p>\n

\"La
La secci\u00f3n Imagen de men\u00fa en el editor de men\u00fa<\/figcaption><\/figure>\n

Ver\u00e1 que ahora hay opciones de imagen para cada p\u00e1gina que ha incluido en su men\u00fa. Puede seleccionar la foto, el tama\u00f1o y la posici\u00f3n de cada p\u00e1gina. Recuerde guardar los cambios cuando termine.<\/p>\n

Paso 4: Agregar CSS Personalizado a su Men\u00fa Desplegable<\/h3>\n

Aunque no es recomendable para principiantes, los usuarios intermedios y avanzados pueden querer incorporar su propio estilo en sus men\u00fas desplegables de WordPress. Sin embargo, antes de saltar a su CSS<\/a>, tendr\u00e1 que a\u00f1adir una clase a su men\u00fa.<\/p>\n

Si se salta este paso, su CSS personalizado<\/a> puede causar problemas para cualquier otro men\u00fa de su sitio. Por ejemplo, puede aplicar inadvertidamente a su men\u00fa de pie de p\u00e1gina un estilo que s\u00f3lo se refer\u00eda a su men\u00fa desplegable principal.<\/p>\n

En el editor de men\u00fas, haga clic en Opciones de pantalla<\/b> en la esquina superior derecha:<\/p>\n

\"La
La pesta\u00f1a Opciones de pantalla en el editor de men\u00fa<\/figcaption><\/figure>\n

Entonces, marque la casilla de las clases de CSS<\/b>:<\/p>\n

\"La
La casilla de verificaci\u00f3n Clases CSS en la pesta\u00f1a Opciones de pantalla<\/figcaption><\/figure>\n

Esto agregar\u00e1 un campo de Clases CSS <\/b>a cada p\u00e1gina de su men\u00fa:<\/p>\n

\"El
El campo Clases CSS en el editor de men\u00fa<\/figcaption><\/figure>\n

Una vez que a\u00f1ada una o m\u00e1s clases de CSS a sus elementos de men\u00fa, cualquier c\u00f3digo personalizado que incluya en su hoja de estilo s\u00f3lo se aplicar\u00e1 a los elementos de su men\u00fa con la clase que especifiques.<\/p>\n

Ahora puede ir a su hoja de estilo o al Personalizador y ponerse a trabajar en su estilo personalizado<\/a>.<\/p>\n

Paso 5: Publicar su Men\u00fa en las Principales Localidades<\/h3>\n

Una vez que el men\u00fa desplegable de WordPress est\u00e9 estructurado para satisfacer sus necesidades, y haya incorporado las personalizaciones que quiera, estar\u00e1 listo para publicarlo en su sitio.<\/p>\n

Este proceso variar\u00e1 ligeramente dependiendo del tema<\/a> y de las ubicaciones de los men\u00fas que soporte. Para este ejemplo, vamos a usar el tema de los Twenty Twenty<\/a>.<\/p>\n

En el editor de men\u00fas, despl\u00e1cese hacia abajo hasta la secci\u00f3n Ajustes del men\u00fa<\/b>:<\/p>\n

\"La
La secci\u00f3n de Ajustes del Men\u00fa en el editor<\/figcaption><\/figure>\n

Puede seleccionar la primera casilla de verificaci\u00f3n si desea que las nuevas p\u00e1ginas se a\u00f1adan autom\u00e1ticamente a su men\u00fa. Si acaba de empezar con su sitio y no ha a\u00f1adido todas sus p\u00e1ginas clave todav\u00eda, esto puede ser \u00fatil. Sin embargo, tenga cuidado de no a\u00f1adir accidentalmente demasiados elementos a su men\u00fa.<\/p>\n

Debajo de esta opci\u00f3n, ver\u00e1 una lista de casillas de verificaci\u00f3n que se\u00f1alan las diferentes \u00e1reas de su sitio donde puede mostrar su men\u00fa.<\/p>\n

El tema de Twenty Twenty incluye diferentes \u00e1reas de men\u00fa: Men\u00fa horizontal del escritorio<\/b>, men\u00fa ampliado del escritorio<\/b>, men\u00fa m\u00f3vil<\/b>, men\u00fa de pie de p\u00e1gina<\/b>, men\u00fa social<\/b>.<\/i><\/p>\n

En este caso, el men\u00fa que hemos creado se adapta mejor a la ubicaci\u00f3n del Men\u00fa Horizontal del Escritorio<\/b>, que est\u00e1 en la cabecera del sitio:<\/p>\n

\"Men\u00fa
Men\u00fa horizontal de escritorio para el tema de los Twenty Twenty<\/figcaption><\/figure>\n

Tambi\u00e9n puede considerar la posibilidad de navegar a la pesta\u00f1a Administrar ubicaciones<\/b> en el \u00e1rea de Men\u00fas<\/b> de su tablero. Aqu\u00ed puede ver todas las ubicaciones de los men\u00fas que son compatibles con su tema, as\u00ed mismo se puede ver qu\u00e9 men\u00fa ha asignado a cada una:<\/p>\n

\"La
La pesta\u00f1a \u00abManage Locations<\/figcaption><\/figure>\n

Al colocar los men\u00fas, puede ser \u00fatil ver c\u00f3mo se ver\u00e1n en el frente.<\/p>\n

\"La
La opci\u00f3n Administrar con vista previa en vivo<\/figcaption><\/figure>\n

Haga clic en el bot\u00f3n Administrar con vista previa en vivo<\/b> para ver c\u00f3mo aparecer\u00e1 su men\u00fa en la ubicaci\u00f3n que ha elegido para \u00e9l, usando el Personalizador de WordPress:<\/p>\n

\"Una
Una vista previa en vivo del men\u00fa de WordPress en el Personalizador<\/figcaption><\/figure>\n

A continuaci\u00f3n, puede publicar su men\u00fa o men\u00fas directamente desde el Personalizador. Si alguna vez necesita a\u00f1adir o eliminar elementos de su men\u00fa desplegable, puede simplemente volver al editor de men\u00fas y hacer los ajustes necesarios.<\/p>\n

Plugins de WordPress para Mejorar sus Men\u00fas Desplegables<\/h2>\n

Aunque se pueden crear men\u00fas de navegaci\u00f3n de WordPress con todas las funciones sin necesidad de herramientas adicionales, a veces puede ser \u00fatil ampliar la funcionalidad del men\u00fa. Si ese es el caso de su sitio, tal vez quiera buscar en algunos plugins de men\u00fa de WordPress populares<\/a>.<\/p>\n

Nested Pages<\/a> es una forma eficiente para que los blogs con mucho contenido<\/a> creen men\u00fas desplegables. Aunque se utiliza principalmente para organizar los mensajes y las p\u00e1ginas, este plugin tambi\u00e9n generar\u00e1 autom\u00e1ticamente un men\u00fa que refleja la estructura de su contenido:<\/p>\n

\"Nested
Nested Pages WordPress plugin<\/figcaption><\/figure>\n

Aunque no es necesariamente aconsejable incorporar un gran n\u00famero de elementos en sus men\u00fas, a veces es inevitable.<\/p>\n

Si ese es el caso de su sitio, el Max Mega Men\u00fa<\/a> puede ayudarle a combinar sus actuales men\u00fas de WordPress para formar un \u00abmega men\u00fa\u00bb:<\/p>\n

\"Max
Max Mega Menu WordPress plugin<\/figcaption><\/figure>\n

Con el aumento de la navegaci\u00f3n m\u00f3vil, es fundamental asegurarse de que los men\u00fas sigan siendo legibles en los dispositivos m\u00f3viles.<\/p>\n

WP Mobile Menu\u00a0<\/a>se empareja con cualquier tema de respuesta para ayudarle a crear un sistema de navegaci\u00f3n para los usuarios de su sitio que est\u00e1n en movimiento:<\/p>\n

\"WP
WP Mobile Menus WordPress plugin<\/figcaption><\/figure>\n

Finalmente, como ya hemos discutido, puede haber situaciones en las que los elementos descriptivos del men\u00fa no sean suficientes. En estas situaciones, puede que quieras mirar en el uso de la imagen del men\u00fa, Iconos hechos f\u00e1ciles como se describe en el paso 3.<\/p>\n

Puede usar cualquiera de estos plugins para mejorar su sistema de navegaci\u00f3n actual y hacer m\u00e1s efectivo su men\u00fa desplegable de WordPress. S\u00f3lo recuerde que a veces, cuando se trata de la navegaci\u00f3n, lo m\u00e1s simple es lo mejor<\/b>. S\u00f3lo a\u00f1ada caracter\u00edsticas adicionales si eso mejora su UX y evita desordenar su sitio.<\/p>\n

Soluci\u00f3n de Problemas del Men\u00fa Desplegable de WordPress<\/h2>\n

Si ha configurado su men\u00fa como se describe arriba, pero la funcionalidad del men\u00fa desplegable no funciona, hay varias causas posibles.<\/p>\n

Aunque no podemos cubrirlos a todos aqu\u00ed, podemos ayudarle a reducir la causa de su problema para que pueda encontrar la soluci\u00f3n adecuada.<\/p>\n

A menudo, un men\u00fa que funciona mal es el resultado de un c\u00f3digo conflictivo entre su men\u00fa personalizado y su tema. Lo primero que debe hacer si su men\u00fa no funciona es cambiar a un tema por defecto como Twenty Twenty. Si el men\u00fa vuelve a funcionar, sabr\u00e1 que el asunto est\u00e1 relacionado con su tema. Entonces puede contactar con el desarrollador de su tema para buscar una soluci\u00f3n.<\/p>\n

Algunas otras posibles causas incluyen:<\/p>\n