Aggiungi meta impostazioni personalizzate intuitive alle voci di menu di WordPress

In un recente aggiornamento di WordPress ora è possibile e abbastanza semplice aggiungere meta campi personalizzati alle voci di menu. In questo post impareremo come aggiungere le nostre impostazioni personalizzate alle voci di menu, aggiornare le loro impostazioni e infine come prendere i metadati in uso.

Recentemente WordPress ha annunciato il supporto per l’aggiunta di campi personalizzati alle voci di menu nella versione 5.4. Sono state aggiunte due nuove azioni che consentono agli sviluppatori di aggiungere campi personalizzati nella pagina di amministrazione del menu di WordPress e nell’editor di menu di Customizer. In questo post ci concentreremo su uno di questi, quello per la pagina di amministrazione del menu di WordPress.

Con questa modifica non è più necessario forzare gli utenti del tema o del plug-in a ricordare e digitare i nomi delle classi per attivare le "impostazioni" delle voci di menu. Finora questo è stato un processo comune per cose come rendere una voce di menu simile a un pulsante o tra diversi modelli di menu a discesa. Spesso in combinazione con un menu walker personalizzato.

Tieni presente che affinché questo codice funzioni è necessaria la versione minima di WordPress 5.4.0.

Cosa faremo in questo tutorial

Con il nuovo hook alle voci di menu e il supporto di WordPress per l’aggiunta di metadati alle voci di menu non c’è davvero alcun limite al tipo di impostazioni desiderate. Il processo dipende dal risultato finale. Nella maggior parte dei casi è sufficiente aggiungere una classe CSS personalizzata alla voce di menu.

Per semplificare, in questo post aggiungeremo una casella di controllo denominata "Mostra come pulsante". Nel nostro tema abbiamo CSS che modellerà una voce di menu in modo che assomigli a un pulsante (invito all’azione) se l’elemento ha una determinata classe. Invece di costringere l’utente del tema a digitare la classe CSS "menu-item-button" nel campo della classe CSS della voce di menu in admin, offriamo loro una casella di controllo di facile utilizzo.

Alla fine di questo post troverai alcune idee per altre azioni e filtri da utilizzare se vuoi fare di più che aggiungere semplicemente una classe CSS.

Iniziamo!

Aggiunta di campi personalizzati alle voci di menu

Il nuovo hook aggiunto di recente è [wp_nav_menu_item_custom_fields](https://developer.wordpress.org/reference/hooks/wp_nav_menu_item_custom_fields/). È un gancio che si attiva proprio sopra i pulsanti di spostamento di una voce di menu;

Il gancio viene fornito con non meno di cinque parametri. In questo post faremo cose che richiedono solo le due prime.

• item_id: L’ID della voce di menu corrente
• item: Oggetto dati voce di menu
• depth: La profondità della voce di menu all’interno del menu, indicata come numero intero
• args: un oggetto degli argomenti delle voci di menu
• nav_id: L’ID del menu di navigazione

Tutti gli input aggiunti in questo hook devono avere un nameattributo (poiché l’editor di menu è un modulo). L’attributo name può essere nominato come vuoi ma deve essere univoco e devi aggiungere l’ID della voce di menu (primo parametro) tra parentesi. Es name="my-custom-field[<item ID>]. “. Questo è il modo in cui lo fanno le altre impostazioni standard delle voci di menu.

Iniziamo con un esempio di aggiunta di una casella di controllo per rendere la voce di menu simile a un pulsante quando il menu è posizionato come menu principale. Ci collegheremo wp_nav_menu_item_custom_fieldssolo con i primi due parametri e faremo quanto segue:

add_action('wp_nav_menu_item_custom_fields', function($item_id, $item) {
    $show_as_button = get_post_meta($item_id, '_show-as-button', true);
    ?>
    <p class="awp-show-as-button description description-wide">
        <label for="awp-menu-item-button-<?php echo $item_id; ?>" >
            <input type="checkbox" 
                id="awp-menu-item-button-<?php echo $item_id; ?>" 
                name="awp-menu-item-button[<?php echo $item_id; ?>]" 
                <?php checked($show_as_button, true); ?> 
            /><?php _e('Show as a button', 'awp'); ?>
        </label>
    </p>
    <?php
}, 10, 2);

Alla riga #2recuperiamo il valore corrente della nostra voce di menu meta. Le voci di menu utilizzano post meta, quindi usiamo ciò con [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)()cui probabilmente hai già familiarità. Memorizziamo i metadati della voce di menu tramite il tasto ‘ _show-as-button‘.

Quindi si tratta di riecheggiare del buon HTML. Il codice sopra utilizza alcune delle classi già utilizzate per le voci di menu in modo da renderlo gradevole senza aggiungere uno stile personalizzato (un ptag con le classi " description description-wide").

Le parti importanti accadono in linea #8e #9. Seguiamo la regola dell’attributo name, aggiungendo il $item_idtra parentesi, e ci assicuriamo che il valore salvato corrente si rifletta nella casella di controllo. Puoi aggiungere qualsiasi tipo di input e persino più input qui. Ricorda solo di fornire l’ nameattributo appropriato e di impostare correttamente il loro valore corrente.

Con questo codice nel codice del tuo tema functions.phpo del plug-in, dovresti ora ottenere una nuova casella di controllo per tutte le voci di menu:

Attualmente non sta salvando il nostro campo. Questo è il prossimo passo.

Aggiornamento dei campi personalizzati

Per aggiornare i campi personalizzati sulle voci di menu utilizziamo l’hook [wp_update_nav_menu_item](https://developer.wordpress.org/reference/hooks/wp_update_nav_menu_item/). Viene fornito con tre argomenti, ma abbiamo bisogno solo del secondo che è l’ID della voce di menu.

Il modo in cui gestisci il salvataggio del valore dei tuoi input dipende da te. Ho scelto di salvare semplicemente " _show-as-button" come vero o falso. Basta usare [update_post_meta](https://developer.wordpress.org/reference/functions/update_post_meta/)()e/o [delete_post_meta](https://developer.wordpress.org/reference/functions/delete_post_meta/)().

add_action('wp_update_nav_menu_item', function($menu_id, $menu_item_db_id) {
    $button_value = (isset($_POST['awp-menu-item-button'][$menu_item_db_id]) && $_POST['awp-menu-item-button'][$menu_item_db_id] == 'on')? true: false;
    update_post_meta($menu_item_db_id, '_show-as-button', $button_value);
}, 10, 2);

Nel codice sopra prendo il valore del campo personalizzato in base al suo nome $_POSTnell’array. Poiché è una casella di controllo, non esisterà $_POSTnell’array (deselezionata) o verrà restituita come ‘ on‘. Quindi aggiorno la meta chiave ‘ _show-as-button‘ come vera o falsa.

Con il codice sopra dovresti vedere che il tuo campo si sta aggiornando correttamente durante il salvataggio del menu.

Il prossimo passo è fare qualcosa per i nostri metadati personalizzati. E come procedi dipende dal risultato finale. Come per il nostro esempio, tutto ciò che dobbiamo fare è aggiungere una classe personalizzata alla voce di menu.

Aggiorna la voce di menu Classe CSS

WordPress offre un filtro sulle classi delle voci di menu: [nav_menu_css_class](https://developer.wordpress.org/reference/hooks/nav_menu_css_class/). Tutto quello che dobbiamo fare è aggiungere una classe personalizzata all’array tramite questo filtro se il nostro meta personalizzato è true. Usiamo [get_post_meta](https://developer.wordpress.org/reference/functions/get_post_meta/)()per ottenere il valore di ‘ _show-as-button‘ e se è vero, aggiungiamo la classe CSS ‘ menu-item-button‘:

add_filter('nav_menu_css_class', function($classes, $menu_item) {
    $show_as_button = get_post_meta($menu_item->ID, '_show-as-button', true);
    if ($show_as_button) {
        $classes[] = 'menu-item-button';
    }
    return $classes;
}, 10, 2);

Il nav_menu_css_classfiltro viene fornito con un totale di quattro argomenti, inclusi gli argomenti di menu e la profondità della voce di menu. Se necessario, puoi fare in modo che i nomi delle classi siano influenzati da questi valori. Ad esempio, di solito non avrebbe senso trasformare una voce di menu in un pulsante a meno che non sia al livello superiore (e non all’interno di un menu a discesa).

Con il codice sopra dovresti ora vedere che qualsiasi voce di menu che ha selezionato "Mostra come pulsante" otterrà la classe ‘ menu-item-button‘.

Tieni presente: potresti riscontrare che il nav_menu_css_classfiltro non viene applicato se il menu utilizza un menu walker personalizzato che, ad esempio, contiene il metodo start_el(). Il walker deve applicare il nav_menu_css_classfiltro alle classi della voce di menu (usando apply_filters()) affinché il filtro sopra funzioni!

Altri usi dei metacampi personalizzati delle voci di menu

Come accennato, il processo di utilizzo dei campi personalizzati dipende dal risultato finale. È difficile fare un post che copra tutte le possibilità. Ma almeno questo dovrebbe darti delle idee. L’esempio sopra ha mostrato come aggiungere semplicemente una classe personalizzata alla voce di menu.

In altri casi potresti voler anticipare i metadati in un menu walker. Nella maggior parte delle funzioni di un menu walker hai accesso all’ID della voce di menu e quindi puoi facilmente recuperare i metadati.

Un’alternativa all’utilizzo di un menu walker personalizzato è possibile utilizzare il filtro [wp_setup_nav_menu_item](https://developer.wordpress.org/reference/functions/wp_setup_nav_menu_item/)per un maggiore controllo sull’oggetto voce di menu.

Oppure puoi utilizzare il filtro [wp_get_nav_menu_items](https://developer.wordpress.org/reference/functions/wp_get_nav_menu_items/)per escludere, ad esempio, le voci di menu, se la tua impostazione è limitare la visibilità delle voci di menu.