Cómo crear un menú desplegable en WordPress (5 métodos)
Este tutorial abarca los siguientes temas:
La funcionalidad del menú desplegable en WordPress guía a tus visitantes por tu sitio. Es la hoja de ruta que evita que se pierdan y asegura que encuentren lo que necesitan sin problemas. Una estructura de navegación meticulosamente organizada puede mantener a tus visitantes en tu sitio más tiempo y más comprometidos.
Pero, ¿cómo se estructura un menú desplegable para crear una experiencia de usuario agradable y productiva?
En este artículo, te mostraremos 5 métodos para crear un menú desplegable en WordPress y describiremos las mejores prácticas para estructurarlo. Sigue leyendo para convertirte en un experto en la creación de menús desplegables en WordPress.
5 Métodos para crear un menú desplegable en WordPress
WordPress ofrece varios métodos para crear menús desplegables. Van desde sencillas opciones integradas y plugins hasta enfoques más avanzados que usan CSS y PHP personalizados. Sigue leyendo para aprender más sobre cada una de estas opciones.
1. Usando el editor de menú incorporado
WordPress proporciona un editor de menús que te permite crear menús desplegables sin plugins adicionales o conocimientos de codificación.
Sigue estos pasos:
- Iniciar sesión en el backend de tu sitio WordPress.
- Ve a Apariencia > Menús en tu panel de WordPress.
- Haz clic en el botón “Crear menú“.
- Dale un nombre a tu nuevo menú.
- Elige su ubicación en tu sitio en la sección Menú de Ajustes. Puedes seleccionar “Añadir automáticamente nuevas páginas de nivel superior a este menú” marcando la casilla respectiva. Además, puedes marcar las casillas para administrar ubicaciones en tu sitio donde deseas que este menú sea visible.
- Ve a la sección “Add Menu Items” en el lado izquierdo de la pantalla y selecciona las páginas que quieres incluir en tu menú.
- Incluir Entradas específicas, Enlaces personalizados o Categorías, expandiendo cada sección con un clic en la flecha a la derecha.
- Añade un Enlace personalizado (marcador de posición para un menú desplegable) introduciendo la URL y el texto del enlace (usa # si no se puede hacer clic en él) y luego añadiéndolo al Menú.
- Simplemente arrastra y suelta los elementos en el lado derecho de la pantalla para organizar su orden.
- Convierte elementos de menú en submenús seleccionando la opción “Under” debajo de un elemento principal.
- Haz clic en “Guardar” para guardar los cambios.
Después de guardar tu nuevo menú, revisa tu sitio web para ver cómo se ve. Como puedes ver en la imagen de abajo, la barra de menú About es el elemento del menú principal, con Project y Services como submenús.
2. Usando el Bloque de Navegación en el Editor de Bloques
El Editor de bloques es una funcionalidad de WordPress. Simplifica la creación de menús desplegables. Esta herramienta te permite construir tus menús visualmente y ver los cambios en una vista previa en tiempo real.
Así es como puedes usarlo.
- Edita la página o entrada donde quieres insertar el menú desplegable.
- Haz clic en el icono “+” para añadir un nuevo bloque.
- Busca y selecciona el bloque “Navigation” de la lista de bloques disponibles.
- Arrastra y suelta el bloque “Navigation” en la ubicación deseada dentro de tu contenido.
- Organizar elementos de menú arrastrando y soltando cada elemento de menú en el orden deseado para construir tu estructura de menú.
- Haz clic en el botón “Añadir submenú” debajo de un elemento del menú principal para crear un nuevo menú desplegable de WordPress dentro de ese elemento del menú.
- Selecciona las páginas o enlaces que quieres incluir en el menú desplegable.
- Ajusta colores, espaciado y otros ajustes en las opciones de bloque para darle estilo a tu menú.
- Haz clic en “Actualizar” & “Guardar” para aplicar los cambios.
3. Manipulación de CSS personalizado
Crear un menú desplegable usando CSS implica definir el estilo y el comportamiento de los elementos de tu menú y sus subelementos. Esto requiere una combinación de estructuras en tu HTML y estilo con CSS.
Estos son los pasos que puedes seguir:
- Revisa la documentación de tu plantilla o usa las herramientas de desarrollo de tu navegador para inspeccionar la estructura HTML de tu menú. Esto revelará las clases específicas o IDs de tu plantilla para los elementos de menú y submenús.
- Ajusta los selectores de CSS en el código para que coincidan con las clases de CSS específicas de tu tema o IDs.
- Añade código CSS personalizado en tu style.css para crear tu menú.
Aquí tienes un ejemplo básico.
/* Style the parent menu items */
nav ul li {
background-color: #333; /* Main item background color */
color: white; /* Main item text color */
}
/* Initially hide the sub-menu */
nav ul li ul {
display: none;
position: absolute; /* Position the dropdown */
background-color: #444; /* Dropdown background color */
z-index: 100; /* Ensure the dropdown is above other content */
}
/* Reveal the sub-menu on hover over the parent item */
nav ul li:hover > ul {
display: block; /* Show dropdown */
}
/* Style individual dropdown items */
nav ul li ul li {
display: block; /* Dropdown items should be block level */
}
- Apunta a clases CSS específicas o IDs para aplicar estilos particulares. Utilizándolos, puedes personalizar propiedades como el color de fondo, color, visualización, posición, etc. de acuerdo con tus preferencias de diseño.
- Prueba la capacidad de respuesta para asegurarte de que el menú desplegable funciona bien en diferentes tamaños de pantalla.
4. Usando plugins de WordPress
Otro método para crear y diseñar menús de navegación es usando plugins de WordPress. Con unos pocos clics, puedes acceder a potentes funciones que simplifican la creación de menús desplegables.
Aquí está el proceso en pocas palabras:
- Instalar un Plugin de Menú. Desde el repositorio de WordPress, puedes instalar un plugin como ‘Max Mega Menu‘ y activarlo.
- Ve a Apariencia y localiza la sección Max Mega Menu Settings para aplicar los efectos. Luego, usa la interfaz de arrastrar y soltar para construir tu menú.
- Guarda los cambios y asigna el menú a la localización deseada.
5. Desarrollo PHP personalizado
Para crear un menú desplegable básico de WordPress usando código PHP, usa la función wp_nav_menu() en el header.php , como se muestra a continuación.
- Ubicaciones del menú de registro. En el archivo functions.php de tu plantilla, debes registrar una ubicación de menú usando register_nav_menus(). Esto le dice a WordPress donde se colocará tu menú en el tema.
function mytheme_register_nav_menu() {
register_nav_menus(array(
'primary' => __('Primary Menu', 'theme-slug'),
));
}
add_action('after_setup_theme', 'mytheme_register_nav_menu');- Implementar el botón de menú. Coloca la función wp_nav_menu() en header.php donde debería aparecer el menú.
wp_nav_menu(array('theme_location' => 'primary', 'container_class' => 'main-nav'));- Crea tu menú en el administrador de WordPress. En Apariencia > Menus, crea tu menú desplegable, y asígnalo a la ubicación ‘Primary’ que has registrado.
- Estiliza el menú con CSS. Añade tu código personalizado a la hoja de estilo de tu plantilla para aplicar estilo al menú.
- Genera el menú en tu sitio: visita tu sitio para comprobar cómo WordPress genera el menú principal en tu ubicación registrada.
- Asegurar la funcionalidad del menú desplegable. Para soportar menús desplegables, tu plantilla puede necesitar HTML, CSS o JavaScript adicional.
Estructurando Tu Menú Desplegables en WordPress
Un menú desplegable bien estructurado puede mejorar enormemente la usabilidad de tu sitio. Dominar el diseño y asegurar que sea accesible y receptivo es clave para proporcionar una mayor satisfacción del usuario.
Planificando el diseño del menú de WordPress
Comienza por diseñar tu menú para que refleje la arquitectura de tu sitio. Agrupa los elementos relacionados bajo los encabezados apropiados. Además, debes mantener la profundidad de tus menús manejable para que los usuarios puedan navegar fácilmente por tu contenido.
Prácticas recomendadas para la jerarquía de menús
Para una jerarquía de menú óptima, organiza tus elementos lógicamente y agrupa contenido similar. Asegúrate de que las páginas más importantes están al principio de la jerarquía. Esfuérzate por la simplicidad limitando la profundidad del menú a dos o tres niveles para evitar confusiones al usuario. Usa etiquetas claras y descriptivas para una navegación sencilla. Lo más importante es mantener la coherencia en todo tu sitio para crear una experiencia familiar y fácil de usar.
Accesibilidad y Diseño Responsive
Asegúrate de que tus menús desplegables son accesibles para todos los usuarios, incluyendo aquellos con discapacidades. Además, diseña tus menús para que sean responsivos. Esto asegura que funcionen sin problemas tanto en computadoras de escritorio como en dispositivos móviles.
Conclusión
En conclusión, crear un menú desplegable en WordPress combina la funcionalidad con un diseño centrado en el usuario. Ya sea que optes por la simplicidad del editor de menú incorporado, las capacidades dinámicas de los plugins, o el toque personalizado de CSS y PHP, el objetivo sigue siendo proporcionar una experiencia de navegación perfecta.
Al mantener tus menús estructurados, accesibles y receptivos, los visitantes pueden explorar fácilmente tu sitio. Esto es una victoria tanto para la satisfacción del usuario como para el rendimiento de SEO. Un menú bien elaborado guía a los usuarios a través de tu contenido y refleja la profesionalidad de tu sitio WordPress.