Advertisement
  1. Code
  2. WordPress Plugins

Creazione delle pagine di amministrazione WordPress personalizzate, parte 1

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

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

In una serie precedente, ho fornito una guida approfondita per lavorare con l'interfaccia API delle impostazioni di WordPress. Per coloro che sono nuovi a WordPress o che hanno utilizzato altri strumenti come il Customizer per gestire varie opzioni, può essere qualcosa che non avete dovuto usare nel tema o nello sviluppo di un plugin.

Come indicato nel Codex:

Le impostazioni delle API, aggiunte con WordPress 2.7, permettono alla pagina di amministazione che contiene le impostazioni dei form, di essere gestita in modo semi-automatico. Consente di definire le impostazioni delle pagine, le sezioni all'interno di tali pagine e campi all'interno delle sezioni.

Non credo che sia qualcosa che sia necessario imparare, ma è qualcosa che si dovrebbe sapere che esiste e  come lavorarci, se vi trovate a dover introdurre pagine di opzione nell'area di amministrazione di WordPress.

È un API potente, seppur un po' complessa, che ci fornisce un sacco di funzionalità. In definitiva, ci permette di fare un sacco di lavoro lato server e minimo lato client.

Ma in merito ai tempi, quando lavoriamo con una soluzione personalizzata per i clienti e abbiamo bisogno di una maggiore flessibilità rispetto all'API di impostazioni, cosa ci fornisce? Ad esempio, mettiamo che dobbiamo realizzare un plugin che avrà una pagina delle impostazioni, ma avrà bisogno di un  set di opzioni e funzionalità di convalida più flessibile su misura?

In questi casi, possiamo scrivere le nostre pagine di amministrazione WordPress personalizzate. In questa serie, daremo un'occhiata a come fare esattamente questo.

Prima di iniziare

Come la maggior parte dei tutorial come questo, è importante assicurarsi che abbiate tutto installato in modo tale da seguire tutta la seire e lavorare in contemporanea con il codice sorgente.

Per questo tutorial, è assunto che abbiate:

  • un ambiente di sviluppo locale rispetto al sistema operativo;
  • una copia di WordPress installato e pronto per essere utilizzato per l'installazione di un plugin;
  • familiarità con lo sviluppo di plugin WordPress;
  • che lavoriate a vostro agio con PHP e HTML.

Se non avete familiarità su come impostare un ambiente di sviluppo locale che include WordPress, guardate questa serie per sapere come farlo.

Se avete abbastanza dimestichezza con PHP, anche se solo a leggere il linguaggio,farò del mio meglio per fornire istruzioni chiare e commenti per ogni bit di codice che condividiamo.

Una volta che tutto questo è sistemato, siamo pronti per iniziare a lavorare sul nostro plugin.

Impostazioni di amministrazione di WordPress personalizzati

Entro la fine di questa serie, avremo un plugin che soddisfi i seguenti requisiti:

  • Aggiunge una nuova voce di sottomenu per il sistema di menu di WordPress esistente.
  • Aggiunge una nuova pagina di impostazioni che corrisponde alla nuova voce di sottomenu.
  • Sanifica e serializza le opzioni nella pagina.
  • Convalida e restituisce i valori che sono stati salvati e di conseguenza li rende disponibili.

Inoltre, ci assicureremo di avvicinarci a questo nella maniera più modulare possibile utilizzando il WordPress Coding Standards e pratiche simili per rendere la lettura, scrittura e mantenere il nostro plugin più semplice possibile.

1. il Bootstrap Plugin

La prima cosa che dobbiamo fare è creare il plugin bootstrap. Questo comprende, creare una directory dove conservere i files del plugin, un README file, una copia della licenza, un file bootstap da utilizzare eventualmente per far partire il plugin ed una directory da utilizzare per conservare le classi legate alle fuzionalità di amministrazione.

I files sono disponibili per il download come allegati a questo articolo, ma nel frattempo, potete vedere com'è la mia directory nell'immagine qui sotto:

The plugins directory structureThe plugins directory structureThe plugins directory structure

Inoltre, il contenuto del bootstrap plugin è semplice. Esaminate il seguente codice per il singolo file PHP custom-admin-settings.php, e poi mi occuperò più dettagliatamente del blocco sottostante.

1
<?php
2
/**

3
 * The plugin bootstrap file

4
 *

5
 * This file is read by WordPress to generate the plugin information in the

6
 * plugin admin area. This file also defines a function that starts the plugin.

7
 *

8
 * @link              https://code.tutsplus.com/tutorials/creating-custom-admin-pages-in-wordpress-1

9
 * @since             1.0.0

10
 * @package           Custom_Admin_Settings

11
 *

12
 * @wordpress-plugin

13
 * Plugin Name:       Custom Admin Settings

14
 * Plugin URI:        http://code.tutsplus.com/tutorials/creating-custom-admin-pages-in-wordpress-1

15
 * Description:       Demonstrates how to write custom administration pages in WordPress.

16
 * Version:           1.0.0

17
 * Author:            Tom McFarlin

18
 * Author URI:        https://tommcfarlin.com

19
 * License:           GPL-2.0+

20
 * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt

21
 */
22
23
// If this file is called directly, abort.

24
if ( ! defined( 'WPINC' ) ) {
25
     die;
26
}
27
28
add_action( 'plugins_loaded', 'tutsplus_custom_admin_settings' );
29
/**

30
 * Starts the plugin.

31
 *

32
 * @since 1.0.0

33
 */
34
function tutsplus_custom_admin_settings() {
35
36
}

Notate che nel codice precedente, c'è pochissimo codice effettivo. Invece, ci sono un sacco di commenti. Il blocco principale di commenti nella parte superiore del file spiega che cosa significa il file.

L'area sottostante con il tag @wordpress-plugin è ciò che legge al fine di generare il titolo del plugin, la descrizione ed i collegamenti relativi nel dashboard di WordPress plugin WordPress.

Successivamente, ci impediremo a chiunque di accedere direttamente al file. E, infine, creiamo una funzione personalizzata per essere licenziato con il gancio di plugins_loaded. Questa funzione è quello che verrà utilizzato per avviare il plugin.

A questo punto, dovreste essere in grado di accedere a WordPress, passando dalla Dashboard del Plugin e poi vedere il plugin disponibile per attivarlo. Andate avanti e fare clic su attiva.

Non è ancora successo nulla, ma incominceremo ad aggiungere funzionalità quando inizieremo a lavorare con questo tutorial.

2. 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.

Il contenuto della classe dovrebbe assomigliare a questo:

1
<?php
2
/**

3
 * Creates the submenu item for the plugin.

4
 *

5
 * @package Custom_Admin_Settings

6
 */
7
8
/**

9
 * Creates the submenu item for the plugin.

10
 *

11
 * Registers a new menu item under 'Tools' and uses the dependency passed into

12
 * the constructor in order to display the page corresponding to this menu item.

13
 *

14
 * @package Custom_Admin_Settings

15
 */
16
class Submenu {
17
18
        /**

19
   * A reference the class responsible for rendering the submenu page.

20
	 *

21
	 * @var    Submenu_Page

22
	 * @access private

23
	 */
24
	private $submenu_page;
25
26
	/**

27
	 * Initializes all of the partial classes.

28
	 *

29
	 * @param Submenu_Page $submenu_page A reference to the class that renders the

30
	 *																	 page for the plugin.

31
	 */
32
	public function __construct( $submenu_page ) {
33
		$this->submenu_page = $submenu_page;
34
	}
35
36
	/**

37
	 * Adds a submenu for this plugin to the 'Tools' menu.

38
	 */
39
	public function init() {
40
		 add_action( 'admin_menu', array( $this, 'add_options_page' ) );
41
	}
42
43
	/**

44
	 * Creates the submenu item and calls on the Submenu Page object to render

45
	 * the actual contents of the page.

46
	 */
47
	public function add_options_page() {
48
49
		add_options_page(
50
			'Tuts+ Custom Administration Page',
51
			'Custom Administration Page',
52
			'manage_options',
53
			'custom-admin-page',
54
			array( $this->submenu_page, 'render' )
55
		);
56
	}
57
}

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.

3. 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:

1
<?php
2
/**

3
 * Creates the submenu page for the plugin.

4
 *

5
 * @package Custom_Admin_Settings

6
 */
7
8
/**

9
 * Creates the submenu page for the plugin.

10
 *

11
 * Provides the functionality necessary for rendering the page corresponding

12
 * to the submenu with which this page is associated.

13
 *

14
 * @package Custom_Admin_Settings

15
 */
16
class Submenu_Page {
17
18
        /**

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

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

21
	 * Submenu class.

22
	 */
23
	public function render() {
24
		echo 'This is the basic submenu page.';
25
	}
26
}

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.

4. 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:

1
<?php
2
3
// If this file is called directly, abort.
4
if ( ! defined( 'WPINC' ) ) {
5
     die;
6
}
7
8
// Include the dependencies needed to instantiate the plugin.
9
foreach ( glob( plugin_dir_path( __FILE__ ) . 'admin/*.php' ) as $file ) {
10
	include_once $file;
11
}
12
13
add_action( 'plugins_loaded', 'tutsplus_custom_admin_settings' );
14
/**
15
 * Starts the plugin.
16
 *
17
 * @since 1.0.0
18
 */
19
function tutsplus_custom_admin_settings() {
20
21
	$plugin = new Submenu( new Submenu_Page() );
22
	$plugin->init();
23
24
}

A questo punto, dovreste essere in grado di aggiornare l'installazione di WordPress, attivare il plugin (se non è già attivato) e poi vedere la nuova pagina resa all'interno dell'area di amministrazione.

The custom WordPress administration screenThe custom WordPress administration screenThe custom WordPress administration screen

Nel prossimo articolo, vedremo come possiamo iniziare l'introduzione delle effettive impostazioni nello schermo. Inoltre, vedremo alcune best practice in termini di lavoro con il nostro modello e il nostro modello parziale, e poi vedremo come saranno collegati con il responsabile delle API non solo per salvarli, come saranno sanificate e convalidate.

Ma prima di andare cosi lontano, voglio parlare un pò del design della classe che abbiamo visto in questo tutorial. In generale, voglio parlare del perché abbiamo una classe per il sottomenu e il Submenu_Page e come si relaziona con il file di bootstrap.

Una parola sulla responsabilità della classe

Per quelli di voi che hanno familiarità con il principio di responsabilità singola, questa sezione può non essere di alcun interesse per voi. Ma se avete bisogno di un aggiornamento o volete saperne di più, allora continuate a leggere.

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

C'è molto più di questo, ma se dovessimo guardare a ciascuna delle nostre classi (almeno le due di cui disponiamo finora), allora è chiaro che le ragioni che possono cambiare le nostre classi sono le seguenti:

  • Il contenuto del sottomenu potrebbe cambiare. Niente dal titolo della pagina allo slug del menu e tutto il resto.
  • La modalità di rendering del contenuto della pagina può (e cambierà). In particolare, in questo momento non fa nulla, ma echo (visualizza) una stringa. Presto, ci sarà un determinato file. Dopo di che, potrebbe essere necessario includere file multipli.

I due motivi di cui sopra, sono due ragioni molto diverse che possono cambiare le classi, quindi tenerli insieme nella stessa classe violerebbe il principio enunciato in precedenza.

In definitiva, ho ho sollevato la questione non solo per aiutare a far luce su grandi principi di ingegneria del software che possono essere applicati in WordPress, ma anche per aiutare a prepararvi su alcune delle ragioni che romperanno certe cose che sono di solito file di grandi dimensioni,  nel contesto del plugin.

La cosa bella di studiare i principi base è che possono essere applicate a più progetti e non solo in singoli progetti. Li avete studiati, fate pratica su di loro, e megliorate la progettazione di soluzioni per altre persone.

La curva di apprendimento può essere ripida, ma una volta che si inizia quella strada in salita, diventa più facile e più facile è incorporare i principi del lavoro quotidiano. Allora, il lavoro che si sta fornendo per gli altri diventa molto più facile da mantenere nel tempo.

Conclusione

Non dimenticate che è possibile scaricare il plugin nel suo stato attuale da questo post. Come si procede attraverso la serie, renderò disponibile ad ogni post  l'ultima versione così sarete in grado di seguire con il codice trattato in ogni esercitazione, armeggiare con esso e preparare le domande che vorrete chiedere nei commenti.

Come nota a margine, se state cercando altre utility per aiutarvi a costruire il vostro crescente set di strumenti per WordPress o per il codice da studiare e diventare più esperti in WordPress, non dimenticate di vedere ciò che abbiamo disponibile nel mercato di Envato.

Ricordate, potete trovare tutti i miei corsi e tutorial sulla mia pagina del 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. Faccio del mio meglio per partecipare e rispondere a ogni domanda o critica che lasciate 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.