Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Progettare plugin per WordPress

Impariamo a progettare plugin per WordPress attraverso un esempio pratico.
Impariamo a progettare plugin per WordPress attraverso un esempio pratico.
Link copiato negli appunti

Una delle caratteristiche che hanno reso WordPress così popolare anche fra i non adetti ai lavori è l'enorme numero di plugin costruiti per ampliarne le potenzialità o renderlo più adatto a compiti anche molto specifici. Anche da un punto di vista economico la creazione di plugin può essere particolarmente invitante per un programmatore Web, e le API di WordPress rendono lo sviluppo rapido e potente. In questo articolo partiremo dall'impalcatura di base di un plugin fino ad arrivare ad un piccolo progetto completo.

Predisporre il plugin

Un plugin per WordPress consiste, a livello pratico, di una cartella che viene posizionata all'interno della directory plugin, collocata a sua volta all'interno di wp-content. Il caricamento può avvenire direttamente tramite Ftp, oppure sfruttando il meccanismo di caricamento dei nuovi plugin tramite un form al quale accludere la cartella compressa in formato Zip. All'interno della cartella deve essere contenuto almeno un file principale, ovviamente con estensione ".php", che verrà riconosciuto come punto di partenza da WordPress tramite uno schema particolare di commenti che forniscono le infomazioni base del componente. Il formato è il seguente:

<?php
		/*
		Plugin Name: Nome del plugin
		Plugin URI: http://www.sitoplugin.com
		Description: Plugin di prova
		Version: 1.0
		Author: Autore
		Author URI: http://www.autoreplugin.com
		License: GPLv2
		*/
	?>

Di seguito, sempre all'interno del commento, può essere accluso il testo della licenza utilizzata. Queste informazioni verranno lette dal CMS e visualizzate come informazioni di base del plugin, comprensive degli eventuali link al sito del componente e del suo autore. Pur riconosciuto e caricato, il plugin non viene automaticamente attivato, e quindi il suo codice rimane inerte fino a quando non lo attiviamo esplicitamente tramite l'apposito link. Un ottimo modo per creare una struttura di base per il codice è quello di creare una classe apposita, con un namespace univoco, e instanziare di seguito un ogggetto della classe:

<?php
	class prova_plugin {
		public function __construct () {
			//Costrutture
		}
	}
	$prova_plugin = new prova_plugin();
	?>

Nel costruttore potremo così inserire inclusioni di altri file, librerie, caricamenti di script lato client e azioni di inizializzazione in genere.

Utilizzare gli shortcode

Fra le innumerevoli possibilità offerte dai plugin esamineremo la definizione di uno shortcode: un mezzo molto popolare per rendere semplice l'inclusione all'interno dell'editor WYSIWYG funzionalità particolari con un codice convenzionale fra parentesi quadre. Alcuni esempi classici potrebbero essere l'inserimento di gallerie di immagini, form di contatto o widget di social network direttamente all'interno del contenuto di pagine e post.

Uno shortcode si definisce con la funzione add_shortcode che prende come argomenti il codice da utilizzare nell'editor e la funzione per il rendering del suo contenuto: il contenuto reso a schermo sarà dato dal valore di ritorno della funzione stessa. Nella funzione avremo a disposizione eventuali attributi inclusi con una semplice coppia chiave-valore e il contenuto compreso fra il tag di apertura e quello di chiusura dello shortcode, il tutto con una sintassi sulla falsariga del bbcode. Prendiamo questo esempio:

<?php
	add_shortcode( 'colonna', 'inserisci_nella_colonna' );
	function inserisci_nella_colonna ($attributi, $contenuto) {
		extract( shortcode_atts ( array(
				'width' => '200px',
				'float' => 'left'
			), $attributi ) );
		return "<div style='width:$width;float:$float;'>" . $contenuto . "</div>";
	}
	?>

Se nell'editor scriviamo [colonna width='300px']Testo in colonna[/colonna] otterremo quindi:

<div style='width:300px;float:left;'>Testo in colonna</div>

La funzione PHP nativa extract crea delle variabili basate sugli indici dell'array passato come argomento, mentre la funzione di WordPress shortcode_atts legge gli attributi e li combina con i valori predefiniti inlcusi come primo argomento. L'esito è quindi la creazione all'interno della funzione di callback di una variabile per ciascun attributo con i valori predefiniti eventaulmente sovrascritti da quelli specificati dall'utente.

Combinazione del codice nello schema di classe

Volendo combinare questo codice nello schema della classe proposto precedentemente, otterremo:

<?php
	class inserici_in_colonna {
		public function __construct () {
			add_shortcode( 'colonna', array(&$this, 'inserisci_nella_colonna'));
		}
		public function ($attributi, $contenuto) {
			extract( shortcode_atts ( array(
										'width' => '200px',
										'float' => 'left'
									), $attributi ) );
			return "<div style='width:$width;float:$float'>" . $contenuto . "</div>";
		}
	}
	$inserici_in_colonna = new inserici_in_colonna();
	?>

L'unica differenza di rilievo è nel secondo argomento di passato a add_shortcode che in questo caso identificherà la funzione all'interno della stessa classe tramite la dicitura &$this.

Un progetto completo: includere una board di Pinterest tramite shortcode

Per effettuare l'embed di una board di Pinterest occorre includere uno script JavaScript, e poi richiamare in un tag a dei particolari attributi data-pin. Basandoci sulla documentazione ufficiale possiamo così costruire un plugin che renda disponibile l'embed in modo molto immediato:

<?php 
	class fl_pinit {
		public function __construct () {
			wp_enqueue_script( 'fl_pin', plugins_url() . "/fl_pinit/js/pin.js");
			add_shortcode('pinit', array(&$this, 'fl_pinit_render'));
		}
		/**
		*
		* Render the shortcode
		*
		* @param array $atts shortcode attributes
		*/
		public function fl_pinit_render($atts) {
			extract( shortcode_atts ( array(
					'board' => 'pinterest',
					'board_width' => NULL,
					'board_height' => NULL,
					'image_width' => NUll
				), $atts ) );
			if ( !is_null( $board_width ) ) {
				$board_width = "data-pin-board-width='$board_width'";
			}
			if ( !is_null( $board_height ) ) {
				$board_height = "data-pin-scale-height='$board_height'";
			}
			if ( !is_null( $image_width ) ) {
				$image_width = "data-pin-scale-width='$image_width'";
			}
			return "<?a data-pin-do='embedBoard' href='http://pinterest.com/$board' $board_width $board_height $image_width><?/a>";
			}
		}
		$fl_pinit = new fl_pinit();
	?>

Nel costruttore, oltre a definire lo shortcode, includiamo anche il JavaScript necessario con la funzione wp_enqueue_script. Gli attributi sono relativi al nome della board, alla larghezza e altezza della stessa e, infine, alla larghezza delle immagini incluse. Il codice completo è disponibile su GitHub

Conclusione

Iniziare a costruire un plugin per WordPress non è estremamente complesso, anche in quest'ambito la filosofia della semplicità di utilizzo e della linearità della programmazione propria di questo CMS rende il compito molto più abbordabile di quanto potrebbe apparire a prima vista.

Ti consigliamo anche