Un grande vantaggio per una comunità open source
I plugin per WordPress sono qualcosa di fantastico. Che si abbia in mente un plugin gratuito, a pagamento o per uso interno, questi elementi possono estendere WordPress per offrirvi esattamente la funzionalità di cui volete dotare l’applicazione.
Il grande vantaggio del software open source è che i membri della community sono tutti impegnati a migliorarlo e spesso creano nuovi plugin per ottenere le funzionalità desiderate. La definizione di plugin fornita nel WordPress Codex è:
Un programma, o un insieme di una o più funzioni, scritto in linguaggio PHP, che aggiunge un set specifico di funzionalità o servizi al weblog di WordPress, il quale si integra perfettamente con il weblog usando punti di accesso e metodi forniti dall’API (Application Program Interface) WordPress per i plugin.
In pratica i plugin consentono di trasformare un sito in qualsiasi cosa, da un semplice blog a un negozio di e-commerce a un social network e perfino in un’app mobile iOS e Android. Si può accedere a più di 55 mila plugin tramite il repository ufficiale di WordPress.
La licenza General Public License, Version 2
Tutti i plugin per WordPress devono utilizzare la licenza General Public License, Version 2 (GPLv2). Alcuni temi e plugin possono utilizzare una licenza bipartita: questo significa che il codice HTML, CSS e JavaScript e le immagini sono distribuiti con una licenza diversa rispetto ai file PHP. Alcuni autori di temi e plugin non menzionano la licenza GPLv2 o ne ignorano l’applicazione. Ci sono dispute legali sulle loro affermazioni, ma le figure di autorità della community di WordPress.org (e in particolare Matt Mullenweg) affermano che tutti i temi e i plugin devono essere compatibili GPL.
Installazione dei plugin di WordPress
Per installare un plugin, accedi alla dashboard dell’amministratore di WordPress del sito, noto anche come backend. Fai clic sulla sezione Plugin, come illustrato nella figura seguente, per cercare nel repository o caricare un plugin già scaricato. Dopo aver completato la ricerca e aver trovato il plugin, fai clic per installarlo. Dopo aver installato il plugin, potrai attivarlo. Se non lo attivi, il plugin rimane disattivato nella pagina Plugin → Installed Plugin del sito. Molti plugin dovranno essere configurati, una volta attivati, e di solito apparirà un messaggio nella dashboard che ricorderà di farlo.
Aggiunta di un nuovo plugin.
Se hai scaricato un plugin da una fonte diversa dal repository ufficiale dei plugin di WordPress, dovresti avere un file ZIP. Per caricare il plugin sul sito, nella sezione Plugin della dashboard fai clic su Upload, quindi scegli il file ZIP. Potrai anche attivare il plugin.
Creazione di un nuovo plugin
La vera potenza di WordPress per gli sviluppatori di applicazioni si esprime nella possibilità di creare nuovi plugin personalizzati per estendere WordPress in base alle necessità.
Per realizzare un plugin, crea innanzitutto una nuova cartella my-plugin in wp-content/plugins e dai vita a un file PHP chiamato my-plugin.php. Dentro my-plugin.php, scrivi il seguente codice (puoi sostituire uno qualsiasi dei valori impiegati):
<?php ⁄** * Plugin Name: My Plugin * Plugin URI: https://bwawwp.com/my-plugin/ * Description: La descrizione del mio plugin. * Author: messenlehner, strangerstudios * Version: 1.0.0 * Author URI: https://bwawwp.com * License: GPL-2.0+ * License URI: http://www.gnu.org/licenses/gpl-2.0.txt */ ?>
Salva il file my-plugin.php e… congratulazioni! Hai creato un nuovo plugin per WordPress! Anche se non fa ancora nulla, dovresti essere in grado di vederlo in /wp.admin/plugins.php e di attivarlo. Prosegui e attivalo.
Ora operiamo in modo che il plugin faccia effettivamente qualcosa. Aggiungeremo del testo in basso, nell’installazione di WordPress. Copia e salva il seguente codice dopo le informazioni iniziali del plugin:
<?php
function my_plugin_wp_footer() {
echo 'Ho letto sviluppare con WordPress
ed ecco il risultato!';
}
add_action( 'wp_footer', 'my_plugin_wp_footer' );
?>
Dopo aver aggiornato e aperto il frontend del sito web, dovresti notare un nuovo messaggio in basso. Ora puoi personalizzare questo plugin base come desideri. Se sviluppi in PHP, sfoga la fantasia! Se non conosci il linguaggio PHP e WordPress, un buon modo per ampliare le tue conoscenze è scaricare e analizzare il codice di altri plugin, per vedere quello che fanno e come lo fanno.
Struttura dei file per un plugin per applicazioni
Quando create un’applicazione web con WordPress, ti consigliamo di disporre di un plugin principale che offrirà le funzionalità più importanti dell’applicazione. Per quanto riguarda il tema, devi memorizzare nel tema attivo la maggior parte del codice sorgente frontend dell’applicazione.
Alcuni plugin fanno solo una o due cose, e in questo caso un file .php è tutto ciò che serve. Il plugin principale di un’applicazione sarà probabilmente molto più complicato, con file di risorse (CSS, immagini e modelli), librerie da includere, file di classi e potenzialmente anche migliaia di righe di codice sorgente, che preferirai organizzare in più file.
Di seguito trovi la struttura dei file proposta per il plugin principale di un’applicazione, sulla base del plugin SchoolPress. Non tutte queste cartelle e questi file potrebbero essere necessari. Sono da aggiungere a un plugin secondo necessità:
/plugins/schoolpress/adminpages//plugins/schoolpress/adminpages//plugins/schoolpress/classes//plugins/schoolpress/css//plugins/schoolpress/css/admin.css/plugins/schoolpress/css/frontend.css/plugins/schoolpress/js//plugins/schoolpress/images//plugins/schoolpress/includes//plugins/schoolpress/includes/lib//plugins/schoolpress/includes/functions.php/plugins/schoolpress/pages//plugins/schoolpress/services//plugins/schoolpress/scheduled//plugins/schoolpress/schoolpress.php
/adminpages/
Colloca nella cartella /adminpages/ i file .php per qualsiasi pagina dashboard aggiunta tramite il plugin. Ecco, per esempio, come aggiungere una pagina dashboard e caricarla dalla cartella /adminpages/:
<?php
// add a SchoolPress menu with reports page
function sp_admin_menu() {
add_menu_page(
'SchoolPress',
'SchoolPress',
'manage_options',
'sp_reports',
'sp_reports_page'
);
}
add_action( 'admin_menu', 'sp_admin_menu' );
// function to load admin page
function sp_reports_page() {
require_once dirname( __FILE__ ) . "/adminpages/reports.php";
}
?>
/classes/
Nella cartella /classes/ devi inserire le definizioni delle classi PHP. In generale, ogni file contenuto in questa cartella dovrebbe includere la definizione di una sola classe. I file per classi devono avere un nome come class.<NomeClasse>.php, dove NomeClasse è il nome assegnato alla classe.
/css/
Nella cartella /css/ devi inserire i file CSS utilizzati specificamente dal plugin. Dividi il codice CSS nei file admin.css e frontend.css, a seconda del fatto che il codice CSS operi sulla dashboard di WordPress o sul frontend. Per esempio, puoi collocare in questa cartella le librerie CSS necessarie per supportare una libreria JavaScript che avete incluso.
Ecco del codice sorgente per accodare gli stili admin.css e frontend.css tratto dalla cartella dei file CSS del plugin:
<?php
function sp_load_admin_styles() {
wp_enqueue_style(
'schoolpress-plugin-admin',
plugins_url( 'css/admin.css', __FILE__ ),
array(),
SCHOOLPRESS_VERSION,
'screen'
);
}
add_action( 'admin_enqueue_scripts', 'sp_load_admin_styles' );
function sp_load_frontend_styles() {
wp_enqueue_style(
'schoolpress-plugin-frontend',
plugins_url( 'css/frontend.css', __FILE__ ),
array(),
SCHOOLPRESS_VERSION,
'screen'
);
}
add_action( 'wp_enqueue_scripts', 'sp_load_frontend_styles' );
?>
Per accodare gli script e gli stili concepiti per la dashboard dell’amministratore devi utilizzare l’hook admin_enqueue_scripts. Per accodare gli script e gli stili concepiti per il front-end devi utilizzare l’hook wp_enqueue_scripts.
Il codice CSS che modifica i componenti della dashboard di WordPress deve essere inserito nel file admin.css. Il codice CSS che modifica il frontend del sito dovrebbero essere inserito nel file frontend.css, ma fai attenzione quando aggiungi nuove regole CSS al file frontend.css. Quando aggiungi stili di front-end ai file dei plugin, chiediti innanzitutto se le regole CSS che stai scrivendo non debbano invece rientrare nel tema dell’applicazione, poiché la maggior parte del codice sorgente che controlla lo stile del frontend dovrebbe essere gestita dal tema.
Il codice CSS da inserire nel file CSS del plugin è generalmente costituito da stili di layout da applicare indipendentemente dal tema caricato. Immagina che per il sito non vengano caricati i temi o gli stili CSS. Quale dovrebbe essere il codice CSS minimo necessario perché il codice HTML generato dal tuo plugin abbia un senso? Aspettati poi che il tema operi su tale stile e lo modifichi.
Per esempio, il file frontend.css del plugin non dovrebbe mai includere stili di colorazione. Al contrario, uno stile che indica che un avatar deve essere largo 64 pixel e deve essere collocato a sinistra potrebbe essere appropriato.
/js/
Inserisci in questa cartella tutti i file JavaScript necessari per il plugin. Ancora una volta, puoi suddividere le cose fra un file admin.js e un file frontend.js, a seconda di dove intendi impiegare il codice JavaScript.
Puoi aggiungere a questa cartella anche le librerie JavaScript di terze parti che utilizzi. In genere, però, queste dovrebbero essere inserite in una sottocartella di /js/.
Ecco un esempio di codice sorgente per caricare i file admin.js e frontend.js dalla cartella /js/ del plugin:
<?php
function sp_load_admin_scripts() {
wp_enqueue_script(
'schoolpress-plugin-admin',
plugins_url( 'js/admin.js', __FILE__ ),
array( 'jquery' ),
SCHOOLPRESS_VERSION
);
}
add_action( 'admin_enqueue_scripts', 'sp_load_admin_scripts' );
function sp_load_frontend_scripts() {
wp_enqueue_script(
'schoolpress-plugin-frontend',
plugins_url( 'js/frontend.js', __FILE__ ),
array( 'jquery' ),
SCHOOLPRESS_VERSION
);
}
add_action( 'wp_enqueue_scripts', 'sp_load_frontend_scripts' );
?>
Come per i fogli stile, può essere difficile determinare se includere il codice nel file JavaScript del plugin o del tema. In generale, i file JavaScript a supporto del tema (per esempio, per effetti di scorrimento ed effetti di menu) dovrebbero andare nel tema; i file JavaScript a supporto del plugin (per esempio, il codice Ajax) vanno nel plugin. All’atto pratico, tuttavia, troverai che il tuo plugin impiega codice JavaScript definito nel tema e viceversa.
/images/
Inserisci nella cartella /images/ tutte le immagini necessarie al plugin.
/includes/
La cartella /includes/ è una specie di default per i file .php richiesti dal plugin. L’unico file .php nella cartella principale di un tuo plugin dovrebbe essere il file principale del plugin, in questo caso schoolpress.php. Tutti gli altri file .php devono essere collocati in una delle altre cartelle; se nessuna ti sembra appropriata, crea una nuova cartella o inseriscili nella cartella /includes/.
Si è soliti aggiungere un file functions.php, common.php o helpers.php per includere tutto il codice PHP di supporto utilizzato dal plugin. Questo file dovrebbe includere eventuali script di piccole dimensioni che non hanno un ruolo centrale nella logica o nella funzionalità del plugin, ma sono necessari per supportarlo. Gli esempi includono le funzioni per accorciare il testo, le funzioni per generare stringhe casuali o altre funzioni da framework che non siano già offerte da una funzione base di WordPress.
/includes/lib/
Inserisci nella cartella /includes/lib/ le librerie di terze parti necessarie per l’applicazione.
/pages/
Inserisci nella cartella /pages/ tutto il codice .php relativo alle pagine frontend aggiunte dal tuo plugin. In genere le pagine frontend vengono aggiunte tramite poco codice sorgente, da incorporare in una pagina WordPress standard per mostrare il contenuto desiderato.
Il frammento di codice seguente mostra come creare uno shortcode che può essere inserito in una pagina WordPress per generare una pagina da un plugin. Il preheader è una porzione di codice sorgente da eseguire prima del caricamento della funzione wp_head() e quindi prima che le eventuali intestazioni o il codice HTML vengano inviati al browser. La funzione shortcode più in basso restituisce il codice HTML alla pagina effettiva, nella posizione dello shortcode.
Inserisci questo codice sorgente in //plugins/<cartella dei plugin>/pages/stub.php e includilo (in genere utilizzando la funzione request_once()) nel file principale del plugin. Quindi, aggiungi lo shortcode [sp_stub] a una pagina del sito WordPress:
<?php
// preheader
function sp_stub_preheader() {
if ( !is_admin() ) {
global $post, $current_user;
if ( !empty( $post->post_content ) && strpos
( $post->post_content, '[sp_stub]' ) !== false ) {
⁄*
Put your preheader code here.
*/
}
}
}
add_action( 'wp', 'sp_stub_preheader', 1 );
// shortcode [sp_stub]
function sp_stub_shortcode() {
ob_start();
?>
Place your HTML/etc code here.
<?php
$temp_content = ob_get_contents();
ob_end_clean();
return $temp_content;
}
add_shortcode( 'sp_stub', 'sp_stub_shortcode' );
?>
Quanto a preheader, controlliamo innanzitutto che la pagina non venga caricata dall’admin, usando !is_admin(); in caso contrario, questo codice sorgente potrebbe essere eseguito anche mentre stiamo modificando il post nella dashboard. Poi cerchiamo la stringa [sp_stub] nel contenuto del $post globale. Questa funzione è collegata all’hook wp, che viene eseguito dopo che WordPress ha impostato il globale $post per la pagina corrente, ma prima che vengano emesse le intestazioni o il codice HTML.
Il codice preheader può essere utilizzato per controllare le autorizzazioni, per elaborare i moduli inviati o per preparare tutto il codice necessario per la pagina. In un modello MVC, questo sarebbe il codice del modello e/o del controller. Poiché questo codice sorgente viene eseguito prima che vengano emesse intestazioni, è comunque possibile reindirizzare gli utenti in modo sicuro verso un’altra pagina. Per esempio, puoi usare un wp_redirect() alla pagina di login o di registrazione, se l’utente non ha ancora fornito le credenziali necessarie per visualizzare la pagina.
Nella funzione shortcode, usiamo ob_start(), ob_get_contents() e ob_end_clean(), che sono funzioni PHP usate per bufferizzare l’output in una variabile. L’uso di questo codice sorgente ha il seguente significato: il codice tra i tag ?> e <?php precedenti viene inserito nella variabile $temp_content anziché nell’output al momento dell’elaborazione (cosa che avrebbe prodotto un echo sopra il tag <html> del vostro sito). Questo non è necessario: potresti semplicemente definire una funzione $temp_content() e usare del codice PHP per aggiungere la stringa. L’uso del buffer di output ci consente di programmare in un modo più simile a un template, miscelando codice HTML e PHP, con un risultato più comprensibile.
/services/
Inserisci nella cartella /services/ tutto il codice .php per le chiamate Ajax.
/scheduled/
Inserisci qui tutto il codice .php correlato al job cron o ad altro codice sorgente che deve essere eseguito a intervalli pianificati.
/schoolpress.php
Questo è il file principale del plugin. Per plugin piccoli, questo potrebbe anche essere l’unico file necessario. Per plugin di grandi dimensioni, il file principale del plugin conterrà solo istruzioni, definizioni di costanti e alcuni commenti relativi a quali altri file contengono il codice cercato.
Il primo passo nel mondo dei plugin
Creare un plugin per WordPress può diventare molto più complesso di così, ma i passi descritti sono già più che sufficienti per iniziare a capire come funziona la logica dei plugin e avviarsi magari verso una fortunata carriera di sviluppo in ambito WordPress.
Immagine di apertura di Fikret tozak su Unsplash.
Questo articolo richiama contenuti dal capitolo 3 di Sviluppare con WordPress.
L'autore
Iscriviti alla newsletter
Novità, promozioni e approfondimenti per imparare sempre qualcosa di nuovo
Corsi che potrebbero interessarti
Machine Learning & Big Data per tutti
Data governance: diritti, licenze e privacy
Comunicazione digitale Food & Wine - Iniziare Bene
Libri che potrebbero interessarti
Sviluppare con WordPress
Espandere le funzionalità del CMS per creare applicazioni professionali
