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“.

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.

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.

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.

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.

• È 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).

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 🙂