Con questa modifica non \u00e8 pi\u00f9 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 \u00e8 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.<\/p>\n
Tieni presente che affinch\u00e9 questo codice funzioni \u00e8 necessaria la versione minima di WordPress 5.4.0.<\/p>\n
Cosa faremo in questo tutorial<\/h2>\n
Con il nuovo hook alle voci di menu e il supporto di WordPress per l’aggiunta di metadati alle voci di menu non c’\u00e8 davvero alcun limite al tipo di impostazioni desiderate. Il processo dipende dal risultato finale. Nella maggior parte dei casi \u00e8 sufficiente aggiungere una classe CSS personalizzata alla voce di menu.<\/p>\n
Per semplificare, in questo post aggiungeremo una casella di controllo denominata "Mostra come pulsante". Nel nostro tema abbiamo CSS che modeller\u00e0 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.<\/p>\n
Alla fine di questo post troverai alcune idee per altre azioni e filtri da utilizzare se vuoi fare di pi\u00f9 che aggiungere semplicemente una classe CSS.<\/p>\n
Iniziamo!<\/p>\n
Aggiunta di campi personalizzati alle voci di menu<\/h2>\n
Il nuovo hook aggiunto di recente \u00e8 Il gancio viene fornito con non meno di cinque parametri. In questo post faremo cose che richiedono solo le due prime.<\/p>\n Tutti gli input aggiunti in questo hook devono avere un Iniziamo con un esempio di aggiunta di una casella di controllo per rendere la voce di menu simile a un pulsante quando il menu \u00e8 posizionato come menu principale. Ci collegheremo Alla riga Quindi si tratta di riecheggiare del buon HTML. Il codice sopra utilizza alcune delle classi gi\u00e0 utilizzate per le voci di menu in modo da renderlo gradevole senza aggiungere uno stile personalizzato (un Le parti importanti accadono in linea [wp_nav_menu_item_custom_fields](https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_item_custom_fields\/)<\/code>. \u00c8 un gancio che si attiva proprio sopra i pulsanti di spostamento di una voce di menu;<\/p>\n![\"Aggiungi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e51560662d6.png\")
<\/a><\/p>\n\n
item_id<\/code>: L’ID della voce di menu corrente<\/li>\nitem<\/code>: Oggetto dati voce di menu<\/li>\ndepth<\/code>: La profondit\u00e0 della voce di menu all’interno del menu, indicata come numero intero<\/li>\nargs<\/code>: un oggetto degli argomenti delle voci di menu<\/li>\nnav_id<\/code>: L’ID del menu di navigazione<\/li>\n<\/ul>\nname<\/code>attributo (poich\u00e9 l’editor di menu \u00e8 un modulo). L’attributo name pu\u00f2 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>]<\/code>. “. Questo \u00e8 il modo in cui lo fanno le altre impostazioni standard delle voci di menu.<\/p>\nwp_nav_menu_item_custom_fields<\/code>solo con i primi due parametri e faremo quanto segue:<\/p>\nadd_action('wp_nav_menu_item_custom_fields', function($item_id, $item) {\n $show_as_button = get_post_meta($item_id, '_show-as-button', true);\n ?>\n <p class=\"awp-show-as-button description description-wide\">\n <label for=\"awp-menu-item-button-<?php echo $item_id; ?>\" >\n <input type=\"checkbox\" \n id=\"awp-menu-item-button-<?php echo $item_id; ?>\" \n name=\"awp-menu-item-button[<?php echo $item_id; ?>]\" \n <?php checked($show_as_button, true); ?> \n \/><?php _e('Show as a button', 'awp'); ?>\n <\/label>\n <\/p>\n <?php\n}, 10, 2);<\/code><\/pre>\n#2<\/code>recuperiamo il valore corrente della nostra voce di menu meta. Le voci di menu utilizzano post meta, quindi usiamo ci\u00f2 con [get_post_meta](https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/)()<\/code>cui probabilmente hai gi\u00e0 familiarit\u00e0. Memorizziamo i metadati della voce di menu tramite il tasto ‘ _show-as-button<\/code>‘.<\/p>\np<\/code>tag con le classi " description description-wide<\/code>").<\/p>\n#8<\/code>e #9<\/code>. Seguiamo la regola dell’attributo name, aggiungendo il $item_id<\/code>tra parentesi, e ci assicuriamo che il valore salvato corrente si rifletta nella casella di controllo. Puoi aggiungere qualsiasi tipo di input e persino pi\u00f9 input qui. Ricorda solo di fornire l’ name<\/code>attributo appropriato e di impostare correttamente il loro valore corrente.<\/p>\n
![\"Aggiungi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e5156147558.png\")
<\/a><\/p>\n![\"Aggiungi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153876-61e515621cd00.png\")
<\/a><\/p>\n