Tutorial sul tema WordPress per principianti – Parte 9: menu e aree widget
Questa lezione spiega come aggiungere due funzionalità principali di WordPress al nostro tema; menu e aree widget. Impariamo come registrare una posizione per il menu di navigazione principale di un sito e visualizzare il menu nei nostri modelli, oltre a consentire l’aggiunta di widget nella nostra barra laterale e nell’area del piè di pagina.
Gli appassionati di te potrebbero aver notato che né "Menu" né "Widget" sono accessibili dal menu "Aspetto" nel pannello di amministrazione. Questo perché il nostro tema non li supporta ancora. Lo risolveremo in questa lezione, a partire dai menu .
Menu WordPress
Ci sono due parti nell’aggiunta di menu nel tuo tema. Per prima cosa devi definire una o più posizioni di menu nel tuo file functions.php. Un esempio è un menu principale che sarà nell’intestazione di tutte le pagine. La seconda parte consiste nell’aggiungere del codice nel punto in cui si desidera venga visualizzato il menu. Ad esempio nel header.phppunto in cui vuoi posizionare il menu principale.
In questo tutorial aggiungeremo una posizione di menu per la navigazione principale del sito e collocheremo il suo output nel nostro file header.php. Iniziamo con la registrazione della posizione in functions.php, che viene eseguita utilizzando la funzione register_nav_menu :
add_action('init', 'wptutorial_register_menu');
function wptutorial_register_menu() {
register_nav_menu('main-nav', __('Main Navigation', 'wptutorial'));
}Dobbiamo agganciarci all’hook init, che WordPress ha deciso essere un buon "punto di controllo" per la registrazione delle posizioni dei menu. All’interno della nostra funzione chiamiamo register_nav_menu()che accetta un minimo di due parametri; l’handle del menu che è uno slug univoco che utilizzerai come identificatore durante il rendering del menu e il nome visibile del menu che appare nel pannello di amministrazione. Nota che ho racchiuso il nome all’interno __()per renderlo traducibile, come abbiamo appreso nel passaggio precedente.
Se aggiorni il tuo pannello di amministrazione, ora dovresti vedere una nuova voce di sottomenu sotto "Aspetto"; “Menù". Congratulazioni, il tuo tema ora supporta la creazione di menu!
Se non hai familiarità con la creazione e l’amministrazione di menu in WordPress, questa è una buona guida per te.
Crea un nuovo menu in "Aspetto > Menu": può contenere tutto ciò che vuoi, ho appena aggiunto i post fittizi che avevo creato nel mio WordPress.
Dopo aver salvato il tuo primo menu, una nuova sezione chiamata "Impostazioni menu" apparirà sotto l’area di modifica del menu, che ti consente di scegliere una posizione per questo menu. Dovrebbe elencare una posizione disponibile, che è quella che abbiamo creato; “Navigazione principale”.
Metti un segno di spunta in "Navigazione principale" e premi Salva. Ora il menu appena creato è collegato alla posizione e verrà visualizzato automaticamente ovunque si aggiunge il codice per l’output di questa posizione del menu. Facciamolo ora.
Apri header.phpe ovunque desideri che l’output del menu sia, aggiungi una chiamata a wp_nav_menu(). Questa funzione accetta un sacco di argomenti in un array per personalizzare davvero l’output del menu. Soprattutto, abbiamo bisogno del parametro che gli dice di recuperare la posizione "Navigazione principale". Per farlo aggiungiamo l’argomento ‘ theme_location‘ e lo impostiamo sulla maniglia del nostro menu; ‘ main-nav‘.
Ho aggiunto l’output del menu subito dopo l’inizio del <body>tag, ma se hai arricchito i tuoi modelli con HTML, decidi tu stesso dove vuoi che appaia il menu.
Aggiorna il tuo frontend e dovresti vedere il menu che hai creato in admin visualizzato come un elenco non ordinato all’inizio del modello.
Come al solito, ti incoraggio a scavare un po’ più a fondo nei parametri wp_nav_menunella documentazione di WordPress Codex per questo e a giocare con come vuoi che sia l’output. Ad esempio: puoi fare in modo che non venga visualizzato in un elenco HTML, puoi limitare le voci di menu solo a determinati livelli (per evitare sottomenu) e altro ancora.
Se sei curioso della parte stilistica; dai un’occhiata alle classi che WordPress aggiunge automaticamente a ciascuna voce di menu. Sarai in grado di aggiungere facilmente stili per voci di menu attive, voci con voci figli, voci principali di voci figlie attive, ecc.
Nota: qualsiasi utente del tema può sempre creare più menu e scegliere di visualizzarli al di fuori delle posizioni registrate di un tema utilizzando i widget. Tuttavia, per fare ciò, il tuo tema deve definire alcune aree dei widget! Facciamolo dopo.
Aree widget
Le aree widget funzionano in modo abbastanza simile nel modo in cui funzionano i menu. Registri una posizione (per i widget definisci un’area in cui l’utente del tema può inserire i widget) e ovunque desideri che la posizione/area appaia nei tuoi modelli aggiungi un po’ di codice che si riferisce all’id dell’handle che hai fornito nel tuo codice di registrazione.
Definiamo un’area widget nella nostra barra laterale e una nel footer. È comune che i temi forniscano più aree widget nel piè di pagina per dividerli bene in colonne, ma in questo tutorial ne aggiungeremo solo uno al piè di pagina.
Le aree dei widget sono denominate "barre laterali" nel codice di WordPress, ma non è esclusivamente per la barra laterale destra dei vecchi tempi nei siti Web. Sembra che un nome legacy sia rimasto bloccato da un’epoca in cui i siti Web di solito avevano solo un’area widget nella barra laterale. Non pensare che le "barre laterali" possano riferirsi solo alle barre laterali effettive.
Registra aree widget
Iniziamo registrando due aree widget nel nostro functions.php. Utilizziamo la funzione register_sidebarper registrare le nostre barre laterali, agganciate widgets_initall’hook, che WordPress ha definito il miglior hook per registrare aree widget (e widget personalizzati).
La register_sidebar()funzione accetta un bel po’ di argomenti, come minimo sono necessari gli argomenti ‘id’ e ‘name’. Sono disponibili parametri per definire come si desidera che vengano emessi i wrapper HTML del widget.
Aggiorna il tuo pannello di amministrazione e ora dovresti vedere la voce di menu "Widget" apparire sotto "Aspetto". Nel pannello di amministrazione "Widget" puoi vedere due aree widget disponibili nell’area destra; che è la nostra "Area widget barra laterale" e "Area widget piè di pagina".
Posiziona un widget casuale nella nostra barra laterale o nell’area widget del footer, solo così puoi vederlo in azione.
Output di un’area widget in un modello
L’ultima parte è l’output delle aree dei widget nei nostri modelli. Per fare ciò utilizziamo la funzione dynamic_sidebar()e forniamo l’handle come parametro. Apri sidebar.phpe aggiungi quanto segue all’interno dei <aside>tag:
Si noti che l’ho racchiuso in un tag elenco non ordinato (<ul>). Questo perché di default dynamic_sidebaremette tutti i widget racchiusi negli <li>elementi. Ti incoraggio a giocare con i parametri di output se non ti piace che i widget siano un elenco.
Per quanto riguarda il footer, lo aggiungiamo proprio all’inizio di footer.php, avvolto all’interno di un <footer>tag (se lo desideri).
Questo è tutto per i menu e le aree dei widget. Il tuo tema ora ha la flessibilità dell’utente di creare un nuovo menu e utilizzare un widget per visualizzarlo nella barra laterale o nel piè di pagina. Nella prossima lezione di questa serie di tutorial creeremo più modelli per il nostro tema.