El menú es el esqueleto de su sitio. Un visitante lo escanea en segundos: si no queda claro dónde hacer clic, se va. El constructor básico de WordPress en «Apariencia → Menús» arma la navegación en un minuto, pero el resultado parece una simple cadena de texto. Sin iconos, sin comportamiento fijo al desplazarse, sin una versión móvil adecuada.

El problema es más profundo de lo que parece: la funcionalidad predeterminada basta para los primeros días tras el lanzamiento, pero pronto necesita cosas que simplemente no existen en el núcleo. Iconos para los elementos del menú, un botón de inicio de sesión directamente en la navegación, un shortcode para insertar un menú dentro del cuerpo de una entrada, un panel móvil inteligente: todo esto requiere código o un plugin.

Este artículo cubre ambos enfoques: ajustes ligeros mediante functions.php y style.css, además de los mejores plugins con mantenimiento activo para menús avanzados. El material funciona con temas clásicos, temas de bloques y en combinación con cualquier framework popular.

💡 Resumen rápido:

• Instale el plugin Menu Icons y añada iconos a los elementos del menú en cinco minutos sin código
• Inserte la función wp_loginout en functions.php y aparecerá un botón de inicio de sesión directamente en la navegación
• Registre un shortcode de menú y muestre un menú ya preparado en cualquier parte del sitio
• Haga que el menú se quede fijo al desplazarse con tres líneas de CSS o con uno de tres plugins
• Elija un constructor avanzado entre tres opciones: UberMenu, Max Mega Menu o QuadMenu
• Configure la navegación móvil con WP Mobile Menu o Mobi, que ofrecen una interfaz táctil

1. Iconos en los elementos del menú con Menu Icons

Una forma rápida de dar vida a la navegación: añada iconos junto a los nombres de las secciones. El ojo «capta» un icono antes que el texto y, tras un par de visitas, el icono se fija en la memoria mejor que cualquier etiqueta.

El plugin gratuito Menu Icons del equipo ThemeIsle resuelve esta tarea, con más de 400.000 instalaciones activas en WordPress.org y una valoración de 4,4. No requiere código.

Pasos:

• Instale el plugin desde «Plugins → Añadir nuevo» y busque «Menu Icons»
• Actívelo y vaya a «Apariencia → Menús»
• Expanda cualquier elemento y aparecerá un bloque de selección de icono
• Elija un icono de Dashicons (integrado en WordPress), Font Awesome o suba uno propio
• Ajuste la posición y el tamaño, luego guarde

Internamente, el plugin añade una clase CSS con el icono al elemento <li>: una solución limpia y sin conflictos con el tema. Es compatible con Dashicons, Font Awesome, Elusive Icons y Genericons. Funciona con cualquier menú registrado mediante el wp_nav_menu estándar.

🔗 Menu Icons en WordPress.org

2. Botón de inicio y cierre de sesión directamente en el menú

Si su sitio tiene registro, los usuarios necesitan un acceso rápido sin tener que buscar la página /wp-login.php. Un enlace «Iniciar sesión» o «Cerrar sesión» se ubica directamente en el menú principal y cambia automáticamente según el estado.

Esto se resuelve con una función en functions.php:

1
function add_login_logout_link($items, $args) {
2
    $loginoutlink = wp_loginout('index.php', false);
3
    $items .= '<li>'. $loginoutlink .'</li>';
4
    return $items;
5
}
6
add_filter('wp_nav_menu_items', 'add_login_logout_link', 10, 2);

El fragmento se engancha en wp_nav_menu_items y añade un <li> con el enlace al final de cualquier menú. La función wp_loginout() detecta el estado por sí sola: si el usuario no ha iniciado sesión, muestra «Iniciar sesión»; si está autenticado, «Cerrar sesión» con una redirección a la misma página.

Después de guardar el archivo, recargue el sitio y verifique ambos estados. Si necesita redirigir al usuario a una página específica tras el inicio de sesión, sustituya el primer argumento de wp_loginout() de 'index.php' por la URL deseada.

3. Shortcode para mostrar un menú en cualquier lugar

WordPress le permite asignar un menú a la cabecera, el pie de página o el área de la barra lateral, exactamente donde el tema ha reservado espacio. Pero ¿qué ocurre si necesita un menú dentro de una entrada, en una página de destino o en un widget de texto?

La respuesta es registrar su propio shortcode:

1
function menu_function($atts, $content = null) {
2
    extract(
3
        shortcode_atts(
4
            array( 'name' => null, ),
5
            $atts
6
        )
7
    );
8
    return wp_nav_menu(
9
        array(
10
            'menu' => $name,
11
            'echo' => false
12
        )
13
    );
14
}
15
add_shortcode('menu', 'menu_function');

Añada el código a functions.php, guárdelo y, en cualquier parte del sitio, escriba:

[menu name="main-menu"]

Tome el nombre de «Apariencia → Menús», donde aparece sobre la lista de elementos. El shortcode llama al wp_nav_menu() estándar con la salida suprimida ('echo' => false) y devuelve el marcado HTML terminado.

De esta manera, puede mantener una navegación común en el pie de página, una navegación adicional en la barra lateral de una entrada específica y armar un menú independiente para una página de destino sin ninguna atadura al tema.

4. Campo de búsqueda en la barra de navegación

El widget de búsqueda estándar de WordPress reside en la barra lateral. Pero si no hay barra lateral o esta se desplaza al fondo en el móvil, los visitantes simplemente no encontrarán la búsqueda. Vamos a moverla directamente al menú.

Versión básica usando la misma técnica del filtro wp_nav_menu_items:

1
add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
2
function add_search_box( $items, $args) {
3
    $items .= '<li>'. get_search_form( false ). '</li>';
4
    return $items;
5
}

La función get_search_form(false) devuelve el HTML del formulario de búsqueda sin mostrarlo en pantalla. El campo se adjuntará al último elemento del menú; probablemente necesitará posicionamiento. Añada una clase CSS al <li>:

1
$items .= '<li class="searchbox-position">'. get_search_form( false ). '</li>';

Y en el style.css de su tema especifique los márgenes:

1
.searchbox-position {
2
    margin-top: 15px;
3
    margin-right: 20px;
4
}

Tres líneas de PHP y un par de líneas de CSS. Resultado: el campo de búsqueda siempre visible a cualquier resolución.

5. Menú fijo al hacer scroll

Un menú fijo es aquel en que la barra de navegación se adhiere a la parte superior de la pantalla y acompaña al usuario mientras se desplaza por la página. Resulta práctico en páginas de aterrizaje, artículos extensos y tiendas: no hace falta volver arriba para ir a otra sección.

Método 1: CSS (gratuito, sin plugins)

Localice el selector del menú principal en su tema, normalmente .nav-menu, .genesis-nav-menu o .main-navigation. Añada en style.css:

1
.nav-menu {
2
    position: fixed;
3
    background: #333;
4
    top: 0px;
5
    right: 0px;
6
    left: 0px;
7
    z-index: 99;
8
}

La línea clave es position: fixed. Saca el bloque del flujo y lo fija respecto a la ventana del navegador. top: 0; right: 0; left: 0 estira el menú a todo el ancho. Añada un relleno superior al contenido para que el menú no tape la cabecera.

El método CSS tiene un inconveniente: al fijarse, el menú sale del flujo y el contenido «salta» hacia arriba. Esto se soluciona añadiendo al body un padding-top igual a la altura del menú.

Método 2: plugins (control más fino, sin código)

Si prefiere no tocar los archivos del tema, aquí tiene tres herramientas probadas.

myStickymenu es un plugin gratuito con más de 200 000 instalaciones activas en WordPress.org y una valoración de 4,6. Se engancha a la clase CSS de navegación de su tema; solo tiene que indicarla en los ajustes. Es responsivo: en móvil el efecto fijo se desactiva automáticamente. Dispone de un campo para estilos CSS personalizados y un modo de «fijar con retardo» basado en los píxeles de desplazamiento.

Sticky Menu (or Anything!) On Scroll es otra opción gratuita que puede «fijar» cualquier elemento mediante un selector CSS: no solo un menú, sino también un logotipo, toda la cabecera o un botón. Requiere conocimientos básicos de HTML y CSS para encontrar el selector adecuado, pero ofrece total libertad.

UberMenu Sticky Extension es un complemento del plugin UberMenu por 8 $. Si UberMenu ya está instalado, la extensión añade el modo fijo con un solo interruptor. En móvil se desactiva automáticamente para no cubrir la pantalla.

6. Eliminar elementos del menú del escritorio de WordPress

Cuando entrega un sitio a un cliente o da acceso a autores, el escritorio estándar resulta demasiado «recargado»: más de 10 secciones, muchas de las cuales el usuario no necesita y algunas incluso son peligrosas. Los plugins y los ajustes del tema deberían quedar accesibles solo para los administradores.

El código siguiente elimina todas las secciones de primer nivel para todos los usuarios excepto los administradores:

1
if (!current_user_can( 'manage_options' )) {
2
    add_action( 'admin_menu', 'my_remove_menus', 999 );
3
}
4
function my_remove_menus() {
5
    remove_menu_page( 'index.php' );                  //Dashboard
6
    remove_menu_page( 'edit.php' );                   //Posts
7
    remove_menu_page( 'upload.php' );                 //Media
8
    remove_menu_page( 'edit.php?post_type=page' );    //Pages
9
    remove_menu_page( 'edit-comments.php' );          //Comments
10
    remove_menu_page( 'themes.php' );                 //Appearance
11
    remove_menu_page( 'plugins.php' );                //Plugins
12
    remove_menu_page( 'users.php' );                  //Users
13
    remove_menu_page( 'tools.php' );                  //Tools
14
    remove_menu_page( 'options-general.php' );        //Settings
15
}

El fragmento va en functions.php. La comprobación !current_user_can('manage_options') excluye a los administradores; ellos ven todo. Los demás roles obtienen una lista reducida según lo que usted decida conservar.

Elimine únicamente las líneas remove_menu_page que necesite. Por ejemplo, para un editor podría dejar «Entradas», «Medios» y «Páginas» y quitar todo lo demás. Nota importante: la función oculta elementos del menú pero no bloquea el acceso directo por URL. Para un bloqueo completo de páginas, configure las capacidades en el rol de usuario.

7. Plugins avanzados para la creación de menús

Cuando el editor estándar no es suficiente, usted necesita mega menús con imágenes, pestañas, formularios y elementos dinámicos. Aquí tiene tres plugins con mantenimiento activo para distintas necesidades y presupuestos.

7.1 UberMenu: el constructor con más funciones

Un veterano del mercado con más de 43.000 ventas en CodeCanyon. Crea mega menús adaptables con soporte táctil. Puede colocar imágenes, video, mapas y un formulario de contacto listo para usar dentro de los submenús. Más de 50 ajustes de estilo con vista previa en vivo, generación automática de submenús a partir del contenido y pestañas bajo los elementos. Se integra con WooCommerce: puede extraer categorías de productos dinámicamente.

Precio: desde $26. 🔗 UberMenu en CodeCanyon

7.2 Max Mega Menu: el líder gratuito

El plugin gratuito de mega menú más popular en WordPress.org: más de 400.000 instalaciones activas y una valoración de 4,8. Construye mega menús mediante arrastrar y soltar en la pantalla estándar «Apariencia → Menús», sin una interfaz separada. Admite cuadrículas de columnas, widgets dentro de los submenús, iconos y modo off-canvas para móviles. El script del frontend pesa menos de 2 KB comprimido, por lo que no afecta la velocidad del sitio.

• Ventajas: integrado en la interfaz nativa de menús de WordPress, peso mínimo del script, widgets dentro de los submenús, la versión gratuita cubre el 90% de los casos de uso
• Inconvenientes: algunos estilos avanzados y menús con pestañas solo en Pro ($29/año)
• Precio: Gratis / Pro desde $29/año
• Descarga: 🔗 Max Mega Menu en WordPress.org

7.3 QuadMenu: pestañas, carruseles y personalización total

QuadMenu transforma el menú estándar en un mega menú con pestañas y carruseles, ofreciendo más funciones que Max Mega Menu pero con una curva de aprendizaje ligeramente mayor. Admite diseños verticales y horizontales, integración con Elementor y Beaver Builder, Google Fonts y más de 2.000 iconos de Font Awesome. Temas oscuro y claro listos para usar, versión móvil adaptable con panel off-canvas.

• Ventajas: pestañas y carruseles dentro del menú, integración profunda con constructores de páginas, amigable para desarrolladores (hooks y filtros)
• Inconvenientes: configuración inicial más compleja que Max Mega Menu, algunas funciones solo en la versión de pago
• Precio: Gratis / Premium desde $15/año
• Descarga: 🔗 QuadMenu en WordPress.org

8. Menús móviles para smartphones y tabletas

El tráfico móvil superó al de escritorio hace tiempo. Si el menú se convierte en un desorden ilegible en un teléfono, los visitantes se van. Un tema adaptable escala el menú de escritorio para pantallas estrechas, pero la estructura sigue siendo la misma: cinco o seis elementos en una fila se convierten en una larga lista vertical. Un plugin especializado proporciona un botón de hamburguesa, deslizamientos y optimización táctil.

8.1 WP Mobile Menu: off-canvas rápido para cualquier sitio

El plugin de menú móvil gratuito más popular de WordPress.org: más de 80.000 instalaciones activas y una valoración de 4,7. Añade un panel fuera del lienzo que se desliza al tocar el botón de hamburguesa. Admite tres niveles de anidamiento, búsqueda dentro del menú móvil, iconos y personalización de colores. El comportamiento para distintas resoluciones de pantalla se configura por separado.

• Ventajas: configuración mínima (funciona inmediatamente tras la activación), adaptativo (se muestra solo en móvil), no genera conflictos con los temas
• Inconvenientes: algunos estilos avanzados y la integración con WooCommerce en la versión Pro (19 $/año)
• Precio: Gratis / Pro desde 19 $/año
• Descarga: 🔗 WP Mobile Menu en WordPress.org

8.2 Mobi: constructor de menús móviles con arrastrar y soltar

Un constructor de menús intuitivo basado en arrastrar y soltar. El menú puede colocarse en la parte superior o inferior de la pantalla. Incluye más de 700 iconos integrados, cualquier cantidad de iconos de redes sociales en el panel y Google Fonts para el estilo. Puede controlar la visibilidad del menú para visitantes y usuarios conectados por separado. Muy adecuado para sitios donde el menú móvil debe verse como una interfaz independiente, en lugar de una copia reducida de la versión de escritorio.

Precio: desde 16 $. 🔗 Mobi en CodeCanyon

⁉️🤔 Preguntas frecuentes

¿Puedo crear un menú completamente sin plugins, solo con código?

Sí, todas las técnicas descritas (iconos, efecto sticky, shortcode, botón de inicio de sesión) pueden implementarse mediante functions.php y style.css sin instalar herramientas de terceros. Los plugins simplemente ahorran tiempo y proporcionan una interfaz gráfica para quienes prefieren no tocar código. Si usted se maneja con soltura con PHP y CSS, los plugins no son obligatorios. Pero cuando necesita mega menús o un panel fuera del lienzo con animaciones, un plugin ya hecho ahorra horas de codificación manual.

¿Qué plugin debo elegir para una tienda WooCommerce?

Para una tienda, un mega menú con categorías de productos, imágenes y filtros es fundamental. UberMenu ofrece el mejor rendimiento aquí: obtiene dinámicamente las categorías de WooCommerce y construye submenús sobre la marcha. Una alternativa gratuita es Max Mega Menu con widgets dentro de los submenús: las imágenes de categoría se obtienen mediante el widget estándar de WooCommerce, y la búsqueda ocupa una fila separada.

¿Qué debo hacer si el sitio deja de cargar después de añadir código a functions.php?

Restaure el archivo original mediante FTP o el gestor de archivos de su hosting. Antes de cualquier edición en functions.php, haga una copia de seguridad. Un enfoque alternativo seguro es el plugin Code Snippets: le permite añadir fragmentos de PHP desde el administrador y desactiva automáticamente el código ante un error fatal, devolviendo el sitio a su estado operativo.

¿Necesito actualizar el menú después de cambiar el tema de WordPress?

Los menús están vinculados a un área de visualización (ubicación) que el tema registra. Al cambiar de tema, estas áreas cambian, y usted necesita reasignar el menú en «Apariencia → Menús», en la pestaña «Gestionar ubicaciones». Los elementos en sí, su orden y anidamiento, se conservan; solo se pierde la vinculación a la ubicación.

¿Cómo verifico que el menú móvil funciona en todos los dispositivos?

Abra el sitio en modo de diseño responsivo en Chrome DevTools (F12 → icono de dispositivo) y recorra seis puntos de ruptura: 320px, 375px, 414px, 768px, 1024px, 1280px. Compruebe el botón de hamburguesa (debe estar por encima del contenido, no cubierto), la velocidad de respuesta de la animación y la visibilidad de todos los elementos del menú sin desplazamiento horizontal. Plugins populares como WP Mobile Menu le permiten establecer manualmente el punto de ruptura, lo que le permite especificar diferentes anchos de activación para su tema concreto.

Qué usar para su tarea: el desglose final

En resumen: primero agote las capacidades integradas de WordPress y los ajustes ligeros de CSS, luego añada plugins. Esto mantiene la pila tecnológica mínima, el sitio rápido y la navegación exactamente como sus lectores necesitan.

• Blog sencillo o sitio de tarjeta de presentación: empiece con Menu Icons (gratuito) y un menú sticky con tres líneas de CSS. Eso basta para que la navegación deje de verse rudimentaria.
• Sitio con registro: añada un botón de inicio de sesión mediante wp_loginout(). Los usuarios dejarán de buscar la página de acceso.
• Landing page o artículo extenso: el shortcode [menu] coloca bloques de navegación en cualquier parte del cuerpo de la página.
• Tienda de comercio electrónico o portal de contenido: aquí necesita un mega menú. Opte por UberMenu si el presupuesto lo permite y necesita el máximo de funciones, o por Max Mega Menu para tareas típicas (gratuito y sin pérdida de velocidad).
• La audiencia móvil predomina: WP Mobile Menu cubre 9 de cada 10 escenarios: se instala en un minuto y proporciona de inmediato un panel fuera del lienzo con búsqueda. Si necesita una interfaz móvil más independiente, considere Mobi.

Adopte esta regla: un plugin por tarea. No instale un mega menú solo para un par de iconos, y no escriba código para un panel fuera del lienzo cuando un plugin lo hace en un minuto. El equilibrio entre la velocidad del sitio y la comodidad de navegación es precisamente lo que mantiene a los lectores en la página.