Oggi riparte a pieno regime anche la guida alla realizzazione di temi WordPress.
Nell’ultimo tutorial abbiamo visto cosa sono i menù personalizzati, e come implementarli nel codice del nostro tema.
In questo articolo scopriremo come funziona, a livello pratico, il pannello Menù.
 

Creiamo il menu

 
Adesso il nostro tema è predisposto per i menù personalizzati: se espandiamo la scheda Aspetto troviamo la voce Menu:

Cliccando sulla voce Menu visualizziamo la seguente schermata:

Al momento è tutto disattivato poiché non è ancora stato creato nessun menù.
 
Innanzitutto inseriamo il nome che vogliamo attribuire al nostro menù nell’apposito spazio (in questo caso lo chiameremo Top), dopo di che clicchiamo sul pulsante Creazione Menu.

Una volta che il primo menù è stato creato, la pagina si sbloccherà e potremmo accedere a tutte le funzionalità del pannello Menù.
 
Per prima cosa dobbiamo scegliere in quale posizione all’interno del tema vogliamo visualizzare il menù appena creato.

Nel box Posizione temi la scelta ricade su due menù.
Nello scorso tutorial, infatti, avevamo predisposto il tema per supportare due menù, che abbiamo dichiarato all’interno del file functions.php ed abbiamo chiamato, appunto, Menu Uno e Menu Due.
 

1
2
3
4
5
6
7
8
9
10

< ?php
if ( function_exists( 'register_nav_menus' ) ) {
    register_nav_menus(
        array(
        'nav_uno' => 'Menu Uno',
        'nav_due' => 'Menu Due',
        )
    );
}
?>

Di questi due menù, per il momento, abbiamo implementato soltanto il Menu Uno all’interno del tema. Abbiamo inserito la seguente stringa nell’header, esattamente nel punto in cui vogliamo che venga visualizzato il menù:
 

1
2
3

<!--Inizio NAVIGAZIONE-->
        < ?php wp_nav_menu( array( 'container_class' => 'menu', 'theme_location' => 'nav_uno' ) ); ?> 
<!--Fine NAVIGAZIONE-->

Di conseguenza non possiamo che abbinare il menù Top, che abbiamo appena creato, alla posizione Menu Uno.
 
Per fare un po’ di chiarezza: dobbiamo considerare Menu Uno come una sorta di amo da pesca, posizionato nel punto prescelto del tema. A questo amo dobbiamo agganciare il menù Top, che è il menù vero e proprio, all’interno del quale andremo ad inserire i contenuti.

 

Inseriamo i contenuti

 
Dopo aver agganciato il menù Top alla posizione desiderata, possiamo cominciare ad inserire i contenuti.
Abbiamo tre box che ci consentono di inserire diverse tipologie di contenuti:

Nella sezione Link personalizzati possiamo aggiungere link che puntano a pagine esterne al nostro sito, come ad esempio un blogroll, una selezione di siti preferiti o di articoli che possano interessare i nostri lettori creando così un valore aggiunto.
 
La sezione Pagine riguarda le pagine statiche presenti nel nostro sito, possiamo selezionare quelle che ci interessano e trascinarle nel menù.
Idem per quanto riguarda la sezione Categorie: possiamo selezionarle tutte oppure raggrupparne soltanto una parte all’interno del nostro menù.
 
Per riprodurre l’header del tema che abbiamo disegnato (qui), dobbiamo creare le pagine statiche About e Contatti.

Nel menù laterale selezioniamo Pagine – Aggiungi nuova, ed aggiungiamo le due pagine:

Torniamo in Aspetto – Menu: nel box Pagine adesso troviamo le due pagine appena create.

Per aggiungere al menù anche la voce Home clicchiamo su Mostra tutti, spuntiamo le caselline delle pagine che intendiamo aggiungere e clicchiamo sul pulsante Aggiungi al menu.

Nella scheda centrale possiamo visualizzare e gestire i contenuti di tutti i nostri menù:

 

Gestiamo i contenuti

 
All’interno della scheda del menù tutte le voci sono mobili, cioè possiamo riposizionarle semplicemente trascinandole nell’ordine desiderato.
Possiamo ordinarle verticalmente, dall’alto verso il basso, per stabilire l’ordine in cui verranno visualizzate nel tema.
 
Inoltre, trascinando una voce verso destra possiamo agganciarla alla voce superiore creando così un menù a due (o più) livelli.
 
Nell’esempio qui sotto abbiamo un menù a tre livelli, in cui la voce principale è Home, About è la voce di secondo livello agganciata ad Home, e Contatti è la voce di terzo livello agganciata ad About.

In quest’altro esempio, invece, abbiamo un menù a due livelli: Home e Contatti sono voci di primo livello, mentre About è una voce di secondo livello agganciata ad Home.

 
Ultimo tip: se espandiamo le voci del menù, cliccando sul triangolino che vedi cerchiato nello screenshot qui sotto, si apre una scheda che ci permette di gestire vari parametri in base alla tipologia di contenuto: per quanto riguarda i link esterni, ad esempio possiamo modificarne il percorso, l’ancora ecc…

Nel caso delle pagine statiche possiamo modificare l’etichetta di navigazione, cioè la parolina che vogliamo visualizzare nel menù, che non necessariamente deve combaciare con il titolo della pagina, e l’attributo titolo, meglio conosciuto come attributo title del tag a, ossia quella piccola didascalia che compare sotto il link allo stato hover.

 
Benissimo, con questa puntata l’header del tema a cui stiamo lavorando è completato:

Nel prossimo tutorial inizieremo a parlare del famoso loop di WordPress.