{"id":233891,"date":"2023-02-23T10:00:00","date_gmt":"2023-02-23T07:00:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233891"},"modified":"2022-11-11T13:01:49","modified_gmt":"2022-11-11T10:01:49","slug":"tutorial-sul-tema-wordpress-per-principianti-parte-9-menu-e-aree-widget","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/tutorial-sul-tema-wordpress-per-principianti-parte-9-menu-e-aree-widget\/","title":{"rendered":"Tutorial sul tema WordPress per principianti \u2013 Parte 9: menu e aree widget"},"content":{"rendered":"\n

Questa lezione spiega come aggiungere due funzionalit\u00e0 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\u00e8 di pagina.<\/p>\n

Gli appassionati di te potrebbero aver notato che n\u00e9 "Menu" n\u00e9 "Widget" sono accessibili dal menu "Aspetto" nel pannello di amministrazione. Questo perch\u00e9 il nostro tema non li supporta ancora. Lo risolveremo in questa lezione, a partire dai menu .<\/p>\n

Menu WordPress<\/h2>\n

Ci sono due parti nell’aggiunta di menu nel tuo tema. Per prima cosa devi definire una o pi\u00f9 posizioni di menu nel tuo file functions.php<\/code>. Un esempio \u00e8 un menu principale che sar\u00e0 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.php<\/code>punto in cui vuoi posizionare il menu principale.<\/p>\n

Registrazione di una posizione di menu<\/h3>\n

In questo tutorial aggiungeremo una posizione di menu per la navigazione principale del sito e collocheremo il suo output nel nostro file header.php<\/code>. Iniziamo con la registrazione della posizione in functions.php<\/code>, che viene eseguita utilizzando la funzione register_nav_menu<\/a> :<\/p>\n

add_action('init', 'wptutorial_register_menu');\nfunction wptutorial_register_menu() {\n    register_nav_menu('main-nav', __('Main Navigation', 'wptutorial'));\n}<\/code><\/pre>\n
Dobbiamo agganciarci all’hook init<\/code>, 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()<\/code>che accetta un minimo di due parametri; l’handle del menu che \u00e8 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 __()<\/code>per renderlo traducibile, come abbiamo appreso nel passaggio precedente<\/a>.<\/p>\n
\"Tutorial<\/a><\/p>\n
Se aggiorni il tuo pannello di amministrazione, ora dovresti vedere una nuova voce di sottomenu sotto "Aspetto"; “Men\u00f9". Congratulazioni, il tuo tema ora supporta la creazione di menu!<\/p>\n
Se non hai familiarit\u00e0 con la creazione e l’amministrazione di menu in WordPress, questa \u00e8 una buona guida<\/a> per te.<\/p>\n
Crea un nuovo menu in "Aspetto > Menu": pu\u00f2 contenere tutto ci\u00f2 che vuoi, ho appena aggiunto i post fittizi che avevo creato nel mio WordPress.<\/p>\n
Dopo aver salvato il tuo primo menu, una nuova sezione chiamata "Impostazioni menu" apparir\u00e0 sotto l’area di modifica del menu, che ti consente di scegliere una posizione per questo menu. Dovrebbe elencare una posizione disponibile, che \u00e8 quella che abbiamo creato; “Navigazione principale”.<\/p>\n
\"Tutorial<\/a><\/p>\n
Metti un segno di spunta in "Navigazione principale" e premi Salva. Ora il menu appena creato \u00e8 collegato alla posizione e verr\u00e0 visualizzato automaticamente ovunque si aggiunge il codice per l’output di questa posizione del menu. Facciamolo ora.<\/p>\n
Output di una posizione di menu in un modello<\/h3>\n
Apri header.php<\/code>e ovunque desideri che l’output del menu sia, aggiungi una chiamata a wp_nav_menu()<\/code>. 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<\/code>‘ e lo impostiamo sulla maniglia del nostro menu; ‘ main-nav<\/code>‘.<\/p>\n
Ho aggiunto l’output del menu subito dopo l’inizio del <body><\/code>tag, ma se hai arricchito i tuoi modelli con HTML, decidi tu stesso dove vuoi che appaia il menu.<\/p>\n
...\n<body <?php body_class(); ?>>\n    <nav class=\"main-nav\"><?php wp_nav_menu(['theme_location' => 'main-nav']); ?><\/nav><\/code><\/pre>\n
Aggiorna il tuo frontend e dovresti vedere il menu che hai creato in admin visualizzato come un elenco non ordinato all’inizio del modello.<\/p>\n
\"Tutorial<\/a><\/p>\n
Come al solito, ti incoraggio a scavare un po’ pi\u00f9 a fondo nei parametri wp_nav_menu<\/code>nella documentazione di WordPress Codex per questo<\/a> 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.<\/p>\n
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.<\/p>\n
Nota: qualsiasi utente del tema pu\u00f2 sempre creare pi\u00f9 menu e scegliere di visualizzarli al di fuori delle posizioni registrate di un tema utilizzando i widget. Tuttavia, per fare ci\u00f2, il tuo tema deve definire alcune aree dei widget! Facciamolo dopo.<\/p>\n
Aree widget<\/h2>\n
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\u00f2 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.<\/p>\n
Definiamo un’area widget nella nostra barra laterale e una nel footer. \u00c8 comune che i temi forniscano pi\u00f9 aree widget nel pi\u00e8 di pagina per dividerli bene in colonne, ma in questo tutorial ne aggiungeremo solo uno al pi\u00e8 di pagina.<\/p>\n
Le aree dei widget sono denominate "barre laterali" nel codice di WordPress, ma non \u00e8 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.<\/p>\n
Registra aree widget<\/h3>\n
Iniziamo registrando due aree widget nel nostro functions.php<\/code>. Utilizziamo la funzione register_sidebar<\/code>per registrare le nostre barre laterali, agganciate widgets_init<\/code>all’hook, che WordPress ha definito il miglior hook per registrare aree widget (e widget personalizzati).<\/p>\n
add_action('widgets_init', 'wptutorial_register_sidebar');\nfunction wptutorial_register_sidebar() {\n    register_sidebar([\n        'name' => __('Sidebar Widget Area', 'wptutorial'),\n        'id' => 'sidebar-area'\n    ]);\n    register_sidebar([\n        'name' => __('Footer Widget Area', 'wptutorial'),\n        'id' => 'footer-area'\n    ]);\n}<\/code><\/pre>\n
La register_sidebar()<\/code>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.<\/p>\n
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 \u00e8 la nostra "Area widget barra laterale" e "Area widget pi\u00e8 di pagina".<\/p>\n
\"Tutorial<\/a><\/p>\n
Posiziona un widget casuale nella nostra barra laterale o nell’area widget del footer, solo cos\u00ec puoi vederlo in azione.<\/p>\n
Output di un’area widget in un modello<\/h3>\n
L’ultima parte \u00e8 l’output delle aree dei widget nei nostri modelli. Per fare ci\u00f2 utilizziamo la funzione dynamic_sidebar()<\/code>e forniamo l’handle come parametro. Apri sidebar.php<\/code>e aggiungi quanto segue all’interno dei <aside><\/code>tag:<\/p>\n
<aside class=\"sidebar\">\n    <ul><?php dynamic_sidebar('sidebar-area'); ?><\/ul>\n<\/aside><\/code><\/pre>\n
Si noti che l’ho racchiuso in un tag elenco non ordinato (<ul><\/code>). Questo perch\u00e9 di default dynamic_sidebar<\/code>emette tutti i widget racchiusi negli <li><\/code>elementi. Ti incoraggio a giocare con i parametri di output se non ti piace che i widget siano un elenco.<\/p>\n
Per quanto riguarda il footer, lo aggiungiamo proprio all’inizio di footer.php<\/code>, avvolto all’interno di un <footer><\/code>tag (se lo desideri).<\/p>\n
    <footer>\n        <ul><?php dynamic_sidebar('footer-area'); ?><\/ul>\n    <\/footer>\n    <?php wp_footer(); ?>\n...<\/code><\/pre>\n
Questo \u00e8 tutto per i menu e le aree dei widget. Il tuo tema ora ha la flessibilit\u00e0 dell’utente di creare un nuovo menu e utilizzare un widget per visualizzarlo nella barra laterale o nel pi\u00e8 di pagina. Nella prossima lezione<\/a> di questa serie di tutorial creeremo pi\u00f9 modelli per il nostro tema.<\/p>\n
Documentazione sui metodi utilizzati<\/h2>\n