Aggiunta di campi personalizzati alle voci di menu di WordPress

Il menu di un sito Web viene spesso trascurato durante la progettazione di un sito. Ciò potrebbe essere dovuto al fatto che tradizionalmente è stato tecnicamente difficile da personalizzare. Questo è ora cambiato con WordPress 5.4 che ha introdotto alcuni nuovi hook che ti permetteranno di aggiungere campi personalizzati del menu di WordPress in modo relativamente semplice.

Gli hook in questione sono wp_nav_menu_item_custom_fields e wp_nav_menu_item_custom_fields_customize_template action hook. Usandoli ora puoi aggiungere facilmente i tuoi campi personalizzati alle voci di menu sia nella pagina di modifica del menu Amministratore che nel pannello delle opzioni di personalizzazione.

In questo articolo esamineremo alcuni semplici modi in cui puoi utilizzare l'hook wp_nav_menu_item_custom_fields per aggiungere i tuoi campi personalizzati alle voci di menu e daremo un'occhiata a due plug-in che possono essere utilizzati anche per aggiungere campi personalizzati senza dover codificare .

Muoviamoci.

Il gancio del campo personalizzato del menu di WordPress

L'hook wp_nav_menu_item_custom_fields è specifico della schermata Menu ed è descritto come segue:

 do_action( 'wp_nav_menu_item_custom_fields', $id, $menu_item, $depth, $args );

• L'intero $id è l'ID della voce di menu
• L'oggetto $menu_item è l'oggetto dati della voce di menu
• L'intero $depth è la profondità della voce di menu
• $args è l'oggetto degli argomenti delle voci di menu

L'hook si attiva appena prima dei pulsanti di spostamento di una voce di menu di navigazione nell'editor di menu e viene introdotto nel file wp-admin/includes/class-walker-nav-menu-edit.php intorno alla riga 242.

Puoi dimostrarlo in pratica con un esempio molto semplice. Apri il file functions.php del tuo tema attivo e aggiungi questo pezzo di codice:

 function my_menu_item_field() { echo 'A menu item test field'; } add_action( 'wp_nav_menu_item_custom_fields', 'my_menu_item_field' );

Ora, se vai nella pagina di amministrazione di modifica del menu, vedrai la stringa echeggiata sotto ogni voce di menu come mostrato nello screenshot qui sotto.

Naturalmente, questo non ha alcuna funzionalità ma mostra come è possibile modificare il menu. Proviamo ora qualcosa di più utile aggiungendo alcune semplici funzionalità sotto forma di un campo personalizzato.

Aggiungi un campo personalizzato di una voce di menu di WordPress utilizzando il codice

In questo esempio creeremo un campo personalizzato del menu di WordPress che ci consente di inserire una descrizione in qualsiasi voce di menu.

Passaggio uno: aggiunta dell'output

Per iniziare, quello che faremo prima è creare la funzione di callback che visualizzerà il campo di input in cui l'utente amministratore può compilare la descrizione. Ecco il codice per farlo:

 function menu_item_desc( $item_id, $item ) { $menu_item_desc = get_post_meta( $item_id, '_menu_item_desc', true ); ?> <div> <span class="description"><?php _e( "Item Description", 'menu-item-desc' ); ?></span><br /> <input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" /> <div class="logged-input-holder"> <input type="text" name="menu_item_desc[<?php echo $item_id ;?>]" value="<?php echo esc_attr( $menu_item_desc ); ?>" /> </div> </div> <?php } add_action( 'wp_nav_menu_item_custom_fields', 'menu_item_desc', 10, 2 );

Aggiungi questo codice al tuo file functions.php e salvalo. Ora, se accedi nuovamente all'area Admin del tuo sito Web WordPress e apri la schermata Menu, dovresti vedere il tuo campo visualizzato. Nel nostro caso, abbiamo chiamato questa "Descrizione oggetto". Ovviamente sei libero di modificare il codice sopra per nominare il tuo campo come meglio credi. Tieni presente che deve essere un nome univoco.

Passaggio due: salvare l'input

Successivamente, inseriremo la parte di codice sottostante che aggiornerà il valore del campo nella meta tabella post del database, il che significa che il nostro input verrà salvato.

 function save_menu_item_desc( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_desc'][$menu_item_db_id] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_desc'][$menu_item_db_id] ); update_post_meta( $menu_item_db_id, '_menu_item_desc', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_desc' ); } } add_action( 'wp_update_nav_menu_item', 'save_menu_item_desc', 10, 2 );

Con questo codice salvato nel tuo file functions.php , puoi tornare al tuo WordPress Admin, aprire una voce di menu e aggiungere una descrizione al campo. Quindi, vai al tuo database phpMyAdmin e dovresti essere in grado di vedere la voce nella tabella del meta database post.

Se modifichi il valore nel menu admin, dovrebbe riflettersi nel database. Allo stesso modo, se elimini il valore, dovrebbe scomparire del tutto.

Passaggio tre: mostra il valore del campo del menu

Successivamente, mostreremo come recuperare i dati dei campi di menu salvati e mostrarli nel menu front-end utilizzando la funzione get_post_meta e l'hook nav_menu_item_title . Aggiungi il seguente codice qui sotto al tuo file functions.php .

 function show_menu_item_desc( $title, $item ) { if( is_object( $item ) && isset( $item->ID ) ) { $menu_item_desc = get_post_meta( $item->ID, '_menu_item_desc', true ); if ( ! empty( $menu_item_desc ) ) { $title .= '<p class="menu-item-desc">' . $menu_item_desc . '</p>'; } } return $title; } add_filter( 'nav_menu_item_title', 'show_menu_item_desc', 10, 2 );

L'hook nav_menu_item_title filtra il titolo di una voce di menu e si trova all'interno del file wp-includes/class-walker-nav-menu.php intorno alla riga 225.

Accetta 4 parametri, la stringa del titolo della voce di menu, la voce di menu corrente, un oggetto di argomenti wp_nav_menu() e un numero intero che è la profondità della voce di menu.

Ora dovresti vedere la descrizione sotto il titolo della voce di menu e, usando il CSS appropriato, puoi ovviamente modellarlo per adattarlo al tuo sito web.

Aggiungi un campo personalizzato di una voce di menu di WordPress utilizzando un plug-in

Se non vuoi essere coinvolto nella scrittura di codice per aggiungere un campo personalizzato al menu di WordPress, allora buone notizie ... ci sono plugin che possono farlo per te.

Campi personalizzati avanzati

Il plug-in Advanced Custom Fields estremamente popolare e sempre versatile dimostra ancora una volta il suo potere qui con la possibilità di aggiungere campi personalizzati al menu di WordPress.

Dopo averlo installato e attivato, apri il plug-in e quindi fai clic sul pulsante "Aggiungi nuovo" per aggiungere i tuoi campi. Seleziona "Voce di menu" nelle regole di posizione. Segui le istruzioni e aggiorna i campi come richiesto.

Una volta pubblicato il campo, puoi andare al menu di WordPress dall'area Admin per vedere il nuovo campo che hai creato. Molto facile!

Campi personalizzati del menu WP

Il plug-in WP Menu Custom Fields è un plug-in relativamente nuovo che, come suggerisce il nome, ti aiuterà ad aggiungere campi personalizzati alle voci di menu. Puoi aggiungere un testo personalizzato, un'immagine, uno shortcode o un HTML personalizzato.

Invece di creare voci di menu personalizzate tramite un'interfaccia plug-in dedicata (come si fa con i campi personalizzati avanzati), i campi personalizzati del menu WP aggiungono invece opzioni modificabili direttamente a qualsiasi voce di menu nell'area di modifica del menu di amministrazione.

È abbastanza autoesplicativo da usare e un modo semplice e piacevole per aggiungere campi personalizzati e altro contenuto alle voci di menu. La documentazione del plug-in fornisce anche gli hook del plug-in che puoi utilizzare per personalizzare ulteriormente l'HTML generato da ciascuna funzionalità.

Conclusione

L'aggiunta di campi personalizzati ai menu di WordPress può essere davvero utile e può aiutarti a migliorare questa area spesso trascurata del tuo sito web. Se sei un programmatore sicuro, l'utilizzo dei nuovi hook forniti in WordPress 5.4 dovrebbe rivelarsi relativamente facile, mentre i non programmatori possono sfruttare al massimo i plugin disponibili per svolgere questo compito.

Guarda anche

• Aggiunta di campi alle voci di menu di WordPress – Plugin personalizzato