Aggiunta di campi alle voci di menu di WordPress: la pagina delle impostazioni del plug-in

Pubblicato: 2021-07-08

Durante l'utilizzo di qualsiasi plug-in di WordPress, probabilmente avrai notato che l'autore ha fornito alcune impostazioni che puoi utilizzare per personalizzare la funzionalità del plug-in. Tecnicamente, l'autore ha creato una voce di menu e una pagina delle impostazioni in cui questa voce di menu ti reindirizza. In questo articolo seguirai i passaggi che devi seguire per fare lo stesso per il tuo plugin.

L'articolo richiede che tu abbia già applicato il codice fornito nell'esempio nell'articolo Aggiunta di campi alle voci di menu di WordPress - Plugin personalizzato. Riprenderemo da lì e vedremo come possiamo rendere il nostro plug-in più intuitivo aggiungendo la sua pagina di impostazione nell'area di amministrazione in modo da consentire agli utenti amministratori di impostare le loro preferenze su come funzionerà il plug-in.

Passi iniziali

Ai fini di questo articolo, creeremo un simpatico e semplice menu delle impostazioni. Come abbiamo visto nel nostro precedente articolo, utilizzando il nostro plugin, l'utente amministratore può aggiungere un sottotitolo a qualsiasi voce di menu. Nei passaggi successivi, forniremo un'opzione in modo che l'utente possa scegliere il tipo di elemento HTML in cui verrà inserito il campo dei sottotitoli.

A questo punto, il nostro file PHP principale del plugin si presenta così:

 <?php /* Plugin Name: Menu Item Field Creator Description: My custom plugin to create menu item fields */ class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); } public function menu_item_sub( $item_id, $item ) { $menu_item_sub = get_post_meta( $item_id, '_menu_item_sub', true ); ?> <div> <span class="subtitle"><?php _e( 'Subtitle', 'menu-item-sub' ); ?></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_sub[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $menu_item_sub ); ?>" /> </div> </div> <?php } public function save_menu_item_sub( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_sub'][ $menu_item_db_id ] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_sub'][ $menu_item_db_id ] ); update_post_meta( $menu_item_db_id, '_menu_item_sub', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_sub' ); } } public function menu_item_sub_custom_walker( $args ) { if ( class_exists( 'My_Custom_Nav_Walker' ) ) { $args['walker'] = new My_Custom_Nav_Walker(); } else { echo 'DOES NOT EXIST'; } return $args; } } $mycp_menu_item_field_creator = new MyCP_Menu_Item_Field_Creator(); if ( ! class_exists( 'My_Custom_Nav_Walker' ) ) { class My_Custom_Nav_Walker extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth=0, $args=[], $id=0 ) { $menu_item_sub = get_post_meta( $item->ID, '_menu_item_sub', true ); $output .= '<li class="' . implode( ' ', $item->classes ) . '">'; if ( $item->url && $item->url != '#' ) { $output .= '<a href="' . $item->url . '">'; } else { $output .= '<span>'; } $output .= $item->title; if ( $item->url && $item->url != '#' ) { $output .= '</a>'; } else { $output .= '</span>'; } if ( ! empty( $menu_item_sub ) ) { $output .= '<div class="menu-item-sub">' . $menu_item_sub . '</div>'; } } } }

La prossima cosa che faremo è procedere e creare una voce di menu per la pagina delle impostazioni del nostro plug-in, nonché un semplice esempio di ciò che potresti includere nella pagina delle impostazioni come contenuto.

Dovremo lavorare con due hook di WordPress. L'hook admin_menu per registrare le voci del menu admin e l'hook admin_init per registrare le opzioni del plug-in in un secondo momento, quando aggiungeremo la pagina delle impostazioni del plug-in con i suoi moduli. Ovviamente, sfrutteremo anche al meglio le API fornite da WordPress e utilizzeremo alcune funzioni integrate. Immergiamoci più a fondo.

Crea la voce di menu della pagina delle opzioni

Per aggiungere la voce di menu, aggiungeremo il corrispondente hook admin_menu all'interno del metodo __construct() sotto gli hook attualmente aggiunti.

 class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); add_action( 'admin_menu', array( $this, 'plugin_settings_menu_page' ) ); } . . .

Abbiamo usato l'hook admin_menu e definito il metodo plugin_settings_menu_page() (che descriveremo di seguito) per specificare le informazioni per la voce di menu e la pagina delle impostazioni del plugin.

 public function plugin_settings_menu_page() { add_menu_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

Il metodo dovrebbe essere inserito anche all'interno della classe principale del plugin. Tieni presente che all'interno del nostro metodo plugin_settings_menu_page() abbiamo utilizzato la funzione add_menu_page() fornita da WordPress. Questa funzione accetta i seguenti argomenti:

 add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position )

Il $page_title deve essere definito ed è fondamentalmente la prima parte dei tag del titolo della pagina a cui vieni reindirizzato quando selezioni questa voce di menu.
Il $menu_title obbligatorio- è il testo da usare per il menu.
$capability è la capacità richiesta per visualizzare questo menu da parte dell'utente. Nel nostro caso, abbiamo scelto l'autorizzazione manage_options in quanto è concessa solo a Super Utenti e Amministratori. Se vuoi capire quale ruolo o capacità si adatta alle tue esigenze, puoi consultare la relativa documentazione ufficiale.
Anche $menu_slug è obbligatorio e dovrebbe essere univoco. È il nome della lumaca con cui fare riferimento a questo menu. Non dimenticare che devi utilizzare solo caratteri alfanumerici minuscoli, trattini e trattini bassi compatibili con sanitize_key() .
$icon_url è un argomento facoltativo ed è l'URL che si collega al file dell'icona che verrà utilizzato per la voce di menu.
L'argomento $function è dove si definisce la funzione di callback che creerà il contenuto della pagina delle impostazioni. Nel nostro caso, è plugin_settings_page_content() , che non ha ancora funzionalità. Lo abbiamo aggiunto al nostro codice usando il metodo plugin_settings_menu_page() .

 public function plugin_settings_page_content() { $html = "<p>Test content for our custom plugin</p>"; echo $html; }

A questo punto dovresti vedere la voce di menu "Creatore campo voce di menu" e la pagina del contenuto testare il contenuto e riconoscere l'URL del menu che hai definito negli argomenti.

Vorremmo anche notare che se desideri includere l'opzione del tuo plug-in nel menu Impostazioni integrato e non come voce di menu di livello superiore separata, puoi farlo facilmente utilizzando invece la funzione add_options_page() . In tal caso dovresti sostituire questo:

 public function plugin_settings_menu_page() { add_menu_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

con questo:

 public function plugin_settings_menu_page() { add_options_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

Ciò si tradurrà in una posizione del menu qui:

Nella nostra prossima sezione, inseriremo alcuni semplici contenuti nella pagina delle impostazioni che l'utente amministratore può utilizzare per impostare il comportamento del plug-in.

Aggiungi funzionalità alla nostra pagina delle impostazioni

Quello che abbiamo fatto finora è aggiungere la nostra voce di menu e definire la funzione che visualizzerà la pagina del contenuto delle impostazioni. Se vogliamo funzionalità nella nostra pagina delle impostazioni dovremo registrare alcuni campi e quindi mostrarli nella pagina delle impostazioni del plugin. Ad esempio, creeremo un modulo in cui l'utente può definire il tipo di elemento HTML con cui avvolgere il campo dei sottotitoli.

L'output

Sostituisci il codice plugin_settings_page_content con questo:

 public function plugin_settings_page_content() { ?> <form action="options.php" method="post"> <?php do_settings_sections( 'options_page' ); settings_fields( 'option_group' ); submit_button( __( 'Save Subtitle', 'oop-menu-item-sub' ) ); ?> </form> <?php }

In queste righe utilizziamo le do_settings_sections() e settings_fields() . do_settings_sections() stamperà tutte le sezioni e i campi delle impostazioni registrati. I settings_fields() genereranno i campi di input nascosti nonce, action e option_page per la pagina delle impostazioni.

Ora procediamo e registriamo le nostre impostazioni.

Registra le tue Impostazioni

Per registrare i campi richiesti, utilizzeremo l'hook admin_init poiché si attiva quando viene inizializzata una schermata di amministrazione.

 class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); add_action( 'admin_menu', array( $this, 'plugin_settings_menu_page' ) ); add_action( 'admin_init', array( $this, 'plugin_register_settings' ) ); } . . .

Inseriremo il metodo plugin_register_settings() all'interno della nostra classe in questo modo:

 public function plugin_register_settings() { register_setting( 'option_group', 'option_name' ); add_settings_section( 'section_id', __( 'Settings Page Title', 'oop-menu-item-sub' ), array( $this, 'render_section' ), 'options_page' ); add_settings_field( 'html_element', __( 'Choose HTML Element:', 'oop-menu-item-sub' ), array( $this, 'render_field' ), 'options_page', 'section_id' ); }

Ora facciamo un passo indietro e diamo un'occhiata di nuovo a ciò che abbiamo fatto finora.

Per registrare un'impostazione e i suoi dati, abbiamo utilizzato la funzione register_setting () che secondo la documentazione è strutturata in questo modo:

 register_setting( $option_group, $option_name, $args )

$option_group è un parametro obbligatorio e dovrebbe corrispondere al nome del gruppo utilizzato in settings_fields() .
È richiesto anche $option_name ed è il nome dell'opzione da disinfettare e salvare. È il valore nella colonna option_name nella tabella del database delle opzioni.
Il $args non è necessario qui. È un array di dati opzionale che descrive l'impostazione al momento della registrazione. Ciò che puoi specificare qui è il tipo, la descrizione, una funzione sanitize_callback() per il valore dell'opzione, un'opzione " show_in_rest " che definisce se i dati correnti devono essere inclusi nell'API REST e un'opzione predefinita in cui puoi definire il valore predefinito quando si chiama get_option() .
Abbiamo anche introdotto le add_settings_section() e add_settings_field() che ci aiuteranno a completare questo passaggio.
La funzione add_settings_section() viene utilizzata per registrare una sezione con un certo nome slug con WordPress. Qui, $id è il nome slug per identificare la sezione e viene utilizzato nell'attributo 'id' dei tag.

 add_settings_section( $id, $title, $callback, $page )

Il $title è il titolo formattato della sezione che verrà mostrata come intestazione della sezione, $callback è la funzione che farà eco al contenuto nella parte superiore della sezione e $page è il nome slug della pagina che dovrebbe corrisponde all'argomento $page di do_settings_sections() , che nel nostro caso è "options_page".

Tutti i parametri sopra indicati sono obbligatori.

La funzione add_settings_field () fornita da WordPress ti consente di aggiungere un nuovo campo a una sezione.

 add_settings_field( $id, $title, $callback, $page, $section, $args )

I $id , $title , $callback e $page vengono utilizzati come spiegato in precedenza. La $section è il nome slug della sezione della pagina delle impostazioni in cui mostrare la casella e $args viene utilizzato durante l'output del campo. Sia $section che $args sono opzionali.

Ai fini di questo articolo non introdurremo una funzione extra per sanificare i nostri valori. Ricorderemo tuttavia che è altamente raccomandato disinfettare sempre i campi del modulo.

Ora abbiamo due metodi pubblici che devono essere introdotti, render_section() e render_field() .

Per il metodo render_section() produrremo solo un'intestazione per la nostra sezione:

 public function render_section() { ?> <h2><?php _e( 'Section #1', 'oop-menu-item-sub' ); ?></h2> <?php }

Per il metodo render_field() produrremo 3 pulsanti di opzione con le nostre scelte per l'elemento HTML:

 public function render_field() { $stored_option = get_option( 'option_name' )['html_element']; ?> <input type="radio" name="option_name[html_element]" value="div" <?php checked( $stored_option, 'div' ); ?> /> div <input type="radio" name="option_name[html_element]" value="p" <?php checked( $stored_option, 'p' ); ?> /> p <input type="radio" name="option_name[html_element]" value="span" <?php checked( $stored_option, 'span' ); ?> /> span <?php }

Questo dovrebbe essere il risultato che vedi ora:

Se scegli un altro elemento, come ad esempio span, e salvi, anche questo dovrebbe funzionare correttamente.

Rifletti le modifiche alla pagina delle opzioni sul tuo sito web

L'ultimo passaggio che resta da spiegare è come applicare l'elemento HTML che gli utenti amministratori sceglieranno all'elemento dei sottotitoli sotto la voce di menu sul front-end del sito web.

Questo passaggio è davvero semplice in quanto l'unica cosa di cui abbiamo bisogno è recuperare il campo selezionato dalla tabella delle opzioni del database e modificare la classe “ My_Custom_Nav_Walker ” nel nostro codice. In particolare, dovremo sostituire la parte di codice in cui aggiungiamo la voce menu_item_sub alla variabile $output .

 $output .= '<div class="menu-item-sub">' . $menu_item_sub . '</div>';

Otterremo prima l'elemento con get_option( 'option_name' )['html_element']; e mantienilo in una variabile $stored_option e quindi applicalo alla riga sopra. La classe finale dovrebbe assomigliare a questa:

 if ( ! class_exists( 'My_Custom_Nav_Walker' ) ) { class My_Custom_Nav_Walker extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth=0, $args=[], $id=0 ) { $menu_item_sub = get_post_meta( $item->ID, '_menu_item_sub', true ); $output .= '<li class="' . implode( ' ', $item->classes ) . '">'; if ( $item->url && $item->url != '#' ) { $output .= '<a href="' . $item->url . '">'; } else { $output .= '<span>'; } $output .= $item->title; if ( $item->url && $item->url != '#' ) { $output .= '</a>'; } else { $output .= '</span>'; } $stored_option = get_option( 'option_name' )['html_element']; if ( ! empty( $menu_item_sub ) ) { $output .= '<'. $stored_option .' class="menu-item-sub">' . $menu_item_sub . '</'. $stored_option .'>'; } } } }

A volte aiuta a visualizzare come funzionano le funzioni di WordPress quando si crea una pagina delle impostazioni guardando il codice del nostro plugin. Ecco come appare nel nostro esempio:

Conclusione

Come si spera, l'API delle impostazioni di WP è lo strumento principale qui che ci consente di creare le ossa per la pagina delle opzioni del nostro plug-in. Oltre a questo, è una tua scelta decidere se utilizzare un approccio più Object Oriented con Classi o utilizzare il percorso più semplice in cui incolli semplicemente le funzioni e gli hook nel file PHP del plugin principale.

Segnaliamo qui che il percorso che abbiamo seguito per ricostruire il plugin non è proprio OOP ma ha decisamente spostato un passo in quella direzione. In una prossima serie di articoli sull'OOP approfondiremo le altre funzionalità che possono migliorare la gestione del nostro plugin.

La creazione di una pagina delle impostazioni per il nostro plug-in personalizzato può creare un po' di confusione, ma si spera che dopo aver letto questo articolo, capirai cosa è richiesto. Buona codifica!