Tutorial WordPress: menu personalizzato per post o pagine nella barra laterale
Questo post è per te che gestisci un sito WordPress che ha molti contenuti, possibilmente molte pagine strutturate in modo gerarchico, e desideri una migliore navigazione al di fuori del menu principale. Per aiutare a navigare nel sito, un menu personalizzato relativo al post corrente sarà di grande aiuto. Il problema con il posizionamento di un widget di menu nella barra laterale (o dove preferisci) è che la barra laterale è comune. In questo post impareremo come mostrare un menu personalizzato aggiuntivo nella barra laterale, consentendo a post, pagine o tipi di post personalizzati di scegliere un menu.
Aggiungi il codice qui sotto nel tuo tema functions.phpo nel codice del tuo plugin.
Creare menu in WordPress è facile e puoi utilizzare il widget Menu per visualizzare un menu nella barra laterale. Il problema è che la barra laterale è globale e lo stesso menu verrà visualizzato ovunque. E se desideri visualizzare menu specifici su pagine specifiche? Imparerai anche come assicurarti che il menu scelto venga ereditato dalle pagine figlio. In questo modo devi solo selezionare il menu nella pagina principale. Tutte le sottopagine mostreranno anche lo stesso menu senza bisogno di modificarle tutte.
Il primo passo è creare un metabox su post o pagine in cui abbiamo la possibilità di scegliere un menu. Usiamo la funzione add_meta_box()e decidiamo per quali tipi di post vogliamo mostrarlo.
add_action('add_meta_boxes', function() {
add_meta_box('metabox-sidebar-menu', __('Sidebar Menu', 'txtdomain'), 'awp_sidebar_menu_metabox_callback', ['post', 'page']);
});Adatta il codice sopra al titolo e ai tipi di post che desideri. L’esempio sopra aggiungerà il metabox sia ai post che alle pagine. Il terzo parametro, quello che ho chiamato awp_sidebar_menu_metabox_callback, è la funzione responsabile del rendering del contenuto del metabox. Definiamolo dopo. Questo è ciò che dovremo fare nel nostro metabox:
function awp_sidebar_menu_metabox_callback($post) {
// Get all menus
// Get the current saved menu, if set
// Output HTML with a select showing all menus, and mark the currently saved one as selected
}Possiamo ottenere un array con tutti i menu salvati in WordPress con wp_get_nav_menus(). Per quanto riguarda il recupero del menu scelto corrente, memorizziamo il menu scelto come meta post awp_sidebar_menu(chiamalo come preferisci) e recupereremo semplicemente il valore in base alla corrente $postfornitaci nella funzione metabox. Salveremo gli ID menu perché è tutto ciò di cui abbiamo bisogno per visualizzare un menu. E poi riproduciamo HTML per una selezione che scorre attraverso i menu. L’output HTML del metabox dipende davvero da te, il seguente è un esempio. Ho incluso anche la funzionalità nonce per la sicurezza.
Nell’output HTML sto stampando un’etichetta. Se non ci sono menu salvati in WordPress, visualizzerà semplicemente un paragrafo. In caso contrario, viene generata una selezione con ID menu come valori e nomi di menu come etichetta. Sto anche aggiungendo una scelta vuota per consentire ai post di non mostrare un menu. Sto usando la funzione di supporto di WordPress [selected](https://developer.wordpress.org/reference/functions/selected/)()per gestire il contrassegno dell’opzione salvata corrente come selezionata.
Se modifichi un post o una pagina dovresti vedere il metabox apparire in basso, mostrando la tua selezione. Stupendo! Tuttavia a questo punto al momento non salverà la tua scelta di menu quando salvi il post. Questo è il prossimo passo.
Usiamo l’hook save_postper creare una funzione che salva qualsiasi scelta che abbiamo aggiunto nel nostro metabox. L’ save_posthook viene attivato ogni volta che un post viene salvato o aggiornato. Verificheremo prima i nonce (se non sei sicuro di cosa siano i nonce, controlla questa guida di WordPress sui nonce ). Quindi controlliamo due volte se l’utente è autorizzato ad aggiornare i post e aggiorna il nostro meta post con la scelta.
add_action('save_post', function($post_id) {
if (!isset($_POST['awp_sidebar_menu_nonce']) || !wp_verify_nonce($_POST['awp_sidebar_menu_nonce'], 'awp_sidebar_menu_metabox_nonce')) {
return;
}
if (!current_user_can('edit_post', $post_id)) {
return;
}
update_post_meta($post_id, 'awp_sidebar_menu', $_POST['awp-sidebar-menu']);
});Ora, quando aggiorni i post, salverà anche la tua scelta di menu.
E questo è tutto per la parte post-scelta. Il passaggio successivo è effettivamente l’output del menu se è stato selezionato un menu.
Sto aggiungendo l’output nella barra laterale, ma puoi emetterlo ovunque nei modelli del tuo tema. Abbiamo solo bisogno di un hook predefinito o definiamo il nostro. Ad esempio, sto aggiungendo un hook personalizzato nella parte superiore della barra laterale, in modo da poter creare una funzione agganciata a questo.
Potresti semplicemente chiamare wp_nav_menu()direttamente nel modello, ma ti consiglio invece di creare un hook personalizzato perché aggiungeremo un bel po’ di codice e può sembrare disordinato.
Nel mio tema modifico sidebar.phpe subito prima dynamic_sidebar()con la barra laterale viene chiamata (dove vengono aggiunti i widget), aggiungo il mio hook personalizzato con do_action()e un dato nome. Puoi chiamarlo come preferisci, ma deve essere unico all’interno di WordPress. Quindi almeno anteponigli qualcosa di unico per te.
Ora possiamo tornare a functions.php, definire una funzione agganciata awp_before_sidebare il suo output verrà visualizzato nella barra laterale prima dei widget. La funzione utilizzerà i tag condizionali di WordPress per verificare se stiamo attualmente mostrando o meno un singolo post o pagina. E se è così, prenderò il nostro post meta. Se il post meta è stato impostato, emettiamo il menu chiamando [wp_nav_menu](https://developer.wordpress.org/reference/functions/wp_nav_menu/)()e fornendo l’ID del menu salvato come menuparametro.
Dovresti regolare l’HTML attorno al menu in modo che si adatti al resto del contenuto. Nel codice sopra, avvolgo il menu nello stesso HTML in cui sono racchiusi tutti i widget nella barra laterale in modo che lo stile del widget del tema si applichi al nostro menu personalizzato.
Questo è tutto! Ogni volta che scegli un menu in un post o in una pagina, il menu verrà visualizzato sopra la barra laterale durante la visualizzazione di quel post o pagina.
Possiamo fare un ulteriore passo avanti però. Se vuoi che le pagine dei bambini mostrino lo stesso menu della barra laterale impostato in uno qualsiasi dei genitori, continua a leggere.
Questa funzionalità aggiuntiva ha senso se hai molte pagine in una gerarchia o un tipo di post personalizzato con la gerarchia attivata. Sarebbe troppo ingombrante modificare ogni singola pagina figlio e scegliere lo stesso menu. In tal caso sarebbe meglio scegliere il menu sulla pagina principale e lasciare automaticamente che tutte le sottopagine "ereditino" quella scelta di menu. Se una qualsiasi sottopagina sceglie un altro menu, quel menu verrà visualizzato al posto di "ereditato" una volta.
All’interno della nostra funzione hooked to awp_before_sidebar, aggiungeremo un pezzo di codice, all’interno del check se stiamo visualizzando un singolo post o pagina:
Quello che fa il codice sopra se non è stato trovato alcun menu nella pagina corrente è recuperare tutti i genitori con [get_post_ancestors](https://developer.wordpress.org/reference/functions/get_post_ancestors/)(). Questa funzione restituisce un array di ID post principali ordinati prima in base al genitore più vicino. Se la pagina non ha genitori (ad esempio se è un post) viene restituito un array vuoto. E se ci sono dei genitori, esaminiamo ogni genitore uno per uno e controlliamo se hanno impostato il nostro meta meta. Se ne viene trovato uno, interrompiamo l’attraversamento dei genitori e $sidebar_menuverrà impostato e il menu verrà visualizzato in seguito con wp_nav_menu().
E questo è tutto per la funzionalità "ereditarietà"!