1. Approfondimenti tematici
Wordpress
la guida
Passo passo,
le principali funzioni
del più famoso
CMS opensource
per la gestione
del tuo blog

2. Wordpress:
la guida
Dall’installazione all’uso dei post personalizzati, dai
widget ai plug-in più usati, dai template ad-hoc fino
alla realizzazione di un Super Admin per la gestione
dei contenuti. Ecco la guida dedicata al più famoso
CMS opensource per la gestione di blog: Wordpress.
E in più, i tutorial per integrare il modulo Paypal nel
tuo blog e usare jquery e Google Maps API.
Questo approfondimento tematico è stato pensa-
to per chi desidera lanciarsi nel mondo del Web e
vuole farlo in maniera professionale, imparando ad
utilizzare una piattaforma che, nella sua semplicità
disarmante, offre grandi potenzialità.
Wordpress, nel suo essere facile da utilizzare, nascon-
de innumerevoli funzioni avanzate che posso fare da
ago della bilancia nel decretare, o meno, il successo
di un blog nell’infinito universo della blogosfera.

3. Wordpress 3.0, tutte le novità. . . . . . . . . . . . . . . . 4
Wordpress si aggiorna alla versione 3.0, portando molte novità.
scopriamo passo passo come installarlo e come approfittare delle
numerose innovazioni introdotte: e se ora fosse meglio di Joomla
come CMS?
Post personalizzati con Wordpress. . . . . . . . . . . 9
I Custom Post Types di Wordpress 3 rendono il software un potente
e completo cms, adatto anche alla realizzazione di siti aziendali
complessi. vediamo come sfruttare la nuova caratteristia per
integrare tipi di dati con contenuto personalizzato
Utilizzare i widget di Wordpress. . . . . . . . . . . . . 13
I widget di Wordpress sono gli strumenti ideali per aggiungere ogni
tipo di funzionalità ai propri siti: vediamo come creare un’agenda di
appuntamenti utilizzando gli stessi e google calendar
Integrare Paypal nel tuo sito o blog . . . . . . . . 20
Avere uno strumento per elaborare pagamenti online è ormai una
prerogativa di qualsiasi sito che propone servizi e prodotti. Per
questo scopo, uno degli strumenti più utilizzati è PayPal. vediamo
come utilizzarlo con php e Wordpress
Usa jquery e le Google Maps
API in Wordpress. . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Grazie ai plugin, wordpress si presta senza problemi ad ogni
esigenza di sviluppo. vediamo come creare un calendario di eventi
con un plugin, le librerie jQuery e jQueryUi e, ciliegina sulla torta, le
Google Maps
Creare un template
ad hoc per Wordpress. . . . . . . . . . . . . . . . . . . . . . . 32
In questo articolo approfondiremo le nuove potenzialità offerte
da html5 e da css3 per realizzare un completo template “from
scratch”, da installare nel nostro blog in Wordpress
Ecco il Super Admin
per Wordpress. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Come sfruttare una console di comando, utile per amministrare
tutti i tuoi blog wordpress insieme. Ti permetterà di ottimizzare la
gestione di temi e plug-in, e la pubblicazione multipla dei tuoi post

4. Wordpress: la guida Anteprima di Wordpress 3.0
WEB 2.0 Anteprima di Wordpress 3.0
WORDPRESS 3.0
TUTTE LE NOVITÀ
WORDPRESS SI AGGIORNA ALLA VERSIONE 3.0, PORTANDO MOLTE NOVITÀ. SCOPRIAMO
PASSO PASSO COME INSTALLARLO E COME APPROFITTARE DELLE NUMEROSE
INNOVAZIONI INTRODOTTE: E SE ORA FOSSE MEGLIO DI JOOMLA COME CMS?
L
a versione 3.0 di Wordpress era molto attesa: Wordpress a questo indirizzo http://wordpress.org/
il più famoso CMS opensource per la gestione download/nightly/ (oppure prendete quella presen-
di blog si aggiorna, e penso sarete tutti curiosi te nel CD allegato alla rivista) e copiatela sul vostro
di scoprire le novità. Anzitutto è stato accorpato server. I requisiti sono assolutamente basilari: PHP
Wordpress µ (la versione multiblog del CMS creato da 4.3 e MySQL 4.1.2. Per testare Wordpress su macchine
Matt Mullenweg): ora è possibile gestire installazioni Windows potete installare WampServer (http://www.
multiple direttamente da Wordpress. È stata final- wampserver.com/): l’installazione di Apache, PHP e
mente aggiunta una nuova gestione di menu e tasso- MySQL è semplicissima: un piccolo menu in traybar vi
nomie e, grandissima innovazione, i siti non saranno aiuterà a gestire il vostro server locale. L’installazione
❑ CD ❑ WEB
wp3.rar più composti unicamente da post e pagine: sarà pos- di Wordpress è altrettanto semplice, come da tradi-
sibile creare “custom post” (tipi di articoli) persona- zione. Create un database vuoto e seguite il wizard
cdrom.ioprogrammo.it
lizzati. Ovviamente ci sono stati decisi miglioramenti di installazione. Ecco la prima novità, piccola ma
per quel che riguarda la sicurezza e le funzionalità rilevante: possiamo ora scegliere lo username dell’ac-
core del CMS (ad esempio è stata riscritta la gestione count di amministrazione, aumentando la sicurezza
dei contenuti multimediali). Infine, piccola ma sim- del nostro CMS. La dashboard non cambia molto
patica novitò: Kubrick non è più il tema di default. rispetto alle versioni precedenti, quindi non dovreb-
È stato sostituito da TwentyTen (2010) e ogni anno
ci sarà un nuovo aggiornamento del tema di default.
INSTALLAZIONE
Esamineremo molte di queste novità nel corso dell’ar-
ticolo, ma partiamo dal setup della nostra macchi-
na di test. Scaricate l’ultima versione disponibile di
Fig. 2: Il semplice Wizard di installazione di Wordpress 3.0
REQUISITI
be essere un problema muovervi tra i menu: non è
Conoscenze richieste
scopo di questo articolo trattare l’uso di Wordpress,
PHP, HTML, CSS, in rete sono presenti molte guide: fate riferimento ai
Apache motori di ricerca nel caso abbiate poca dimestichezza
con Wordpress. Diamoci da fare e diamo finalmente
Software
Un’installazione di
un’occhiata alle novità più rilevanti!
PHP, Database MySQL
Impegno
I NUOVI MENU
Tempo di realizzazione Una delle più grosse limitazioni delle versioni prece-
denti di Wordpress riguardava la gestione dei menu:
Fig. 1: Il menu di WampServer su Windows XP le funzioni wp_list_pages() o wp_menu_page() si
4 28 / Agosto 2010 http://www.iopro g:r aa g uodia
Wordpre s s l m m i . t

5. Anteprima di Wordpress 3.0 Wordpress: la guida
Anteprima di Wordpress 3.0 WEB 2.0
limitavano a mostrare l’elenco delle pagine presenti
all’interno del sistema al massimo aggiungendo un
elemento “home” e ordinando e formattando la lista
di pagine ritornate secondo criteri impostati dallo
sviluppatore.
Con Wordpress 3.0 cambia tutto: è stato integra-
to all’interno un editor visuale per i menu che vi
permetterà di assegnare ciascun menu creato alla
sua location (vedremo dopo cosa significa) e di Fig. 4: I quattro menu che abbiamo registrato all’interno
modificare con semplici drag&drop il contenuto di del nostro tema
ciascun sottomenu: possiamo includere nel menu
pagine, url personalizzati (siti esterni o link diretti a nati momenti dell’esecuzione del nostro software
post, per esempio) o categorie. Nei temi compatibili in cui possiamo chiamare funzioni che eseguono
con questa funzionalità le modifiche si rifletteranno istruzioni PHP. Una volta registrati i menu neces-
immediatamente nel template. sari, questi compariranno come caselle da riempire
all’interno dell’editor visuale. Per richiamarli all’in-
terno del nostro tema basterà invocare la funzione
wp_nav_menu() passando i parametri più adatti NOTA
alla visualizzazione nel nostro tema.
Chiamando la funzione senza argomenti verrà
ritornato e stampato il primo menu da noi crea- GLI HOOK IN
to. Questo va bene nel caso in cui il nostro tema WORDPRESS
Fig. 3: Un menu creato con l’editor visuale: ecco come supporti un unico menu, ma se vogliamo maggior Wordpress, sin dall’inizio,
viene visualizzato in TwentyTen controllo possiamo passare diversi argomenti alla ha fornito agli sviluppatori
funzione inserendoli in un array: tra questi il nome moltissimi hook (actions e
filters per la precisione),
del menu da mostrare, le classi css da applicare e adatti allo sviluppo di
Vediamo ora come rendere i nostri temi compatibili così via. Un esempio di chiamata per il nostro tema nuove funzionalità (attra-
con questa funzionalità. Per prima cosa registriamo potrebbe essere questa: verso i plugin) o alla per-
all’interno del template i menu che vogliamo utiliz- sonalizzazione “estrema”
zare. Possiamo dichiarare quanti menu vogliamo, wp_nav_menu( di temi. Potete trovare una
array( ‘container_class’ => ‘menu-header’, lista completa degli hook
usando la chiamata singola in caso di un solo menu: disponibili in Wordpress
‘theme_location’ => ‘secondo’,
2.9 (la versione 3.0 non
add_action( ‘init’, ‘registra_menu’ ); ‘depth’ => ‘0’) è ancora stata rilasciata
function registra_menu() { ); ufficialmente) all’indirizzo
register_nav_menu( ‘primo-menu’, __( ‘Primo’ ) ); http://adambrown.info/p/
} wp_hooks/version/2.9
Il menu chiamato “secondo” sarà visualizzato come
una lista non ordinata <ul> all’interno di un con-
Oppure la chiamata multipla, per registrare più tainer con classe css menu-header: il visualizza-
menu contemporaneamente, addirittura quattro in tore esplorerà il menu in tutta la sua profondità
questo caso: (parametro depth uguale a zero). Fate riferimento
al codex all’indirizzo http://codex.wordpress.org/
add_action( ‘init’, ‘registra_menu’ ); Template_Tags/wp_nav_menu per la lista com-
pleta dei parametri utilizzabili.
function registra_menu() { Con questa struttura di menu annidati, diventa
register_nav_menus( davvero facile implementare menu multilivello in
array( JavaScript, scrivendo il codice appositamente o
‘primo-menu’ => __( ‘Primo’ ), utilizzando uno degli innumerevoli script presenti
‘secondo-menu’ => __( ‘Secondo’ ), in rete e che mappano liste di link in menu con gli
‘terzo’ => __( ‘Terzo’ ), effetti più svariati.
‘quarto’ => __( ‘Quarto’ ) Ricordate: il tema TwentyTen è una ottima palestra
) per imparare ad utilizzare le nuove funzionalità
); di Wordpress 3.0. Esaminate il codice per capire
} come sono implementati i menu e ricordate che
per i più pigri è disponibile un widget (vi basterà
attivarlo) che mostrerà i nostri menu nelle sidebar
Cosa succede? Abbiamo agganciato all’hook di ini- abilitate a contenere widget: è comunque necessa-
zializzazione la funzione registra_menu(). Gli hook rio registrare i menu utilizzando le funzioni viste in
in Wordpress sono appunto “agganci” a determi- precedenza.
htt r : pre w : .i pr i gr
W opd/ / ws sw l aog uod a a m mo.it Agosto 2010 / 29 5

6. Wordpress: la guida Anteprima di Wordpress 3.0
WEB 2.0 Anteprima di Wordpress 3.0
TASSONOMIE array( ‘post’ ),
PERSONALIZZATE array(
C’erano una volta i tag: parole associate agli articoli ‘public’ => true,
di un blog che ne definivano sommariamente il ‘labels’ => array(
contenuto: se un post ad esempio parla di automo- ‘namÈ => __( ‘Attori’ ),
bili FIAT è possibile che i tag ad esso associati siano ‘singular_namÈ => __( ‘AttorÈ )
fiat, automobili, nuovo modello, ecc… ),
Le tagcloud sono una delle più efficaci rappresenta- )
ziono grafiche dei tag e sono costituite dai tag stessi );
mostrati con font tanto più grandi quanto il tag è }
maggiormente utilizzato.
In Wordpress 3.0 si va oltre il concetto di tag passan- Ecco fatto. Abbiamo creato la nostra tassonomia
do al concetto di tassonomia. Wikipedia definisce la “Attori” che possiamo assegnare ai nostri post e alle
Tassonomia come la classificazione gerarchica di nostre pagine (o custom post, che esamineremo più
concetti, e il principio stesso della classificazione. avanti nell’articolo).
Fig. 6: La tassonomia “attori”
NOTA
WORDPRESS Fig. 5: Un esempio di tagcloud Come potete vedere in figura, è stata creata un’ap-
E BUDDYPRESS posita voce di menu per questa tassonomia, mentre
Wordpress è il sistema nel pannello di scrittura dei post vedremo una
alla base di alcuni dei più Praticamente tutti i concetti, gli oggetti animati e nuova casella “Attori” dove potremo selezionare i
famosi blog italiani e stra- non, i luoghi e gli eventi possono essere classificati tag della tassonomia appena creata.
nieri. La sua semplicità ne
ha fatto lo strumento idea- seguendo uno schema tassonomico. La tassonomia Come visualizzare queste tassonomie nella pagina
le per creare sistemi multi- è la scienza che si occupa genericamente dei modi dei post? Basterà aggiungere al template (all’inter-
blog in pochissimo tempo. di classificazione (degli esseri viventi e non). Quindi no del loop Wordpress) la chiamata alla funzione
BuddyPress (http://bud- per esempio la tassonomia di un album musicale get_the_term_list( $post->ID, ‘attori’); per recupera-
dypress.org/) invece è un può essere data dagli artisti che l’hanno composto, re tutti i tag per la tassonomia “attori” legati a quel
altro prodotto Automattic
composto da una serie di mentre i film prodotti nel XX secolo potrebbero particolare post. Facile, no?
plugin per Wordpress che essere catalogati per gli attori che li hanno recitati.
permettono a Wordpress Wordpress si comporta allo stesso modo: passa da
di diventare un social net- una tassonomia semplice (i tag) ad una tassonomia
work a tutti gli effetti! più complessa e completa, completamente gerar-
chica, dove possiamo creare nostre tassonomie,
composte a loro volta da tag.
Per creare una nostra tassonomia procediamo
come per i menu: registriamo la nostra tassonomia
e questa comparirà nel pannello di amministrazio- Fig. 7: La casella per la tassonomia “attori” nella pagina
di scrittura dei post
ne di Wordpress. Pensiamo ad esempio ad un blog
che parla di film. Possiamo creare la tassonomia
“Attori” e creare tag ad essa appartenenti che non
sono altro che gli attori che vi hanno preso parte. Per cosa possiamo usare le tassonomie persona-
lizzate? Pensate ad un catalogo di abbigliamento
online magari associato ad uno dei tanti plugin che
add_action( ‘init’, ‘tassonomia_attori’); trasformano Wordpress in un sistema di ecommer-
ce come WP-ecommerce http://wordpress.org/
function tassonomia_attori() { extend/plugins/wp-e-commerce/. Potete crea-
re diverse tassonomie (colori, taglie, stile, tessuto,
register_taxonomy( ecc…) da assegnare a ciascun prodotto per creare il
‘attori’, vostro catalogo come più vi piace.
6 30 / Agosto 2010 http://www.iopro g:r aa g uodia
Wordpre s s l m m i . t

7. Anteprima di Wordpress 3.0 Wordpress: la guida
Anteprima di Wordpress 3.0 WEB 2.0
POST PERSONALIZZATI ‘parent’ => __( ‘Podcast superiorÈ ),
Wordpress 3.0 introduce la possibilità di creare post ),
personalizzati (custom post): attenzione però… Si
parla di post nel significato più generico di “oggetto ‘public’ => true,
facente parte di un blog Wordpress”, quindi nel ‘show_ui’ => true,
corso dell’articolo la parola post potrebbe riferirsi ‘capability_typÈ => ‘post’,
ad una pagina, un articolo o addirittura un menu. ‘hierarchical’ => false,
La documentazione originale li chiama “custom ‘supports’ => array(‘titlÈ, ‘editor’, ‘author’)
post”, ci adegueremo quindi a questa denomina- ));
zione. A cosa servono i custom post? A moltissime }
cose: possiamo trasformare il nostro blog in un sito
di annunci immobiliari ad esempio, creando un Cosa è successo? Abbiamo aggiunto una nuova
custom post “annunci” oppure possiamo creare voce di menu al nostro Wordpress. Cliccando sul
un custom post “fotografie” se usiamo il blog come menu visualizzeremo una pagina in tutto e per tutto
portfolio fotografico o ancora creare un custom post simile a quella dei post, ma denominata “Podcast”.
“podcast” se siamo aspiranti DJ. La chiamata register_post_type() accetta un nume-
I custom post trasformano Wordpress in un CMS ro molto elevato di parametri. L’array labels per
avanzato: infatti, a tutti questi contenuti “specia- cominciare si occuperà di impostare le etichette per
li”, possiamo aggiungere campi personalizzati per i pulsanti del nostro pannello, come potete vedere
rendere ancora più “custom” il template che poi in Fig.8. A seguire ci sono alcuni parametri che per-
andremo ad utilizzare per inserire quel particolare mettono di impostare come i nostri podcast saran-
contenuto: un po’ come avviene in Joomla o Drupal, no visualizzati o gestiti: il parametro public imposta
ma in maniera infinitamente più semplice. la “privacy” o meno dei nostri podcast, show_ui
Un esempio pratico ci chiarirà le idee. Poniamo permette di attivare il pannello podcast nelle nostre
di essere un aspirante DJ che vuole aggiungere la pagine di amministrazione. Per concludere, una
propria lista di podcast ad un blog Wordpress: per lista di parametri che imposta la visualizzazione
caricare gli mp3 dei podcast ci appoggeremo al del custom post appena creato: capability_type è
media manager di Wordpress, mentre creeremo un parametro che imposta il “comportamento” del
un custom post “podcast” per gestire gli articoli di nostro contenuto: in questo caso deve comportar-
questa particolare categoria: attenzione però, non si si come un post (articolo) del blog. Il parametro
tratta di una categoria di Wordpress personalizzata, hierarchical definisce se il nostro custom post può
ma si tratta di un vero e proprio oggetto “differente” essere organizzato gerarchicamente (struttura ad
dai normali post di Wordpress con sue peculiarità albero: nel caso dei podcast potremmo attivarlo per
e possibilità molto maggiori rispetto ad un classico creare serie composte da più puntate organizza-
post o una pagina. te gerarchicamente). L’array supports indica quali
Ecco la chiamata che serve per registrare il nuovo sono le feature che il custom post può supportare:
custom post “podcast”. Anche questa si appoggerà commenti, trackback, revisioni, ecc…
all’hook “init”, come visto in precedenza. Con questa prima semplice impostazione possiamo
già creare i nostri podcast come fossero articoli del
add_action(‘init’, ‘crea_custom_podcast’ ); blog, ma come potete vedere non saranno visua-
lizzati nella home del nostro blog, se non verranno
function crea_custom_podcast() { richiamati esplicitamente nel template o nel menu
register_post_type(‘podcast’, array( (nell’immagine potete vedere il widget creato auto-
‘labels’ => array( maticamente da Wordpress per il nostro custom post
‘namÈ => __( ‘Podcast’ ), “podcast”). I custom post hanno indirizzi come que-
‘singular_namÈ => __( ‘Podcast’ ),
‘add_new’ => __( ‘Aggiungi Podcast’ ),
‘add_new_item’ => __( ‘Aggiungi nuovo Podcast’
),
‘edit’ => __( ‘Modifica’ ),
‘edit_item’ => __( ‘Modifica Podcast’ ),
‘new_item’ => __( ‘Nuovo Podcast’ ),
‘view’ => __( ‘Visualizza Podcast’ ),
‘view_item’ => __( ‘Visualizza’ ),
‘search_items’ => __( ‘Cerca Podcast’ ),
‘not_found’ => __( ‘Nessun Podcast trovato’ ),
‘not_found_in_trash’ => __( ‘Nessun Podcast
trovato nel cestino’ ), Fig. 8: Immagine che evidenzia il nuovo menu creato e l’utilizzo delle label personalizzate
htt r : pre w : .i pr i gr
W opd/ / ws sw l aog uod a a m mo.it Agosto 2010 / 31 7

8. Wordpress: la guida Anteprima di Wordpress 3.0
WEB 2.0 Anteprima di Wordpress 3.0
sto www.mioblog.it/?post_type=podcast&p=1, portando Wordpress al di fuori del classico ambito
dove post_type è il nome del custom post creato e il di “cms per blog” per realizzare qualunque sito vi
parametro p è l’id dell’oggetto. possa venire in mente in tutta semplicità.
In realtà manca ancora “un pezzo” importante del
nostro custom post: come si fa ad aggiungere campi
Fig. 10: I campi personalizzati che possiamo visualizzare
per i nostri podcast
Fig. 9: I nostri custom post nell’editor visuale del menu
GESTIRE IL MULTIBLOG
Come abbiamo già detto all’inizio dell’articolo,
personalizzati al nostro podcast? Aggiungiamo delle Wordpress e Wordpress µ sono ora uniti in un
azioni sempre in functions.php, possiamo aggiun- unico prodotto: per gli utenti di Wordpress 2.9.x
gere la durata del podcast ad esempio (possiamo che aggiornano a Wordpress 3.0 non cambia
eventualmente calcolarla in maniera dinamica) o nulla, così come non cambierà nulla per chi
l’autore del podcast (recuperato attraverso l’oggetto ha già un’installazione di Wordpress attiva
$post di Wordpress) e aggiornerà alla versione 3.0. Solo in fase di
nuova installazione ci verrà chiesto se vogliamo
add_action(“manage_posts_custom_column”, gestire un singolo blog o un multiblog, mentre
“colonne_custom”); sarà possibile convertire un’installazione sin-
add_filter(“manage_edit-podcast_columns”, gola di Wordpress 3.0 in una “multipla” con
“colonne_podcast”); un tool apposito che verrà rilasciato prossi-
mamente da Wordpress.org. La procedura di
function colonne_podcast($columns) installazione è assolutamente semplice anche in
{ questo caso. Prima di cominciare l’installazione
L’AUTORE
$columns = array( aggiungete la riga :
“cb” => “<input type=”checkbox” />”,
Francesco Napoletano è “title” => “Titolo”, define(‘WP_ALLOW_MULTISITÈ, true);
socio della Piko Design “description” => “Descrizione”,
(www.pikodesign.it) dove “length” => “Lunghezza”, al file wp-config.php, Wordpress farà il resto.
si occupa di tutta la parte “speakers” => “Autore”,
di sviluppo web (dal PHP al Ovviamente, create network di blog su server
“comments” => ‘Commenti’ abbastanza carrozzati per reggere il carico e non
JavaScript, passando per
Flex ed actionscript 3.0). ); su hosting condiviso con poche risorse!
Il suo blog www.napolux. return $columns;
com è tra i più conosciuti }
nell’ambiente web italiano.
function colonne_custom($column) ...ED È OPENSOURCE!
{ Abbiamo dato un’occhiata alle novità più impor-
global $post; tanti di Wordpress 3.0: la versione finale non è
if (“ID” == $column) echo $post->ID; ancora uscita, ma la 3.0 si appresta ad essere
elseif (“description” == $column) echo substr($post- una versione di svolta per il CMS creato da Matt
>post_content,0,30) . “...”; Mullenweg. Facilità d’uso, estrema personalizza-
elseif (“length” == $column) echo “12:34”; zione e facilità di creazione dei template sono i
elseif (“speakers” == $column) echo $post->post_ suoi punti di forza. Wordpress è un CMS che non
author; può mancare nella nostra collezione di prodotti
} opensource: offrire ai clienti soluzioni basate
su Wordpress non è più un tabù e con questa
Con la prima funzione, dichiariamo le colonne nuova versione possiamo affrontare le richieste
personalizzate che dovremmo visualizzare, men- del mercato con maggiore fiducia nell’offrire un
tre con la seconda imposteremo i valori per tali prodotto completo, moderno ed estremamente
colonne. Come avete potuto capire, i custom post personalizzabile.
sono uno strumento davvero molto flessibile: pote-
te organizzare i vostri contenuti come più vi piace, Francesco Napoletano
8 32 / Agosto 2010 http://www.iopro g:r aa g uodia
Wordpre s s l m m i . t

9. I Custom Post Types di WordPress di WordPress Wordpress: la guida
WEB 2.0 I Custom Post Types 3.0 3.0
POST PERSONALIZZATI
CON WORDPRESS
I CUSTOM POST TYPES DI WORDPRESS 3 RENDONO IL SOFTWARE UN POTENTE E COMPLETO CMS,
ADATTO ANCHE ALLA REALIZZAZIONE DI SITI AZIENDALI COMPLESSI. VEDIAMO COME SFRUTTARE
LA NUOVA CARATTERISTIA PER INTEGRARE TIPI DI DATI CON CONTENUTO PERSONALIZZATO
U
na delle novità più attese e discusse della versione proporre ai lettori un archivio di gruppi musicali con le rela-
3.0 di WordPress è il supporto dei tipi di contenuto tive produzioni discografiche. Vedremo, infatti, come creare
personalizzati. La nuova feature permette a WP di due diversi tipi di post, uno per le informazioni sugli artisti e
fare il salto di qualità e passare da sistema di gestione di uno per le informazioni sugli album. Vedremo come associa-
blog a vero e proprio CMS: personalizzare i tipi di contenuto, re ad ognuno dei due tipi le proprie “custom taxonomies” e,
infatti, permette di creare complesse architetture di dati, infine, come mandarli a video nel front-end di WP in modo
che consentono di utilizzare WP anche per lo sviluppo di siti diverso.
aziendali complessi.
❑ CD ❑ WEB Ed è ciò che dimostriamo in questo articolo: questo mese,
wp_custom_post_types.rar infatti, vedremo come utilizzare i “custom post types” per
cdrom.ioprogrammo.it
creare un archivio discografico nel quale verranno messi ATTIVIAMO I CUSTOM
in relazione artisti e pubblicazioni discografiche, estraendo POST TYPES
completamente i contenuti dal normale ciclo iterativo che Attualmente, per creare nuovi tipi di post, sono percorribili
manda a video i post in WP. due strade: ricorrere ad uno dei plug-in disponibili gratui-
tamente nella repository o integrare il file functions.php del
template corrente con il codice necessario (forse preferibile
dal programmatore). Nel nostro sito discografico avremo
I CUSTOM POST TYPES bisogno di aggiungere due tipi di post: uno destinato ad
Il termine può trarre in inganno: non si tratta solo di post, ma ospitare le schede degli artisti, uno destinato alle schede
di tipi di contenuto strutturati in base alle specifiche esigenze degli album. Vediamo come generare il primo tipo:
dell’utente. L’istallazione base di WP supporta i seguenti tipi
di post: post, page, attachment, revisions, nav_menu e sono add_action(‘init’,’register_groups’);
tutti ospitati nella tabella wp_posts del database. Ciò che function register_groups() {
cambia tra i vari tipi è il valore del campo post_type. $labels = array(
Qualcuno potrebbe chiedersi perché utilizzare i “custom post ‘name’ => _x(‘Groups’, ‘post type general name’),
types” e non, magari, le “custom taxonomies”. Apportando le ‘singular_name’ => _x(‘Group’, ‘post type singular name’),
opportune modifiche al tema, sarebbe comunque possibile ‘add_new’ => _x(‘Add New’, ‘group’),
personalizzare la visualizzazione dei post. La risposta non è ‘add_new_item’ => __(‘Add New Group’),
univoca: lavorando con WP ci si trova spesso nella condizione ‘edit_item’ => __(‘Edit Group’),
Conoscenze richieste ‘new_item’ => __(‘New Group’),
di poter raggiungere lo stesso obiettivo adottando soluzioni
Buona conoscenza di ‘view_item’ => __(‘View Group’),
PHP; buona conoscenza diverse. Spesso, infatti, potrebbe essere più opportuno (o
di WordPress comodo) utilizzare le “custom taxonomies”. Ma allora come ‘search_items’ => __(‘Search Group’),
Software ‘not_found’ => __(‘No groups found’),
decidere? Un criterio potrebbe essere quello di individuare i
Web server con Php5 ‘not_found_in_trash’ => __(‘No groups found in Trash’),
e MySQL, in ambiente tipi di contenuto in base ad elementi strutturali: ad esempio,
*nix. In locale è con- una FAQ potrebbe essere strutturalmente diversa da un post, ‘parent_item_colon’ => ‘’, ‘menu_name’ => ‘Groups’);
sigliato il pacchetto
XAMPP, scaricabile organizzata e visualizzata in maniera autonoma, magari con $args = array( ‘labels’ => $labels, ‘public’ => true,
all’indirizzo http:// ‘publicly_queryable’ => true, ‘show_ui’ => true, ‘show_
www.apachefriends. tassonomie diverse. Lo stesso potrebbe dirsi per la scheda
org/it/xampp.html in_menu’ => true, ‘query_var’ => true, ‘rewrite’ => true,
di un libro, per un prodotto in un catalogo e così via. Ciò
Impegno ‘capabili ty_type’ => ‘post’, ‘has_archive’ => true, ‘hierar
che è importante ricordare, comunque, è che le possibilità
di personalizzazione offerte dai “custom post types” sono chical’ => false, ‘menu_position’ => null, ‘supports’ =>
decisamente maggiori rispetto a quelle offerte da categorie, array(‘title’,’editor’,’thumbnail’,’excerpt’));
Tempo di realizzazione
tag e tassonomie. register_post_type(‘group’,$args);
Nell’impostazione di questo articolo, abbiamo pensato di flush_rewrite_rules(); }
36 /
W o r d p r e s s : l a g u 2011
Febbraio i d a 9
http://www.iopro g r a m m o . i t

10. I Custom Post Types di Post Types3.0 WordPress 3.0
Wordpress: la guida I Custom WordPress di WEB 2.0
All’avvio di WP viene invocata la funzione register_groups().
All’interno di questa funzione vengono generati due array:
il primo ($labels) provvede all’assegnazione delle etichette
che vengono visualizzate nel pannello di amministrazione e
costituisce uno degli elementi del secondo array; $args impo-
sta una serie di parametri che stabiliscono il funzionamento
del tipo di post. Per una lettura dettagliata degli argomenti
del secondo array, rinviamo al codex (http://goo.gl/tJxCe);
qui ci soffermiamo solo sull’argomento supports. Questo
permette di definire gli elementi del form che appariranno
nel pannello di amministrazione, in fase di inserimento
e modifica dei contenuti. Nel nostro primo “custom post
type” saranno attivi i campi del titolo, l’editor del testo, il
link per l’inserimento dell’immagine di anteprima, il campo
dell’estratto del testo. Una volta definiti i valori degli elementi Fig. 1: Una volta registrata una nuova tassonomia, questa appare
degli array, la funzione register_post_type(‘group’,$args) com- nel menu di sinistra del back-end di WordPress
pleta il lavoro e registra il tipo group. In ultimo, per evitare NOTA
eventuali problemi nella lettura dei permalink, forziamo il
refresh delle regole di rewriting memorizzate, con la funzio- array(‘hierarchical’ => true, ‘label’ => “Genres”, REQUISITI DI SISTEMA
ne flush_rewrite_rules(). ‘singular_label’ => “Genre”, ‘rewrite’ => true)); } Per provare le feature di
WordPress di cui abbiamo parla-
Le tassonomie vengono registrate all’avvio di WP. Se ne to in queste pagine, consigliamo
fortemente di utilizzare sistemi
occupa la funzione register_taxonomy(), alla quale passiamo *nix, dato che sono diverse
REGISTRARE I CUSTOM FIELDS i seguenti argomenti: le incompatibilità rilevate in
Una volta definito il tipo di post, possiamo associarvi dei • una stringa con il nome della tassonomia ambiente Windows.
campi personalizzati destinati ai metadati. Nel caso del tipo • un array con gli ID dei tipi di post cui associare la tasso- L’elenco dettagliato dei requisiti
di post group, ci servirà un solo campo, destinato ad inserire nomia di sistema è disponibile all’in-
dirizzo http://codex.wordpress.
l’anno di costituzione del gruppo: • un array con una serie di parametri aggiuntivi (per l’elenco org/Hosting_WordPress.
di parametri, rinviamo al codex: http://goo.gl/Qte64)
add_action(‘admin_init’, ‘register_groups_fields’);
function register_groups_fields() { Apriamo ora il pannello di amministrazione e diamo un’oc-
add_meta_box(‘year’, ‘Year’, ‘year’, ‘group’,‘side’,‘low’);} chiata alla scheda “New Group”. Noteremo un box laterale
function year() { che ci permetterà di inserire nuovi termini, esattamente allo
global $post; $custom = get_post_custom($post->ID); stesso modo delle categorie dei normali post.
$year = $custom[“year”][0] ?>
NOTA
<label>Year:</label>
<input name=”year” value=”<?php echo $year; ?>”/> AVVERTENZA
<?php } IL SALVATAGGIO DEI DATI Il codice presentato nei nostri
Provvediamo ora al salvataggio dei dati: esempi non è completo.
La funzione add_meta_box() aggiunge il campo year. Per esigenze di spazio non si
add_action(‘save_post’, ‘save_group_meta’); è provveduto alla gestione di
Gli argomenti che questa accetta impostano l’ID del campo, eventuali errori nel recupero
il titolo, il nome di una funzione di callback, il tipo di post cui function save_group_meta() { global $post;
dei dati. Nelle istallazioni di
associare il campo, l’area della pagina dove caricarlo, infine la update_post_meta($post->ID, ‘year’, $_POST[‘year’]); } WordPress su cui è stato testato
priorità. La funzione di callback year() genera il codice HTML il codice riportato, tuttavia, non
del campo. Il valore del campo, se esiste, viene generato A questo scopo utilizziamo l’hook save_post per invocare sono stati rilevati errori di sorta.
grazie alla variabile $post. la nostra funzione save_group_meta(). Qui la variabile glo-
bale $post ci fornisce l’ID del contenuto corrente. Questo
viene passato come primo argomento della funzione upda-
te_post_meta(), insieme alla chiave e il valore del “custom
REGISTRARE field”. Ora tutto è pronto per l’inserimento dei dati. Possiamo
LE CUSTOM TAXONOMIES cominciare ad inserire le nostre band preferite (attenti, però:
Secondo la stessa logica, registriamo le tassonomie del ancora non possiamo vederle nel front-end).
nostro tipo di contenuto. Nel nostro esempio registriamo il
genere cui si ispira l’artista (o la band):
add_action(‘init’, ‘register_custom_taxonomies’); AGGIUNGIAMO GLI ALBUM
function register_custom_taxonomies(){ Una volta definito il tipo Group, possiamo passare a lavorare
register_taxonomy(“Genres”, array(‘group’), sul tipo Album. Le funzioni di WP necessarie sono esatta-
10
h t t p : / / w w w . i o p r o g r a m mo.it Wordpre s s : / 37
Febbraio 2011l a g u i d a

11. I Custom Post Types di WordPress di WordPress Wordpress: la guida
WEB 2.0 I Custom Post Types 3.0 3.0
mente le stesse. Quindi, registriamo il “custom post type”: generare un selectbox che renda agevole il lavoro di chi
inserisce i dati. Il selectbox, infatti, fornisce l’ID e il nome del
add_action(‘init’, ‘register_albums’); gruppo e non consente possibilità di errore nell’associazione
function register_albums() { degli album agli artisti. Oltre al campo Artist, creiamo un
$labels = array( ... ); $args = array( ... ); campo per l’etichetta discografica con un normale textbox.
register_post_type(‘album’,$args); E infine salviamo i dati:
flush_rewrite_rules(); }
function save_album_meta(){
Registriamo, poi, la tassonomia Genres anche per il tipo global $post;
Album, integrando semplicemente il codice precedente: update_post_meta($post->ID, ‘year’, $_POST[‘year’]);
update_post_meta($post->ID, ‘artist’, $_POST[‘artist’]);
NOTA
add_action(‘init’, ‘register_custom_taxonomies’); update_post_meta($post->ID, ‘etichetta’, $_
ESTENSIONI function register_custom_taxonomies() { POST[‘etichetta’]); }
Se nello sviluppo del proprio register_taxonomy(“Genres”, array(‘group’,’album’), ...}
sito non si rendono necessarie
architetture dati complesse, La funzione register_custom_taxonomies() è la stessa utilizza-
invece di registrare i “custom
post types” estendendo il codice ta per registrare le tassonomie del tipo Group. Per associare la I TIPI DI CONTENUTO
del file functions.php, potrebbe tassonomia anche al tipo Album, ci siamo limitati ad aggiun- DELLA HOME PAGE
essere preferibile utilizzare un gere l’ID album all’argomento array(‘group’,’album’) della Le impostazioni predefinite di WP non prevedono la visualiz-
plug-in che permetta di operare funzione register_taxonomy(). Infine, aggiungiamo i campi zazione né in home page, né nelle pagine di archivio, dei tipi
dal pannello di amministrazione. personalizzati: di post personalizzati. Nel nostro sito di esempio, vogliamo
Tra i vari plug-in disponibili, i più
popolari ricordiamo il “Custom visualizzare in home page, oltre al tipo predefinito post,
add_action(‘admin_init’, ‘register_albums_fields’); anche il nostro tipo group. Sempre nel file functions.php,
Post Type UI” (http://wordpress.
org/extend/plugins/custom- function register_albums_fields(){ aggiungiamo il seguente codice:
post-type-ui/) e il “Simple add_meta_box(‘year’, ‘Year’, ‘year’, ‘album’, ‘side’, ‘low’);
Custom Post Type Archives” add_meta_box(‘meta_info’, ‘Meta info’, ‘meta_info’, add_filter( ‘pre_get_posts’, ‘get_home_post_types’ );
(http://wordpress.org/extend/ ‘album’, ‘normal’, ‘low’); } function get_home_post_types($query){
plugins/simple-custom-post-
if ( is_home() )
type-archives/).
Ed ecco la funzione di callback che genera il codice HTML $query->set( ‘post_type’, array( ‘post’, ‘group’ ) );
dei campi: return $query; }
function meta_info() { Noterete subito che non utilizziamo più la funzione add_
global $post; action(), che aggancia un’azione ad una funzione, ma la
$custom = get_post_custom($post->ID); funzione add_filter(), utilizzata da WP per modificare in vario
$artist = $custom[“artist”][0]; modo i dati prima della loro archiviazione nel db o della loro
$etichetta = $custom[“etichetta”][0]; resa a video nel browser. L’hook pre_get_posts viene attivato
query_posts(‘post_type=group&orderby=title’) ; prima dell’esecuzione della query principale.
// the Loop Dunque, un attimo prima del caricamento dei dati, viene
if ( have_posts() ){ ?><p> verificata la pagina richiesta dall’utente: se questi invoca la
NOTA
<label>Artist:</label><select name=”artist”> home page, la nostra funzione ridefinisce la query aggiun-
CHILD THEMES <option value=”0”>Select artist</option><?php gendo, al tipo post, il nostro “custom type” group. Ora in
Quando si apportano modifiche while (have_posts()) : the_post(); home page vengono caricati tutti i contenuti relativi agli
ad un tema, è sempre preferibile if ($artist == $post->ID) {$selected = “ selected”; artisti e ai gruppi.
creare un “child theme”, } else { $selected = “”; }
ossia un tema che estende le $before = ‘<option value=”’ . $post->ID . ‘”’ .
funzionalità del “parent theme”
$selected . ‘>’;
senza modificarne i file originali.
È quello che abbiamo fatto $after = ‘</option>’; the_title($before, $after); I SINGOLI CONTENUTI
in questi esempi, copiando e endwhile; ?> E I METADATI
modificando solo i file necessari. </select> </p> <?php } ?> <p><label>Label:</label> In home page, come abbiamo visto, andranno sia i normali
Per una dettagliata analisi dei <input name=”etichetta” value=”<?php echo
“child themes”, rinviamo ad post che i nuovi contenuti del tipo Group. Sarebbe oppor-
$etichetta; ?>” /></p> tuno, però, cambiare anche la struttura dei singoli post, per
ioProgrammo di dicembre o alla
documentazione online, all’in- <?php consentire una visualizzazione più completa dei dati.
dirizzo http://codex.wordpress. } Apriamo, dunque, il file single.php e inseriamo, dopo il tag
org/Child_Themes <?php the_content(); ?>, il seguente codice:
Non cambia molto rispetto al codice precedente, se non per
quanto riguarda il “custom field” artist. Ogni album, infatti, <?php $anno = get_post_meta($post->ID, ‘year’, true); ?>
viene associato ad un artista/band. Quindi utilizziamo un <p>Anno: <?php echo $anno; ?></p>
loop per selezionare i titoli dei contenuti del tipo Group e <?php $custom_query = new WP_Query(array(‘post_type’
38 /
W o r d p r e s s : l a g u 2011
Febbraio i d a 11
http://www.iopro g r a m m o . i t

12. I Custom Post Types di Post Types3.0 WordPress 3.0
Wordpress: la guida I Custom WordPress di WEB 2.0
=> ‘album’, ‘meta_key’ => ‘artist’, ‘meta_value’ => plate pagina per ognuno degli archivi di cui abbiamo
$post->ID)); ?> bisogno. Creando, poi, delle gerarchie di pagine, possiamo
<?php if ($custom_query->have_posts()) { ?>Albums:<ul> creare archivi in cui il filtro sui dati diviene via via più pre-
<?php while ($custom_query->have_posts()) : ciso. Supponiamo, infatti, di voler ottenere un elenco di
$custom_query->the_post(); ?> gruppi selezionati in base al genere. Dovremo solo creare
<li><a href=”<?php the_permalink(); ?>” un nuovo template pagina e impostare una nuova query
title=”<?php the_title(); ?>”> (si legga al riguardo la pagina http://core.trac.wordpress.
<?php the_title(); ?></a></li><?php endwhile; ?></ul> org/ticket/13818). Nel caso si preferisca cominciare a lavo-
<?php } wp_reset_query(); ?> rare su WP 3.1 (annunciato nel giorno di Natale in questo
post http://goo.gl/KCUjC), allora le difficoltà saranno deci-
Dopo la visualizzazione del testo completo del post, man- samente minori. Per gestire perfettamente la visualizzazio-
deremo a video l’anno di costituzione del gruppo (o di ne degli archivi, basterà modificare la funzione di callback
pubblicazione dell’album), prelevando il valore del “custom invocata dall’hook pre_get_posts, come visto in precedenza
field” year: get_post_meta($post->ID, ‘year’, true). Subito nella modifica della home page:
dopo impostiamo una nuova query, con una nuova istanza NOTA
dell’oggetto WP_Query. L’array passato come argomento add_filter( ‘pre_get_posts’, ‘get_home_post_types’ );
permette di filtrare i dati in base al tipo di post (‘post_type’ function get_home_post_types($query){ RIFERIMENTI
=> ‘album’), alla chiave (‘meta_key’ => ‘artist’) e al valore del if ( is_home() || is_archive() ) Sono innumerevoli le risor-
custom field (‘meta_value’ => $post->ID). In pratica, cerchia- $query->set( ‘post_type’, array( ‘post’, ‘group’ ) ); se online su WordPress.
mo tutti gli album dell’artista individuato da $post->ID. Se la return $query; } Nell’impossibilità di elencarle
tutte (o solo una piccola parte),
query restituisce dati utili, allora viene generata una lista con consigliamo di partire dalla
i permalink dei singoli album. infine, visualizziamo la lista dei In pratica, abbiamo semplicemente modificato la con- documentazione ufficiale, all’in-
termini della “custom taxonomy” Genres. All’interno della div. dizione che verifica la pagina corrente: if (is_home() || dirizzo http://codex.wordpress.
entry-utility aggiungiamo: is_archive()). Così com’è, però, in WP 3.1 questo codice org/. Una panoramica delle
genera l’errore “Warning: Illegal offset type in isset or novità introdotte dalla futura
<p>Genres: <?php the_terms( $post->ID, ‘Genres’, ‘’, versione 3.1, di cui abbiamo dato
empty in ...”. Per risolvere il problema, basterà aggiun- accenno in queste pagine, si
‘, ‘, ‘’ ); ?></p> gere il “conditional tag” is_admin(): trova su http://codex.wordpress.
org/Version_3.1
if ( (is_home() || is_archive()) && !is_admin() ){ … }
VISUALIZZARE GLI ARCHIVI Ora c’è proprio tutto per registrare tipi di post e tasso-
Abbiamo visto che non ci sono grandi difficoltà nell’ag- nomie anche in WordPress 3.1.
giungere un tipo di post alla home page. Purtroppo,
però, l’attuale versione stabile di WP, la 3.0, non con- Carlo Daniele
sente la visualizzazione degli archivi per “custom post
type”. Per aggirare l’ostacolo, le soluzioni sono due: o
si attende con pazienza il rilascio della versione stabile
di WP 3.1 (al momento in cui scriviamo è disponibile
la RC1), oppure si opta per una soluzione di compro-
messo: si crea un template pagina in cui modificare il
loop predefinito e vi si associa una pagina con lo stesso
nome del tipo di post. Per prima cosa, duplichiamo il
file page.php del tema installato e rinominiamo la copia
in page-group.php. Cambiamo, poi, l’intestazione del file
come segue:
/**
* Template Name: Group custom post type
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/
Prima del Loop, infine, impostiamo una nuova query:
<?php query_posts(array(‘post_type’=>’group’)); ?>
Fig. 2: Una volta ridefinita la query, assieme ai normali post, in home page verranno visualizzate
Secondo la stessa logica, possiamo creare un nuovo tem- anche i contenuti del tipo group
12
h t t p : / / w w w . i o p r o g r a m mo.it Wordpre s s : / 39
Febbraio 2011l a g u i d a

13. Le Widgets API di WordPress Wordpress: la guida
WEB 2.0 Le Widgets API di WordPress
UTILIZZARE I WIDGET
DI WORDPRESS
I WIDGET DI WORDPRESS SONO GLI STRUMENTI IDEALI PER AGGIUNGERE OGNI TIPO
DI FUNZIONALITÀ AI PROPRI SITI: VEDIAMO COME CREARE UN’AGENDA DI APPUNTAMENTI
UTILIZZANDO GLI STESSI E GOOGLE CALENDAR
N
ell’articolo sui “child themes” pubblicato il La scelta del Google Calendar, in realtà, è pretestuosa:
mese scorso, abbiamo visto come estendere le una volta definita la struttura del plug-in/widget, infatti,
funzionalità di WordPress aggiungendo nuove con poche modifiche al codice, sarà sempre possibile
funzioni alla libreria del “parent theme”. Agendo sul file prelevare dati da altre fonti per inserirli all’interno
functions.php, è possibile arricchire i temi di WordPress delle pagine di un qualsiasi sito “proudly powerd by
di feature uniche, che li distinguano in mezzo all’infi- WordPress”.
nità di temi esistenti. Tuttavia, sviluppare applicazioni
all’interno del tema, rende difficoltoso applicare le
❑ CD ❑ WEB stesse funzionalità a siti in cui sono istallati temi diversi.
WPwidg.rar Qualora si avverta la necessità di distribuire le proprie I WIDGET DI WORDPRESS
applicazioni, allora è necessario slegarle dai temi e svi- In sostanza, un widget è una piccola applicazione che
cdrom.ioprogrammo.it
lupparle come plug-in. esegue delle operazioni e genera un output HTML
Un plug-in, dunque, è un’estensione indipendente dal in un’area determinata della pagina, definita “widget
tema, in grado di manipolare in modo autonomo i dati area”. L’installazione base di WordPress porta con sé
del database, di prelevare dati da origini esterne per una decina di widget che offrono le principali funzio-
importarli all’interno del sito, di offrire interattività e ni di supporto al blogging, come le liste di categorie,
possibilità di social networking. Grazie ad un plug-in gli archivi di notizie, le “tag clouds”. Oltre a quelli
si possono anche generare applicazioni autonome, i predefiniti, esistono migliaia di widget adatti ad ogni
widget, utilizzabili per manipolare e visualizzare dati scopo, dalla visualizzazione di dati presenti nel data-
dalle origine più diverse. E, date le ampie possibilità di base, all’accesso a servizi esterni, come Twitter, Flickr
utilizzo, dedichiamo questo articolo proprio ai widget: o uno dei mille servizi di Google. Molti sono disponi-
vedremo, infatti, come creare un plug-in che prelevi bili gratuitamente nella repository di wordpress.org
dati dal feed Atom di un Google Calendar pubblico e li (http://wordpress.org/extend/plugins/), altri hanno
mandi a video attraverso un widget. vita autonoma, soprattutto quando non sono distribuiti
gratuitamente. Ovviamente, non esiste un widget per
ogni esigenza. Nei casi particolari bisogna sviluppare
da sé, ma il framework offre tutti gli strumenti neces-
sari: a partire dalla versione 2.8, infatti, è disponibile
la nuova Widgets API, che rende molto più agevole il
REQUISITI
lavoro di chi sviluppa su WordPress.
Vi sono diverse modalità di sviluppo di un widget.
Conoscenze richieste
In questo articolo vedremo come farlo utilizzando un
Buona conoscenza di
PHP e Wordpress plug-in.
Software
Web server con Php5.
In locale è consigliato
il pacchetto XAMPP LA STRUTTURA
DI UN PLUG-IN
Impegno
Un plug-in si compone di uno o più file .php, più
eventuali script JS e fogli di stile, e trova collocazio-
Tempo di realizzazione ne nella cartella wp-content/plugins dell’istallazio-
Fig.1: Un widget per WordPress 3.0.1 che importa dati ne di WordPress. Qualora vi sia un unico file .php,
da un Google Calendar questo andrà denominato come nome-plugin.php.
26 / Gennaio 2011
Wordpress: la guida 13
http://www.iopro g r a m m o . i t

14. Wordpress: la guida Le Widgets API di WordPress
Le Widgets API di WordPress WEB 2.0
Nel caso in cui il plug-in si componga di più file,
sarà necessario collocarli nella cartella wp-content/ class gcalEventsList extends WP_Widget {
plugins/nome-plugin. Il file .php principale assume- function gcalEventsList(){
rà lo stesso nome. …
Il plug-in che svilupperemo avrà lo scopo di offrire }
all’utente la possibilità di aggiungere un widget function widget($args, $instance){
al sito, agendo dal pannello di amministrazione, …
esattamente come avviene per gli altri widget di }
WordPress: una volta istallato il plug-in, sarà pos- function update($new_instance, $old_instance){
sibile attivare il widget trascinandolo nella sidebar …
desiderata e impostando i relativi parametri di }
configurazione. function form($instance){
… NOTA
}
} CHE STRADA
add_action(‘widgets_init’, create_function(‘’, ‘return SEGUIRE?
register_widget(“gcalEventsList”);’)); Un widget è una piccola
applicazione che genera
Per creare un widget sono necessarie solo quattro un output a video. Vi sono
diversi modi di creare un
funzioni. La prima, gcalEventsList(), è il costrutto- widget, il più semplice dei
re di classe; le altre hanno lo scopo di mandare a quali è quello di creare una
video il widget nel front-end (funzione widget()), di funzione nel file functions.
salvare correttamente le impostazioni dell’utente php e richiamarla in un
(funzione update()), di generare il form delle impo- template file.
Se si sviluppano temi,
stazioni del widget nel back-end (funzione form()). probabilmente questa sarà
Fig.2: Una volta caricato e installato il plug-in, il widget Una volta creato il widget, bisognerà aggiungerlo la soluzione da preferire.
apparirà nel pannello si amministrazione di WordPress all’elenco dei widget già presenti. A ciò provvede il In alternativa, soprattutto
metodo add_action(), che “aggancia” una funzione se si decide di distribuire
Partiamo con un esempio semplice e ipotizziamo ad un’azione specifica. Nel nostro esempio, l’azione le proprie applicazioni, si
potrà optare per la crea-
un widget composto da un solo file: gcal_events_list. è widgets_init. La funzione generata da create_fun- zione di un plug-in. Il fra-
php. Il plug-in permetterà all’amministratore di ction(), infine, registra il widget (return register_ mework di WordPress e la
impostare solo il titolo del widget, mentre visualiz- widget(“gcalEventsList”);). L’impalcatura è pronta. Widget API forniranno tutto
zerà all’utente un messaggio di saluto. Subito dopo ciò di cui si ha bisogno.
presenteremo un esempio più complesso.
Innanzitutto, bisognerà inserire nel file principale
(nome-plugin.php) un’intestazione che indichi a CREIAMO IL WIDGET
WordPress di cosa si tratta. L’intestazione va inseri- La prima delle funzioni del listato precedente è il
ta all’interno dei simboli di commento: costruttore della classe gcalEvetsList. Questa prov-
vede alla creazione del widget:
<?php
/* function gcalEventsList(){
Plugin Name: GCal Events List $widget_ops = array(‘description’ => ‘A widget
Plugin URI: http://digitaladoptive.wordpress.com/gcal- that generates a list of events from a public Google
events-list Calendar’);
Description: GCal Events List generates a list of events $this->WP_Widget(‘gcal-events-list’, ‘GCal Events List’,
from a public Google Calendar. You need the calendar $widget_ops);
ID to make it work. }
Version: 0.1
Author: Carlo Daniele La funzione $this->WP_Widget accetta tre argomen-
Author URI: http://digitaladoptive.wordpress.com/ ti: un ID che individua univocamente il widget, il
*/ nome del widget visualizzato nel pannello di ammi-
nistrazione, infine due array di parametri aggiunti-
In pratica, abbiamo fornito a WP i dati necessari a vi, $widget_options e $control_options.
individuare il plug-in e a distinguerlo da qualunque Nell’esempio abbiamo passato solo il primo array
altro installato. Ricordiamo che il plug-in serve con l’elemento description (per i dettagli sulla classe
come piattaforma per lo sviluppo di un widget. WP_Widget, rinviamo alla documentazione online,
Quindi, il passo successivo sarà quello di estendere all’indirizzo http://goo.gl/SpGus). Ora il nostro
la classe WP_Widgets: widget esiste e possiamo già testarlo. Salviamo il
14
h t t p : / / w w w . i o p r o g r a m mo.it Gennaio 2011 / : 27 u i d a
Wordpre s s l a g

15. Le Widgets API di WordPress Wordpress: la guida
WEB 2.0 Le Widgets API di WordPress
file gcal_events_list.php nella directory wp-content/ ray). L’array di questo primo esempio è costituito da
plugins e apriamo il pannello di amministrazione: un solo elemento, il titolo del widget.
il plug-in è già disponibile per l’attivazione, anche Il valore dell’elemento $instance[‘title’] viene attri-
se non è ancora in grado di eseguire alcuna ope- buito alla variabile $title, dopo aver codificato alcu-
razione. ni caratteri speciali (per i dettagli, si legga http://
codex.wordpress.org/Function_Reference/esc_
attr). Viene poi creato il modulo che permette
l’aggiornamento dei parametri di configurazione.
I valori dei campi del form sono generati dai metodi
get_field_id() e get_field_name() della classe WP_
Widget e dal valore della variabile $title.
NOTA
LOCALIZZAZIONE
Per la localizzazione delle
installazioni, WordPress
utilizza i file .po e .mo,
come previsto dal progetto
Gettext (http://www.gnu. Fig.3: Una volta caricato, il plug-in appare nel pannello
di amministrazione in attesa dell’attivazione
org/software/gettext/get-
text.html). Per verificare
l’esistenza della versione
localizzata di una stringa Se diamo, poi, un’occhiata all’elenco dei widget,
di testo, si utilizzano le
funzioni __() e _e(). troveremo anche il nostro “Gcal Events List”.
La prima restituisce la Fig.4: Dal pannello di amministrazione è possibile
stringa tradotta (ovvia- aggiungere il widget alla sidebar e impostarne il titolo
mente, se ne esiste la
traduzione); la seconda,
invece, la manda a video
UN FORM PER
con un echo. Se si decide LE IMPOSTAZIONI
di internazionalizzare il La funzione form() permette di creare un modulo L’AGGIORNAMENTO
proprio plug-in, bisognerà in cui definire le impostazioni di funzionamento DEI DATI
predisporre i file .po e .mo e visualizzazione del widget. Supponiamo di voler I parametri trasmessi dal form vengono archivia-
necessari. In mancanza offrire all’amministratore del sito la possibilità di ti nel database, ma non ci si dovrà preoccupare
di questi, la localizzazione
verrà effettuata con le cambiare il titolo del widget. La funzione si svilup- di stabilire alcuna connessione: il framework di
traduzioni disponibili in perà come segue: WordPress è potente e permette di interagire con il
wp-content/languages. database in tutta sicurezza.
Per un esame approfondito function form($instance) Per aggiornare i parametri di configurazione ci si
dell’argomento, consiglia- { serve della funzione update() e di poche righe di
mo di partire dalle seguenti $title = esc_attr($instance[‘title’]);
risorse: codice:
?>
• Writing a Plugin <p> function update($new_instance, $old_instance)
http://codex.wordpress. <label for=”<?php echo $this->get_field_id(‘title’); {
org/Writing_a_Plugin ?>”>Title: $instance = $old_instance;
• I18n for WordPress <input class=”widefat” $instance[‘title’] = strip_tags($new_instance[‘title’]);
Developers id=”<?php echo $this->get_field_id(‘title’); ?>” return $instance;
http://codex.wordpress. name=”<?php echo $this->get_field_name(‘title’); }
org/I18n_for_WordPress_ ?>”
Developers type=”text” La funzione aggiorna l’array $instance, restituendo-
• Installing WordPress in value=”<?php echo $title; ?>” /> ne il valore corrente. Se l’istanza non è aggiornata
your language </label> correttamente, la funzione restituisce il valore boo-
http://codex.wordpress. </p> leano false.
org/Installing_WordPress_ <?php Gli argomenti della funzione sono due array: il
in_Your_Language } primo contiene i nuovi parametri di configurazione;
il secondo contiene i parametri memorizzati prima
L’argomento $instance è un array contenente le dell’aggiornamento dei dati.
impostazioni correnti del widget (vedremo tra un Questi sono archiviati nella tabella wp_options del
attimo come vengono generati gli elementi dell’ar- database di WordPress.
28 / Gennaio 2011
Wordpress: la guida 15
http://www.iopro g r a m m o . i t

16. Wordpress: la guida Le Widgets API di WordPress
Le Widgets API di WordPress WEB 2.0
VISUALIZZIAMO nel front-end del sito. Per far questo servirà un feed
IL WIDGET della Calendar Data API e , ovviamente, del codice
L’ultima fase è la generazione dell’output HTML PHP. La struttura del widget rimane la stessa, biso-
che viene visualizzato nel front-end del sito. A que- gnerà solo integrare le funzioni widget(), update() e
sto provvede la funzione widget(): form(). Il costruttore di classe gcalEventsList() rima-
ne lo stesso dell’esempio precedente.
function widget($args, $instance){ Cominciamo con il form. Nel pannello di ammini-
extract($args, EXTR_SKIP); strazione dovremo prevedere i campi necessari ad
echo $before_widget; impostare un maggior numero di parametri:
$title = apply_filters(‘widget_title’, $instance[‘title’]);
if(!empty($title)){ function form($instance){
echo $before_title . $title . $after_title; $title = esc_attr($instance[‘title’]);
echo “un saluto ai lettori di ioProgrammo”; $calendar = esc_attr($instance[‘calendar’]);
} echo $after_widget; } $orderby = esc_attr($instance[‘orderby’]);
$sortorder = esc_attr($instance[‘sortorder’]);
La funzione accetta due argomenti. Il primo ($args) $maxresults = esc_attr($instance[‘maxresults’]);
è un elenco di parametri associati al widget. Questi $startmin = esc_attr($instance[‘startmin’]); NOTA
vengono estratti grazie alla funzione PHP extract(), $startmax = esc_attr($instance[‘startmax’]);
che genera una variabile per ogni elemento dell’ar- … LA LICENZA
ray: le variabili che utilizziamo qui sono $befo- } DEI PLUG-IN
re_widget e $after_widget. Queste generano il codice La maggior parte delle
HTML che racchiude i contenuti del widget: per I valori assunti delle variabili saranno utilizzati per licenze con cui vengo-
default si tratta di un <li>. La funzione apply_fil- generare gli attributi degli elementi del form. Subito no rilasciati i plug-in di
WordPress sono compa-
ters() filtra il valore di $instance[‘title’] e lo applica dopo bisognerà inserire il codice HTML del form. tibili con la GPL2 (http://
all’ “hook” widget_title. Infine, se la variabile $title Del campo di testo che genera il titolo del widget www.gnu.org/licenses/gpl-
assume un valore utile, viene generato il contenuto abbiamo già detto. Gli altri campi serviranno ad 2.0.html). La compatibilità
del widget. Il codice è completo e il widget fun- impostare i parametri da trasmettere alla Data API. è richiesta come requisito
zionante. Un messaggio di saluto, però, è davvero Vediamo, quindi, un select box: per la pubblicazione nella
repository delle estensioni.
poco: bisogna creare un widget che aggiunga valore La licenza d’uso del plugin
al sito. ?>
va riportata in testa al
<p> file principale del plug-in
<label for=”<?php echo $this->get_field_id(‘orderby’); all’interno dei simboli di
?>”><?php echo __(‘Order by’); ?>: </label> commento.
UN ELENCO DI EVENTI <select id=”<?php echo $this->get_field_id( ‘order
DAL GOOGLE CALENDAR by’ ); ?>” name=”<?php echo $this->get_field_name(
Il nostro obiettivo è quello di prelevare un elenco di ‘orderby’ ); ?>” class=”widefat”>
eventi da un calendario pubblico e di visualizzarli <option <?php if ( $instance[‘orderby’] == ‘lastmo
dified’ ) echo ‘selected=”selected”’; ?>>lastmodified</
option>
<option <?php if ( $instance[‘orderby’] != ‘lastmo
dified’ ) echo ‘selected=”selected”’; ?>>starttime</
option>
</select>
</p>
…
Come sopra, il metodo get_field_id() restituisce
l’ID del campo del form. Gli option button, inve-
ce, assumono valori fissi (lastmodified e startti-
me). L’attributo selected viene generato dinami-
camente, in base alle impostazioni esistenti
($instance[‘orderby’]). Un altro campo del form
stabilisce il numero massimo di elementi del feed
che dovranno costituire la risposta della Data API:
<p>
Fig.5: Il primo widget di questo articolo mostra agli <label for=”<?php echo $this->get_field_
utenti un semplice messaggio di saluto id(‘maxresults’); ?>”><?php echo __(‘Max results’);
16
h t t p : / / w w w . i o p r o g r a m mo.it Gennaio 2011 / : 29 u i d a
Wordpre s s l a g