Menù personalizzato in WordPress: come creare ed aggiungere un tuo menù

Menù personalizzato in WordPress: come creare ed aggiungere un tuo menù

Per aumentare ancora di più la possibilità di personalizzazione di un sito, WordPress ci mette a disposizione i menù personalizzati, ovvero menù dove puoi decidere cosa mostrare, ad esempio la pagina Home, Contatti, Chi sono, le categorie e link a qualsiasi pagina o articolo, sia del tuo sito che di altri… insomma, ci puoi inserire tutto ciò che vuoi! Ma la cosa ancora più bella è che possono essere posizionati dove desideri, solitamente sotto o a destra dell’header.

Purtroppo alcuni temi (solitamente quelli gratuiti) non supportano i menù personalizzati, ma niente paura. In questo articolo mostrerò come creare ed aggiungere un menù personalizzato in WordPress, anche per i temi che non hanno il supporto nativo per i menù. Infine ti mostro un del codice per dare un po’ di stile al tuo nuovo menù.

1. Capire se un tema supporta i menù personalizzati

Il primo passo da fare è capire se il tema supporta i campi personalizzati o meno. Vai su Aspetto > Menu >.

Se vedi questa schermata, senza un box giallo, allora ti sei salvato 🙂 il tuo tema supporta i menù personalizzati. Puoi andare direttamente al paragrafo “2. Creare un menù personalizzato in WordPress“.

Supporta i menù personalizzati

Se invece vedi questa schermata, con il box giallo con su scritto “Questo tema non ha il supporto nativo … bla bla bla”, il tuo tema non supporta i menù personalizzati.

Non supporta i menù personalizzati

1.1 Abilitare un tema per il supporto ai menù personalizzati

Ti è andata male è? Dai che fra qualche minuto il tuo tema supporterà i menù personalizzati!

Innanzitutto fai una copia di backup del file functions.php del tema. Devi semplicemente copiare sul tuo computer questo file, scaricandolo via FTP. Altrimenti, non creare il file di backup (scelta non consigliata), ma potrebbero presentarsi dei problemi… uomo avvisato, mezzo salvato 🙂

Dopodichè vai su Aspetto > Editor > functions.php . In fondo al file, prima della chiusura del tag del php ?> , incolla il seguente codice:

[php]
if ( function_exists( ‘register_nav_menus’ ) ) {
register_nav_menus(
array(
‘primary’ => ‘Primary Menu’,
)
);
}
[/php]

Ora clicca sul pulsante Aggiorna. Hai già abilitato il tuo tema a supportare i menù personalizzati!

Come vedi, hai creato un menù chiamato “Primary Menu” , con il nome univoco “primary”. Questi due nomi possono essere cambiati a piacimento.

Puoi anche preparare il tema per due o più menù, così uno lo userai per l’header, e l’atro per il footer (è un’idea), semplicemente aggiungendoli come hai fatto con il primo. Ad esempio, se volessi inserire un secondo menu chiamato “Secondary Menu”, utilizza questo codice al posto di quello di prima:

[php]
if ( function_exists( ‘register_nav_menus’ ) ) {
register_nav_menus(
array(
‘primary’ => ‘Primary Menu’,
‘secondary’ => ‘Secondary Menu’,
)
);
}
[/php]

2. Creare un menù personalizzato in WordPress

Vai su Aspetto > Menu > e inserisci il nome che vuoi dare al menù, ad esempio, io inserirò il nome Menu Header.

Menu Header

Come vedi, il menù Menu Header è stato creato (1). È importante sottolineare che puoi creare un numero illimitato (o quasi) di menù, premendo sulla linguetta +, ma puoi mostrarne solamente un numero limitato, a seconda di quanti menù supporta il tema (solitamente uno o due). Il numero di menù supportati dal tema può essere ampliato seguendo il paragrafo 1.1 di questo articolo.

In Posizione dei temi (2) sono presenti le tendine dei menù che supporta il tema. Avrai tante tendine quanti sono i menù supportati dal tema. In questo caso, un solo menù, chiamato “Primary Menu”.

Per la tendina “Primary Menu”, seleziona il menù che vuoi che compaia tra tutti quelli che hai creato, ad esempio Menu Header.

Ora è il momento di riempire il menù 🙂 È molto facile. Seleziona nella parte sinistra della schermata cosa vuoi che venga visualizzato nel menù, in particolare:

  • Link personalizzato: permette di inserire un link a qualsiasi URL (indirizzo) di qualsiasi pagina od articolo del web. Ad esempio puoi linkare la tua homepage (http://www.nome-sito.it/) assegnando la parola Home all’Etichetta (che viene mostrata nel menù), oppure un articolo molto importante del tuo blog, una risorsa esterna (ad esempio il mio blog ;))… insomma, ti puoi sbizzarrire.
  • Pagine: puoi aggiungere al menù le pagine del tuo sito, come ad esempio Chi sono e Contatti.
  • Categorie: puoi aggiungere al menù le categorie del tuo sito, utile perchè mostrano tutti i post della categoria in questione.

Puoi modificare l’ordine di visualizzazione tramite Drag&Drop, ovvero trascinando le etichette su è giù, come si fa con i widget.

Creare un menù

Puoi anche creare un sottomenù (solitamente supportato da tutti i temi), che normalmente vengono visualizzati nel sito passando col mouse sopra al genitore dei sottomenù. Nella figura, il genitore è l’etichetta Blog, mentre i sottomenù sono WordPress e Social Media (2). Per farlo, basta trascinare a destra l’etichetta desiderata (ad esempio WordPress e Social Media).

È possibile impostare molte opzioni per questi link, come la classe CSS, il target (vuoi aprire il link in una nuova finestra?), la descrizione, basta cliccare su Impostazioni schermo (1) e selezionare le opzioni desiderate.

Impostazioni schermo menù

  • È importante selezionare l’opzione Relazione tra link, così verrà visualizzata l’opzione per inserire il tag rel= nel codice del link. Utile per inserire il tag rel=”nofollow” per non passare pagerank al contenuto linkato.
  • L’opzione Destinazione link permette di scegliere se aprire il link in una nuova finestra.
  • L’opzione Classi CSS permette di assegnare al link una classe, utile per modificare l’aspetto di ogni singola linguetta (ad esempio mostrarla in rosso per mettere in evidenza un nuovo contenuto).
  • L’opzione Descrizione permette di inserire la descrizione del link, funzione utilizzata da qualche tema (come gli per i temi Elegant Themes).

Etichette menu personalizzati

Quando hai finito, Salva il menù!

3. Mostrare il menù personalizzare nel sito

Se hai abilitato il tuo tema al supporto ai menù personalizzati oppure vuoi scegliere di mostrare il menù in un punto ben preciso del tema, allora incolla il seguente codice dove vuoi che venga mostrato.

Nell’esempio mostrerò il menù personalizzato appena sotto l’header, quindi incollerò il codice in Aspetto > Editor > header.php dopo che viene mostrato il logo, solitamente richiamato con <div id=”logo”>…</div>.

[php]
<?php wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’ ) ); ?>
[/php]

Dove al posto di primary devi mettere il nome univoco che hai dato al menù al paragrafo 1.1 (oppure al nome univoco che usa il tuo tema, se era già predisposto per i menù personalizzati). Al posto di menu-header puoi metterci quello che vuoi, è il nome della classe che viene assegnata al contenitore del menù, utile per modificare lo stile (l’aspetto grafico) del menù stesso tramite CSS.

4. Un po’ di Stile e menù DropDown

Se il tema non prevede uno stile per il menù, vedrai il tuo nuovo menù come una lista puntata molto brutta da vedere. Diamogli un po’ di stile!

Vai su Aspetto > Editor > style.css ed incolla nell’ultima riga il seguente codice:

[css]
/* Stile della barra principale di navigazione */

.menu-header {
background: #f9f9f9; /* colore di sfondo per i vecchi browser */
background: -moz-linear-gradient(#f9f9f9, #ccc);
background: -o-linear-gradient(#f9f9f9, #ccc);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#ccc)); /* sintassi webkit vecchia */
background: -webkit-linear-gradient(#f9f9f9, #ccc);
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
width: 100%;
}

/* Stile del menù principale */

.menu-header ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -10px;
padding-left: 0;
}
.menu-header li {
float: left;
position: relative;
}
.menu-header a {
color: #333;
display: block;
line-height: 45px;
padding: 0 15px;
text-decoration: none;
}

/* Stile dei sottomenù */

.menu-header ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
margin: 0;
position: absolute;
top: 43px;
left: 0;
width: 188px;
z-index: 99999;
}
.menu-header ul ul ul {
left: 100%;
top: 0;
}
.menu-header ul ul a {
background: #f9f9f9;
border-bottom: 1px dotted #ddd;
color: #000;
font-size: 13px;
font-weight: normal;
line-height: 25px;
padding: 10px 10px;
width: 168px;
}
.menu-header li:hover > a,.menu-header ul ul :hover > a,.menu-header a:focus {
background: #efefef;
}
.menu-header li:hover > a,.menu-header a:focus {
background: #f9f9f9;
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5));
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color: #000;
}
.menu-header ul li:hover > ul {
display: block;
}

/* Stile della pagina attuale */

.menu-header .current-menu-item > a,
.menu-header .current-menu-ancestor > a,
.menu-header .current_page_item > a,
.menu-header .current_page_ancestor > a {
font-weight: bold;
}
[/css]

Dì la tua

Sei riuscito ad inserire i menù personalizzati? Hai visto che comodità? Hai suggerimenti da dare a tutti? Scrivi tutto ciò che ti passa per la testa nei commenti qui sotto 🙂

VUOI CREARE IL TUO SITO O BLOG WORDPRESS?

Scegli uno tra i migliori hosting per WordPress

HOSTING

Scegli uno tra i migliori hosting per WordPress

Hosting

Scegli uno tra i migliori temi WordPress professionali

GRAFICA

Scegli uno tra i migliori temi WordPress professionali

Grafica

Guide e risorse per gestire il sito WordPress a 360°

GESTIONE

Guide e risorse per gestire il sito WordPress a 360°

Gestione
  
con le dita sempre in costante, frenetico movimento sulla tastiera… vengo spesso trascinato e catturato “in rete” per colpa delle mille idee che mi girano per la testa (prima o poi troverò quella giusta)… dal futuro incerto (nonostante una laurea, e chi non lo è?..siamo in tanti!) .. credo fortemente nella condivisione della conoscenza!
45 Commenti
  • Si ci sono riuscito….ma ho un dubbio…se vedi sul blog Vision&Mission e le Nostre rubriche vanno bene (così devono andare)
    ma nel MEN§ mi sono creato anche le rispettive pagine….ho sbagliato? sono superflue e le devo eliminare giusto?
    Non chiedermi perchè le ho fatte…non ricordo 😉

    • Roberto Iacono

      Non ho capito, nel menù non puntano a niente… devi aver già sistemato 🙂

  • Ciao Roberto,
    complimenti per il sito, molto utile! 😉
    Ho notato che quasi in tutti i temi a pagamento il secondo livello dei menu è sempre a tendina, è possibile modificare da codice questa funzione rendendo il secondo livello non a tendina ma posizionato orizzontalmente sotto la voce di primo livello? Dipende dai temi o è una funzione css modificabile facilmente?

    • Roberto Iacono

      Ciao Elena, è possibile fare tutto ciò che vuoi, devi solo capire cosa modificare.
      Ci sono molti esempi in rete per mostrare un menù a tendina però in orizzontale (cerca ad esempio “menù secondo livello orizzontali”. In alternativa, puoi anche realizzare un menù secondario ed inserirlo manualmente nel tema…

      Ciao

  • ciao ascolta io vorrei creare un menù diviso in due sezioni, ovvero mi spiego meglio un menù ad esempio serie a ( dove raccogliere tutti gli articoli sulla serie a) e un menù champions l(dove raccogliere tutti gli articoli sulla champions come devo fare?

    • Roberto Iacono

      Se inserisci tutti gli articoli in due categorie, serie A e serie B, ottieni questo risultato. Ma non è un menù. Poi puoi inserire il collegamento alle due categorie nel menù principale.

      Altrimenti crei semplicemente due menù come ti ho mostrato nel secondo codice.
      Poi al primo assegni a ciascun plugin gli articoli che vuooi (a mano).

  • Ciao e mille complimenti. Ho un problema: sto creando un menu personalizzato e funziona bene… ma ho raggiunto il limite massimo e non sono neanche a metà del lavoro! è possibile aumentare il numero di voci del menu?

    grazie di cuore!

    Fabio

    • Roberto Iacono

      Ciao Fabio,
      dovrebbe essere una limitazione del server, fai il backup del file .htacccess e poi aggiungi questa riga (sostituendo la precedente):

      php_value max_input_vars 2000

      in alternativa puoi chiedere di impostare queste variabili nel file php.ini

      suhosin.post.max_vars = 5000
      suhosin.request.max_vars = 5000

      Facci sapere

  • Ciao Roberto, rieccomi in un’altra sezione del tuo sito 😉 Ho un template che non ha i menù personalizzabili.Ne ha uno solo primario.
    Con le tue indicazioni ho modificato function.php e infatti adesso ho anche “extra menu” come secondo menù :)). Il mio problema è integrarlo nella pagina (una sola) che voglio !. In pratica ho creato la pagina (che è una pagina standard) nella quale c’è un testo e dopo il testo vorrei inserire il menù nuovo. Come faccio? tenuto conto che di pagine standard ne ho tante e mi serve in una sola di queste. Potrei creare per questo menù un articolo, invece di una pagina,ma come faccio a dire alla “single.php” che il menù va dopo il testo dentro un box?
    Grazie in anticipo!
    cristina

    • Roberto Iacono

      Ciao Cristina,
      puoi inserirlo ia nella pagina che negli articoli, ma non è così immediato e semplice.

      Per la pagina puoi creare un template di pagina apposito dove aggiungi il codice per mostrare il menù: http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates

      Altrimenti puoi anche creare un articolo, inserendo il codice all’interno di una condizione if.
      In poche parole, la prima idea che mi viene in mente è che puoi creare un campo personalizzato per quell’articolo con valore X e poi:

      if (contenuto del campo personalizzato == X ){
      AGGIUNGI IL CODICE DEL MENU
      }

  • Ciao Roberto,
    grazie per l’utile articolo.

    Ho provato a seguirlo con un template di ET ma ho riscontrato un problema in frontend si vede il secondo menù, ma anche questo errore:
    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘et_register_main_menus’ not found or invalid function name in /home2/abwebdes/public_html/beta/wp-includes/plugin.php on line 406

    Alla linea 406 del file plugin.php non sembra esserci nulla che ha a che fare con il menu…
    Riesci ad aiutarmi?
    beta.abwebdesign.it/

  • Ciao Roberto,
    L’articolo mi è stato molto utile, senti se volessi aggiungere un file .js per dargli un effetto slowdown?
    Grazie

  • Ciao Roberto, grazie per i suggerimenti utilissimi, sono riuscito perfettamente ad integrare un nuovo menu sotto la testata, è perfetto ma vorrei cambiare i colori e la dimensione delle lettere del menu ma nonostante tutti i tentativi non ci sono riuscito, l’ho gia fatto con i menu di default del tema ma nella stringa da te indicata non ce la faccio, illuminami per favore,ancora GRAZIE !

    • Roberto Iacono

      Ciao Antonio,
      leggi https://www.robertoiacono.it/come-dove-modificare-wordpress/ per capire dove modificare WordPress. Poi utilizzi il codice CSS per cambiare i colori e dimensioni.

  • Ciao Roberto e complimenti per il blog,
    sono arrivata qui cercando una soluzione per il mio sito.
    Il mio template prevede un menù principale in alto che trovo utilissimo e facile da usare, ma vorrei escluderlo da una singola pagina.
    Sono una novellina del web e dei codici…puoi aiutarmi?
    grazie!
    Laura

    • Roberto Iacono

      Ciao Laura,
      leggi https://www.robertoiacono.it/come-dove-modificare-wordpress/ per capire dove trovare il codice che visualizza il menù. Modifica il codice nel seguente modo:

      <?php if (!is_page(ID DELLA PAGINA)) : ?>

      CODICE CHE MOSTRA IL PLUGIN

      <?php endif; ?>

      Ciao

  • grazie, articolo completo e interessante!

  • Ma se volessi inserire un “mail to:” per metterci il contatto mail come devo fare?

    • Roberto Iacono

      Non credo si possa fare, non sarebbe utile ai fini del menù. Puoi sempre aggiungerlo a mano dopo il menù modificando il file header.php

  • Grazie dei preziosi consigli, vengo spesso a trovare idee per wordpress, sei sempre chiaro e utile, il che è importante per una che come me si occupa di un blog sapendo poco di informatica! grazie

  • Ciao Roberto, ho trovato utilissime le tue guide! Grazie mille. Volevo sapere: se decidessi di inserire un menù sopra all’header e non sotto come hai specificato tu nel tutorial, in quale punto del codice dovrei intervenire?

    Grazie

    • Roberto Iacono

      Prova a leggere https://www.robertoiacono.it/come-dove-modificare-wordpress/, dovresti capire dove modificare

  • Ciao Roberto, innanzi tutto ti ringrazio per il materiale e la conoscenza che condividi con non comuni mortali 😛
    Ho da poco iniziato questa sfida con css, php, wp e devo dire che il tuo sito mi continua ad essere utile, purtroppo sono molto inesperto quindi faccio una fatica immane a comprendere alcune cose e a cercare in rete le informazioni più adatte, e qui entri in gioco te 😀
    Sto lavorando in locale, quindi non ho modo di mostrarti il sito, sul tema twenty twelve child. Ho modificato un po’ di css, e grazie alla rete ho aggiunto in functhion.php il codice per inserire il form di ricerca nella barra menu di testa, e sinceramente non so se sia la soluzione migliore, ne ho trovate altre ma non mi riesce di farle funzionare come voglio io. Il problema è che non so come integrare quel codice per ottenere la scritta “cerca” che scompare una volta cliccato nel box (ho eliminato l’immagine a fianco), inoltre vorrei che questo campo fosse ancorato all’estrema destra della barra menù.
    Altra cosa che non riesco a trovare, o meglio ho trovato una soluzione ma si riferisce ad una vecchia versione di wp che non funziona con l’attuale, è come eliminare la dicitura “Questo articolo è stato pubblicato in CATEGORIA il” che compare al di sotto degli articoli e non sarebbe male poter eliminare anche la scritta “lascia un risposta” che compare in testa all’articolo.

    Il codice che ho inserito per il box ricerca è questo:
    <?php
    add_filter('wp_nav_menu_items','add_search_field', 10, 2);
    function add_search_field($items, $args) {

    ob_start();
    get_search_form();
    $searchform = ob_get_contents();
    ob_end_clean();
    $items .= '’ . $searchform . ”;
    return $items;
    }

    • Roberto Iacono

      Vuoi un campo cerca nella sidebar laterale? In teoria il tema che hai indicato nasce già con la sidebar attiva, quindi basta che usi il widget Cerca… molto semplicemente.

      Per gli altri codici, cerca nei file single.php e comment.php… al massimo lascia in bianco la traduzione nel ifle di lingua it_IT.po che trovi nella cartella languages

      • Intanto grazie per la risposta immediata 😀
        Per quanto riguarda l’eliminazione delle scritte credo di aver risolto, ma guarderò anche quanto mi hai suggerito. Per il campo di ricerca, il codice che ho inserito e che non ha mantenuto l’indentatura, lo fa inserire nel menù di testata, non nella side bar, quello che voglio fare io è inserire un “cerca” all’interno del box, che poi scompare nel momento in cui l’utente ci clicca dentro e inizia a digitare la parola da ricercare nel sito.
        Grazie infinite 🙂

        • Roberto Iacono

          Ciao Paolo,
          usa

          onblur=”if (this.value == ”) {this.value = ‘To search, type and hit enter’;}” onfocus=”if (this.value == ‘To search, type and hit enter’) {this.value = ”;}”

          nel campo input

  • Salve a tutti, ma se dovessi modificare il collegamento di una voce di menù
    es. da collegamento a categoria a collegamento ad articolo è possibile?
    o semplicemte da una categoria ad’un altra??
    Grazie
    😉

    • Roberto Iacono

      Sì, crea il collegamento personalizzato (e non utilizzare il “menù categoria”)

  • salve..dunque dovrei mettere delle pagine relative a 9 diversi argomenti sulla pagina che sto creando con w.press..come le classifico..come pagine o come categorie? inoltre cercando di aggiungere delle pagine mi dice sempre come nome “about” e basta…nn me lo fa cambiare e aggiungendolo mi ritrovo una quantità di “about”!! dunque dovrei inserire appunto nominativi diversi relativi a diverse pagine..come posso fare?
    per le categorie invece come funziona? sono sempre collegamenti di pagine?
    grazie
    andrea

    • Roberto Iacono

      Se devi creare delle pagine, crea 9 pagine, altrimenti, se devi creare delle categorie a cui poi associare degli articoli (e mostrare tutti gli articoli) crea 9 categorie.

      Non è normale che non ti faccia cambiare “about”

  • Ciao!
    Io vorrei disabilitare i menu a tendina. vorrei quindi lasciare solo i link alle pagine genitore sotto l’header… c’è un modo per farlo? grazie mille!

    • Roberto Iacono

      Scusa Marco, ti puoi spiegare meglio?

  • Ciao Roberto! articolo molto utile:) ma non riesco a inserire i sottomenù :/

    • Roberto Iacono

      I menù a tendina o un secondo menù?

  • Ho una PAGINA ( silviafossi. it/adozione-cani/ ) Sotto questa pagina, vorrei legarci la CATEGORIA cani e quindi, sotto la categoria cani, tutti gli ARTICOLI che scriverò sui cani. In modo da avere questo: silviafossi.it /adozione-cani/cani/titolo articolo
    In altre parole, quando aprirò la CATEGORIA, avrò silviafossi. it/adozione-cani/cani/ e lì ci troverò tutti gli articoli.

    Volevo averee una pgina di benvenuto diciamo dove spiego di cosa tratto (cani) e poi legarci la sua categoria. Ma da quel capisco fin qui, non è possibile. Mi illumini?

    • Roberto Iacono

      Ciao Silvia, dovresti impostare/creare un template di pagina personalizzato, non è così semplice se sei agli inizi: http://codex.wordpress.org/Page_Templates

  • Ciao Roberto, ho fatto come dici, ma vorrei che al posto di “About” – ad esempio – comparisse un’icona.
    Ho chiamato “About” .nav-about e ho inserito l’immagine con il css, ma non funziona. Dove sbaglio?

  • Ciao Roberto, innanzitutto grazie per le guide che ci offri, sto cambiando tema nel mio blog e ho notato che in questo nuovo template non è abilitato il menu a tendina (cioè passando con il mouse sopra ad un genitore, si dovrebbe vedere la discesa della tendina con altri link). trascino verso destra l’etichette desiderate ( come hai spiegato tu), ma non si inserisce come sotto menù (a cascata), mi puoi aiutare.

    Spero di essermi spiegato bene..

    • Roberto Iacono

      Ciao Antonio,
      puoi provare a seguire http://codex.wordpress.org/Navigation_Menus

  • ciao ho un problema enorme con il mio blog mi da questo errore Parse error: syntax error, unexpected $end in /membri/nome/wp-content/themes/Canyon/functions.php on line 225

  • ciao ho un problema enorme con il mio blog mi da questo errore Parse error: syntax error, unexpected $end in /membri/nome/wp-content/themes/Canyon/functions.php on line 225
    ho solo aggiunto le stringhe del 1.1

  • risolto tutto