Creare la voce di sottomenu per un plugin di WordPress

← ritorno a WordPress


Guide di riferimento dal quale è stato estratto questo articolo:

Creare la voce di sottomenu

Al fine di iniziare a lavorare sul plugin, prima introduciamo una voce al sottomenu. Per fare questo, abbiamo bisogno di sfruttare la funzione API di WordPress add_options_page. Questa funzione richiede cinque parametri:

  1. il testo da visualizzare come titolo della pagina opzioni
  2. il testo da visualizzare come testo del sottomenu della voce di menu
  3. le funzionalità necessarie per accedere a questa voce di menu
  4. lo slug dal menu che viene utilizzato per identificare questa voce di sottomenu
  5. un callback alla funzione responsabile del rendering della pagina di amministrazione

Nota che utilizzeremo le classi per organizzare la nostra funzionalità, tanto di quello che stiamo facendo sarà orientato agli oggetti.

In primo luogo, creiamo una classe nella directory admin chiamata class-submenu.php. Poiché questa classe è responsabile per l'introduzione di un nuovo sottomenu, la chiameremo in modo descrittivo. 

<?php
/** 
* Creates the submenu item for the plugin. 
* 
* Registers a new menu item under 'Tools' and uses the dependency passed into 
* the constructor in order to display the page corresponding to this menu item. 
* 
* @package Custom_Admin_Settings 
*/
class Submenu {
        /** 
* A reference the class responsible for rendering the submenu page. 
* 
* @var Submenu_Page 
* @access private 
*/
	private $submenu_page;
	/** 
* Initializes all of the partial classes. 
* 
* @param Submenu_Page $submenu_page A reference to the class that renders the 
* page for the plugin. 
*/
	public function __construct( $submenu_page ) {
		$this->submenu_page = $submenu_page;
	}
	/** 
* Adds a submenu for this plugin to the 'Tools' menu. 
*/
	public function init() {
		 add_action( 'admin_menu', array( $this, 'add_options_page' ) );
	}
	/** 
* Creates the submenu item and calls on the Submenu Page object to render 
* the actual contents of the page. 
*/
	public function add_options_page() {
		add_options_page(
			'Tuts+ Custom Administration Page',
			'Custom Administration Page',
			'manage_options',
			'custom-admin-page',
			array( $this->submenu_page, 'render' )
		);
	}
}

Per creare una entrata di menù separata utilizzare add_menu_page 

add_menu_page('Norisys Archive', 'Norisys Archive', 'manage_options', 'norisys-archive-admin-page', array($this->submenu_page, 'render'));

A questo punto, il plugin non sta facendo ancora nulla. Dobbiamo ancora creare la classe Submenu_Pages, e poi le dobbiamo legare con il file di bootstap.

Creazione della pagina di sottomenu

Innanzitutto cominciamo con la classe Submenu_Page. Create un nuovo file nella directory admin e chiamatelo class-submenu-page.php. Poi aggiungete nel file il seguete codice: 

<?php
/** 
* Creates the submenu page for the plugin. 
* 
* @package Custom_Admin_Settings 
*/
/** 
* Creates the submenu page for the plugin. 
* 
* Provides the functionality necessary for rendering the page corresponding 
* to the submenu with which this page is associated. 
* 
* @package Custom_Admin_Settings 
*/
class Submenu_Page {
        /** 
* This function renders the contents of the page associated with the Submenu 
* that invokes the render method. In the context of this plugin, this is the 
* Submenu class. 
*/
	public function render() {
		echo 'This is the basic submenu page.';
	}
}

Quando si esegue il rendering di questa pagina, semplicemente verrà visualizzato il testo: "Questa è la pagina di sottomenu base." Alla fine arriveremo all'aggiunta di nuove opzioni. Ma prima, diamo vita a questo plugin creando un'istanza all'interno del nostro file di bootstrap.

Rendering del Menù e della pagina

Successivamente, aprite il file custom-admin-settings.php che abbiamo creato in precedenza in questo tutorial. Andiamo avanti e scrivete il codice necessario per introdurre la nuova voce di sottomenu e la relativa pagina associata.

Ricordate, la classe di sottomenu richiede che un'istanza della classe Submenu_Page venga passata nel relativo costruttore, e quindi abbiamo bisogno di chiamare il metodo init della classe di sottomenu a impostare il tutto in moto.

Nel codice, questo è simile a quanto segue: 

<?php
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
     die;
}
// Include the dependencies needed to instantiate the plugin.
foreach ( glob( plugin_dir_path( __FILE__ ) . 'admin/*.php' ) as $file ) {
	include_once $file;
}
add_action( 'plugins_loaded', 'tutsplus_custom_admin_settings' );
/**
 * Starts the plugin.
 *
 * @since 1.0.0
 */
function tutsplus_custom_admin_settings() {
	$plugin = new Submenu( new Submenu_Page() );
	$plugin->init();
}

Il markup della pagina

La prima cosa che dobbiamo fare è creare una directory della vista all'interno della directory admin del nostro plugin.

Una volta fatto, possiamo chiamare quanto stiamo creando semplicemente come Settings.php o qualcosa di più descrittivo. La complessità di quello che state costruendo sta realmente a voi. Poiché si tratta di un semplice plugin, gli darò un nome semplice.

Ora, al fine di collegare questo fino ad il vostro plugin, abbiamo bisogno di rivisitare la funzione dall'alto. Ciò significa che la funzione dovrebbe apparire come questa: 

<?php
public function render() {
    include_once( 'views/settings.php' );
}

Aggiungere un'opzione

A questo punto, siamo pronti per aggiungere una opzione. Per lo scopo di questo post, consentiremo all'utente di inserire qualcosa nell' elemento di testo di input. Questo ci consente di vedere come sanificare le informazioni ed eventualmente mostrarle sul front-end.

Per fare questo, abbiamo la necessità di avere un pezzo fondamentale di informazioni. Cioè abbiamo bisogno di sapere il nome dell' attributo che chiamiamo con l'elemento di input. In modo da salvarlo correttamente nel database.

Nella vista settings.php, aggiungete il seguente codice. 

<div class="wrap">
    <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
  <form method="post" action="<?php echo esc_html( admin_url( 'admin-post.php' ) ); ?>">
		<div id="universal-message-container">
			<h2>Universal Message</h2>
			<div class="options">
				<p>
					<label>What message would you like to display above each post?</label>
					<br />
					<input type="text" name="acme-message" value="" />
				</p>
		</div><!-- #universal-message-container -->
	</form>
</div><!-- .wrap -->

testo html

<p>
   <label>Descrizione</label>
            <br />
            <?php
            $content = isset( $element['description'] ) ? stripslashes( $element['description'] ) : ''; 
            wp_editor( $content, 'description', array( 'textarea_rows' => 8, 'media_buttons' => false, 'drag_drop_upload' => false ) );
            ?>
         </p>

Garantire l'opzione

Normalmente mostrerei uno screenshot qui, ma non abbiamo ancora finito. Abbiamo bisogno di introdurre altre due cose.

  1. Un nonce WordPress
    • Un nonce è un "numero utilizzato una volta" per aiutare a proteggere gli URL e le forme da determinati tipi di uso scorretto, o altrimenti dannoso.
  2. Il pulsante Invia

Nel nostro file di settings.php, aggiungiamo il seguente blocco di codice prima della fine della form: 

<?php
    wp_nonce_field( 'acme-settings-save', 'acme-custom-message' );
    submit_button();
?>
  • Il campo nonce viene utilizzato per convalidare che il contenuto del modulo di richiesta sia arrivato dal sito corrente e non altrove. Un nonce non offre una protezione assoluta, ma deve proteggere contro la maggior parte dei casi. È molto importante utilizzare campi nonce nei form.

Se si tenta di salvare la pagina di opzioni, probabilmente si apre con una schermata bianca. Che non è mai buono, ma è quello che ci aspettiamo dato lo stato attuale del nostro plugin.

Abbiamo bisogno di introdurre una funzione gancio in uno dei ganci WordPress disponibili, che verificherà se il valore nonce è valido. Se è valido, quindi procederemo con il salvataggio delle informazioni; in caso contrario, non dovrebbe consentirci di procedere.

Visto che siamo nel business della creazione di una pagina di amministrazione personalizzata, avremmo bisogno di un gancio diverso rispetto a quello che possiamo essere abituati a usare in situazioni come questa. In questo esempio, utilizzeremo il gancio di admin_post.

Ora, non abbiamo una classe che può gestire le opzioni di salvataggio. Quindi cerchiamo di introdurne una. Nella directory admin del plugin, creiamo una classe Serializer. Questa sarà responsabile dei valori delle nostre opzioni di salvataggi.

Come potete vedere, ho chiamato il mio file class-serializer.php Sappiamo per esperienza e dal codice sopra, che avremo bisongo di agganciarci ad un gancio nell'admin_post menzionato sopra, e che avremo bisogno di una funzione responsabile del salvataggio delle informazioni.

Prima di aggiungere qualsiasi funzionalità, andiamo avanti e impostare questa funzione quando si carica innanzitutto il nostro plugin. In primo luogo, restituisce il custom-admin-settings.php. Ora, a questo punto, dobbiamo chiederci se una delle nostre classi esistenti dovrebbe contenere il Serializer come dipendenza.

Penso che un caso possa essere quello del Submenu_Page il quale deve avere un riferimento al serializzatore perchè la pagina contiene le opzioni da salvare.

In alternativa, possiamo lasciare questo file completamente separato e renderlo disponibile per un altro modello. Se dovessimo farlo, andremmo fuori tema. Anche se penso che sia importante, è fuori della portata di cio che vogliamo fare.

Quindi cerchiamo di creare un'istanza della classe Serializer, inizializzarlo e poi passarlo al costruttore della pagina sottomenu. Il codice nel file di avvio del plugin dovrebbe risultare come questo: 

<?php
add_action( 'plugins_loaded', 'tutsplus_custom_admin_settings' );
/** 
* Starts the plugin. 
* 
* @since 1.0.0 
*/
function tutsplus_custom_admin_settings() {
    $serializer = new Serializer();
    $serializer->init();
    $plugin = new Submenu( new Submenu_Page( $serializer ) );
    $plugin->init();
}

Torniamo al Serializer. Ora che ce l'abbiamo adattato al resto del plugin,è arrivato il momento di scrivere un pò di codice, seguendo quanto suggerito dal commento, verificando il valore nonce che abbiamo creato sul front-end.

Fortunatamente, WordPress rende questo processo semplice grazie alla funzione wp_verify_nonce. Questa funzione accetta due argomenti :

  1. l'azione
  2. il nome

Se ricordate l'articolo precedente,utilizziamo come action la funzione acme-settings-save e acme-custom-message come valore nonce per validarlo, abbiamo bisogno di verificare che esista tra gli elementi di $_Post e abbia superato i controlli nativi di WordPress.

Per fare questo, mi piace creare un metodo private che mi consente di incapsulare questa logica in una funzione che possa utilizzare nella funzione save che abbiamo definito sopra. 

<?php
/** 
* Determines if the nonce variable associated with the options page is set 
* and is valid. 
* 
* @access private 
* 
* @return boolean False if the field isn't set or the nonce value is invalid; 
* otherwise, true. 
*/
private function has_valid_nonce() {
    // If the field isn't even in the $_POST, then it's invalid. 
    if ( ! isset( $_POST['acme-custom-message'] ) ) { // Input var okay. 
        return false;
    }
    $field  = wp_unslash( $_POST['acme-custom-message'] );
    $action = 'acme-settings-save';
    return wp_verify_nonce( $field, $action );
}

Una volta fatto, potrò aggiungere una call a questa funzione che ci consentirà di verificare la validità della sottomissione ed uscire dalla routine o procedere con il controllo successivo (a cui arriveremo a momenti).

Si noti che restituire semplicemente false in questo controllo condizionale non è il modo adeguato per gestirlo. Invece, sarebbe meglio inserire un messaggio di errore visualizzabile nel dashboard di WordPress. Questo è qualcosa che ci potrà essere utile quando rivisiteremo in un futuro il tutorial.

Per ora, però, siamo principalmente interessati a rendere sicuro che siamo in grado di inviare correttamente i dati. Questo ci porta alla parte successiva del nostro codice.

Autorizzazione

Anche se il numero sia stato utilizzato (o nonce) una volta controllata la validazione, c'è ancora un'altra cosa che dobbiamo controllare: abbiamo bisogno di assicurarsi che l'utente corrente disponga dell'autorizzazione per salvare i dati.

A questo proposito, dobbiamo assicurarci che l'utente corrente sia un amministratore. A tal scopo, possiamo vedere le funzionalità dell'attuale utente (potete vedere che questa pagina fornisce un riferimento per ogni ruolo e le sue funzionalità associate).

Notate che una delle caratteristiche dell'amministratore è gestire le opzioni. Adesso possiamo usare una Funzione API di WordPress current_user_can per verificare se l'untente corrente può salvare le opzioni su questa pagina.

Ma in primo luogo, questo solleva una domanda: se l'utente non può salvare le opzioni, perché dovrebbe essere consentito loro in realtà di vedere la pagina?

Se vi ricordate da versioni precedenti della serie, abbiamo scritto il seguente frammento di codice: 

<?php
public function add_options_page() {
    add_options_page(
        'Tuts+ Custom Administration Page',
        'Custom Administration Page',
        'manage_options',
        'custom-admin-page',
        array( $this->submenu_page, 'render' )
    );
}

Questo assicura che la pagina delle opzioni è disponibile solo per gli amministratori; Tuttavia, vogliamo essere molto attenti e posizionare un controllo per questo durante il nostro processo di serializzazione.

Ora possiamo aggiornare il condizionale dove stiamo anche verificando il valore nonce oltre a verificare l'autorizzazione dell'utente corrente: 

<?php
/** 
* Validates the incoming nonce value, verifies the current user has 
* permission to save the value from the options page and saves the 
* option to the database. 
*/
public function save() {
    // First, validate the nonce and verify the user as permission to save. 
    if ( ! ( $this->has_valid_nonce() && current_user_can( 'manage_options' ) ) ) {
        // TODO: Display an error message. 
    }
    // If the above are valid, save the option. 
}

Ora che abbiamo il codice in atto per assicurarsi che il valore nonce sia impostato e che l'utente corrente possa salvare il valore, possiamo andare avanti con la sanificazione.

Sanificazione

In breve, la sanificazione è l'idea di essere sicuri di rendere puliti, sicuri ehm sani per il database.

In poche parole, impedisce agli utenti malintenzionati di inserire informazioni nel database che, in definitiva, potrebbero influenzare negativamente il nostro sito.

Fortunatamente, WordPress fornisce una bella funzione di supporto che ci permette di assicurarci che questo avvenga nel modo più semplice possibile. Per coloro che sono interessati, potete leggere tutto riguardo la convalida e la sanificazione dei dati (Anche se guarderemo la validazione nel tutorial successivo).

Nel nostro codice, andremo ad utilizzare sanitaze_text_field (come linkato sopra). Questa funzione si comporta nel modo seguente:

  • Controlli per la codifica UTF-8 non valida
  • Converte single ' <' caratteri delle entità
  • Elimina tutti i tag
  • Rimuove le interruzioni di riga, tabulazioni e spazi vuoti aggiuntivi
  • Elimina gli ottetti

Troppo bello poterne disporre, non è vero? Mettiamolo in funzione. A tale scopo, individuate funzione save su cui abbiamo lavorato ed aggiornatela in modo che assomiglia a questo: 

<?php
/** 
* Validates the incoming nonce value, verifies the current user has 
* permission to save the value from the options page and saves the 
* option to the database. 
*/
public function save() {
    // First, validate the nonce and verify the user as permission to save. 
    if ( ! ( $this->has_valid_nonce() && current_user_can( 'manage_options' ) ) ) {
        // TODO: Display an error message. 
    }
    // If the above are valid, sanitize and save the option. 
    if ( null !== wp_unslash( $_POST['acme-message'] ) ) {
        $value = sanitize_text_field( $_POST['acme-message'] );
        update_option( 'tutsplus-custom-data', $value );
    }
}

Notate che stiamo leggendo l'input dalla raccolta $_post, sanificatela e salvate il risultato in una variabile separata. Successivamente, questa variabile verrà scritta nel database utilizzando la funzione update_option.

Per questo articolo, io sto optanto per utilizzare la chiave tutsplus-custom-data. Tutto ciò che utilizzate, è importante, che sia preceduto da qualcosa di unico in modo che un altro plugin o tema non sovrascriva l'opzione e voi non sovrascriviate un'opzione esistente.

Infine, abbiamo bisogno di reindirizzarci alla pagina delle opzioni. Dato che non stiamo usando un'API incorporata, abbiamo bisogno di scrivere una funzione che faccia questo per noi. Fortunatamente, è molto facile.

In primo luogo, create una funzione denominata redirect e assicuratevi che assomiglia a questa: 

/** 
* Redirect to the page from which we came (which should always be the 
* admin page. If the referred isn't set, then we redirect the user to 
* the login page. 
* 
* @access private 
*/
private function redirect() {
    // To make the Coding Standards happy, we have to initialize this. 
    if ( ! isset( $_POST['_wp_http_referer'] ) ) { // Input var okay. 
        $_POST['_wp_http_referer'] = wp_login_url();
    }
    // Sanitize the value of the $_POST collection for the Coding Standards. 
    $url = sanitize_text_field(
        wp_unslash( $_POST['_wp_http_referer'] ) // Input var okay. 
    );
    // Finally, redirect back to the admin page. 
    wp_safe_redirect( urldecode( $url ) );
    exit;
}

Il codice sopra riportato deve essere auto-esplicativo, ma per essere sicuri che sia chiaro, deve eseguire le operazioni seguenti:

  1. Controlla che un valore di WordPress privato sia presente nella raccolta $_post. Se non è impostato, quindi lo imposterà uguale all'URL di login di WordPress. Questo costringerà le persone alla pagina di login se non è impostato l'URL di riferimento; Tuttavia, non c'è nessuna ragione perché non debba esserlo.
  2. Successivamente, prendiamo il riferimento e sterilizziamo i dati. Questo è qualcosa che le norme di codifica chiamano per assicurarsi che i dati siano puliti.
  3. Infine, inizializziamo un wp_safe_redirect all'URL in modo da ritornare alla pagina Opzioni.

Una volta che tutto questo è fatto, aggiungete questo come ultima riga nella funzione save precedente. La versione finale del codice dovrebbe assomigliare a questo: 

<?php
/** 
* Performs all sanitization functions required to save the option values to 
* the database. 
* 
* @package Custom_Admin_Settings 
*/
/** 
* Performs all sanitization functions required to save the option values to 
* the database. 
* 
* This will also check the specified nonce and verify that the current user has 
* permission to save the data. 
* 
* @package Custom_Admin_Settings 
*/
class Serializer {
    /** 
* Initializes the function by registering the save function with the 
* admin_post hook so that we can save our options to the database. 
*/
	public function init() {
		add_action( 'admin_post', array( $this, 'save' ) );
	}
	/** 
* Validates the incoming nonce value, verifies the current user has 
* permission to save the value from the options page and saves the 
* option to the database. 
*/
	public function save() {
		// First, validate the nonce and verify the user as permission to save. 
		if ( ! ( $this->has_valid_nonce() && current_user_can( 'manage_options' ) ) ) {
			// TODO: Display an error message. 
		}
		// If the above are valid, sanitize and save the option. 
		if ( null !== wp_unslash( $_POST['acme-message'] ) ) {
			$value = sanitize_text_field( $_POST['acme-message'] );
			update_option( 'tutsplus-custom-data', $value );
		}
		$this->redirect();
	}
	/** 
* Determines if the nonce variable associated with the options page is set 
* and is valid. 
* 
* @access private 
* 
* @return boolean False if the field isn't set or the nonce value is invalid; 
* otherwise, true. 
*/
	private function has_valid_nonce() {
		// If the field isn't even in the $_POST, then it's invalid. 
		if ( ! isset( $_POST['acme-custom-message'] ) ) { // Input var okay. 
			return false;
		}
		$field  = wp_unslash( $_POST['acme-custom-message'] );
		$action = 'acme-settings-save';
		return wp_verify_nonce( $field, $action );
	}
	/** 
* Redirect to the page from which we came (which should always be the 
* admin page. If the referred isn't set, then we redirect the user to 
* the login page. 
* 
* @access private 
*/
	private function redirect() {
		// To make the Coding Standards happy, we have to initialize this. 
		if ( ! isset( $_POST['_wp_http_referer'] ) ) { // Input var okay. 
			$_POST['_wp_http_referer'] = wp_login_url();
		}
		// Sanitize the value of the $_POST collection for the Coding Standards. 
		$url = sanitize_text_field(
				wp_unslash( $_POST['_wp_http_referer'] ) // Input var okay. 
		);
		// Finally, redirect back to the admin page. 
		wp_safe_redirect( urldecode( $url ) );
		exit;
	}
}

Ecco cosa c'è : abbiamo sicurezza, sanificazione, serializzazione e reindirizzamento nello stesso luogo. Ma non stiamo dimostrando i messaggi di errore, e noi non stiamo recuperando i dati.

Recupero informazioni dal database

Recuperare le informazioni dal database è un processo semplice. Dato che abbiamo già lavorato con funzioni come update_option, questo dovrebbe essere molto semplice.

Lavoreremo con get_option. Richiede solo un singolo argomento, ovvero l'ID o la chiave che abbiamo utilizzato per memorizzare le informazioni. Nel nostro caso, si tratta di tutsplus-custom-data. Se vuoi essere creativo, puoi passare un secondo argomento facoltativo che verrà restituito se le informazioni non vengono trovate.

Per mostrare come questo può essere usato, farò in modo che la funzione restituisca una stringa vuota in modo da avere qualcosa di valido da mostrare all'utente (anche se non è niente). Lo snippet di codice per eseguire questa operazione è simile al seguente: 

<?php
$data = get_option( 'tutsplus-custom-data', '' );

Convalidare le informazioni

C'è molto da dire sulla convalida in WordPress. Ma per mantenere questo tutorial il più semplice possibile, parleremo della convalida dell'input. Dopotutto, abbiamo a che fare con l'input dell'utente tramite un elemento di input, quindi ha senso.

Nell'ultimo articolo, abbiamo trattato l'argomento della sanificazione, che in pratica consiste nell'assicurarsi che i dati siano puliti prima di essere inseriti nel database. Allo stesso modo, la convalida garantisce che sia pulito, sicuro e leggibile per i nostri utenti.

A tal fine, non è sufficiente prelevare le informazioni dal database. Dobbiamo anche convalidarlo. Nel caso del nostro plugin, i dati sono abbastanza semplici che potrebbe sembrare eccessivo convalidarli; tuttavia, lo scopo dell'esercizio è aiutare a sviluppare la mentalità su come dobbiamo procedere per la sanificazione, il salvataggio, il recupero, la convalida e la visualizzazione dei dati.

E proprio come nel caso della sanificazione, WordPress offre alcune funzioni che semplificano la convalida, soprattutto per quanto riguarda la convalida dell'input. In questa situazione, possiamo essere aggressivi quanto vogliamo.

Nel nostro caso, potrebbe essere sufficiente usare esc_attr durante il rendering delle opzioni. Se abbiamo consentito agli utenti di inserire qualsiasi tipo di HTML, allora potremmo voler utilizzare wp_kses.

Deserializzazione

All'inizio del progetto, abbiamo creato una classe specifica per il salvataggio delle informazioni nel database. Abbiamo chiamato questa classe Serializer.

Ma non vogliamo sovraccaricare quella classe con una responsabilità che non ha senso. E poiché mostreremo queste informazioni sia sulla pagina delle opzioni che sul front-end del sito, sarebbe logico che abbiamo una classe per deserializzare il valore e renderlo accessibile all'intera applicazione WordPress.

Quindi, nella root della directory del tuo plugin, crea una directory "shared" e aggiungi un file chiamato class-deserializer.php.

Successivamente, vogliamo che il nostro codice sia impostato in modo che:

  1. si basa su principi orientati agli oggetti
  2. recupera le informazioni per le quali è richiesto
  3. convalida le informazioni
  4. lo restituisce al chiamante

A tal fine, lo scheletro iniziale della classe potrebbe assomigliare a questo: 

<?php
class Deserializer {
    public function get_value( $option_key ) {
        return get_option( $option_key, '' );
    }
}

È semplice, certo. Aggiungeremo altro codice durante questo tutorial, ma ricorda il principio di responsabilità singola, e questa è una classe che deve essere utilizzata tra due parti dell'applicazione WordPress.

Mostralo nella pagina delle opzioni

Per mostrarlo nella pagina delle opzioni, dobbiamo rivisitare il modo in cui istanziamo Submenu_Page nel file custom-admin-settings.php. Nello specifico, dobbiamo istanziare il deserializzatore e passarlo al costruttore di Submenu_Page.

Innanzitutto, dobbiamo includere il file. Questo può accadere subito dopo aver verificato se si accede direttamente al file del plug-in principale: 

<?php
// If this file is called directly, abort. 
if ( ! defined( 'WPINC' ) ) {
    die;
}
// Include the shared dependency. 
include_once( plugin_dir_path( __FILE__ ) . 'shared/class-deserializer.php' );

Il codice nella funzione principale della radice del plugin dovrebbe ora assomigliare a questo: 

<?php
add_action( 'plugins_loaded', 'tutsplus_custom_admin_settings' );
/** 
* Starts the plugin. 
* 
* @since 1.0.0 
*/
function tutsplus_custom_admin_settings() {
    $serializer = new Serializer();
    $serializer->init();
    $deserializer = new Deserializer();
    $plugin = new Submenu( new Submenu_Page( $deserializer ) );
    $plugin->init();
}

E poi il costruttore per Submenu_Page dovrebbe assomigliare a questo: 

<?php
public function __construct( $deserializer ) {
    $this->deserializer = $deserializer;
}

Da qui, possiamo affrontare la pagina delle opzioni. Aggiorniamo semplicemente l'attributo value effettuando una chiamata alla funzione nel deserializzatore. Ricorda, dal momento che recuperiamo incondizionatamente il valore e alla fine restituiamo una stringa vuota se non esiste nulla, dovrebbe funzionare bene. 

<p>
    <label>What message would you like to display above each post?</label>
	<br />
	<input type="text" name="acme-message"
	value="<?php echo esc_attr( $this->deserializer->get_value( 'tutsplus-custom-data' ) ); ?>"
	/>
</p>

Mostralo sul front-end

Abbiamo quasi finito. L'ultima cosa che dobbiamo fare è impostare il plugin per visualizzare il messaggio personalizzato sul front-end. Nello specifico, vogliamo visualizzare tutto ciò che l'utente ha inserito nella pagina del singolo post (rispetto a una pagina di archivio o qualsiasi altro tipo di pagina) e farlo sopra ogni post.

Ciò significa che dovremo fare quanto segue:

  1. Imposta una funzione che utilizzerà l'hook the_content.
  2. Leggi il valore utilizzando il nostro deserializzatore.
  3. Anteponi il valore prima del contenuto (magari nel suo stesso elemento).

Fortunatamente, non è molto lavoro, soprattutto perché abbiamo la maggior parte del lavoro di cui avremo bisogno per iniziare. Tuttavia, dobbiamo creare un'area del plug-in specificamente responsabile della gestione del front-end del sito.

A tal fine, crea una directory "public" nella root della directory del tuo plugin e aggiungi class-content-messenger.php.

Nella classe, dobbiamo definire un costruttore che accetterà il deserializzatore come dipendenza. Il costruttore (e la proprietà necessaria) dovrebbe assomigliare a questo: 

<?php
class Content_Messenger {
  /** 
  * A reference to the class for retrieving our option values. 
  * 
  * @access private 
  * @var Deserializer 
  */
  private $deserializer;
  /** 
  * Initializes the class by setting a reference to the incoming deserializer. 
  * 
  * @param Deserializer $deserializer Retrieves a value from the database. 
  */
  public function __construct( $deserializer ) {
      $this->deserializer = $deserializer;
  }
}

Quindi dobbiamo creare una funzione init che registrerà una funzione interna (che chiameremo display) per rendere il contenuto insieme al nuovo messaggio. 

/** 
* Initializes the hook responsible for prepending the content with the 
* option created on the options page. 
*/
public function init() {
    add_filter( 'the_content', array( $this, 'display' ) );
}

Successivamente, dovremo aggiornare il file del plugin principale in modo che istanzia la nostra nuova classe e passi il deserializzatore al costruttore. Quindi inizializzerà la classe.

Innanzitutto, lo includeremo: 

<?php
// Include the shared and public dependencies. 
include_once( plugin_dir_path( __FILE__ ) . 'shared/class-deserializer.php' );
include_once( plugin_dir_path( __FILE__ ) . 'public/class-content-messenger.php' );

Quindi lo istanziamo: 

<?php
function tutsplus_custom_admin_settings() {
    // Code removed for brevity... 
    // Setup the public facing functionality. 
    $public = new Content_Messenger( $deserializer );
    $public->init();
}

Da qui, dovremmo essere pronti a partire. Assicurati di aver inserito un valore nella pagina delle opzioni. Salva il tuo lavoro e dai un'occhiata a una singola pagina di post sul tuo sito. Dovrebbe assomigliare a qualcosa di simile a questo:

Estratto da "https://wiki.minerva-apps.com/index.php?title=Creare_la_voce_di_sottomenu_per_un_plugin_di_WordPress&oldid=1187"