Dalla versione 3.0 di WordPress è possibile sfruttare la nuova e utilissima funzione per la creazione di menu personalizzati. In diverse discussioni nei forum ho riscontrato che molti utenti trovano difficoltà sia nella creazione del menu lato amministrazione che nell’implementazione del codice qualora il tema non lo supporti. Bene…è giunto il momento di fare un po di chiarezza su questi benedetti Menu una volta per tutte.
Il mio tema supporta i Menu Personalizzati?
Come detto in precedenza nonostante le ultime versioni di WordPress abbiano implementato questa funzione e appaia di default nel widget Aspetto > Menu la risposta è dipende dal tema che stai usando. In effetti se il tuo tema non supporta questa funzione potrai usarli solamente nei widget nella sidebar e non come menu orizzontale di navigazione solitamente posto nell’header del sito. Come fare a capire se il tuo tema li supporta? Con un semplice gioco delle differenze mettendo a confronto le immagini qui sotto 🙂
MENU NON SUPPORTATO DAL TEMA IN USO
Verrà visualizzato il messaggio “Questo tema non ha il supporto nativo…”. Per verificare ulteriormente prova a creare un menu, l’operazione avrà successo ma come vedi nel box Posizione dei temi potrà essere visibile solamente nei widget laterali.
MENU SUPPORTATO CORRETTAMENTE DAL TEMA
In questo caso non verrà visualizzato nessun messaggio di limitazione e creando il nostro menu sarà visibile nel solito box Posizione dei temi la conferma che il nostro tema supporta questa funzione.
Implementazione del codice in functions.php
Per attivare la funzione register_nav_menus nel tuo tema agirai come al solito inserendo delle stringhe in functions.php quindi apri il file con un editor e incolla il codice che vedi qui sotto:
[php]if ( function_exists( ‘register_nav_menus’ ) ) {
register_nav_menus(
array(
‘navtop’ => ‘Menu Top’,
‘navbottom’ => ‘Menu Bottom’,
)
);
}[/php]
Il codice appena visto ti da la possibilità di inserire più di un Menu, in questo caso 2. Per comodità di apprendimento ho chiamato i menu: Menu Top e Menu Bottom presupponendone un eventuale inserimento nell’header e l’altro nel footer del sito. Naturalmente potrai usarne uno solo, entrambi o anche aggiungerne degli altri a tua indiscrezione, l’importante sarà come vedremo in seguito richiamarli correttamente nel punto dove verranno visualizzati. Da precisare che il numero di menu attivati tramite la funzione in functions.php (nell’esempio citato 2) non ha nulla a che vedere con il numero di menu che si possono creare in amministrazione (Aspetto > Menu). Potrai crearne anche 100 in amministrazione ma nella struttura del sito ne verranno posizionati solo 2 o comunque tanti quanti ne avrai implementati in function.php, capirai meglio questo concetto semplicemente visualizzando il box Posizione dei temi.
Implementazione del codice in header.php
Perché il menu possa essere visualizzato sarà necessario inserire un richiamo alla nostra funzione nel file header.php in questo modo:
[php]
[/php]
Per richiamare il secondo menu per esempio posizionato nel footer ti basterà cambiare navtop con navbottom.
Un po di style e al funzione Drop-down
Ora che la struttura è stata inserita non ti resta che dare un po di style al menu e magari aggiungere la funzione Drop-down o menu a tendina in modo da visualizzare eventuali sottopagine o sottocategorie a cascata. Questo è il codice:
[css]/* =Menu
————————————————————– */
#access {
background: #000;
display: block;
float: left;
margin: 0 auto;
width: 940px;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
width: 928px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float: left;
position: relative;
}
#access a {
color: #aaa;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #333;
color: #fff;
}
#access ul li:hover > ul {
display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #fff;
}[/css]
Creazione del menu lato admin
Per la creazione del menu puoi vedere questo semplice video (non metterti a ridere per la qualità, è il primo in assoluto che faccio :-)). L’unico passo importante, a volte non molto intuitivo nella creazione del menu, può essere quello della creazione dell’effetto Drop-down (menu a tendina). Come vedi dal video basta eseguire un semplice drag and drop della sottocategoria spostandola nella posizione della categoria principale che desideri trascinandola verso destra.
