Programmando – Creare un plugin con WordPress

Share on FacebookTweet about this on TwitterPin on PinterestShare on Google+Share on LinkedIn

A chi ci rivolgiamo

Ci siamo chiesti in redazione se non fosse giunto il momento di inserire un post un po’ tecnico, giusto per stimolare la curiosità.

La risposta è stata affermativa al 100% ma su quale argomento?

Quando teniamo corsi propedeutici su WordPress, è sempre presente qualche giovane sviluppatore. L’interesse principale di questi è quello di scrivere qualcosa in WordPress, aprire il cofano e guardare cosa c’è dentro.

La scelta, quindi, di orientarci su WordPress ci è sembrata naturale. Dopo aver pubblicato le prime lezioni abbiamo poi ricevuto molte email di interesse e richieste di approfondimenti che andremo sicuramente a sviluppare in uno dei prossimi post.

Ma all’interno di WordPress di cosa possiamo parlare senza diventare troppo tecnici?

Abbiamo chiesto nelle ultime settimane durante i vari incontri quale fosse l’elemento di maggior interesse in WordPress per un programmatore.

La risposta è stata quasi scontata: i plugin.

Utilizzando WordPress prima o poi scopriamo il mondo dei plugin. I plugin sono piccole o grandi utilità che ci permettono di arricchire il nostro sito/blog WordPress.

Le scelte sono infinite: vogliamo aggiungere un’area sulle previsioni del tempo locali per il nostro visitatore? Semplicemente entriamo nell’area amministrativa del nostro sito WP, scegliamo plugin, aggiungi nuovo e digitiamo “previsioni del tempo”. Ne troviamo tanti. Ne scegliamo uno, lo installiamo e lo attiviamo.

A seconda del plugin questo potrà essere utilizzato come widget, come shortcode o, nei casi più sofisticati, avremo una nuova voce di menu per la gestione del plugin.

 

Ma se volessimo creare un plugin con wordpress in autonomia?

Dobbiamo rispondere a queste 3 domande prima di procedere:

  • Abbiamo una minima esperienza come programmatori php, html, css e javascript ?
  • Abbiamo un ambiente dove poter sviluppare il nostro plugin ?
  • Abbiamo tanta pazienza e voglia di imparare ?

Se la risposta è sì per tutte e 3 allora siamo pronti a creare un plugin con wordpress.

Primo passo per creare un plugin con wordpress

Prima di tutto dobbiamo definire l’obiettivo del nostro plugin. La parte di analisi, la più impegnativa, se fatta bene ci permetterà di ridurre lo sviluppo a poche ore. Nell’analisi dobbiamo affrontare la logica, l’interfaccia utente, le strutture dati, la modalità di utilizzo e di rilascio (installazione, aggiornamento, licenza,…).

Per il nostro primo plugin, che chiamiamo AM Hello World, ci prefiggiamo l’obiettivo di inserire alla base dei nostri articoli un testo pre-definito: “blog.aramx.com”.

Ci leggiamo un po’ di regole nel codice di sviluppo: https://codex.wordpress.org/WordPress_Coding_Standards

Sono regole standard, non obbligatorie, ma consigliate. Nell’ambito dello sviluppo di ormai milioni di righe nei più svariati linguaggi chi vi scrive si è sempre concentrato sulle minime regole per una corretta e chiara scrittura del codice. Una regola base che aiuta chi legge poi il vostro codice è l’indentazione. Cerchiamo sempre di indentare per visualizzare la logica del codice. A nessuno piace cercare la fine di una “if” all’interno di un centinaio di righe scritte in Cobol Oriented!

Una delle funzionalità più interessanti di WordPress è anche quella di proporci un set di API per l’accesso ai dati “core” del sistema. In breve non utilizziamo accessi diretti al database per estrarre informazioni core: utenti, post o altro. Sfruttiamo il set completo delle API messe a disposizione. In questo modo non ci saranno problemi di funzionamento anche se la struttura del database dovesse cambiare.

Dove si trovano il plugin? Si trovano tutti nella cartella wp-content\plugins. Per ogni plugin si definisce una cartella che, di norma, si tende a nominare come il plugin.

Questa è la struttura base di una cartella di un plugin, per esempio “AM Hello World”.

am-hello-world (cartella)

  • css
  • img
  • includes

am-hello-world.php

readme.txt

 

Facciamo molta attenzione all’utilizzo di maiuscole e minuscole. Spesso i sistemi WordPress sono ospitati in sistemi Linux dove un file scritto in maiuscolo è diverso da uno in minuscolo. Per esempio readme.txt è diverso da Readme.txt!

Scegliamo di utilizzare per le cartelle ed i file sempre la scrittura minuscola.

Per far funzionare un plugin servono solo due file. Il primo am-hello-world.php nominato per convenzione come la cartella del plugin e il secondo readme.txt, contenente note sull’utilizzo del plugin.

Scriviamo le prime righe di codice

Apriamo am-hello-world.php con un qualsiasi editor php. Eclipse per esempio fornisce un ottimo visual editor per php ma ci possiamo accontentare anche del caro blocco note…

 

Le prime righe di codice sono fondamentali. Raggruppano le informazioni base del nostro plugin. WordPress le legge, le valida e consente di caricare correttamente il nostro plugin.

 

<?php

/*

Plugin Name: AM Hello World

Plugin URI: http://blog.aramx.com/

Description: Il nostro primo plugin.

Version: 1.0

Author: Andrea

Author URI: http://www.aramx.com

License: GPL

*/

[…]

?>

Queste sono le informazioni che verranno visualizzate nell’elenco dei plugin del nostro WordPress.

Hooks

WordPress ci permette di agganciare attraverso uno strumento, hooks, particolari oggetti.

In poche parole, abbiamo due tipi di hooks: actions e filters. I primi ci permettono di intercettare particolari azioni che il core di WordPress esegue in particolari momenti. Ad esempio qui potrete trovare l’elenco delle azioni disponibili: https://codex.wordpress.org/Plugin_API/Action_Reference

Il secondo tipo di hook, i filters, invece ci permettono di intercettare gli eventi che WordPress esegue per modificare testo diretto sul database o a schermo. Ad esempio anche in questo caso possiamo reperire l’elenco dei filtri dal sito ufficiale di WordPress: https://codex.wordpress.org/Plugin_API/Filter_Reference

Visto che il nostro obiettivo è quello di mostrare del testo in fondo a qualsiasi articolo, viene naturale pensare ad un hook Filter.

La funzione per aggiungere un hook-filter è add_filter.

La sintassi di add_filter, prima di tutto, è composta da due parametri. Il primo indica l’area in cui iniettare il filtro e il secondo parametro la funzione (callback) che WordPress andrà a chiamare al presentarsi del filtro richiesto nel primo parametro.

Leggendo la documentazione ufficiale il filtro migliore è “the_content”:

https://codex.wordpress.org/Plugin_API/Filter_Reference/the_content

la sua descrizione ci dice proprio:

“The “the_content” filter is used to filter the content of the post after it is retrieved from the database and before it is printed to the screen.”

Ovvero che ci viene passato il contenuto di un post subito dopo averlo letto dal database ma prima della sua visualizzazione a schermo, all’invio al browser dell’utente. Perfetto.

Scriviamo quindi nel codice am_hello_world.php la seguente riga subito dopo i commenti scritti precedentemente:

add_filter(‘the_content’,’blog_aramx_com’);

‘blog_aramx_com’ è quindi il nome della funzione, in php quindi lato server, che si occuperà di trattare il testo dell’articolo.

Scriviamo la funzione aggiungendo un controllo relativo al fatto se stiamo visualizzando un articolo o altro (pagina, elenchi, ricerche,…). La funzione, di WordPress, è “is_single()”: https://developer.wordpress.org/reference/functions/is_single/

Senza parametri ci indica se la pagina che stiamo visualizzando è un post. Questo dovrebbe bastare.

Ecco il risultato finale:

<?php

/*

Plugin Name: AM Hello World

Plugin URI: http://blog.aramx.com/

Description: Il nostro primo plugin.

Version: 1.0

Author: Andrea

Author URI: http://www.aramx.com

License: GPL

*/

add_filter(‘the_content’,’blog_aramx_com’);

 

function blog_aramx_com($content){

   if ( is_single() ) {

      return $content . “<b> blog.aramx.com </b>”;

   }

   else {

      return $content;

   }

}

?>

 

Leggendo il codice notiamo che nel caso di articolo (post) viene accodato il testo “blog.aramx.com” al contenuto dell’articolo.

 

Notiamo inoltre che WordPress, agganciando il filtro “the_content” ci passa il contenuto appena letto e si aspetta il nuovo contenuto.

Nel caso di non articolo/post la nostra funzione ritorna il contenuto ricevuto senza alcuna variazione (return $content).

Prova sul campo

Normalmente si consiglia di avere un sito WordPress di prova, una sorta di sito laboratorio dove verificare il buon funzionamento dei nostri plugin. Una volta provati e verificati i nostri plugin sono pronti per essere utilizzati in produzione.

Installazione

Ora che il plugin è pronto all’uso dobbiamo preparare il pacchetto di installazione e rilasciarlo a chi lo volesse utilizzare.

La procedura è molto semplice. Comprimiamo utilizzando il formato zip la cartella del nostro plugin.

 

Scegliamo la voce del  menu amministrativo plugin / aggiungi nuovo. Quindi nella maschera dei plugin “carica plugin”. Dobbiamo selezionare “scegli file” e caricare dal nostro computer il file compresso del nostro plugin creato nel passaggio “installazione”.

Procediamo con installa ora

creare un plugin con wordpress

Muoviamoci nell’elenco dei plugin installati, prima di attivare il nostro appena installato. Questo è quello che ci appare:

creare un plugin

Il primo passo è andato bene, ma vediamo di attivarlo e proviamolo aprendo qualsiasi post.

creare un plugin con wordpress

Possiamo ritenerci soddisfatti!

Per chi lo volesse ho reso disponibile il pacchetto per il suddetto plugin: am-hello-world

Buon divertimento

Se vi è  piaciuto il nostro articolo su come creare un plugin con WordPress vi invitiamo a seguire il nostro corso di WordPress

creare un plugin con wordpress

creare un plugin con wordpress

creare un plugin