1. Web Design
  2. WordPress
  3. WordPress Plugins

Para una mejor navegación: cómo agregar un menú desplegable en WordPress

WordPress cuenta con un sistema de gestión de menús integrado que facilita la tarea de agregar menús a tu sitio web. Sin embargo, a medida que agregues más y más páginas, publicaciones y otro contenido misceláneo, puede resultar imposible incluir cada destino en tu barra de menú estándar.
Scroll to top

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

WordPress cuenta con un sistema de gestión de menús integrado que facilita la tarea de agregar menús a tu sitio web. Sin embargo, a medida que agregues más y más páginas, publicaciones y otro contenido misceláneo, puede resultar imposible incluir cada destino en tu barra de menú estándar.

En estos escenarios, puedes proporcionar un acceso fácil a cada sección de tu sitio web sin saturar la barra de menú, mediante el reemplazo de la barra de menú horizontal estándar con un menú desplegable.

En este consejo rápido compartiré dos formas sencillas para que puedas transformar cualquier menú de WordPress estándar a un menú desplegable.

Los mejores complementos de WordPress para la navegación

Antes de que comencemos, quiero mencionar que puedes encontrar más de 7,000 de los mejores complementos de WordPress alguna vez creados en CodeCanyon. Con un barato pago único, puedes comprar estos complementos de alta calidad de WordPress para la navegación o para otras necesidades.

WordPress plugins for navigationWordPress plugins for navigationWordPress plugins for navigation

Crea al menos un menú estándar de WordPress

Puedes agregar la funcionalidad de despliegue a cualquier menú de WordPress.

Si no tienes un menú estándar que quieras convertir a un menú desplegable, entonces necesitarás crear uno.

Inicia sesión en tu cuenta de WordPress, si aún no lo has hecho. En el menú de la izquierda de WordPress, selecciona Appearance > Menus (Apariencia > Menús) y luego haz clic en el botón Create a new menu (Crear un menú nuevo). Asigna un nombre a tu menú y luego selecciona Create new menu (Crear menú nuevo).

Toma en cuenta que el nombre del menú no aparecerá en ningún lugar en tu sitio web, por lo que este es solo para tu propia referencia. La sección Add menu items (Agregar elementos del menú) enumera todas las Páginas, Publicaciones, Enlaces personalizados, Categorías y Formatos que puedes agregar a tu menú. Haz clic en cualquier sección para ver todos los elementos disponibles dentro de esa categoría. Cuando encuentres un elemento que quieras agregar a tu menú, selecciona la casilla de verificación que lo acompaña.

Select all the destinations that you want to add to your WordPress menuSelect all the destinations that you want to add to your WordPress menuSelect all the destinations that you want to add to your WordPress menu

Cuando estés satisfecho con tu selección, haz clic en Add to menu (Agregar al menú). Ahora todos estos elementos se agregarán a tu menú.

En este punto has creado un menú estándar de WordPress; tu siguiente tarea es agregar la funcionalidad para que sea desplegable.

Convierte cualquier menú de WordPress a un menú desplegable

Para convertir un menú normal en un menú desplegable, necesitarás usar la función de arrastrar y soltar para crear elementos "padres", que se mostrarán como parte del menú principal, y elementos "hijos", que aparecerán como parte del menú desplegable de sus padres.

Por ejemplo, en la siguiente captura de pantalla, Settings (Configuraciones) es el padre, mientras que Password Reset (Restablecimiento de contraseña) y Logout (Cierre de sesión) son sus hijos.

You can turn any regular menu into a dropdown menu using drag and dropYou can turn any regular menu into a dropdown menu using drag and dropYou can turn any regular menu into a dropdown menu using drag and drop

Esto me proporciona el siguiente menú desplegable:

 Child menu items are displayed as part of their parents dropdown  Child menu items are displayed as part of their parents dropdown  Child menu items are displayed as part of their parents dropdown

Puedes separar los elementos de tu menú en padres e hijos en el área Menu structure (Estructura del menú).

Primero, toma cualquier elemento que quieras convertir en un hijo. Arrastra el hijo al elemento padre, pero no sueltes tu ratón todavía. Mueve tu ratón ligeramente a la derecha, para que quede incrustado debajo del padre. Suelta tu ratón, y el elemento del menú deberá haberse convertido en un hijo del elemento padre.

Cuando estés satisfecho con la organización de tu menú desplegable, haz clic en Save Menu (Guardar menú).

Manage Locations (Gestionar ubicaciones): mostrando tu menú

Ahora necesitamos colocar este menú desplegable en nuestro sitio web, así que haz clic en la pestaña Manage Locations (Gestionar ubicaciones).

Dependiendo de cómo esté configurado tu sitio, es posible que tengas diferentes opciones para posicionar tu menú. Sin embargo, si quieres que tu menú aparezca como parte del encabezado de tu sitio web, por lo general necesitarás seleccionar Top Menu (Menú superior), Primary Menu (Menú principal) o Primary (Principal).

Cuando estés satisfecho con tu selección, haz clic en Save Changes (Guardar cambios). Ahora tu menú desplegable debería mostrarse en la parte superior de tu sitio web.

Creando menús desplegables con el personalizador de temas

Alternativamente, puedes crear menús desplegables usando la vista previa en tiempo real y la herramienta de personalización de WordPress.

En el menú de la izquierda de WordPress, selecciona Appearance > Menus (Apariencia > Menús).

Haz clic en el botón Manage with Live Preview (Gestionar con vista previa en tiempo real). Esto te lleva a un área del Theme Customizer (Personalizador de temas), en donde puedes construir un menú de WordPress estándar haciendo clic en el botón Create New Menu (Crear menú nuevo). Asigna un nombre a tu menú y luego haz clic en Next (Siguiente).

Haz clic en Add items (Agregar elementos) y selecciona cada elemento que quieras mostrar como parte de tu menú. Para convertir un elemento de menú estándar en un elemento de menú hijo, arrástralo al elemento que quieras usar como su padre. Antes de soltar tu ratón, arrastra el elemento hijo un poco hacia la derecha y luego suéltalo. Ahora este elemento deberá haberse transformado en un hijo del elemento padre, y aparecerá como parte de su menú desplegable.

Al dividir tu menú en padres e hijos, tus cambios se reflejarán automáticamente en la vista previa en tiempo real. Limpia y repite hasta que te sientas satisfecho con la configuración de tu menú desplegable.

Especifica el lugar en el que debe aparecer tu nuevo menú desplegable seleccionando una de las casillas de verificación de Menu Location (Ubicación del menú). Toma en cuenta que las opciones disponibles variarán dependiendo del tema de WordPress que estés utilizando actualmente. Cuando estés satisfecho con la configuración de tu menú desplegable, haz clic en Publish (Publicar).

Ahora tu nuevo menú desplegable deberá aparecer en tu sitio web.

Conclusión

En este consejo rápido, te mostré cómo crear un menú estándar de WordPress y luego cómo convertir ese menú a un menú desplegable. Al optar por los menús desplegables, puedes garantizar una navegación sencilla en tu sitio web sin saturar la barra del menú.

Para obtener mas trucos y consejos sobre cómo aprovechar al máximo los menús de WordPress y otros complementos del mismo, echa un vistazo a algunos de nuestros otros tutoriales.

UberMenu: el complemento mejor vendido de WordPress para mega menús

Si estás buscando el mejor complemento de WordPress para menús de su clase, echa un vistazo a UberMenu.

UberMenu Mega MenuUberMenu Mega MenuUberMenu Mega Menu

Con UberMenu puedes desarrollar mega menús personalizados para tu sitio de WordPress rápidamente. Siendo una de las opciones mejor vendidas en CodeCanyon para mega menús de WordPress, este complemento funciona desde el primer momento para crear menús táctiles y totalmente responsivos que funcionan de manera consistente en todas las plataformas. Este complemento fácil de usar te permite construir rápidamente diseños avanzados para sub-menús en un sistema con el que ya te sientes cómodo.

Este complemento es totalmente personalizable, por lo que puedes construir un mega menú que funcione perfectamente con tu sitio web.