Come sviluppare un plugin WordPress

Un plugin è un applicativo che, una volta installato, permette di estendere il core di WordPress oppure le funzionalità di un tema o di un altro plugin.

Dalla repository ufficiale di WordPress.org sono presenti migliaia di plugin, anche se potrebbe tornarti utile in molte occasioni crearne uno da zero.

In questo articolo ti illustrerò le basi per sviluppare un plugin WordPress.

L’installazione di un nuovo plugin può avvenire in due modi, utilizzando l’apposita funzione di WordPress oppure caricando manualmente la cartella del plugin con tutti i file che lo compongono nella seguente directory: /wp-content/plugins

Ogni volta che WordPress trova la cartella di un nuovo plugin all’interno della propria directory, questo sarà disponibile anche nella sezione amministrativa, pronto per essere attivato oppure eliminato.

Il file principale e più importante è quello in cui è presente l’intestazione del plugin, ovvero tutte le informazioni come il nome del plugin, l’autore oppure la versione del plugin.

Questo significa che, in mancanza di tali informazioni, il plugin non sarà visibile nella seziona amministrativa.

#1 Intestazione di un plugin WordPress

Inizia creando la cartella del plugin all’interno della directory principale ed aggiungi un nuovo file PHP.
Il nome del file non è importante, se preferisci puoi anche utilizzare lo stesso nome del plugin.

/wp-content/plugins/ilmioplugin/ilmioplugin.php

/*
Plugin Name: WPinProgress plugin.
Plugin URI: https://www.wpinprogress.com
Description: WPinProgress plugin
Version: 1.0.0
Author: WPinProgress
Author URI: https://www.wpinprogress.com
License: GPLv3
*/

Se ora torni all’interno dell’area amministrativa di WordPress, troverai un nuovo plugin insieme alle informazioni inserite nell’intestazione.

#2 Come sviluppare correttamente il plugin

Questo dipenderà dalle funzionalità di cui avrai bisogno, l’unica regola che ti consiglio di seguire è quella di scrivere il codice seguendo le indicazioni e le API fornite da WordPress, come gli hooks azioni e filtri.

#3 Azioni e filtri WordPress

Durante lo sviluppo di un plugin oppure di un tema, gli hooks WordPress ricoprono un ruolo fondamentale poichè permettono di estendere facilmente le potenzialità del CMS.

Gli hooks, detti anche ganci, permettono di agganciarsi all’interno del core di WordPress, quelli principali sono gli hooks azione e gli hooks filtro.

Un hook o gancio azione dà la possibilità di collegare una funzione al verificarsi di un determinato evento durante l’esecuzione del core di WordPress, per esempio si effettua il salvataggio di articolo oppure quando si registra un nuovo utente mentre un hook o gancio filtro viene utilizzato per manipolare i dati prima del loro utilizzo.

WordPress offre una serie di azioni e filtri che permettono di agganciarsi praticamente in qualsiasi punto, durante l’esecuzione del codice, qui trovi una lista completa di azioni e filtri.

Inoltre è possibile anche creare nuovi hooks oppure rimuovere quelli già presenti, ad esempio perché non sono più necessari oppure per sovrascrivere il codice dell’azione.

Se desideri modificare il codice presente all’interno di un’azione di un altro plugin, come WooCommerce, puoi prima rimuovere quello originario utilizzando remove_action(), successivamente copiare la funzione desiderata applicando tutte le modifiche, quindi creare nuovamente l’azione.

Ecco un piccolo esempio.

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
add_action('woocommerce_before_main_content', 'new_woocommerce_output_content_wrapper', 10);

function new_woocommerce_output_content_wrapper() {
}

#4 Percorsi ed URL dei file

Quando si scrive il codice di un plugin WordPress, è importante fare una precisazione sulla differenza tra un percorso oppure path ed un URL.

Se hai bisogno di includere un file PHP, devi necessariamente aggiungere il percorso, ovvero l’indirizzo del file che risiede sul server in cui gira WordPress.

Se invece hai la necessità di richiamare un file Javascript, CSS oppure un’immagine, devi necessariamente utilizzare l’URL, poiché fa riferimento al protocollo HTTP e al dominio del sito WordPress.

Puoi utilizzare la funzione plugin_dir_path() per ottenere il percorso alla directory del plugin completo di slash finale.

/wp-content/plugins/ilmioplugin/

require_once( plugin_dir_path( __FILE__ ) . 'nuovofile.php' );

Mentre plugins_url() restituisce il percorso dell’URL del file.

plugins_url('/style.css', __FILE__ )

Come hai potuto vedere, in entrambi i casi è presente la costante PHP __FILE__ che viene utilizzata per ottenere il PATH del file in cui è presente.

Questo significa che, se utilizzata su due file con un percorso diverso, questa restituirà due risultati differenti.

#5 Caricare correttamente file Javascript e CSS

Per integrare un foglio di stile oppure un file Javascript, è possibile utilizzare le funzioni wp_enqueue_script() e wp_enqueue_style()

Come già visto per lo sviluppo di un tema WordPress, queste due funzioni accettano entrambe 5 parametri

Di seguito i 5 parametri della funzione wp_enqueue_script() :

1. $nome, Nome univoco dello script – Obbligatorio
2. $src, Percorso dello script – Opzionale
3. $deps, Dipendenze, ad esempio la libreria jQuery (in forma di array) – Opzionale
4. $ver, Versione dello script – Opzionale
5. $in_footer, Il valore di default è FALSE, questo comporta il caricamento dello script all’interno dell’header di WordPress, impostando questo valore su TRUE, lo script verrà incluso all’interno del footer.

Mentre questi sono i 5 parametri di wp_enqueue_style() :

1. $nome, Nome univoco del foglio di stile – Obbligatorio
2. $src, Percorso del foglio di stile – Opzionale
3. $deps, Dipendenze (in forma di array) – Opzionale
4. $ver, Versione dello script – Opzionale
5. $media, Media. Viene specificato per quale tipo di device il foglio di stile verrà distribuito. Di default è All.(Opzionale)

Una volta caricati tutti i file CSS e Javascript all’interno della cartella del plugin, ad esempio:

/wp-content/plugins/ilmioplugin/css/style.css
/wp-content/plugins/ilmioplugin/js/script.css

Puoi integrarli tramite l’azione WordPress wp_enqueue_scripts, in questo modo:

function wip_enqueue_scripts() {

wp_enqueue_style( 'nome-foglio-stile', plugins_url('/css/style.css', __FILE__ ) );
wp_enqueue_script( 'wip-featured-image-style', plugins_url('/js/script.css', __FILE__ ), array('jquery'));

}

add_action( 'wp_enqueue_scripts', 'wip_enqueue_scripts' );

#6 Aggiungere un pannello amministrativo

Per integrare un pannello di controllo puoi approfondire leggendo i seguenti articoli, anche se sono dedicati alla creazione di un pannello di un tema WordPress.

1. Menù amministrativo.
2. Salvataggio delle opzioni
3. Ottimizziamo il codice
4. Conclusione

Conclusione

In questo articolo abbiamo visto le basi per sviluppare un plugin WordPress, se hai domande puoi lasciare un commento, ti risponderò il prima possibile.