Advertisement
  1. Code
  2. WordPress Plugins

Creazione delle pagine di amministrazione WordPress personalizzate, parte 2

Scroll to top
Read Time: 8 min
This post is part of a series called Creating Custom WordPress Administration Pages.
Creating Custom WordPress Administration Pages, Part 1
Creating Custom WordPress Administration Pages, Part 3

Italian (Italiano) translation by Piergiorgio Sansone (you can also view the original English article)

Nel tutorial precedente di questa serie, abbiamo iniziato a lavorare alla nostra personalizzazione della pagina di amministrazione.

In definitiva, gli obiettivi verso cui stiamo lavorando dimostreranno come possiamo usare il nostro codice personalizzato così come l'API di WordPress, per creare pagine che sono un po' più flessibili rispetto a quelle che naturalmente potrebbero essere disponibili tramite una delle API standard.

Questo è non vuol dire che dobbiamo eludere o evitare le API che fornisce WordPress. In realtà, a me piace molto usarle per quanto possibile. Ma quando  in un progetto si pone la necessatà di introdurre funzionalità aggiuntive o personalizzare il modo in cui si esegue qualcosa, lo sviluppo di tale funzionalità viene lasciato a voi.

In secondo luogo, stiamo anche utilizzando principi, come la singola responsabilità per dimostrare, come possiamo dire di avere un approccio ben organizzato, orientato agli oggetti al codice che stiamo scrivendo.

Prima di andare avanti, però, vediamo che cosa abbiamo visto  finora.

Con il primo Post...

Ricordiamo che abbiamo fornito una definizione del principio di responsabilità singola:

Raccogliere insieme le cose che cambiano per le stesse ragioni. Separare quelle cose che cambiano per motivi diversi.

Che lo abbiamo usato per aiutare a guidare l'organizzazione della creazione del nostro attuale sottomenu e della pagina di sottomenu.

Abbiamo anche guardato il codice per la prima versione del plugin, lo abbiamo reso disponibile per il download e gettato le basi per il lavoro che stiamo andando a fare in questo tutorial.

Se non avete Recensito il precedente tutorial o almeno rivisto il codice, consiglio vivamente di farlo; in caso contrario, potete lasciarlo chiedendovi perche ' stiamo prendendo alcune delle decisioni che stiamo prendendo o perché del codice è organizzato nel modo in cui si trova.

Detto questo, andiamo avanti.

Prima di iniziare

Come con molti dei miei tutorial, mi piace assicurarmu che abbiate tutto attivo ed in esecuzione prima di procedere. Per questo tutorial, avrete bisogno di quanto segue:

  • un ambiente di sviluppo locale
  • una copia installata di WordPress e pronto per essere utilizzato
  • una copia del nostro plugin per l'esercitazione precedentemente installato e attivato
  • un IDE con il plugin caricato e pronto per l'ulteriori modifica

Se quanto sopra non ha senso, vi prego di rivedere l'esercitazione precedente o questa serie per come impostare un ambiente di sviluppo locale.

Per quanto riguarda il codice che verrà, lo vedremo passo dopo passo. Vi spiegherò esattamente quello che stiamo facendo e fornirò sia i commenti del codice che l'esercitazione commentata per assicurarmi che comprendiate tutto ciò che sta accadendo lungo il percorso.

Creazione della pagina di Amministrazione

Continuiamo con il plugin in questo articolo, questo è quello che andremo a fare:

  1. Creare il markup della pagina di amministrazione che eredita gli stili nativi di WordPress.
  2. Introdurre un'opzione con cui l'utente può interagire.
  3. Sanificare l'opzione prima di salvarlo.
  4. Recuperare il valore dell'opzione e impostarle con lo stesso valore nella pagina.

In questo tutorial, approfondiremo i prossimi due punti. Nel prossimo articolo invece, ci dedicheremo ai punti tre e quattro.

Per coloro i quali hanno familiarità con il Settings delle API, questo potrebbe sembrare eccessivo. Ma come vedrete con il resto di questo tutorial e questa serie, c'è una ragione per la quale lo stiamo suddividendo in pezzi più piccoli come questo.

Detto questo, presentato come il nostro piano d'azione, diamoci da fare.

Il markup della pagina

L'ultima volta che abbiamo lasciato questa particolare funzione, il codice si presentava così:

1
<?php
2
class Submenu_Page {
3
4
    /**

5
     * This function renders the contents of the page associated with the Submenu

6
     * that invokes the render method. In the context of this plugin, this is the

7
     * Submenu class.

8
     */
9
    public function render() {
10
        echo 'This is the basic submenu page.';
11
    }
12
}

Ora siamo pronti per  iniziare a creare effettivamente il layout della pagina. Ogni volta che lavoro su un plugin per i clienti, queste le chiamo "viste" (views).

Da non confonderlo con il paradigma MVC model-view-controller. Ma non li chiamo modelli anche perché in WordPress, i modelli sono quelli che si utilizzano per visualizzare il contenuto di una pagina sul front-end.

Vista così è.

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

views directory inside the admin directory of the pluginviews directory inside the admin directory of the pluginviews directory inside the admin directory of the 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.

Quindi, cominciamo a creare il markup di base che fornirà l'elemento wrapper di WordPress standard insieme con il titolo della pagina:

1
<div class="wrap">
2
3
    <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
4
5
    <form method="post" action="<?php echo esc_html( admin_url( 'admin-post.php' ) ); ?>">
6
    </form>
7
8
</div><!-- .wrap -->

Notare qui che il titolo viene derivato da una funzione che utilizza i valori passati alla funzione add_options_page da quando abbiamo iniziato a lavorare sul plugin. Successivamente, utilizzeremo anche la funzione admin_url per indicare dove posteremo le opzioni (di cui parleremo un po ' più tardi).

E in entrambi i casi, utilizziamo la funzione di sanificazione esc_html per assicurarci che nessuna stringa dannosa possa visualizzarsi sulla pagina.

Questi sono due esempi di, quando sia possibile, utilizzare qualunque funzione API sia disponibile per questo scopo. Assumendo che tutto sia corretto, la vostra pagina dovrebbe essere cosi :

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:

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

Abbastanza semplice, giusto? Assumendo che tutto sia stato configurato correttamente, questo è quello che dovreste vedere:

The first pass at the Tuts Custom Administration PageThe first pass at the Tuts Custom Administration PageThe first pass at the Tuts Custom Administration Page

No, non è molto da guardare, ma cambieremo la situazione.

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.

Così, ai fini di questo esempio, supponiamo che questo messaggio venga utilizzato incondizionatamente per essere visualizzato nella parte superiore di ogni post. Non arriveremo fino a tal punto in questo articolo, ma lo rivisiteremo nel prossimo.

Nella vista settings.php, aggiungete il seguente codice.

1
<div class="wrap">
2
3
    <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
4
5
  <form method="post" action="<?php echo esc_html( admin_url( 'admin-post.php' ) ); ?>">
6
7
		<div id="universal-message-container">
8
			<h2>Universal Message</h2>
9
10
			<div class="options">
11
				<p>
12
					<label>What message would you like to display above each post?</label>
13
					<br />
14
					<input type="text" name="acme-message" value="" />
15
				</p>
16
		</div><!-- #universal-message-container -->
17
	</form>
18
19
</div><!-- .wrap -->

Se si dovesse visualizzare la pagina a questo punto, si dovrebbe vedere esattamente quello che ci si aspetta: un'etichetta e una casella di input.

Garantire l'opzione

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

  1. Un nonce WordPress
  2. Il pulsante Invia

Facciamolo adesso. Se non avete familiarità con i valori nonce, vi raccomando di leggere questo articolo. In breve si tratta di questo:

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. 

Nel nostro file di settings.php, aggiungiamo il seguente blocco di codice:

1
<?php
2
    wp_nonce_field( 'acme-settings-save', 'acme-custom-message' );
3
    submit_button();
4
?>

In definitiva, la versione finale del nostro codice dovrebbe assomigliare a questo:

1
<div class="wrap">
2
3
    <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
4
5
	<form method="post" action="<?php echo esc_html( admin_url( 'admin-post.php' ) ); ?>">
6
7
		<div id="universal-message-container">
8
			<h2>Universal Message</h2>
9
10
			<div class="options">
11
				<p>
12
					<label>What message would you like to display above each post?</label>
13
					<br />
14
					<input type="text" name="acme-message" value="" />
15
				</p>
16
		</div><!-- #universal-message-container -->
17
18
		<?php

19
			wp_nonce_field( 'acme-settings-save', 'acme-custom-message' );

20
			submit_button();

21
		?>
22
23
	</form>
24
25
</div><!-- .wrap -->

E la versione finale della pagina dovrebbe assomigliare a questo:

The final version of the Tuts Custom Administration ScreenThe final version of the Tuts Custom Administration ScreenThe final version of the Tuts Custom Administration Screen

A questo punto, siamo pronti per salvare le opzioni. Ora per fare questo, abbiamo bisogno di verificare un paio di cose:

  1. L'utente dispone dell'autorizzazione per salvare le opzioni?
  2. C'e ' un valido parametro nonce essendo passato dal modulo?

Inoltre, abbiamo bisogno di:

  1. Ripulire le informazioni per assicurarsi che nessun dato dannoso finisca nel database.
  2. Dobbiamo essere in grado di estrarre queste informazioni dal database ed inviarle via form.

E infine, dobbiamo visualizzare questo sul front-end del sito Web.

Conclusione

Così nei prossimi due articoli, ci concentreremo sul fare esattamente questo.

Non dimenticate che potete scaricare il plugin aggiornato allo stato attuale di questo post. Andando avanti nella serie, renderò disponibile l'ultima versione aggiornata all'ultimo post così sarete in grado di seguire, utilizzando il codice trattato in ogni esercitazione, lavorateci e preparatevi le domande che vorrete chiedere nei commenti.

Come nota a margine, se state cercando altre utility per aiutarvi a costruire il vostro crescente insieme di strumenti WordPress o per studiare e diventare eseperti del codice di WordPress, non dimenticate di vedere ciò che abbiamo reso disponibile nel mercato di Envato.

Ricordate, potete prendere tutti i miei corsi e tutorial sulla mia pagina di profilo, e potete seguirmi sul mio blog e/o Twitter a @tommcfarlin dove parlo di varie procedure di sviluppo software e come li possiamo impiegare in WordPress.

Infine, non esitate a lasciare qualsiasi domanda o commento nel feed qui sotto. Farò del mio meglio per partecipare e rispondere a ogni domanda o critica che offrite in relazione a questo progetto.

Risorse

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.