Il menu è lo scheletro del tuo sito. Un visitatore lo scansiona in pochi secondi: se non è chiaro dove cliccare, se ne va. Il builder base di WordPress in "Aspetto → Menu" assembla la navigazione in un minuto, ma il risultato sembra un semplice elenco di testo. Niente icone, nessun comportamento sticky allo scroll, nessuna versione mobile fatta bene.

Il problema è più profondo di quanto sembri: la funzionalità predefinita basta per i primi giorni dopo il lancio, ma presto servono cose che nel core semplicemente non esistono. Icone per le voci di menu, un pulsante di login direttamente nella navigazione, uno shortcode per inserire un menu nel corpo di un articolo, un pannello mobile intelligente: tutto questo richiede codice o un plugin.

Questo articolo copre entrambi gli approcci: modifiche leggere via functions.php e style.css più i migliori plugin attivamente mantenuti per menu avanzati. Il materiale funziona con temi classici, temi a blocchi e in combinazione con qualsiasi framework diffuso.

💡 Panoramica rapida:

• Installa il plugin Menu Icons e aggiungi icone alle voci di menu in cinque minuti senza codice
• Inserisci la funzione wp_loginout in functions.php e un pulsante di login apparirà direttamente nella navigazione
• Registra uno shortcode per il menu e visualizza un menu già pronto ovunque nel sito
• Rendi il menu sticky allo scroll con tre righe di CSS o uno tra tre plugin
• Scegli un builder avanzato tra tre opzioni: UberMenu, Max Mega Menu o QuadMenu
• Imposta la navigazione mobile con WP Mobile Menu o Mobi, dotati di un'interfaccia touch-friendly

1. Icone per le voci di menu con Menu Icons

Un modo rapido per vivacizzare la navigazione: aggiungi icone accanto ai nomi delle sezioni. L'occhio "cattura" un'icona prima del testo e, dopo un paio di visite, l'icona resta impressa nella memoria meglio di qualsiasi etichetta.

Il plugin gratuito Menu Icons del team ThemeIsle gestisce questo compito, con oltre 400.000 installazioni attive su WordPress.org e una valutazione di 4,4. Nessun codice richiesto.

Procedura:

• Installa il plugin via "Plugin → Aggiungi nuovo" e cerca "Menu Icons"
• Attivalo e vai su "Aspetto → Menu"
• Espandi qualsiasi voce e apparirà un blocco di selezione icone
• Scegli un'icona da Dashicons (integrato in WordPress), Font Awesome o carica la tua
• Regola posizione e dimensione, poi salva

Dietro le quinte, il plugin aggiunge una classe CSS con l'icona all'elemento <li>: una soluzione pulita, senza conflitti con il tema. Supporta Dashicons, Font Awesome, Elusive Icons e Genericons. Funziona con qualsiasi menu registrato tramite lo standard wp_nav_menu.

🔗 Menu Icons su WordPress.org

2. Pulsante di login e logout direttamente nel menu

Se il tuo sito ha la registrazione, gli utenti hanno bisogno di un accesso rapido senza dover cercare la pagina /wp-login.php. Un link "Accedi" o "Esci" posizionato direttamente nel menu principale cambia automaticamente in base allo stato.

Si risolve con una funzione in 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);

Lo snippet si aggancia a wp_nav_menu_items e aggiunge un <li> con il link alla fine di qualsiasi menu. La funzione wp_loginout() rileva lo stato da sola: se l'utente non ha effettuato l'accesso, mostra "Accedi"; se autenticato, "Esci" con un redirect alla stessa pagina.

Dopo aver salvato il file, ricarica il sito e verifica entrambi gli stati. Se devi reindirizzare l'utente a una pagina specifica dopo il login, sostituisci il primo argomento di wp_loginout() da 'index.php' all'URL desiderato.

3. Shortcode per visualizzare un menu ovunque

WordPress ti permette di assegnare un menu all'header, al footer o a un'area sidebar, esattamente dove il tema ha allocato lo spazio. Ma se ti serve un menu dentro un articolo, su una landing page o in un widget di testo?

La risposta è registrare un tuo 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');

Aggiungi il codice a functions.php, salva e in qualsiasi punto del sito scrivi:

[menu name="main-menu"]

Prendi il nome da "Aspetto → Menu", dove appare sopra l'elenco delle voci. Lo shortcode chiama lo standard wp_nav_menu() con output soppresso ('echo' => false) e restituisce il markup HTML finito.

In questo modo puoi mantenere la navigazione comune nel footer, una navigazione aggiuntiva nella sidebar di un articolo specifico e assemblare un menu separato per una landing page, senza alcun vincolo con il tema.

4. Campo di ricerca nella barra di navigazione

Il widget di ricerca standard di WordPress risiede nella sidebar. Ma se la sidebar non c'è o su mobile finisce in fondo, i visitatori semplicemente non troveranno la ricerca. Spostiamola direttamente nel menu.

Versione base usando la stessa tecnica 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 funzione get_search_form(false) restituisce l'HTML del form di ricerca senza visualizzarlo a schermo. Il campo si attaccherà all'ultima voce di menu; probabilmente dovrai regolare il posizionamento. Aggiungi una classe CSS al <li>:

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

E nel style.css del tuo tema specifica i margini:

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

Tre righe di PHP e un paio di righe di CSS. Risultato: il campo di ricerca è sempre visibile a qualsiasi risoluzione.

5. Menu sticky allo scroll

Un menu sticky è quando la barra di navigazione resta incollata in cima allo schermo e segue l'utente mentre scorre la pagina. È comodo su landing page, articoli lunghi e negli e-commerce: non serve tornare in alto per spostarsi in un'altra sezione.

Metodo 1: CSS (gratuito, senza plugin)

Trova il selettore del menu principale nel tuo tema, di solito .nav-menu, .genesis-nav-menu o .main-navigation. Aggiungi al 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 riga chiave è position: fixed. Rimuove il blocco dal flusso e lo fissa rispetto alla finestra del browser. top: 0; right: 0; left: 0 allarga il menu a tutta larghezza. Aggiungi un padding superiore al contenuto così il menu non copre l'intestazione.

Il metodo CSS ha un difetto: dopo il fissaggio, il menu esce dal flusso e il contenuto "salta" verso l'alto. Si risolve aggiungendo un padding-top al body pari all'altezza del menu.

Metodo 2: plugin (controllo più fine, niente codice)

Se preferisci non toccare i file del tema, ecco tre strumenti affidabili.

myStickymenu è un plugin gratuito con oltre 200.000 installazioni attive su WordPress.org e una valutazione di 4,6. Si aggancia alla classe CSS della navigazione del tuo tema; basta indicarla nelle impostazioni. È responsive: su mobile l'effetto sticky viene disattivato automaticamente. C'è un campo per stili CSS personalizzati e una modalità "stick with delay" basata sui pixel di scroll.

Sticky Menu (or Anything!) On Scroll è un'altra opzione gratuita che può "fissare" qualsiasi elemento tramite selettore CSS: non solo un menu, ma anche un logo, l'intera intestazione o un pulsante. Richiede una conoscenza di base di HTML e CSS per trovare il selettore giusto, ma offre totale libertà.

UberMenu Sticky Extension è un'estensione del plugin UberMenu a 8 $. Se UberMenu è già installato, l'estensione aggiunge la modalità sticky con un solo interruttore. Su mobile si disattiva automaticamente per evitare di coprire lo schermo.

6. Rimuovere voci di menu dall'amministrazione di WordPress

Quando consegni un sito a un cliente o dai accesso agli autori, l'amministrazione standard è troppo "ricca": oltre 10 sezioni, molte delle quali non servono all'utente e alcune sono persino pericolose. Plugin e impostazioni del tema dovrebbero restare accessibili solo agli amministratori.

Il codice qui sotto rimuove tutte le sezioni di primo livello per tutti gli utenti tranne gli amministratori:

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
}

Lo snippet va nel functions.php. Il controllo !current_user_can('manage_options') esclude gli amministratori; loro vedono tutto. Gli altri ruoli ottengono un elenco ridotto in base a ciò che decidi di lasciare.

Rimuovi solo le righe remove_menu_page che ti servono. Per esempio, per un editor potresti lasciare "Articoli", "Media" e "Pagine" rimuovendo tutto il resto. Nota importante: la funzione nasconde le voci dal menu ma non blocca l'accesso diretto via URL. Per un blocco completo delle pagine, configura i permessi nel ruolo utente.

7. Plugin avanzati per la creazione di menu

Quando l'editor standard non basta, servono mega menu con immagini, tab, form ed elementi dinamici. Ecco tre plugin attivamente mantenuti per compiti e budget diversi.

7.1 UberMenu: il builder più ricco di funzionalità

Un veterano del mercato con oltre 43.000 vendite su CodeCanyon. Crea mega menu responsive con supporto touch. Puoi inserire immagini, video, mappe e un modulo di contatto già pronto nei sottomenu. Oltre 50 impostazioni di stile con anteprima live, generazione automatica dei sottomenu dai contenuti e tab sotto le voci. Si integra con WooCommerce: può caricare dinamicamente le categorie di prodotti.

Prezzo: da $26. 🔗 UberMenu su CodeCanyon

7.2 Max Mega Menu: il leader gratuito

Il plugin gratuito per mega menu più popolare su WordPress.org: oltre 400.000 installazioni attive e una valutazione di 4,8. Costruisce mega menu tramite drag-and-drop nella schermata standard «Aspetto → Menu», senza un'interfaccia separata. Supporta griglie a colonne, widget nei sottomenu, icone e la modalità off-canvas per mobile. Lo script frontend pesa meno di 2 KB compressi, quindi non incide sulla velocità del sito.

• Vantaggi: integrato nell'interfaccia nativa del menu di WordPress, peso minimo dello script, widget nei sottomenu, la versione gratuita copre il 90% dei casi d'uso
• Svantaggi: alcuni stili avanzati e i menu a tab solo nella versione Pro ($29/anno)
• Prezzo: Gratuito / Pro da $29/anno
• Download: 🔗 Max Mega Menu su WordPress.org

7.3 QuadMenu: tab, caroselli e personalizzazione completa

QuadMenu trasforma il menu standard in un mega menu con tab e caroselli, offrendo più funzionalità di Max Mega Menu ma con una curva di apprendimento leggermente più alta. Supporta layout verticali e orizzontali, integrazione con Elementor e Beaver Builder, Google Fonts e oltre 2.000 icone Font Awesome. Temi chiaro e scuro già pronti, versione mobile responsive con pannello off-canvas.

• Vantaggi: tab e caroselli all'interno del menu, profonda integrazione con i page builder, adatto agli sviluppatori (hook e filtri)
• Svantaggi: configurazione iniziale più complessa rispetto a Max Mega Menu, alcune funzionalità solo nella versione a pagamento
• Prezzo: Gratuito / Premium da $15/anno
• Download: 🔗 QuadMenu su WordPress.org

8. Menu mobile per smartphone e tablet

Il traffico mobile ha superato quello desktop da tempo. Se il menu diventa un pasticcio illeggibile su un telefono, i visitatori se ne vanno. Un tema responsive ridimensiona il menu desktop per gli schermi stretti, ma la struttura resta la stessa: cinque o sei voci in fila diventano una lunga lista verticale. Un plugin specializzato fornisce un pulsante hamburger, swipe e ottimizzazione touch.

8.1 WP Mobile Menu: off-canvas rapido per qualsiasi sito

Il plugin gratuito per menu mobile più popolare su WordPress.org: oltre 80.000 installazioni attive e una valutazione di 4,7. Aggiunge un pannello off-canvas che fuoriesce lateralmente quando si tocca l’icona hamburger. Supporta tre livelli di nidificazione, ricerca all’interno del menu mobile, icone e personalizzazione dei colori. Il comportamento per diverse risoluzioni dello schermo si configura separatamente.

• Pro: configurazione minima (funziona subito dopo l’attivazione), adattivo (compare solo su mobile), non crea conflitti con i temi
• Contro: alcuni stili avanzati e l’integrazione con WooCommerce sono nella versione Pro (da $19/anno)
• Prezzo: Gratuito / Pro a partire da $19/anno
• Download: 🔗 WP Mobile Menu su WordPress.org

8.2 Mobi: costruttore drag-and-drop per menu mobile

Un costruttore di menu intuitivo basato sul trascinamento. Il menu può essere posizionato nella parte superiore o inferiore dello schermo. Include oltre 700 icone integrate, un numero illimitato di icone social nel pannello e Google Fonts per la stilizzazione. Puoi controllare la visibilità del menu separatamente per visitatori e utenti autenticati. È particolarmente adatto ai siti in cui il menu mobile deve apparire come un’interfaccia autonoma, anziché una copia rimpicciolita della versione desktop.

Prezzo: a partire da $16. 🔗 Mobi su CodeCanyon

⁉️🤔 Domande frequenti

Posso creare un menu senza alcun plugin, solo con codice?

Sì, tutte le tecniche descritte (icone, effetto sticky, shortcode, pulsante di accesso) possono essere implementate tramite functions.php e style.css senza installare strumenti di terze parti. I plugin fanno semplicemente risparmiare tempo e offrono un’interfaccia grafica a chi preferisce non toccare codice. Se hai dimestichezza con PHP e CSS, i plugin non sono indispensabili. Quando però servono mega menu o un pannello off-canvas con animazioni, un plugin già pronto fa risparmiare ore di sviluppo manuale.

Quale plugin scegliere per un negozio WooCommerce?

Per un negozio è fondamentale un mega menu con categorie di prodotti, immagini e filtri. UberMenu in questo caso dà i risultati migliori: recupera dinamicamente le categorie di WooCommerce e costruisce i sottomenu al volo. Un’alternativa gratuita è Max Mega Menu con widget all’interno dei sottomenu: le immagini delle categorie vengono caricate tramite il widget standard di WooCommerce e la ricerca occupa una riga separata.

Cosa fare se il sito smette di caricarsi dopo aver aggiunto codice a functions.php?

Ripristina il file originale via FTP o dal file manager del tuo hosting. Prima di qualsiasi modifica a functions.php, fai sempre un backup. Un approccio alternativo e sicuro è il plugin Code Snippets: permette di aggiungere snippet PHP dall’amministrazione e disattiva automaticamente il codice in caso di errore fatale, riportando il sito in funzione.

Devo aggiornare il menu dopo aver cambiato tema WordPress?

I menu sono legati a un’area di visualizzazione (location) registrata dal tema. Quando cambi tema, queste aree cambiano e devi riassegnare il menu in «Aspetto → Menu», nella scheda «Gestisci posizioni». Le voci, il loro ordine e la nidificazione rimangono invariati; si perde solo il collegamento alla posizione.

Come verificare che il menu mobile funzioni su tutti i dispositivi?

Apri il sito in modalità responsive design nei Chrome DevTools (F12 → icona del dispositivo) e prova sei breakpoint: 320px, 375px, 414px, 768px, 1024px, 1280px. Controlla il pulsante hamburger (deve stare sopra il contenuto, non coperto), la velocità di risposta dell’animazione e la visibilità di tutte le voci del menu senza scorrimento orizzontale. Plugin diffusi come WP Mobile Menu permettono di impostare manualmente il breakpoint, così puoi specificare larghezze di attivazione diverse per il tuo tema specifico.

Cosa usare per il tuo progetto: la sintesi finale

In breve: prima sfrutta al massimo le funzionalità integrate di WordPress e piccoli ritocchi CSS, poi aggiungi i plugin. In questo modo lo stack resta minimo, il sito veloce e la navigazione esattamente ciò di cui i lettori hanno bisogno.

• Blog semplice o sito vetrina: parti con Menu Icons (gratuito) e menu sticky con tre righe di CSS. È sufficiente perché la navigazione smetta di sembrare grezza.
• Sito con registrazione: aggiungi un pulsante di accesso tramite wp_loginout(). Gli utenti smetteranno di cercare la pagina di login.
• Landing page o articolo lungo: lo shortcode [menu] posiziona blocchi di navigazione in qualsiasi punto del corpo della pagina.
• Negozio e-commerce o portale di contenuti: qui serve un mega menu. Scegli UberMenu se il budget lo consente e hai bisogno del massimo delle funzionalità, oppure Max Mega Menu per le esigenze tipiche (gratuito e senza perdita di velocità).
• Pubblico prevalentemente mobile: WP Mobile Menu copre 9 scenari su 10: si installa in un minuto e fornisce subito un pannello off-canvas con ricerca. Se ti serve un’interfaccia mobile più autonoma, dai un’occhiata a Mobi.

Fanne una regola: un plugin per ogni esigenza. Non installare un mega menu solo per un paio di icone, e non scrivere codice per un pannello off-canvas quando un plugin lo fa in un minuto. L’equilibrio tra velocità del sito e comodità di navigazione è esattamente ciò che tiene i lettori sulla pagina.