Sei sulla pagina 1di 40

Approfondimenti tematici

Wordpress
la guida
Passo passo, le principali funzioni del pi famoso CMS opensource per la gestione del tuo blog

Wordpress: la guida
Dallinstallazione alluso 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 pensato 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, nasconde innumerevoli funzioni avanzate che posso fare da ago della bilancia nel decretare, o meno, il successo di un blog nellinfinito universo della blogosfera.

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 unagenda 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

WEB 2.0 Anteprima di Wordpress 3.0 Wordpress: la guida Anteprima di Wordpress 3.0

WORDPRESS 3.0 TUTTE LE NOVIT


a versione 3.0 di Wordpress era molto attesa: il pi famoso CMS opensource per la gestione di blog si aggiorna, e penso sarete tutti curiosi di scoprire le novit. Anzitutto stato accorpato Wordpress (la versione multiblog del CMS creato da Matt Mullenweg): ora possibile gestire installazioni multiple direttamente da Wordpress. stata finalmente aggiunta una nuova gestione di menu e tassonomie e, grandissima innovazione, i siti non saranno pi composti unicamente da post e pagine: sar possibile creare custom post (tipi di articoli) personalizzati. Ovviamente ci sono stati decisi miglioramenti per quel che riguarda la sicurezza e le funzionalit core del CMS (ad esempio stata riscritta la gestione dei contenuti multimediali). Infine, piccola ma simpatica novit: Kubrick non pi il tema di default. stato sostituito da TwentyTen (2010) e ogni anno ci sar un nuovo aggiornamento del tema di default.

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?

CD WEB
wp3.rar
cdrom.ioprogrammo.it

Wordpress a questo indirizzo http://wordpress.org/ download/nightly/ (oppure prendete quella presente nel CD allegato alla rivista) e copiatela sul vostro server. I requisiti sono assolutamente basilari: PHP 4.3 e MySQL 4.1.2. Per testare Wordpress su macchine Windows potete installare WampServer (http://www. wampserver.com/): linstallazione di Apache, PHP e MySQL semplicissima: un piccolo menu in traybar vi aiuter a gestire il vostro server locale. Linstallazione di Wordpress altrettanto semplice, come da tradizione. Create un database vuoto e seguite il wizard di installazione. Ecco la prima novit, piccola ma rilevante: possiamo ora scegliere lo username dellaccount di amministrazione, aumentando la sicurezza del nostro CMS. La dashboard non cambia molto rispetto alle versioni precedenti, quindi non dovreb-

INSTALLAZIONE
Esamineremo molte di queste novit nel corso dellarticolo, ma partiamo dal setup della nostra macchina di test. Scaricate lultima versione disponibile di

Fig. 2: Il semplice Wizard di installazione di Wordpress 3.0

REQUISITI
Conoscenze richieste PHP, HTML, CSS, Apache Software Uninstallazione di PHP, Database MySQL Impegno

be essere un problema muovervi tra i menu: non scopo di questo articolo trattare luso di Wordpress, in rete sono presenti molte guide: fate riferimento ai motori di ricerca nel caso abbiate poca dimestichezza con Wordpress. Diamoci da fare e diamo finalmente unocchiata alle novit pi rilevanti!

I NUOVI MENU
Tempo di realizzazione

Fig. 1: Il menu di WampServer su Windows XP

Una delle pi grosse limitazioni delle versioni precedenti di Wordpress riguardava la gestione dei menu: 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

Anteprima di Wordpress 3.0 Wordpress: la guida WEB 2.0 Anteprima di Wordpress 3.0
limitavano a mostrare lelenco delle pagine presenti allinterno 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 integrato allinterno un editor visuale per i menu che vi permetter di assegnare ciascun menu creato alla sua location (vedremo dopo cosa significa) e di modificare con semplici drag&drop il contenuto di ciascun sottomenu: possiamo includere nel menu pagine, url personalizzati (siti esterni o link diretti a post, per esempio) o categorie. Nei temi compatibili con questa funzionalit le modifiche si rifletteranno immediatamente nel template.

Fig. 4: I quattro menu che abbiamo registrato allinterno del nostro tema

Fig. 3: Un menu creato con leditor visuale: ecco come viene visualizzato in TwentyTen

Vediamo ora come rendere i nostri temi compatibili con questa funzionalit. Per prima cosa registriamo allinterno del template i menu che vogliamo utilizzare. Possiamo dichiarare quanti menu vogliamo, usando la chiamata singola in caso di un solo menu:
add_action( init, registra_menu ); function registra_menu() { register_nav_menu( primo-menu, __( Primo ) ); }

nati momenti dellesecuzione del nostro software in cui possiamo chiamare funzioni che eseguono istruzioni PHP. Una volta registrati i menu necessari, questi compariranno come caselle da riempire allinterno delleditor visuale. Per richiamarli allinterno del nostro tema baster invocare la funzione wp_nav_menu() passando i parametri pi adatti alla visualizzazione nel nostro tema. Chiamando la funzione senza argomenti verr ritornato e stampato il primo menu da noi creato. Questo va bene nel caso in cui il nostro tema supporti un unico menu, ma se vogliamo maggior controllo possiamo passare diversi argomenti alla funzione inserendoli in un array: tra questi il nome del menu da mostrare, le classi css da applicare e cos via. Un esempio di chiamata per il nostro tema potrebbe essere questa:
wp_nav_menu( array( container_class => menu-header, theme_location => secondo, depth => 0) );

NOTA

GLI HOOK IN WORDPRESS


Wordpress, sin dallinizio, ha fornito agli sviluppatori moltissimi hook (actions e filters per la precisione), adatti allo sviluppo di nuove funzionalit (attraverso i plugin) o alla personalizzazione estrema di temi. Potete trovare una lista completa degli hook disponibili in Wordpress 2.9 (la versione 3.0 non ancora stata rilasciata ufficialmente) allindirizzo http://adambrown.info/p/ wp_hooks/version/2.9

Oppure la chiamata multipla, per registrare pi menu contemporaneamente, addirittura quattro in questo caso:
add_action( init, registra_menu ); function registra_menu() { register_nav_menus( array( primo-menu => __( Primo ), secondo-menu => __( Secondo ), terzo => __( Terzo ), quarto => __( Quarto ) ) ); }

Cosa succede? Abbiamo agganciato allhook di inizializzazione la funzione registra_menu(). Gli hook in Wordpress sono appunto agganci a determi-

Il menu chiamato secondo sar visualizzato come una lista non ordinata <ul> allinterno di un container con classe css menu-header: il visualizzatore esplorer il menu in tutta la sua profondit (parametro depth uguale a zero). Fate riferimento al codex allindirizzo http://codex.wordpress.org/ Template_Tags/wp_nav_menu per la lista completa dei parametri utilizzabili. Con questa struttura di menu annidati, diventa davvero facile implementare menu multilivello in JavaScript, scrivendo il codice appositamente o utilizzando uno degli innumerevoli script presenti in rete e che mappano liste di link in menu con gli effetti pi svariati. 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 abilitate a contenere widget: comunque necessario registrare i menu utilizzando le funzioni viste in 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

WEB 2.0 Anteprima di Wordpress 3.0 Wordpress: la guida Anteprima di Wordpress 3.0

TASSONOMIE PERSONALIZZATE
Cerano una volta i tag: parole associate agli articoli di un blog che ne definivano sommariamente il contenuto: se un post ad esempio parla di automobili FIAT possibile che i tag ad esso associati siano fiat, automobili, nuovo modello, ecc Le tagcloud sono una delle pi efficaci rappresentaziono 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 passando al concetto di tassonomia. Wikipedia definisce la Tassonomia come la classificazione gerarchica di concetti, e il principio stesso della classificazione.

array( post ), array( public => true, labels => array( nam => __( Attori ), singular_nam => __( Attor ) ), ) ); }

Ecco fatto. Abbiamo creato la nostra tassonomia Attori che possiamo assegnare ai nostri post e alle nostre pagine (o custom post, che esamineremo pi avanti nellarticolo).

NOTA

Fig. 6: La tassonomia attori

WORDPRESS E BUDDYPRESS
Wordpress il sistema alla base di alcuni dei pi famosi blog italiani e stranieri. La sua semplicit ne ha fatto lo strumento ideale per creare sistemi multiblog in pochissimo tempo. BuddyPress (http://buddypress.org/) invece un altro prodotto Automattic composto da una serie di plugin per Wordpress che permettono a Wordpress di diventare un social network a tutti gli effetti!

Fig. 5: Un esempio di tagcloud

Praticamente tutti i concetti, gli oggetti animati e non, i luoghi e gli eventi possono essere classificati seguendo uno schema tassonomico. La tassonomia la scienza che si occupa genericamente dei modi di classificazione (degli esseri viventi e non). Quindi per esempio la tassonomia di un album musicale pu essere data dagli artisti che lhanno composto, mentre i film prodotti nel XX secolo potrebbero essere catalogati per gli attori che li hanno recitati. Wordpress si comporta allo stesso modo: passa da una tassonomia semplice (i tag) ad una tassonomia pi complessa e completa, completamente gerarchica, 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 amministrazione 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.

Come potete vedere in figura, stata creata unapposita voce di menu per questa tassonomia, mentre nel pannello di scrittura dei post vedremo una nuova casella Attori dove potremo selezionare i tag della tassonomia appena creata. Come visualizzare queste tassonomie nella pagina dei post? Baster aggiungere al template (allinterno del loop Wordpress) la chiamata alla funzione get_the_term_list( $post->ID, attori); per recuperare tutti i tag per la tassonomia attori legati a quel particolare post. Facile, no?

Fig. 7: La casella per la tassonomia attori nella pagina di scrittura dei post

add_action( init, tassonomia_attori); function tassonomia_attori() { register_taxonomy( attori,

Per cosa possiamo usare le tassonomie personalizzate? Pensate ad un catalogo di abbigliamento online magari associato ad uno dei tanti plugin che trasformano Wordpress in un sistema di ecommerce come WP-ecommerce http://wordpress.org/ extend/plugins/wp-e-commerce/. Potete creare diverse tassonomie (colori, taglie, stile, tessuto, ecc) da assegnare a ciascun prodotto per creare il 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

Anteprima di Wordpress 3.0 Wordpress: la guida WEB 2.0 Anteprima di Wordpress 3.0

POST PERSONALIZZATI
Wordpress 3.0 introduce la possibilit di creare post personalizzati (custom post): attenzione per Si parla di post nel significato pi generico di oggetto facente parte di un blog Wordpress, quindi nel corso dellarticolo la parola post potrebbe riferirsi ad una pagina, un articolo o addirittura un menu. La documentazione originale li chiama custom post, ci adegueremo quindi a questa denominazione. A cosa servono i custom post? A moltissime cose: possiamo trasformare il nostro blog in un sito di annunci immobiliari ad esempio, creando un custom post annunci oppure possiamo creare un custom post fotografie se usiamo il blog come portfolio fotografico o ancora creare un custom post podcast se siamo aspiranti DJ. I custom post trasformano Wordpress in un CMS avanzato: infatti, a tutti questi contenuti speciali, possiamo aggiungere campi personalizzati per rendere ancora pi custom il template che poi andremo ad utilizzare per inserire quel particolare contenuto: un po come avviene in Joomla o Drupal, ma in maniera infinitamente pi semplice. Un esempio pratico ci chiarir le idee. Poniamo di essere un aspirante DJ che vuole aggiungere la propria lista di podcast ad un blog Wordpress: per caricare gli mp3 dei podcast ci appoggeremo al media manager di Wordpress, mentre creeremo un custom post podcast per gestire gli articoli di questa particolare categoria: attenzione per, non si tratta di una categoria di Wordpress personalizzata, ma si tratta di un vero e proprio oggetto differente dai normali post di Wordpress con sue peculiarit e possibilit molto maggiori rispetto ad un classico post o una pagina. Ecco la chiamata che serve per registrare il nuovo custom post podcast. Anche questa si appogger allhook init, come visto in precedenza.
add_action(init, crea_custom_podcast ); function crea_custom_podcast() { register_post_type(podcast, array( labels => array( nam => __( Podcast ), 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 ),

parent => __( Podcast superior ), ), public => true, show_ui => true, capability_typ => post, hierarchical => false, supports => array(titl, editor, author) )); }

Cosa successo? Abbiamo aggiunto una nuova voce di menu al nostro Wordpress. Cliccando sul menu visualizzeremo una pagina in tutto e per tutto simile a quella dei post, ma denominata Podcast. La chiamata register_post_type() accetta un numero molto elevato di parametri. Larray labels per cominciare si occuper di impostare le etichette per i pulsanti del nostro pannello, come potete vedere in Fig.8. A seguire ci sono alcuni parametri che permettono di impostare come i nostri podcast saranno visualizzati o gestiti: il parametro public imposta la privacy o meno dei nostri podcast, show_ui permette di attivare il pannello podcast nelle nostre pagine di amministrazione. Per concludere, una lista di parametri che imposta la visualizzazione del custom post appena creato: capability_type un parametro che imposta il comportamento del nostro contenuto: in questo caso deve comportarsi come un post (articolo) del blog. Il parametro hierarchical definisce se il nostro custom post pu essere organizzato gerarchicamente (struttura ad albero: nel caso dei podcast potremmo attivarlo per creare serie composte da pi puntate organizzate gerarchicamente). Larray supports indica quali sono le feature che il custom post pu supportare: commenti, trackback, revisioni, ecc Con questa prima semplice impostazione possiamo gi creare i nostri podcast come fossero articoli del blog, ma come potete vedere non saranno visualizzati nella home del nostro blog, se non verranno richiamati esplicitamente nel template o nel menu (nellimmagine potete vedere il widget creato automaticamente da Wordpress per il nostro custom post podcast). I custom post hanno indirizzi come que-

Fig. 8: Immagine che evidenzia il nuovo menu creato e lutilizzo 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

WEB 2.0 Anteprima di Wordpress 3.0 Wordpress: la guida Anteprima di Wordpress 3.0
sto www.mioblog.it/?post_type=podcast&p=1, dove post_type il nome del custom post creato e il parametro p lid delloggetto. In realt manca ancora un pezzo importante del nostro custom post: come si fa ad aggiungere campi portando Wordpress al di fuori del classico ambito di cms per blog per realizzare qualunque sito vi possa venire in mente in tutta semplicit.

Fig. 10: I campi personalizzati che possiamo visualizzare per i nostri podcast

Fig. 9: I nostri custom post nelleditor visuale del menu

GESTIRE IL MULTIBLOG
Come abbiamo gi detto allinizio dellarticolo, Wordpress e Wordpress sono ora uniti in un unico prodotto: per gli utenti di Wordpress 2.9.x che aggiornano a Wordpress 3.0 non cambia nulla, cos come non cambier nulla per chi ha gi uninstallazione di Wordpress attiva e aggiorner alla versione 3.0. Solo in fase di nuova installazione ci verr chiesto se vogliamo gestire un singolo blog o un multiblog, mentre sar possibile convertire uninstallazione singola di Wordpress 3.0 in una multipla con un tool apposito che verr rilasciato prossimamente da Wordpress.org. La procedura di installazione assolutamente semplice anche in questo caso. Prima di cominciare linstallazione aggiungete la riga :
define(WP_ALLOW_MULTISIT, true);

personalizzati al nostro podcast? Aggiungiamo delle azioni sempre in functions.php, possiamo aggiungere la durata del podcast ad esempio (possiamo eventualmente calcolarla in maniera dinamica) o lautore del podcast (recuperato attraverso loggetto $post di Wordpress)
add_action(manage_posts_custom_column, colonne_custom); add_filter(manage_edit-podcast_columns, colonne_podcast); function colonne_podcast($columns)

LAUTORE Francesco Napoletano socio della Piko Design (www.pikodesign.it) dove si occupa di tutta la parte di sviluppo web (dal PHP al JavaScript, passando per Flex ed actionscript 3.0). Il suo blog www.napolux. com tra i pi conosciuti nellambiente web italiano.

{ $columns = array( cb => <input type=\checkbox\ />, title => Titolo, description => Descrizione, length => Lunghezza, speakers => Autore, comments => Commenti ); return $columns; } function colonne_custom($column) { global $post; if (ID == $column) echo $post->ID; elseif (description == $column) echo substr($post>post_content,0,30) . ...; elseif (length == $column) echo 12:34; elseif (speakers == $column) echo $post->post_ author; }

al file wp-config.php, Wordpress far il resto. Ovviamente, create network di blog su server abbastanza carrozzati per reggere il carico e non su hosting condiviso con poche risorse!

...ED OPENSOURCE!
Abbiamo dato unocchiata alle novit pi importanti di Wordpress 3.0: la versione finale non ancora uscita, ma la 3.0 si appresta ad essere una versione di svolta per il CMS creato da Matt Mullenweg. Facilit duso, estrema personalizzazione e facilit di creazione dei template sono i suoi punti di forza. Wordpress un CMS che non pu mancare nella nostra collezione di prodotti opensource: offrire ai clienti soluzioni basate su Wordpress non pi un tab e con questa nuova versione possiamo affrontare le richieste del mercato con maggiore fiducia nelloffrire un prodotto completo, moderno ed estremamente personalizzabile. Francesco Napoletano

Con la prima funzione, dichiariamo le colonne personalizzate che dovremmo visualizzare, mentre con la seconda imposteremo i valori per tali colonne. Come avete potuto capire, i custom post sono uno strumento davvero molto flessibile: potete organizzare i vostri contenuti come pi vi piace,

8 32 / Agosto 2010

http://www.iopro g:r aa g uodia Wordpre s s l m m i . t

I Custom Post Types 3.0 3.0 WEB 2.0 I Custom Post Types di WordPress di WordPress Wordpress: la guida

POST PERSONALIZZATI CON WORDPRESS


U
CD
wp_custom_post_types.rar
cdrom.ioprogrammo.it

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

WEB

na delle novit pi attese e discusse della versione 3.0 di WordPress il supporto dei tipi di contenuto personalizzati. La nuova feature permette a WP di fare il salto di qualit e passare da sistema di gestione di blog a vero e proprio CMS: personalizzare i tipi di contenuto, infatti, permette di creare complesse architetture di dati, che consentono di utilizzare WP anche per lo sviluppo di siti aziendali complessi. Ed ci che dimostriamo in questo articolo: questo mese, infatti, vedremo come utilizzare i custom post types per creare un archivio discografico nel quale verranno messi in relazione artisti e pubblicazioni discografiche, estraendo completamente i contenuti dal normale ciclo iterativo che manda a video i post in WP.

proporre ai lettori un archivio di gruppi musicali con le relative produzioni discografiche. Vedremo, infatti, come creare due diversi tipi di post, uno per le informazioni sugli artisti e uno per le informazioni sugli album. Vedremo come associare ad ognuno dei due tipi le proprie custom taxonomies e, infine, come mandarli a video nel front-end di WP in modo diverso.

ATTIVIAMO I CUSTOM POST TYPES


Attualmente, per creare nuovi tipi di post, sono percorribili due strade: ricorrere ad uno dei plug-in disponibili gratuitamente nella repository o integrare il file functions.php del template corrente con il codice necessario (forse preferibile dal programmatore). Nel nostro sito discografico avremo bisogno di aggiungere due tipi di post: uno destinato ad ospitare le schede degli artisti, uno destinato alle schede degli album. Vediamo come generare il primo tipo:
add_action(init,register_groups); function register_groups() { $labels = array( name => _x(Groups, post type general name), singular_name => _x(Group, post type singular name), add_new => _x(Add New, group), add_new_item => __(Add New Group), edit_item => __(Edit Group), new_item => __(New Group), view_item => __(View Group), search_items => __(Search Group), not_found => __(No groups found), not_found_in_trash => __(No groups found in Trash), parent_item_colon => , menu_name => Groups); $args = array( labels => $labels, public => true, publicly_queryable => true, show_ui => true, show_ in_menu => true, query_var => true, rewrite => true, capabili ty_type => post, has_archive => true, hierar chical => false, menu_position => null, supports => array(title,editor,thumbnail,excerpt)); register_post_type(group,$args); flush_rewrite_rules(); }

I CUSTOM POST TYPES


Il termine pu trarre in inganno: non si tratta solo di post, ma di tipi di contenuto strutturati in base alle specifiche esigenze dellutente. Listallazione base di WP supporta i seguenti tipi di post: post, page, attachment, revisions, nav_menu e sono tutti ospitati nella tabella wp_posts del database. Ci che cambia tra i vari tipi il valore del campo post_type. Qualcuno potrebbe chiedersi perch utilizzare i custom post types e non, magari, le custom taxonomies. Apportando le opportune modifiche al tema, sarebbe comunque possibile personalizzare la visualizzazione dei post. La risposta non univoca: lavorando con WP ci si trova spesso nella condizione di poter raggiungere lo stesso obiettivo adottando soluzioni diverse. Spesso, infatti, potrebbe essere pi opportuno (o comodo) utilizzare le custom taxonomies. Ma allora come decidere? Un criterio potrebbe essere quello di individuare i tipi di contenuto in base ad elementi strutturali: ad esempio, una FAQ potrebbe essere strutturalmente diversa da un post, organizzata e visualizzata in maniera autonoma, magari con tassonomie diverse. Lo stesso potrebbe dirsi per la scheda di un libro, per un prodotto in un catalogo e cos via. Ci che importante ricordare, comunque, che le possibilit di personalizzazione offerte dai custom post types sono decisamente maggiori rispetto a quelle offerte da categorie, tag e tassonomie. Nellimpostazione di questo articolo, abbiamo pensato di

Conoscenze richieste Buona conoscenza di PHP; buona conoscenza di WordPress Software Web server con Php5 e MySQL, in ambiente *nix. In locale consigliato il pacchetto XAMPP, scaricabile allindirizzo http:// www.apachefriends. org/it/xampp.html Impegno

Tempo di realizzazione

Febbraio i d a W o r d p r e s s : l a g u 2011

36 /

http://www.iopro g r a m m o . i t

I Custom Post Types di Post Types3.0 WordPress 3.0 WEB 2.0 I Custom WordPress di Wordpress: la guida
Allavvio di WP viene invocata la funzione register_groups(). Allinterno di questa funzione vengono generati due array: il primo ($labels) provvede allassegnazione delle etichette che vengono visualizzate nel pannello di amministrazione e costituisce uno degli elementi del secondo array; $args imposta 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 sullargomento 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, leditor del testo, il link per linserimento dellimmagine di anteprima, il campo dellestratto del testo. Una volta definiti i valori degli elementi degli array, la funzione register_post_type(group,$args) completa il lavoro e registra il tipo group. In ultimo, per evitare eventuali problemi nella lettura dei permalink, forziamo il refresh delle regole di rewriting memorizzate, con la funzione flush_rewrite_rules().

Fig. 1: Una volta registrata una nuova tassonomia, questa appare nel menu di sinistra del back-end di WordPress

NOTA
array(hierarchical => true, label => Genres, singular_label => Genre, rewrite => true)); }

REQUISITI DI SISTEMA
Per provare le feature di WordPress di cui abbiamo parlato in queste pagine, consigliamo fortemente di utilizzare sistemi *nix, dato che sono diverse le incompatibilit rilevate in ambiente Windows. Lelenco dettagliato dei requisiti di sistema disponibile allindirizzo http://codex.wordpress. org/Hosting_WordPress.

REGISTRARE I CUSTOM FIELDS


Una volta definito il tipo di post, possiamo associarvi dei campi personalizzati destinati ai metadati. Nel caso del tipo di post group, ci servir un solo campo, destinato ad inserire lanno di costituzione del gruppo:
add_action(admin_init, register_groups_fields); function register_groups_fields() { add_meta_box(year, Year, year, group,side,low);} function year() { global $post; $custom = get_post_custom($post->ID); $year = $custom[year][0] ?> <label>Year:</label> <input name=year value=<?php echo $year; ?>/> <?php }

Le tassonomie vengono registrate allavvio di WP. Se ne occupa la funzione register_taxonomy(), alla quale passiamo i seguenti argomenti: una stringa con il nome della tassonomia un array con gli ID dei tipi di post cui associare la tassonomia un array con una serie di parametri aggiuntivi (per lelenco di parametri, rinviamo al codex: http://goo.gl/Qte64) Apriamo ora il pannello di amministrazione e diamo unocchiata alla scheda New Group. Noteremo un box laterale che ci permetter di inserire nuovi termini, esattamente allo stesso modo delle categorie dei normali post.

NOTA

IL SALVATAGGIO DEI DATI


Provvediamo ora al salvataggio dei dati:
add_action(save_post, save_group_meta); function save_group_meta() { global $post; update_post_meta($post->ID, year, $_POST[year]); }

AVVERTENZA
Il codice presentato nei nostri esempi non completo. Per esigenze di spazio non si provveduto alla gestione di eventuali errori nel recupero dei dati. Nelle istallazioni di WordPress su cui stato testato il codice riportato, tuttavia, non sono stati rilevati errori di sorta.

La funzione add_meta_box() aggiunge il campo year. Gli argomenti che questa accetta impostano lID del campo, il titolo, il nome di una funzione di callback, il tipo di post cui associare il campo, larea della pagina dove caricarlo, infine la priorit. La funzione di callback year() genera il codice HTML del campo. Il valore del campo, se esiste, viene generato grazie alla variabile $post.

REGISTRARE LE CUSTOM TAXONOMIES


Secondo la stessa logica, registriamo le tassonomie del nostro tipo di contenuto. Nel nostro esempio registriamo il genere cui si ispira lartista (o la band):
add_action(init, register_custom_taxonomies); function register_custom_taxonomies(){ register_taxonomy(Genres, array(group),

A questo scopo utilizziamo lhook save_post per invocare la nostra funzione save_group_meta(). Qui la variabile globale $post ci fornisce lID del contenuto corrente. Questo viene passato come primo argomento della funzione update_post_meta(), insieme alla chiave e il valore del custom field. Ora tutto pronto per linserimento dei dati. Possiamo cominciare ad inserire le nostre band preferite (attenti, per: ancora non possiamo vederle nel front-end).

AGGIUNGIAMO GLI ALBUM


Una volta definito il tipo Group, possiamo passare a lavorare sul tipo Album. Le funzioni di WP necessarie sono esattaFebbraio 2011l a g u i d a Wordpre s s : / 37

h t t p : / / w w w . i o p r o g r a m mo.it

10

I Custom Post Types 3.0 3.0 WEB 2.0 I Custom Post Types di WordPress di WordPress Wordpress: la guida
mente le stesse. Quindi, registriamo il custom post type:
add_action(init, register_albums); function register_albums() { $labels = array( ... ); $args = array( ... ); register_post_type(album,$args); flush_rewrite_rules(); }

generare un selectbox che renda agevole il lavoro di chi inserisce i dati. Il selectbox, infatti, fornisce lID e il nome del gruppo e non consente possibilit di errore nellassociazione degli album agli artisti. Oltre al campo Artist, creiamo un campo per letichetta discografica con un normale textbox. E infine salviamo i dati:
function save_album_meta(){

Registriamo, poi, la tassonomia Genres anche per il tipo Album, integrando semplicemente il codice precedente: NOTA
add_action(init, register_custom_taxonomies); function register_custom_taxonomies() { register_taxonomy(Genres, array(group,album), ...}

global $post; update_post_meta($post->ID, year, $_POST[year]); update_post_meta($post->ID, artist, $_POST[artist]); update_post_meta($post->ID, etichetta, $_ POST[etichetta]); }

ESTENSIONI
Se nello sviluppo del proprio sito non si rendono necessarie architetture dati complesse, invece di registrare i custom post types estendendo il codice del file functions.php, potrebbe essere preferibile utilizzare un plug-in che permetta di operare dal pannello di amministrazione. Tra i vari plug-in disponibili, i pi popolari ricordiamo il Custom Post Type UI (http://wordpress. org/extend/plugins/custompost-type-ui/) e il Simple Custom Post Type Archives (http://wordpress.org/extend/ plugins/simple-custom-posttype-archives/).

La funzione register_custom_taxonomies() la stessa utilizzata per registrare le tassonomie del tipo Group. Per associare la tassonomia anche al tipo Album, ci siamo limitati ad aggiungere lID album allargomento array(group,album) della funzione register_taxonomy(). Infine, aggiungiamo i campi personalizzati:
add_action(admin_init, register_albums_fields); function register_albums_fields(){ add_meta_box(year, Year, year, album, side, low); add_meta_box(meta_info, Meta info, meta_info, album, normal, low); }

I TIPI DI CONTENUTO DELLA HOME PAGE


Le impostazioni predefinite di WP non prevedono la visualizzazione n in home page, n nelle pagine di archivio, dei tipi di post personalizzati. Nel nostro sito di esempio, vogliamo visualizzare in home page, oltre al tipo predefinito post, anche il nostro tipo group. Sempre nel file functions.php, aggiungiamo il seguente codice:
add_filter( pre_get_posts, get_home_post_types ); function get_home_post_types($query){ if ( is_home() ) $query->set( post_type, array( post, group ) ); return $query; }

Ed ecco la funzione di callback che genera il codice HTML dei campi:


function meta_info() { global $post; $custom = get_post_custom($post->ID); $artist = $custom[artist][0]; $etichetta = $custom[etichetta][0]; query_posts(post_type=group&orderby=title) ; // the Loop if ( have_posts() ){ ?><p> <label>Artist:</label><select name=artist> <option value=0>Select artist</option><?php while (have_posts()) : the_post(); if ($artist == $post->ID) {$selected = selected; } else { $selected = ; } $before = <option value= . $post->ID . . $selected . >; $after = </option>; the_title($before, $after); endwhile; ?> </select> </p> <?php } ?> <p><label>Label:</label> <input name=etichetta value=<?php echo $etichetta; ?> /></p> <?php }

NOTA

CHILD THEMES
Quando si apportano modifiche ad un tema, sempre preferibile creare un child theme, ossia un tema che estende le funzionalit del parent theme senza modificarne i file originali. quello che abbiamo fatto in questi esempi, copiando e modificando solo i file necessari. Per una dettagliata analisi dei child themes, rinviamo ad ioProgrammo di dicembre o alla documentazione online, allindirizzo http://codex.wordpress. org/Child_Themes

Noterete subito che non utilizziamo pi la funzione add_ action(), che aggancia unazione ad una funzione, ma la funzione add_filter(), utilizzata da WP per modificare in vario modo i dati prima della loro archiviazione nel db o della loro resa a video nel browser. Lhook pre_get_posts viene attivato prima dellesecuzione della query principale. Dunque, un attimo prima del caricamento dei dati, viene verificata la pagina richiesta dallutente: se questi invoca la home page, la nostra funzione ridefinisce la query aggiungendo, al tipo post, il nostro custom type group. Ora in home page vengono caricati tutti i contenuti relativi agli artisti e ai gruppi.

I SINGOLI CONTENUTI E I METADATI


In home page, come abbiamo visto, andranno sia i normali post che i nuovi contenuti del tipo Group. Sarebbe opportuno, per, cambiare anche la struttura dei singoli post, per consentire una visualizzazione pi completa dei dati. Apriamo, dunque, il file single.php e inseriamo, dopo il tag <?php the_content(); ?>, il seguente codice:
<?php $anno = get_post_meta($post->ID, year, true); ?> <p>Anno: <?php echo $anno; ?></p> <?php $custom_query = new WP_Query(array(post_type

Non cambia molto rispetto al codice precedente, se non per quanto riguarda il custom field artist. Ogni album, infatti, viene associato ad un artista/band. Quindi utilizziamo un loop per selezionare i titoli dei contenuti del tipo Group e

Febbraio i d a W o r d p r e s s : l a g u 2011

38 /

http://www.iopro g r a m m o . i t

11

I Custom Post Types di Post Types3.0 WordPress 3.0 WEB 2.0 I Custom WordPress di Wordpress: la guida
=> album, meta_key => artist, meta_value => $post->ID)); ?> <?php if ($custom_query->have_posts()) { ?>Albums:<ul> <?php while ($custom_query->have_posts()) : $custom_query->the_post(); ?> <li><a href=<?php the_permalink(); ?> title=<?php the_title(); ?>> <?php the_title(); ?></a></li><?php endwhile; ?></ul> <?php } wp_reset_query(); ?>

Dopo la visualizzazione del testo completo del post, manderemo a video lanno di costituzione del gruppo (o di pubblicazione dellalbum), prelevando il valore del custom field year: get_post_meta($post->ID, year, true). Subito dopo impostiamo una nuova query, con una nuova istanza delloggetto WP_Query. Larray passato come argomento permette di filtrare i dati in base al tipo di post (post_type => album), alla chiave (meta_key => artist) e al valore del custom field (meta_value => $post->ID). In pratica, cerchiamo tutti gli album dellartista individuato da $post->ID. Se la query restituisce dati utili, allora viene generata una lista con i permalink dei singoli album. infine, visualizziamo la lista dei termini della custom taxonomy Genres. Allinterno della div. entry-utility aggiungiamo:
<p>Genres: <?php the_terms( $post->ID, Genres, , , , ); ?></p>

plate pagina per ognuno degli archivi di cui abbiamo bisogno. Creando, poi, delle gerarchie di pagine, possiamo creare archivi in cui il filtro sui dati diviene via via pi preciso. Supponiamo, infatti, di voler ottenere un elenco di gruppi selezionati in base al genere. Dovremo solo creare un nuovo template pagina e impostare una nuova query (si legga al riguardo la pagina http://core.trac.wordpress. org/ticket/13818). Nel caso si preferisca cominciare a lavorare su WP 3.1 (annunciato nel giorno di Natale in questo post http://goo.gl/KCUjC), allora le difficolt saranno decisamente minori. Per gestire perfettamente la visualizzazione degli archivi, baster modificare la funzione di callback invocata dallhook pre_get_posts, come visto in precedenza nella modifica della home page:
add_filter( pre_get_posts, get_home_post_types ); function get_home_post_types($query){ if ( is_home() || is_archive() ) $query->set( post_type, array( post, group ) ); return $query; }

NOTA

RIFERIMENTI
Sono innumerevoli le risorse online su WordPress. Nellimpossibilit di elencarle tutte (o solo una piccola parte), consigliamo di partire dalla documentazione ufficiale, allindirizzo http://codex.wordpress. org/. Una panoramica delle novit introdotte dalla futura versione 3.1, di cui abbiamo dato accenno in queste pagine, si trova su http://codex.wordpress. org/Version_3.1

In pratica, abbiamo semplicemente modificato la condizione che verifica la pagina corrente: if (is_home() || is_archive()). Cos com, per, in WP 3.1 questo codice genera lerrore Warning: Illegal offset type in isset or empty in .... Per risolvere il problema, baster aggiungere il conditional tag is_admin():
if ( (is_home() || is_archive()) && !is_admin() ){ }

VISUALIZZARE GLI ARCHIVI


Abbiamo visto che non ci sono grandi difficolt nellaggiungere un tipo di post alla home page. Purtroppo, per, lattuale versione stabile di WP, la 3.0, non consente la visualizzazione degli archivi per custom post type. Per aggirare lostacolo, 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 compromesso: 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, lintestazione del file come segue:
/** * Template Name: Group custom post type * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */

Ora c proprio tutto per registrare tipi di post e tassonomie anche in WordPress 3.1. Carlo Daniele

Prima del Loop, infine, impostiamo una nuova query:


<?php query_posts(array(post_type=>group)); ?>

Secondo la stessa logica, possiamo creare un nuovo tem-

Fig. 2: Una volta ridefinita la query, assieme ai normali post, in home page verranno visualizzate anche i contenuti del tipo group

h t t p : / / w w w . i o p r o g r a m mo.it

12

Febbraio 2011l a g u i d a Wordpre s s : / 39

Le Widgets API di WordPress Wordpress: la guida WEB 2.0 Le Widgets API di WordPress

UTILIZZARE I WIDGET DI WORDPRESS


N
CD WEB
WPwidg.rar
cdrom.ioprogrammo.it

I WIDGET DI WORDPRESS SONO GLI STRUMENTI IDEALI PER AGGIUNGERE OGNI TIPO DI FUNZIONALIT AI PROPRI SITI: VEDIAMO COME CREARE UNAGENDA DI APPUNTAMENTI UTILIZZANDO GLI STESSI E GOOGLE CALENDAR

ellarticolo sui child themes pubblicato il mese scorso, abbiamo visto come estendere le funzionalit di WordPress aggiungendo nuove funzioni alla libreria del parent theme. Agendo sul file functions.php, possibile arricchire i temi di WordPress di feature uniche, che li distinguano in mezzo allinfinit di temi esistenti. Tuttavia, sviluppare applicazioni allinterno del tema, rende difficoltoso applicare le stesse funzionalit a siti in cui sono istallati temi diversi. Qualora si avverta la necessit di distribuire le proprie applicazioni, allora necessario slegarle dai temi e svilupparle come plug-in. Un plug-in, dunque, unestensione indipendente dal tema, in grado di manipolare in modo autonomo i dati del database, di prelevare dati da origini esterne per importarli allinterno del sito, di offrire interattivit e possibilit di social networking. Grazie ad un plug-in si possono anche generare applicazioni autonome, i widget, utilizzabili per manipolare e visualizzare dati dalle origine pi diverse. E, date le ampie possibilit di utilizzo, dedichiamo questo articolo proprio ai widget: vedremo, infatti, come creare un plug-in che prelevi dati dal feed Atom di un Google Calendar pubblico e li mandi a video attraverso un widget.

La scelta del Google Calendar, in realt, pretestuosa: una volta definita la struttura del plug-in/widget, infatti, con poche modifiche al codice, sar sempre possibile prelevare dati da altre fonti per inserirli allinterno delle pagine di un qualsiasi sito proudly powerd by WordPress.

I WIDGET DI WORDPRESS
In sostanza, un widget una piccola applicazione che esegue delle operazioni e genera un output HTML in unarea determinata della pagina, definita widget area. Linstallazione base di WordPress porta con s una decina di widget che offrono le principali funzioni di supporto al blogging, come le liste di categorie, gli archivi di notizie, le tag clouds. Oltre a quelli predefiniti, esistono migliaia di widget adatti ad ogni scopo, dalla visualizzazione di dati presenti nel database, allaccesso a servizi esterni, come Twitter, Flickr o uno dei mille servizi di Google. Molti sono disponibili gratuitamente nella repository di wordpress.org (http://wordpress.org/extend/plugins/), altri hanno 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 necessari: a partire dalla versione 2.8, infatti, disponibile la nuova Widgets API, che rende molto pi agevole il lavoro di chi sviluppa su WordPress. Vi sono diverse modalit di sviluppo di un widget. In questo articolo vedremo come farlo utilizzando un plug-in.

REQUISITI
Conoscenze richieste Buona conoscenza di PHP e Wordpress Software Web server con Php5. In locale consigliato il pacchetto XAMPP Impegno

LA STRUTTURA DI UN PLUG-IN
Un plug-in si compone di uno o pi file .php, pi eventuali script JS e fogli di stile, e trova collocazione nella cartella wp-content/plugins dellistallazione di WordPress. Qualora vi sia un unico file .php, questo andr denominato come nome-plugin.php.

Tempo di realizzazione

Fig.1: Un widget per WordPress 3.0.1 che importa dati da un Google Calendar

Wordpress: la guida

26 / Gennaio 2011

http://www.iopro g r a m m o . i t

13

Le Widgets API di WordPress WEB 2.0 Wordpress: la guida Le Widgets API di WordPress
Nel caso in cui il plug-in si componga di pi file, sar necessario collocarli nella cartella wp-content/ plugins/nome-plugin. Il file .php principale assumer lo stesso nome. Il plug-in che svilupperemo avr lo scopo di offrire allutente la possibilit di aggiungere un widget al sito, agendo dal pannello di amministrazione, esattamente come avviene per gli altri widget di WordPress: una volta istallato il plug-in, sar possibile attivare il widget trascinandolo nella sidebar desiderata e impostando i relativi parametri di configurazione.

class gcalEventsList extends WP_Widget { function gcalEventsList(){ } function widget($args, $instance){ } function update($new_instance, $old_instance){ } function form($instance){ } } add_action(widgets_init, create_function(, return register_widget(gcalEventsList);));

NOTA

CHE STRADA SEGUIRE?


Un widget una piccola applicazione che genera un output a video. Vi sono diversi modi di creare un widget, il pi semplice dei quali quello di creare una funzione nel file functions. php e richiamarla in un template file. Se si sviluppano temi, probabilmente questa sar la soluzione da preferire. In alternativa, soprattutto se si decide di distribuire le proprie applicazioni, si potr optare per la creazione di un plug-in. Il framework di WordPress e la Widget API forniranno tutto ci di cui si ha bisogno.

Fig.2: Una volta caricato e installato il plug-in, il widget apparir nel pannello si amministrazione di WordPress

Partiamo con un esempio semplice e ipotizziamo un widget composto da un solo file: gcal_events_list. php. Il plug-in permetter allamministratore di impostare solo il titolo del widget, mentre visualizzer allutente un messaggio di saluto. Subito dopo presenteremo un esempio pi complesso. Innanzitutto, bisogner inserire nel file principale (nome-plugin.php) unintestazione che indichi a WordPress di cosa si tratta. Lintestazione va inserita allinterno dei simboli di commento:
<?php /* Plugin Name: GCal Events List Plugin URI: http://digitaladoptive.wordpress.com/gcalevents-list Description: GCal Events List generates a list of events from a public Google Calendar. You need the calendar ID to make it work. Version: 0.1 Author: Carlo Daniele Author URI: http://digitaladoptive.wordpress.com/ */

Per creare un widget sono necessarie solo quattro funzioni. La prima, gcalEventsList(), il costruttore di classe; le altre hanno lo scopo di mandare a video il widget nel front-end (funzione widget()), di salvare correttamente le impostazioni dellutente (funzione update()), di generare il form delle impostazioni del widget nel back-end (funzione form()). Una volta creato il widget, bisogner aggiungerlo allelenco dei widget gi presenti. A ci provvede il metodo add_action(), che aggancia una funzione ad unazione specifica. Nel nostro esempio, lazione widgets_init. La funzione generata da create_function(), infine, registra il widget (return register_ widget(gcalEventsList);). Limpalcatura pronta.

CREIAMO IL WIDGET
La prima delle funzioni del listato precedente il costruttore della classe gcalEvetsList. Questa provvede alla creazione del widget:
function gcalEventsList(){ $widget_ops = array(description => A widget that generates a list of events from a public Google Calendar); $this->WP_Widget(gcal-events-list, GCal Events List, $widget_ops); }

In pratica, abbiamo fornito a WP i dati necessari a individuare il plug-in e a distinguerlo da qualunque altro installato. Ricordiamo che il plug-in serve come piattaforma per lo sviluppo di un widget. Quindi, il passo successivo sar quello di estendere la classe WP_Widgets:

La funzione $this->WP_Widget accetta tre argomenti: un ID che individua univocamente il widget, il nome del widget visualizzato nel pannello di amministrazione, infine due array di parametri aggiuntivi, $widget_options e $control_options. Nellesempio abbiamo passato solo il primo array con lelemento description (per i dettagli sulla classe WP_Widget, rinviamo alla documentazione online, allindirizzo http://goo.gl/SpGus). Ora il nostro widget esiste e possiamo gi testarlo. Salviamo il
Wordpre s s l a g Gennaio 2011 / : 27 u i d a

h t t p : / / w w w . i o p r o g r a m mo.it

14

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/ plugins e apriamo il pannello di amministrazione: il plug-in gi disponibile per lattivazione, anche se non ancora in grado di eseguire alcuna operazione. ray). Larray di questo primo esempio costituito da un solo elemento, il titolo del widget. Il valore dellelemento $instance[title] viene attribuito alla variabile $title, dopo aver codificato alcuni caratteri speciali (per i dettagli, si legga http:// codex.wordpress.org/Function_Reference/esc_ attr). Viene poi creato il modulo che permette laggiornamento 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. org/software/gettext/gettext.html). Per verificare lesistenza della versione localizzata di una stringa di testo, si utilizzano le funzioni __() e _e(). La prima restituisce la stringa tradotta (ovviamente, se ne esiste la traduzione); la seconda, invece, la manda a video con un echo. Se si decide di internazionalizzare il proprio plug-in, bisogner predisporre i file .po e .mo necessari. In mancanza di questi, la localizzazione verr effettuata con le traduzioni disponibili in wp-content/languages. Per un esame approfondito dellargomento, consigliamo di partire dalle seguenti risorse: Writing a Plugin http://codex.wordpress. org/Writing_a_Plugin I18n for WordPress Developers http://codex.wordpress. org/I18n_for_WordPress_ Developers Installing WordPress in your language http://codex.wordpress. org/Installing_WordPress_ in_Your_Language

Fig.3: Una volta caricato, il plug-in appare nel pannello di amministrazione in attesa dellattivazione

Se diamo, poi, unocchiata allelenco dei widget, troveremo anche il nostro Gcal Events List.
Fig.4: Dal pannello di amministrazione possibile aggiungere il widget alla sidebar e impostarne il titolo

UN FORM PER LE IMPOSTAZIONI


La funzione form() permette di creare un modulo in cui definire le impostazioni di funzionamento e visualizzazione del widget. Supponiamo di voler offrire allamministratore del sito la possibilit di cambiare il titolo del widget. La funzione si svilupper come segue:
function form($instance) { $title = esc_attr($instance[title]); ?> <p> <label for=<?php echo $this->get_field_id(title); ?>>Title: <input class=widefat id=<?php echo $this->get_field_id(title); ?> name=<?php echo $this->get_field_name(title); ?> type=text value=<?php echo $title; ?> /> </label> </p> <?php }

LAGGIORNAMENTO DEI DATI


I parametri trasmessi dal form vengono archiviati nel database, ma non ci si dovr preoccupare di stabilire alcuna connessione: il framework di WordPress potente e permette di interagire con il database in tutta sicurezza. Per aggiornare i parametri di configurazione ci si serve della funzione update() e di poche righe di codice:
function update($new_instance, $old_instance) { $instance = $old_instance; $instance[title] = strip_tags($new_instance[title]); return $instance; }

Largomento $instance un array contenente le impostazioni correnti del widget (vedremo tra un attimo come vengono generati gli elementi dellar-

La funzione aggiorna larray $instance, restituendone il valore corrente. Se listanza non aggiornata correttamente, la funzione restituisce il valore booleano false. Gli argomenti della funzione sono due array: il primo contiene i nuovi parametri di configurazione; il secondo contiene i parametri memorizzati prima dellaggiornamento dei dati. Questi sono archiviati nella tabella wp_options del database di WordPress.

Wordpress: la guida

28 / Gennaio 2011

http://www.iopro g r a m m o . i t

15

Le Widgets API di WordPress WEB 2.0 Wordpress: la guida Le Widgets API di WordPress

VISUALIZZIAMO IL WIDGET
Lultima fase la generazione delloutput HTML che viene visualizzato nel front-end del sito. A questo provvede la funzione widget():
function widget($args, $instance){ extract($args, EXTR_SKIP); echo $before_widget; $title = apply_filters(widget_title, $instance[title]); if(!empty($title)){ echo $before_title . $title . $after_title; echo un saluto ai lettori di ioProgrammo; } echo $after_widget; }

nel front-end del sito. Per far questo servir un feed della Calendar Data API e , ovviamente, del codice PHP. La struttura del widget rimane la stessa, bisogner solo integrare le funzioni widget(), update() e form(). Il costruttore di classe gcalEventsList() rimane lo stesso dellesempio precedente. Cominciamo con il form. Nel pannello di amministrazione dovremo prevedere i campi necessari ad impostare un maggior numero di parametri:
function form($instance){ $title = esc_attr($instance[title]); $calendar = esc_attr($instance[calendar]); $orderby = esc_attr($instance[orderby]); $sortorder = esc_attr($instance[sortorder]); $maxresults = esc_attr($instance[maxresults]); $startmin = esc_attr($instance[startmin]); $startmax = esc_attr($instance[startmax]); }

La funzione accetta due argomenti. Il primo ($args) un elenco di parametri associati al widget. Questi vengono estratti grazie alla funzione PHP extract(), che genera una variabile per ogni elemento dellarray: le variabili che utilizziamo qui sono $before_widget e $after_widget. Queste generano il codice HTML che racchiude i contenuti del widget: per default si tratta di un <li>. La funzione apply_filters() filtra il valore di $instance[title] e lo applica all hook widget_title. Infine, se la variabile $title assume un valore utile, viene generato il contenuto del widget. Il codice completo e il widget funzionante. Un messaggio di saluto, per, davvero poco: bisogna creare un widget che aggiunga valore al sito.

NOTA

LA LICENZA DEI PLUG-IN


La maggior parte delle licenze con cui vengono rilasciati i plug-in di WordPress sono compatibili con la GPL2 (http:// www.gnu.org/licenses/gpl2.0.html). La compatibilit richiesta come requisito per la pubblicazione nella repository delle estensioni. La licenza duso del plugin va riportata in testa al file principale del plug-in allinterno dei simboli di commento.

I valori assunti delle variabili saranno utilizzati per generare gli attributi degli elementi del form. Subito dopo bisogner inserire il codice HTML del form. Del campo di testo che genera il titolo del widget abbiamo gi detto. Gli altri campi serviranno ad impostare i parametri da trasmettere alla Data API. Vediamo, quindi, un select box:
?> <p> <label for=<?php echo $this->get_field_id(orderby); ?>><?php echo __(Order by); ?>: </label> <select id=<?php echo $this->get_field_id( order by ); ?> name=<?php echo $this->get_field_name( orderby ); ?> class=widefat> <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>

UN ELENCO DI EVENTI DAL GOOGLE CALENDAR


Il nostro obiettivo quello di prelevare un elenco di eventi da un calendario pubblico e di visualizzarli

Come sopra, il metodo get_field_id() restituisce lID del campo del form. Gli option button, invece, assumono valori fissi (lastmodified e starttime). Lattributo selected viene generato dinamicamente, 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 utenti un semplice messaggio di saluto

<label for=<?php echo $this->get_field_ id(maxresults); ?>><?php echo __(Max results);

h t t p : / / w w w . i o p r o g r a m mo.it

16

Wordpre s s l a g Gennaio 2011 / : 29 u i d a

Le Widgets API di WordPress Wordpress: la guida WEB 2.0 Le Widgets API di WordPress
?>:</label> <select id=<?php echo $this->get_field_id( maxre sults ); ?> name=<?php echo $this->get_field_name( maxre sults ); ?> class=widefat> <option <?php if ( $instance[maxresults] == 1 ) echo selected=selected; ?>>1</option> <option <?php if ( $instance[maxresults] == 3 ) echo selected=selected; ?>>3</option>

dente, se non che il numero degli elementi dellarray decisamente superiore.

IL WIDGET A VIDEO
Per completare lo script manca solo la funzione widget(), che, come abbiamo detto, genera loutput HTML:
function widget($args, $instance){ extract($args, EXTR_SKIP); echo $before_widget; $title = apply_filters(widget_title, $instance[title]); //google calendar parameters $params = array( id => $instance[calendar], orderby => $instance[orderby], sortorder => $instance[sortorder], max-results => $instance[maxresults], start-min => $instance[startmin], start-max => $instance[startmax] );

NOTA

<option <?php if ( $instance[maxresults] == 5 ) echo selected=selected; ?>>5</option> </select> </p>

SUBVERSION
Per la pubblicazione delle estensioni nella repository, necessario utilizzare il sistema di controllo versioni Subversion (SVN). Una volta approvata la richiesta di pubblicazione del plug-in, infatti, wordpress.org dar accesso alla SVN repository, da cui sar possibile caricare e aggiornare le proprie estensioni. In pratica, si tratta di un sistema di gestione dei file e delle directory di un progetto, attraverso cui viene registrata ogni modifica apportata ai dati presenti. Grazie a questo sistema, sempre possibile recuperare le versioni precedenti dei propri dati o analizzare le modalit in cui i dati stessi sono stati modificati nel tempo. Per lavorare con Subversion necessario dotarsi di un Subversion Client allindirizzo http:// subversion.apache.org/. Per evitare di lavorare da prompt dei comandi, sono disponibili anche delle comode interfacce grafiche, come TortoiseSVN per Windows (http://tortoisesvn.tigris.org/). Per essere subito operativi con SVN, baster caricare i propri file nella directory trunk di SVN e creare una nuova versione nella directory tag, seguendo i semplici esempi riportati allindirizzo http://wordpress.org/extend/plugins/ about/svn/.

Come si vede, la logica del codice la stessa. Non mostriamo gli altri campi, rinviando al Cd-Rom allegato per il listato completo.

Come prima, vengono estratti gli elementi dellarray $args per generare le variabili $before_widget, $after_widget. Qui si aggiungono $before_title e $after_title, che generano il codice HTML che racchiude il titolo del widget. Viene, poi, inizializzata la variabile $title e creato larray $params, i cui elementi andranno a costituire i parametri da trasmettere alla Data API. Vediamo la seconda parte della funzione:
if(!empty($title)){

Fig. 6: La figura mostra il pannello di amministrazione da cui possibile impostare i parametri di ricerca dei dati che saranno visualizzati nel front-end

echo $before_title . $title . $after_title; } if(!empty($params[id])){ getData($params); }else{ echo __(You shoud set the calendar ID to make this widget work); } echo $after_widget; }

Allarchiviazione dei dati acquisiti provvede la funzione update():


function update($new_instance, $old_instance){ $instance = $old_instance; $instance[title] = strip_tags($new_instance[title]); $instance[calendar] = strip_tags($new_ instance[calendar]); $instance[orderby] = $new_instance[orderby]; $instance[sortorder] = $new_instance[sortorder]; $instance[maxresults] = (int)$new_ instance[maxresults]; $instance[startmin] = $new_instance[startmin]; $instance[startmax] = $new_instance[startmax]; return $instance; }

Il motore del widget la funzione getData(), che si occupa della trasmissione della richiesta alla Data API e della resa a video dei dati restituiti. La funzione viene invocata solo se stato impostato lID del calendario. Vediamola nel dettaglio:
function getData($params){ extract($params, EXTR_SKIP); $calID = $params[id]; $feed = http://www.google.com/calendar/feeds/ . $calID . /public/full?;

Niente da aggiungere rispetto allesempio prece-

Wordpress: la guida

30 / Gennaio 2011

http://www.iopro g r a m m o . i t

17

Le Widgets API di WordPress WEB 2.0 Wordpress: la guida Le Widgets API di WordPress
$params = orderby=. $params[orderby] . &sortorder= . $params[sortorder] . &max-results= . $params[max-results] . &start-min= . $params[start-min] . &start-max= . $params[start-max];

Questo dovr essere collocato in una directory cui va assegnato il nome stesso del plug-in. Allinterno della directory potranno essere aggiunti altri file e cartelle, secondo le necessit di sviluppo. Avremo, quindi, la seguente struttura:
plugins o gcal_events_list - gcal_events_list.php - css gcel_style.css

Prima di tutto, vengono estratti i parametri che formeranno la URI del feed e ricomposti nella stringa $params. Viene, poi, inoltrata la richiesta alla Data API:
$contents = @file_get_contents($feed . $params) or die(__(Bad request)); $xml = new SimpleXmlElement($contents);

Infine, vengono mandati i dati a video:


echo <div id=eventslist>; foreach($xml->entry as $entry){ $gd = $entry->children(http://schemas.google. com/g/2005); $start = strtotime($gd->when->attributes()>startTime); $end = strtotime($gd->when->attributes()>endTime); $dayName = __(date(l, $start)); $dayNum = date(j, $start); $month = __(date(F, $start)); $year = date(Y, $start); $date = $dayName . , . $dayNum . . $month . . $year; $startTime = date(G:i, $start); $endTime = date(G:i, $end); echo <p>; echo $date . <br />; echo (string)$entry->title . <br />; if($startTime != $endTime){ echo $startTime . - . $endTime; } } } echo </p>;

Vediamo, ora, il codice. Per importare in sicurezza un file .css, WordPress dispone delle funzioni wp_register_style() e wp_enqueue_style(). Creiamo in gcal_events_list.php una nuova funzione add_styles() che registri e accodi il foglio di style allheader della pagina:
function add_styles() { $myStyleUrl = WP_PLUGIN_URL . /gcal_events_list/ css/gcel-style.css; $myStyleFile = WP_PLUGIN_DIR . /gcal_events_list/ css/gcel-style.css; if ( file_exists($myStyleFile) ) { wp_register_style(gcel_styles, $myStyleUrl); wp_enqueue_style( gcel_styles); } }

NOTA

RIFERIMENTI
Il codex il city mall degli sviluppatori di WordPress. Nel codex si trovano tutte le risorse indispensabili allo sviluppo di temi e plugin. Tra le altre, consigliamo di cominciare dalla lettura della documentazione dell Widgets API (http:// codex.wordpress.org/ Widgets_API). Un altro riferimento indispensabile la documentazione della classe WP_Widget (http:// goo.gl/ZZXty). Altra utile lettura quella della guida introduttiva alla creazione dei plugin (http:// codex.wordpress.org/ Writing_a_Plugin).

Allinterno del costruttore di classe aggiungiamo lazione che associa la funzione add_styles() all hook wp_print_styles:
function gcalEventsList() { add_action(wp_print_styles, add_styles); }

Il motivo per cui abbiamo utilizzato pi istruzioni per generare la data quello di facilitare la localizzazione dei testi (vedi nota), grazie alla funzione __(). Infine, una serie di echo mandano i dati a video.

AGGIUNGIAMO UN FOGLIO DI STILE


Trattandosi di resa a video di dati, probabile che si avverta la necessit di adattare laspetto del widget al proprio tema: utilizzeremo, quindi, un foglio di stile. Prima di aggiungere il codice necessario, per, bisogna modificare la struttura del plug-in.

Fig. 7: La resa a video del widget: data, titolo e orario degli eventi

h t t p : / / w w w . i o p r o g r a m mo.it

18

Wordpre s s l a g Gennaio 2011 / : 31 u i d a

Le Widgets API di WordPress Wordpress: la guida WEB 2.0 Le Widgets API di WordPress
Se nella directory wp-content/plugins/gcal_events_ list/css esiste il foglio di stile, questo verr prima registrato e poi accodato nellintestazione del documento. Ora sar possibile agire dettagliatamente sulla visualizzazione dei dati, semplicemente aggiungendo le proprie istruzione al file css/gcel_style.css.
Fig. 9: La figura mostra la struttura del plug-in pronto per la pubblicazione

LA PUBBLICAZIONE DEL WIDGET


Ora che il codice completo, si potrebbe anche pensare di mettere il plug-in a disposizione della comunit di utenti e sviluppatori. Distribuire un plug-in pu voler dire acquisire notoriet, e la notoriet ha sempre un valore economico e professionale. Il luogo migliore per distribuire un plug-in la repository delle estensioni di WordPress (http://wordpress.org/extend/).

Un plug-in destinato alla pubblicazione avr, dunque, una struttura appena pi complessa di quanto visto fino ad ora. Oltre al motore dellapplicazione (il file gcal_ events_list.php del nostro esempio) e ad eventuali altri file allegati, come fogli di stile e script .php e .js, bisogner produrre un file readme.txt, destinato a contenere le informazioni visualizzate nella pagina della repository, ed alcune immagini, non obbligatorie, ma certamente utili allutente a comprendere il funzionamento dellapplicazione prima della sua installazione.

SUL WEB

DISTRIBUIRE UN PLUG-IN
Il luogo migliore per distribuire un plug-in la repository delle estensioni di WordPress: http://wordpress.org/extend/)codex. wordpress.org/
Fig. 8: La figura mostra il modulo attraverso il quale sottoporre il plug-in allapprovazione degli amministratori di wordpress.org

Per pubblicare un plug-in nella repository, lo sviluppatore dovr osservare alcune inderogabili regole che proponiamo di seguito: 1. il plug-in deve essere rilasciato con una licenza compatibile con la GPL2; 2. il plug-in non deve avere finalit illegali; 3. il plugin va caricato nella Subversion repository di wordpress.org; 4. nel plugin non possono essere inseriti collegamenti esterni, come un link powered by, senza lesplicito consenso dellutente; 5. ogni plug-in deve essere accompagnato da un file readme.txt, secondo lo standard specificato allindirizzo http://wordpress.org/extend/plugins/about/readme.txt; 6. consigliato allegare al plugin almeno un paio di screenshot, uno che ne mostri il funzionamento nel pannello di amministrazione e uno che ne mostri lanteprima nel front-end.

Fig. 10: Il plug-in stato approvato e caricato nella SVN repository. Ora ha una pagina dedicata su wordpress.org

Il primo passo sar, ovviamente, quello di aprire un account su wordpress.org. Se il plug-in rispetta le regole su elencate (almeno quelle obbligatorie), si pu procedere alla sua segnalazione dalla pagina http://wordpress.org/ extend/plugins/add/. Avuta lapprovazione alla pubblicazione (ci vorranno pi o meno 24 ore), si avr accesso alla Subversion Repository, dove si potr caricare il plug-in. Da questo momento in poi, ogni upload verr automaticamente visualizzato nella pagina dedicata da wordpress.org al nostro plugin: http:// wordpress.org/extend/plugins/gcal-events-list. Carlo Daniele

Wordpress: la guida

32 / Gennaio 2011

http://www.iopro g r a m m o . i t

19

le PayPal le PayPal API WEB 2.0 Wordpress: la guidaUtilizzareUtilizzare API con PHP con PHP

INTEGRARE PAYPAL NEL TUO SITO O BLOG


P
CD
wp_paypal.rar

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

WEB

ayPal uno dei sistemi di pagamento online pi diffusi del web: permette a qualsiasi azienda o consumatore che abbia un indirizzo e-mail di inviare e ricevere pagamenti sfruttando linfrastruttura finanziaria esistente (conti bancari e carte di credito) per creare un sistema di pagamento su base globale e in tempo reale: ogni utente PayPal pu inviare e ricevere soldi da altri utenti usando carte di credito (anche prepagate), bonifici bancari e invii di denaro intra-paypal in tutta sicurezza.

Fig. 2: Il carrello del sito webedicola.it

cdrom.ioprogrammo.it

Fig. 1: Il logo PayPal

Conoscenze richieste PHP, MYSQL, HTML, possedere un account PayPal Software WordPress Impegno

Se vedete il logo PayPal su un sito web potrete utilizzare il vostro conto PayPal per pagare i prodotti in vendita (o fare una donazione): sempre pi siti, anche italiani, supportano PayPal: lintegrazione, come vedremo, facile, veloce e totalmente sicura: PayPal si occuper di gestire tutte le transazioni basate su carte di credito, accollandosi quindi tutti i problemi di sicurezza che derivano da questo genere di attivit. Nel corso dellarticolo getteremo le basi per la creazione di un carrello usando MySQL e PHP, integreremo PayPal allinterno delle nostre pagine web usando PHP e vedremo come possibile, davvero con pochi clic, integrare PayPal in Wordpress in modo da creare un sito di e-commerce sicuro in poco tempo.

Cosa ci serve per creare un piccolo carrello da usare nei nostri siti web? Per prima cosa dobbiamo pianificarne il funzionamento in ogni sua piccola parte: bisogna per prima cosa rendersi conto di quanto sia delicato gestire un carrello utente e di quanto sia possibile per utenti malevoli ingannare un carrello non perfettamente sviluppato. Quello che ci interessa veramente non il funzionamento in s e per s del carrello (infatti ci occuperemo solo di aggiungere elementi al minicarrello che analizzeremo) la sessione utente: ogni visitatore del nostro sito apre automaticamente una sessione di navigazione. Durante questa sessione possiamo creare dati da utilizzare (leggere e scrivere) in quellunica sessione utilizzando per lappunto larray superglobale $_SESSION. Quel che ci serve poi una tabella contenente i prodotti da visualizzare allutente: niente di pi semplice:
CREATE TABLE IF NOT EXISTS `prodotti` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `nome` text NOT NULL, `prezzo` float NOT NULL DEFAULT 0, PRIMARY KEY (`id`)

CREIAMO IL NOSTRO CARRELLO PHP


Ogni sito di e-commerce che si rispetti mette a disposizione degli utenti un carrello che permette di raccogliere i prodotti da acquistare per poi inviare il pagamento e lordine al gestore del sito.

Tempo di realizzazione

Come potete vedere lo schema della tabella semplice: contiene un id, un nome del prodotto e il prezzo. Possiamo riempirla con alcuni prodotti di prova, eseguiamo in questo caso le seguenti query:

20 / Febbraio 2011

http://www.iopro s :r aa g uodia Wordpre s g l m m i . t

Utilizzare le PayPal API WEB 2.0 Utilizzare le PayPal API con PHP con PHP Wordpress: la guida
INSERT INTO `prodotti` (`id`, `nome`, `prezzo`) VALUES (1, IoProgrammo, raccolta anno 2010, 100), (2, IoProgrammo, raccolta anno 2009, 30.99), (3, IoProgrammo, raccolta anno 2009, 140), (4, IoProgrammo, raccolta anno 2008, 150); } $_SESSION[carrello] = $carrello;

Abbiamo inserito 4 prodotti nel nostro database, ognuno con prezzi diversi. Il file di configurazione della connessione non sar un problema:
$host = localhost; $user = root; $password = TUAPASSWORD; $database = carrello; $dbConn = mysql_connect($host,$user,$password); mysql_select_db($database,$dbConn);

Per completare il nostro carrello potrete aggiungere allinterno dello switch() che vedete tutte le altre operazioni di aggiornamento e update del carrello che riterrete necessarie. Fatta laggiunta al carrello, ritorneremo alla nostra lista prodotti e stamperemo la lista dei prodotti contenuta nel carrello, con prezzi moltiplicati per quantit inserita e totale del nostro ordine.
<?php if(isset($_SESSION[carrello])) { $tmp = array_count_values($_ SESSION[carrello]); $totale = 0; while(list($key,$value)=each($tmp)) { $sql = select * from prodotti where id = . mysql_real_escape_string($key); $res = mysql_query($sql,$dbConn); $row = mysql_fetch_assoc($res); echo <strong> . $row[nome] . </strong> Quantit&agrave; <strong> . $value . </strong> Totale: <strong> . ($row[prezzo] * $value) . &euro;</strong><br />; $totale += ($row[prezzo] * $value); } echo TOTALE: . $totale .&euro;; } ?>

Baster includere il file di configurazione in ogni file in cui ci servir poter raggiungere il database. Passiamo ora alla creazione della lista prodotti nel nostro file PHP.
<?php $sql = SELECT * FROM prodotti ORDER BY id; $result = mysql_query($sql,$dbConn); echo <ul>; while ($row = mysql_fetch_assoc($result)) { echo <li>. $row[nome] . &euro; . $row[prezzo]; echo - <a href=carrello.php?op=add&id=.$row[id]. >Aggiungi al carrello</a></li>; } echo </ul>; ?>

SUL WEB

SVILUPPARE PER PAYPAL


Volete affrontare seriamente lo sviluppo di soluzioni basate su PayPal? Allora dovete iscrivervi al sito dedicato agli sviluppatori PayPal che trovate allindirizzo https://developer.paypal.com/ o pi semplicemente http://x.com. Troverete API, documentazione e una community ricchissima di spunti per le vostre applicazioni.

Ecco fatto. Non si tratta nientaltro che di una query sul database che stampa una serie di link ai prodotti da aggiungere al carrello. Loperazione che faremo in carrello.php sar quella di aggiungere allarray $_SESSION[carrello] presente nella sessione utente (se non esiste verr creato) lid dellelemento su cui abbiamo cliccato:
if(!isset($_SESSION[carrello])) $carrello = array(); else $carrello = $_SESSION[carrello]; if(isset($_GET[op])) { $op = $_GET[op]; // Switch switch ($op) { case add: $carrello[] = $_GET[id]; break; }

Il codice, come potete vedere, molto semplice: la funzione array_count_values() si occupa di contare i prodotti presenti nel carrello (distinguendoli per id). Per ciascuno di questi elementi vengono recuperati la descrizione e il prezzo con una query al database MySQL. Sommare poi prezzi e quantit per ottenere il totale dellordine banale.

CARRELLI OPENSOURCE? OTTIMO, GRAZIE!


Abbiamo appena visto come iniziare a creare il nostro carrello utilizzando PHP. Il nostro esempio non ovviamente pienamente funzionante e richiede ancora molto codice per poter essere usato nel mondo reale. Come dicevamo prima, creare un carrello a prova di bomba pu essere unattivit lunga e noiosa: potete ovviamente metter mano al vostro codice e renderlo il carrello perfetto per voi, ma se il tempo a disposizione scarso potete raccogliere a piene mani da quanto messo a disposizione dalla comunit opensource e dal mondo del free software: l fuori esistono decine Febbraio 2011 / 21

h t r : /w s w o guigr Wtopd/p r ews : .lia p r o d aa m mo.it

le PayPal le PayPal API WEB 2.0 Wordpress: la guidaUtilizzareUtilizzare API con PHP con PHP
di script per la gestione di carrelli basati su JavaScript o PHP, che senza linvadenza di un completo sistema di e-commerce vi forniscono comunque tutte le funzionalit necessarie allutilizzo nei vostri siti: PayPal offre molti strumenti di questo tipo (li analizzeremo in seguito). Prima di passare a PayPal, fermiamoci per un momento a guardare cosa offre la comunit: un carrello molto funzionale e di semplice integrazione (anche in servizi web che non supportano PHP come ad esempio Blogspot) ad esempio SimpleCart che potete scaricare allindirizzo http://simplecartjs.com/. Se volete invece qualcosa di pi completo Beh, potete dare unocchiata alla sterminata schiera di sistemi e-commerce disponibili in Rete. Potete cominciare da Zen Cart http://www.zen-cart.com/ e per concludere dare unocchiata ad OpenCart http://www.opencart.com/ o al mastodontico Magento http://www. magento.com.
<form target=paypal action=https://www.paypal. com/cgi-bin/webscr method=post> <input type=hidden name=cmd value=_s-xclick> <input type=hidden name=encrypted value=----BEGIN PKCS7----- QkNjs+ln2DIi9cQbCGx4HTD+BX/rLRI KYgrtZ3Yah0J5XI2Qp5ob6bdLWocMk+YD0yfrkoQjV6GPE wx3plrDR0fOtw/79cNHC2Si8SIcvp99Jth79pS7uLrpzuvvxf 1GmyP79tejqQwg==-----END PKCS7----> <input type=image src=https://www.paypal. com/it_IT/IT/i/btn/btn_viewcart_LG.gif border=0 name=submit alt=PayPal - Il sistema di pagamento online pi facile e sicuro!> <img alt= border=0 src=https://www.paypal.com/ it_IT/i/scr/pixel.gif width=1 height=1> </form>

NOTA

SESSION HIJACKING
Se avete intrapreso la strada del mi creo il mio carrello da zero, fate attenzione alla gestione delle sessioni utente: Il session hijacking (il furto dellid di sessione da parte di un estraneo) un problema di sicurezza in cui potreste incappare. Ogni sessione utente infatti dotata di un proprio id, che se non protetto a dovere potrebbe essere sfruttato da un malintenzionato per impersonare un utente legittimo della vostra piattaforma.

INTEGRIAMO PAYPAL NEI NOSTRI SITI WEB


PayPal mette a disposizione di noi sviluppatori diversi tool gi pronti da utilizzare sui nostri siti: quella che segue una breve panoramica di ci che PayPal rende possibile fare: vediamo per prima cosa il pulsante donazioni. Per prima cosa registratevi (o fate login) sul sito http://www.paypal.it. Verificate poi il vostro conto PayPal per avere accesso alla pagina Strumenti per commercianti. Il primo strumento che vedremo il carrello PayPal che potete trovare allindirizzo https:// www.paypal.com/it/cgi-bin/webscr?cmd=_cart-factory. Vi troverete davanti a un Wizard che vi permetter di creare un nuovo pulsante da aggiungere ad una pagina prodotto. Il form risultante sar qualcosa di questo tipo:
<form target=paypal action=https://www.paypal. com/cgi-bin/webscr method=post> <input type=hidden name=cmd value=_s-xclick> <input type=hidden name=hosted_button_id value=VALORE_SEGRETO> <input type=image src=https://www.paypal.com/it_ IT/IT/i/btn/btn_cart_LG.gif border=0 name=submit alt=PayPal - Il sistema di pagamento online pi facile e sicuro!> <img alt= border=0 src=https://www.paypal.com/ it_IT/i/scr/pixel.gif width=1 height=1> </form>

Cliccando su questo pulsante lutente visualizzer il suo carrello, contenente i vostri prodotti, sul sito di PayPal. importante ricordare che questo codice solo esemplificativo: il codice PayPal va creato sul sito di PayPal, visto che i vari form contengono i dati identificativi dellaccount che ricever il pagamento e non va modificato in alcun modo quando incluso in una pagina. Volete vendere un oggetto alla volta? Nessun problema. Il pulsante Paga adesso non prevede nessun carrello, ma una cifra fissa da pagare direttamente sul vostro account. Il codice? Eccolo!
<form action=https://www.paypal.com/cgi-bin/webscr method=post> <input type=hidden name=cmd value=_s-xclick> <input type=hidden name=hosted_button_id value=MIOCODICE> <input type=image src=https://www.paypal.com/ it_IT/IT/i/btn/btn_buynowCC_LG.gif border=0 name=submit alt=PayPal - Il sistema di pagamento online pi facile e sicuro!> <img alt= border=0 src=https://www.paypal.com/ it_IT/i/scr/pixel.gif width=1 height=1> </form>

Vi baster inserire il codice HTML allinterno della pagina prodotto per visualizzare il pulsante Aggiungi al carrello. Una volta creati i pulsanti per ciascun prodotto il momento di creare il pulsante Visualizza Carrello. PayPal vi proporr di creare questo pulsante dopo ogni prodotto creato.

Fig. 3: Le varie opzioni disponibili sul sito PayPal

22 / Febbraio 2011

http://www.iopro s :r aa g uodia Wordpre s g l m m i . t

Utilizzare le PayPal API WEB 2.0 Utilizzare le PayPal API con PHP con PHP Wordpress: la guida
Come potete vedere dallimmagine di Fig.3, i moduli disponibili sul sito PayPal sono moltissimi e coprono quasi tutte le esigenze di chi vuole ricevere in maniera semplice un pagamento via PayPal o carta di credito. Facile e veloce: si tratta fondamentalmente di compilare dei Wizard e poi inserire il codice HTML ottenuto allinterno delle nostre pagine web. E se volessimo qualcosa in pi?

PAYPAL E WORDPRESS
Come dicevamo ad inizio articolo, facile poter integrare Wordpress e PayPal e possiamo farlo in diversi modi: dal Widget per la semplice donazione, fino a creare una completa soluzione di e-commerce basata su Wordpress.

LE PAYPAL API
PayPal mette a disposizione un ricchissimo set di API che possibile utilizzare usando lapposito SDK che potete scaricare dal sito http://x.com. Fino ad oggi, per utilizzare PayPal allinterno dei nostri siti web, bisognava per forza passare da una pagina PayPal esterna al nostro dominio. Ora, grazie alle API, possiamo integrare completamente la gestione dei pagamenti allinterno del nostro sito, senza dover spedire lutente sulle pagine di PayPal.com come accade anche con i vari Wizard che abbiamo visto fino ad ora. Nel menu Dev Tools del sito X.com potete dare unocchiata a tutte le API disponibili. Tenete docchio le Adaptive payments API, le prime presentate ufficialmente da PayPal, che permettono di gestire pagamenti semplici, concatenati o paralleli. Il pagamento semplice il classico pagamento: i soldi passano da A a B. I pagamenti concatenati prevedono il passaggio di valuta virtuale da A a B e da questo a C, mentre i pagamenti in parallelo permettono di dividere un unico importo ricevuto tra pi venditori. Decisamente un passo avanti rispetto ai pagamenti 1-1 che coinvolgono il sito PayPal come agente in the middle per le vostre transazioni. Per giocare con le Adaptive API , cominciate con lo scaricare lSDK per il linguaggio PHP a questo indirizzo http://tinyurl.com/ adapi. LSDK contiene la documentazione e tutta una serie di esempi pronti da visualizzare. Sar anche necessario installare il pacchetto PEAR XML_Serializer, se non presente nella vostra installazione PEAR installatelo con il comando:
pear install -f --alldeps XML_Serializer

Fig. 4: La pagina su Wordpress.org dedicata ai plug-in PayPal

Per raggiungere il nostro scopo utilizzeremo qualcuno dei numerosi plug-in disponibili sul repository ufficiale di Wordpress che trovate allindirizzo http://wordpress. org/extend/plugins/. Cominciamo dalle cose semplici: creare un widget di donazione PayPal per il vostro blog Wordpress facilissimo. Installiamo il plugin PayPal Donations (http:// wpstorm.net/wordpress-plugins/paypal-donations/) e personalizziamo la pagina delle opzioni. Una volta scelte le nostre impostazioni preferite ecco pronto il Widget: lo troverete nella sezione Aspetto -> Widget del pannello di amministrazione di Wordpress. Vi baster trascinarlo in una delle sidebar del tema et voil, ecco il pulsante di Donazione attivo sul nostro

Andando con il browser allindirizzo della index.php del pacchetto, vedrete una pagina con cui potrete cominciare a prendere confidenza: il corposo documento che trovate allindirizzo https://cms.paypal. com/cms_content/US/en_US/files/developer/PP_ AdaptivePayments.pdf pu darvi sicuramente unidea di quanto siano vaste queste API. Sta a voi scegliere la soluzione migliore per il vostro lavoro: wizard e bottoni per semplici attivit, adaptive API invece se il vostro lavoro richiede personalizzazioni estreme e gestione massima dei flussi verso il servizio PayPal.

Fig. 5: La pagina dei settings del plug-in PayPal Donations

h t r : /w s w o guigr Wtopd/p r ews : .lia p r o d aa m mo.it

Febbraio 2011 / 23

le PayPal le PayPal API WEB 2.0 Wordpress: la guidaUtilizzareUtilizzare API con PHP con PHP
blog. Il codice generato quello che abbiamo gi visto in precedenza, ma non dovrete preoccuparvi di localizzarlo o effettuare altre operazioni: ci penser PayPal Donations a mettere tutto in ordine. te personalizzare per aggiungere descrizione prodotto e prezzo. Nellimmagine Fig.6 potete vedere un post di esempio con un prodotto nel carrello. Il pagamento? Gestito tramite PayPal ovviamente! PayPal si occuper anche della gestione dellindirizzo di spedizione se attiverete lapposita opzione nel pannello di amministrazione del plug-in.

WORDPRESS E PAYPAL
Non limitiamoci a usare i seppur comodi plug-in di donazione: possiamo fare molto di pi con il nostro Wordpress: possiamo mettere in piedi un sito di e-commerce completo, offrendo ai nostri utenti PayPal come metodo di pagamento (e con PayPal tutte le maggiori carte di credito). Come possiamo fare? Ovviamente, grazie a un plug-in, ma non sar banale come visto in precedenza: oltre a installare e configurare un plug-in che agganci il nostro sito al nostro account PayPal occorrer confezionare i post del nostro blog come schede prodotto. Vediamo come fare: per prima cosa installiamo il plug-in WordPress Simple Paypal Shopping Cart che trovate allindirizzo http://phonk.it/24v, attraverso il pannello di amministrazione del vostro blog. Compilate attentamente il pannello opzioni che trovate allindirizzo http://vostroblog.it/ options-general. php?page=wordpress-simple-paypal-shopping-cart/ wp_shopping_cart.php configurando valuta, indirizzo PayPal su cui ricevere i pagamenti ed eventuali spese di spedizione o soglie, raggiunte le quali, le spese di spedizione sono gratuite. Spostate poi il widget di wp_shopping_cart allinterno della sidebar, in modo da mostrare allutente il carrello man mano che questo viene riempito. Una volta completati questi semplici passaggi possiamo creare il nostro post/scheda-prodotto: il titolo e la descrizione sono identici a quelli di un post normale, a fine post va poi aggiunto il markup del plug-in che mostrer prezzo e pulsante Aggiungi al carrello.
[wp_cart:Il mio prodotto:price:100:end]

MONETIZZARE CONTENUTI USANDO PAYPAL


Volete proteggere i vostri contenuti offrendoli solo a chi ha pagato una specie di fee di ingresso? Il plug-in Are PayPal (http://wordpress.org/extend/plugins/arepaypal/) viene utilizzato per monetizzare il contenuto di un blog di WordPress utilizzando PayPal. Il plug-in stato progettato per permettere la visione di certi post (o pagine) di Wordpress solo ad utenti che hanno pagato il fee di ingresso. Il pannello di amministrazione chiaro, vi baster incollare il codice dei vostri pulsanti PayPal allinterno dei campi predisposti.

PER CONCLUDERE
Nel corso di questo articolo abbiamo dato il via alla creazione di un carrello tutto nostro e abbiamo integrato PayPal allinterno del nostro sito web e dei nostri blog Wordpress. Grazie a PayPal possiamo dimenticarci della parte pi pericolosa della gestione di un sito di e-commerce: delegare a terze parti lelaborazione delle transazioni con carte di credito solleva gli sviluppatori da tutta una serie di problemi e grattacapi non indifferenti. PayPal, poi, mette a disposizione dellutenza diversi strumenti gi pronti come abbiamo visto, rendendo la vita di noi sviluppatori ancora pi facile. Perch aspettare ancora? Integrare PayPal nel nostro sito facile, veloce e sicuro! Francesco Napoletano

Come vedete, il codice dato da wp_cart:descrizione_ prodotto:price:prezzo:end. In corsivo i campi che dovre-

LAUTORE

Francesco Napoletano socio fondatore della Piko Design (http://www.pikodesign.it) dove si occupa di tutta la parte di sviluppo web (dal PHP al JavaScript, passando per Flex ed actionscript 3.0). Il suo blog http://www.napolux.com tra i pi conosciuti nellambiente web italiano.

Fig. 6: In azione il nostro e-commerce basato su Wordpress

24 / Febbraio 2011

http://www.iopro s :r aa g uodia Wordpre s g l m m i . t

Un plugin per creare un calendario di eventi WP WEB 2.0 Un plugin per creare un calendario di eventi in in WordPress Wordpress: la guida

USA JQUERY E LE GOOGLE MAPS API IN WORDPRESS


I
n Rete sono decine di milioni i siti sviluppati con WordPress. La semplicit di utilizzo e il numero incredibile di estensioni, oltre ai temi gra ci, ne hanno fatto uno dei CMS pi di usi, un poderoso strumento di business e un compagno dato per chi opera nel mondo del web design. In questo articolo vedremo come estenderne le funzionalit, sviluppando un plugin in cui si fondono le funzionalit delle librerie jQuery e jQuery UI, con le API di Google Maps, con lo scopo di creare e gestire un calendario di eventi. Si tratter di creare normali post cui associare una data, un indirizzo postale e una coppia di coordinate geogra che. I dati cos inseriti saranno disponibili per la visualizzazione nel front-end. controllo dei dati inseriti dallutente. Inoltre, decodi care un indirizzo postale per trasformarlo in coordinate geogra che (uno degli scopi di questo nostro articolo) non a atto operazione immediata e alla portata di tutti. Un plugin pu sopperire a questi inconvenienti e arricchire la UI, inserendo nel pannello di amministrazione un custom meta box, per godere di una gestione avanzata dei custom eld.

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

wp_jquery_gmaps.zip
cdrom.ioprogrammo.it

CD

WEB

I CUSTOM META BOX: VEDIAMO COSA SONO


Un post meta box un blocco di codice HTML visualizzato nelle pagine di acquisizione e modi ca dei post. In aggiunta ai post meta box, lo sviluppatore pu creare dei custom meta box, ossia blocchi che permettono linserimento di dati aggiuntivi rispetto a quelli prede niti. In pratica, un custom meta box utilizzato

I CUSTOM FIELDS DI WORDPRESS


I dati di cui si compone un post di Wordpress sono il titolo, il contenuto, una o pi categorie, uno o pi tag. Lutente pu aggiungere ulteriori dati, strutturati come meta-informazioni, servendosi dei cosiddetti custom elds. Si tratta di semplici coppie testuali nome-valore, che vengono memorizzate nella tabella wp_postmeta del database. Nella loro semplicit, i custom eld permettono di creare architetture dati anche molto complesse. Purtroppo la UI di WordPress dispone di semplici campi di testo, e non o re alcuna possibilit di

Conoscenze richieste Buona conoscenza di PHP; buona conoscenza di WordPress Software Web server con Php5. In locale consigliato il pacchetto XAMPP, disponibile sul CD-Rom allegato a questo numero Impegno

Tempo di realizzazione

Fig. 1: I custom eld sono delle semplici coppie nome-valore che possono essere acquisite grazie a normali campi di testo.

Fig. 2: Un custom meta box pu ospitare controlli di ogni tipo. La gura mostra come appare il meta box sviluppato in questo articolo

h t r : /w s w o guigr Wtopd/p r ews : .lia p r o d aa m mo.it

Marzo 2012 / 21 25

WEB 2.0 Un plugin per calendario di eventi in WordPress Wordpress: la guidaUn plugin per creare un creare un calendario di eventi in WP
soprattutto per gestire dei custom eld. Nel plugin che presentiamo, il custom meta box conterr tre campi di testo e una mappa. Il primo campo ospiter una data, nel formato aaaa-mm-gg. Per facilitare linserimento dei dati, ed evitare errori di digitazione, al campo verr associato il datepicker di jQuery UI. Il secondo campo conterr un indirizzo postale human readable, inseribile sia direttamente dallutente, sia attraverso il geocoder della Google Maps API. Il terzo campo ospiter le coordinate geogra che corrispondenti allindirizzo, generate dinamicamente dalla Maps API. Questi dati, una volta inseriti, saranno memorizzati allinterno di tre custom eld.

INSERIRE SCRIPT E FOGLI DI STILE IN WORDPRESS


Il primo passo sar quello di inserire le librerie. A tal ne, WP fornisce la funzione add_action(), che aggancia una funzione ad unazione. La funzione viene de nita dallo sviluppatore, mentre lazione viene eseguita al veri carsi di un determinato evento. La sintassi generica la seguente:
<?php add_action( $tag, $function, $priority, $num_ args ); ?>

NOTA

PRIMI PASSI CON I PLUGIN


Un plugin una piccola applicazione che aggiunge funzionalit allistallazione base di WP. Esistono plugin per qualunque scopo e, teoricamente, non ci sono limiti a quello che si pu creare. Un plugin si compone di almeno un le, chiamato plugin-slug.php collocato, in fase di istallazione, nella directory /wp-content/ plugins. Spesso il plugin dispone di una directory speci ca avente lo stesso nome. Lo slug del nostro plugin sar ioprogrammo_events, il nome sar ioProgrammo Events plugin. Il le .php dovr contenere innanzitutto unintestazione, nella forma di commento:
/* Plugin Name: ioProgrammo Events plugin Plugin URI: http://digitaladoptive.wordpress.com/ Description: This plugin allows admin to manage single day events Version: 1.0 Author: Carlo Daniele Author URI: http://digitaladoptive.wordpress.com/ Copyright 2011 Carlo Daniele */

LE COSTANTI DELLE DIRECTORY


WP dispone di varie costanti che conservano i percorsi di alcune directory cui accedono plugin e temi. La costante WP_PLUGIN_ URL, utilizzata nel nostro esempio, memorizza la URL completa della directory plugin. Il ricorso alla costante, piuttosto che alla scrittura per esteso delle URL, sempre preferibile, dato che lutente ha la possibilit di spostare la directory dalla sua collocazione prede nita. Maggiori info su http://codex. wordpress.org/Determining_ Plugin_and_Content_ Directories

$tag il nome dellazione (o action hook), $function la funzione di callback, $priority stabilisce limportanza ai ni dellesecuzione della funzione, $num_args il numero di argomenti passati alla funzione. necessario caricare gli script solo quando lutente crea un nuovo post, oppure ne modi ca uno esistente. Ecco gli hooks cui faremo ricorso in questa prima fase:
add_action(admin_print_styles-post.php, iop_admin_ enqueue_styles ); add_action(admin_print_styles-post-new.php, iop_ admin_enqueue_styles ); add_action(admin_print_scripts-post.php, iop_admin_ enqueue_scripts ); add_action(admin_print_scripts-post-new.php, iop_ admin_enqueue_scripts );

Gli hooks admin_print_styles e admin_print_scripts permettono di agganciare script e stili a quelli caricati di default da WP. I parametri {post.php} e {post-new.php} individuano le pagine in cui eseguire lazione (nuovo post e modi ca post). Ed ecco le funzioni di callback:
function iop_admin_enqueue_styles() { wp_enqueue_style(jquery-ui-theme, /themes/ smoothness/jquery-ui.css); }

Dei dati inseriti, il solo Plugin Name obbligatorio, in quanto permette a WP lindividuazione del plugin. Il nome deve essere, ovviamente, univoco. Le altre informazioni sono facoltative, ma utili alla distribuzione del plugin. Passiamo ad analizzare il codice. La prima istruzione de nisce la costante IOP_DIR, che individua la posizione del plugin:
dene( IOP_DIR, WP_PLUGIN_URL . / . str_ replace(basename( __FILE__),,plugin_basename(__ FILE__)) );

wp_enqueue_style accoda il foglio di stile. Il primo parametro lID, il secondo la URL del le: qui abbiamo inserito il tema di jQuery UI, smoothness. Ora inseriamo gli script:
function iop_admin_enqueue_scripts() { wp_deregister_script(jquery-ui-core); wp_register_script(jquery-ui-core, /jquery-ui.min. js, array(jquery) ); wp_enqueue_script( jquery-ui-core ); wp_enqueue_script(google-maps-api, http://maps. googleapis.com/ ); wp_enqueue_script(iop-script, IOP_DIR . js/ iop-script.js, array(jquery, jquery-ui-core, googlemaps-api) ); }

La costante WP_PLUGIN_URL individua il percorso della directory plugins, mentre la funzione plugin_basename(__FILE__) restituisce il percorso del plugin. Grazie alla sostituzione operata da str_replace(), si otterr il nome della directory.

Linstallazione base di WP gi corredata delle libre-

22 26 / Marzo 2012

http://www.iopro s :r aa g uodia Wordpre s g l m m i . t

Un plugin per creare un calendario di eventi WP WEB 2.0 Un plugin per creare un calendario di eventi in in WordPress Wordpress: la guida
rie jQuery e jQuery UI. Mentre scriviamo, la versione corrente, la 3.2.1, dispone di jQuery 1.6.1, compatibile con il plugin. Sar necessario, invece, caricare jQuery UI: la versione disponibile in WP 3.2.1 non dispone del datepicker. Provvediamo, quindi, a de-registrare la libreria, e a registrare una nuova versione (recuperandola dal Google CDN) grazie a wp_register_script (si veda il codice allegato per le URL complete). Lultimo parametro un array, i cui elementi corrispondono agli script necessari al funzionamento dello script corrente: jQuery UI avr bisogno, ovviamente, di jQuery. Una volta registrato, lo script viene accodato alla lista. I due script successivi sono la Google Maps API e il nostro script, collocato nella directory js. Ora bisogna dire a WP quando il momento di caricare il meta box. Lo faremo grazie allaction hook add_meta_boxes:
add_action(add_meta_boxes, iop_add_meta_box);

Al caricamento dei meta box della pagina, dunque, viene eseguita la callback iop_add_meta_box:
function iop_add_meta_box(){ global $iop_metabox; add_meta_box( $iop_metabox[id], $iop_metabox[title], iop_show_meta_box, // callback function $iop_metabox[page], $iop_metabox[context], $iop_metabox[priority] ); }

COSTRUIAMO IL CUSTOM META BOX


Le caratteristiche speci che dei custom meta box vengono stabilite da una serie di parametri, che qui de niamo come elementi di un array:
$iop_metabox = array( id => iop_meta_box, title => ioProgrammo meta box, page => post, context => side, priority => high );

NOTA

Oltre ai parametri memorizzati nellarray $iop_metabox, alla funzione add_meta_box() viene passato il nome della callback iop_show_meta_box, che ha lo scopo di generare loutput HTML:
function iop_show_meta_box(){ global $post; global $iop_elds;

NONCE: NUMBER USED ONCE


WordPress dispone di un meccanismo di sicurezza che consente di ridurre i rischi di attacchi hacker, de nito nonce (number used once). Si tratta di un codice numerico utilizzato in fase di trasmissione dati, che previene accessi non autorizzati: il codice cambia e viene veri cato ad ogni accesso. Informazioni dettagliate e riferimenti online si trovano su http://codex.wordpress.org/WordPress_Nonces

Gli elementi dellarray memorizzeranno i campi ID, titolo, tipo di contenuto (post, page, link o custom_ post_type), contesto (la parte della pagina in cui sar visualizzato il meta box: normal, advanced, side) e priorit (high, core, default, low). Dopo $iop_metabox andremo a de nire un array multidimensionale, i cui elementi rappresentano i custom elds in cui verranno memorizzati i dati:
$iop_elds = array( array( name => Text box with datepicker, desc => Event date, id => iop_date_eld, type => text ), array( name => Address, desc => Event location, id => iop_address_eld, type => text ), array ( name => Lat Lng, desc => Latitude and Longitude, id => iop_latlng_eld, type => text));

Per prima cosa vengono de nite le variabili globali. Come detto, vi sar corrispondenza tra campi del meta box e custom elds. Andremo quindi a recuperare i valori dei custom elds utilizzando gli elementi id dellarray $iop_ elds:
$date_meta = esc_attr( get_post_meta($post->ID, $iop_elds[0][id], true) ); $address_meta = esc_attr( get_post_meta($post->ID, $iop_elds[1][id], true) ); $latlng_meta = esc_attr( get_post_meta($post->ID, $iop_elds[2][id], true) );

La funzione get_post_meta() accetta tre argomenti: lID del post corrente, il nome del custom eld e, in ultimo, un valore booleano che stabilisce se il valore restituito debba essere una stringa (true) o un array (false). Ora abbiamo a disposizione, se presenti, i valori di data, indirizzo e coordinate, necessari a generare la struttura HTML del meta box. Qui mostriamo il primo campo:
?><p> <label for=<?php echo $iop_elds[0][id]; ?>> <?php _e( $iop_elds[0][desc] ); ?> </label><br /> <input class=widefat type=text name=<?php echo $iop_elds[0][id]; ?>

h t r : /w s w o guigr Wtopd/p r ews : .lia p r o d aa m mo.it

Marzo 2012 / 23 27

WEB 2.0 Un plugin per calendario di eventi in WordPress Wordpress: la guidaUn plugin per creare un creare un calendario di eventi in WP
id=<?php echo $iop_elds[0][id]; ?> value=<?php echo $date_meta; ?> size=30 /> </p> if ( !current_user_can( edit_page, $post_id ) ) return $post_id; }else{ if ( !current_user_can( edit_post, $post_id ) ) return $post_id; }

I valori degli attributi di label e input vengono assegnati grazie agli elementi dellarray $iop_ elds. Soltanto il valore dellattributo value dellelemento input viene assegnato in base al valore del custom eld corrispondente eventualmente in memoria ($date_meta). In questo modo, in caso di modi ca del post, nel campo di testo del custom meta box comparir il valore del custom eld. Gli altri due campi di testo si ripetono in modo simile (rinviamo al codice allegato). Concludono il blocco la div che ospita la mappa e un campo nascosto necessario alla trasmissione in sicurezza dei dati:
<div id=canvas></div> <?php echo <input type=hidden name=iop_nonce_eld value= . wp_create_nonce(iop_nonce) . />; }

Il passo successivo il recupero dei dati eventualmente memorizzati nei custom elds, e laggiornamento con i nuovi dati (riportiamo il codice relativo al primo campo, rinviando al cd-rom per il listato completo):
$old_date_value = get_post_meta($post_id, $iop_ elds[0][id], true); $new_date_value = $_POST[$iop_elds[0][id]]; if( $new_date_value && $new_date_value != $old_ date_value ){ update_post_meta( $post_id, $iop_elds[0][id], $new_date_value ); }elseif( == $new_date_value && $old_date_value ){ delete_post_meta( $post_id, $iop_elds[0][id], $old_date_value ); }

NOTA

IL DATEPICKER DI JQUERY UI
Nella nostra applicazione la data deve essere nel formato aaaa-mm-gg. Purtroppo WP non consente di e ettuare una veri ca sulla correttezza dei dati acquisiti. La versione 3.2.1 di WP, utilizzata per lo sviluppo del nostro plugin, dispone di svariati plugin di jQuery UI. Purtroppo il datepicker non tra questi. Bisogner, quindi, scaricare il codice dal sito http://jqueryui. com/, oppure ricorrere al Google CDN, come abbiamo mostrato nellarticolo. Il datepicker verr visualizzato quando lutente far click sul campo di testo associato e faciliter le operazioni di inserimento dati. bene ricordare che il widget datepicker richiede listallazione di un tema gra co per funzionare. Per maggiori informazioni, si vedano http://jqueryui.com/ demos/datepicker/ e http:// jqueryui.com/themeroller/

Il Custom meta box pronto, ma ancora non funzionante. Bisogna dire a WP come memorizzare i dati inseriti dallutente.

I CUSTOM FIELDS E LARCHIVIAZIONE DEI DATI


Abbiamo generato il blocco HTML del meta box, ma questo ancora inattivo. Ora lutente pu riempire i campi di testo, ma il loro contenuto scompare non appena si esce dalla pagina. Occorre salvare i valori inseriti in appositi custom eld, con una callback invocata quando lutente salva il post:
add_action(save_post, iop_save_meta_box);

Per prima cosa viene recuperato il valore del custom eld corrispondente al primo campo del meta box, quello relativo alla data ($old_date_value). Viene poi prelevato il dato trasmesso dallutente ($new_date_ value). Se il nuovo valore esiste, e se diverso dal valore archiviato, la funzione update_post_meta aggiorna il valore del custom eld; nel caso venga trasmesso un campo vuoto, ed esista un valore salvato in precedenza, la funzione delete_post_meta elimina il custom eld corrispondente.

PERFEZIONIAMO LA UI CON JQUERY


La nostra impalcatura pronta. Ora bisogner sfruttare la potenza di jQuery per rendere davvero utile il plugin. La nostra prima preoccupazione sar quella di utilizzare le funzioni di jQuery e jQuery UI in modo da evitare con itti con script e librerie di altri plugin. Apriamo il le iop-script.js, nella directory wp-contents/plugins/ ioprogrammo_events/js.
jQuery.noConict();

Laction hook save_post attiva la callback iop_save_ meta_box. Dopo la de nizione della variabile globale $iop_ elds, veri chiamo la token impostata nel campo nascosto:
function iop_save_meta_box( $post_id ){ global $iop_elds; if ( !isset( $_POST[iop_nonce_eld] ) || !wp_veri fy_nonce( $_POST[iop_nonce_eld], iop_nonce ) ) return $post_id;

I successivi test veri cano un eventuale salvataggio automatico, oltre al livello di autorizzazione dellutente corrente:
if( dened(DOING_AUTOSAVE) && DOING_AUTOSAVE ) return $post_id; if ( post == $_POST[post_type] ) {

Il simbolo $ utilizzato da jQuery un alias che sostituisce la funzione jQuery. Se il namespace jQuery senza dubbio univoco, lalias $ pu essere utilizzato da altri script. Con listruzione jQuery.noConflict(), il simbolo $ non rappresenter pi un alias per jQuery, evitando in questo modo ogni possibile conflitto. Ci non significa che non si potr pi utilizzare $: baster passare il namespace alla calback eseguita dal metodo ready:

24 28 / Marzo 2012

http://www.iopro s :r aa g uodia Wordpre s g l m m i . t

Un plugin per creare un calendario di eventi WP WEB 2.0 Un plugin per creare un calendario di eventi in in WordPress Wordpress: la guida
jQuery(document).ready(function($){ });

Tutto il codice eseguito allinterno della funzione di callback potr far uso della funzione $ senza alcun rischio di con itti (maggiori info su http://docs.jquery.com/ Using_jQuery_with_Other_Libraries). Messo al sicuro il codice, passiamo al datepicker:
$(#iop_date_eld).datepicker({ dateFormat: yy-mm-dd, constrainInput: true, gotoCurrent: true, showAnim: slideDown });

Nel secondo caso, la Maps API si occuper di tutto, generando le coordinate e calcolando lindirizzo pi prossimo alla localit individuata. Nel nostro meta box abbiamo predisposto la div#canvas, senza speci carne le dimensioni. Il motivo quello di evitare di fare dello spazio inutile nel caso in cui lelaborazione degli script fosse disabilitata. Torniamo al le iop-script.js e aggiungiamo:
jQuery(document).ready(function($){ $(#canvas).css({height:200px,width:100%}) loadMap();

Basta la sola funzione datepicker() per ottenere il risultato mostrato in Fig. 3. I parametri passati alla funzione stabiliscono il formato dellinput, la forzatura del formato, la data prede nita, lanimazione del calendario.

Qui abbiamo solo impostato le dimensioni della div e invocato la funzione loadMap(), che vedremo tra un po. Prima creiamo due pulsanti: il primo per la geocodi ca dellindirizzo, il secondo per lazzeramento dei dati:
$(<input type=button id=iop_nd_location >) .insertAfter(#iop_address_eld) .click(function(){ geocode( $(#iop_address_eld).val() ); }); $(<input type=button id=iop_clear_location >) .insertAfter(#iop_nd_location) .click(function(){ map.setCenter(rome); map.setZoom(4); addMarker(rome); $(#iop_address_eld).val(); $(#iop_latlng_eld).val(); }); });

NOTA

GEOCODING E REVERSE GEOCODING


Il servizio di geocoding della Google Maps API permette di convertire un indirizzo postale human readable in coordinate geogra che, necessarie alla collocazione di elementi su una mappa. Loperazione inversa, che traduce una coppia di coordinate geogra che in un indirizzo comprensibile, viene de nito reverse geocoding. Il riferimento online allindirizzo http://goo.gl/JXXdN

Fig. 3: Il datepicker di jQuery UI o re una comoda interfaccia gra ca per inserire una data in un campo di testo

INDIRIZZO POSTALE E COORDINATE GEOGRAFICHE


Oltre al campo destinato alla data dellevento, abbiamo previsto un campo riservato allindirizzo e un campo per le coordinate geogra che. Il plugin dar allutente la possibilit di inserire manualmente lindirizzo, oppure di cercare la localit servendosi di una Google Map. Nel primo caso, per individuare le coordinate, baster inserire lindirizzo e cliccare sul pulsante Find. Il servizio di geocoding della Maps API restituir le coordinate che andranno a costituire il valore del secondo campo.

Il pulsante viene inserito subito dopo il campo di testo destinato allindirizzo, e gli viene associato un event handler che intercetta il clic e invoca la funzione geocode() (che de niremo pi avanti). Alla funzione viene passato, come argomento, lindirizzo della localit. Il secondo pulsante viene inserito in coda al primo. Al click dellutente, la mappa viene centrata su una localit prede nita (in questo esempio Roma), viene impostato un basso livello di zoom e invocata la funzione addMarker() (vedremo dopo anche questa). In ne, vengono svuotati i campi di testo. E ora tocca alla mappa.

UNA GOOGLE MAP PER LOCALIZZARE GLI EVENTI


Il nostro script utilizza pi di una funzione per linserimento e la gestione della mappa. Alcune delle funzioni utilizzate accederanno alle stesse variabili, le quali dovranno, per questo, essere de nite nel global scope: Marzo 2012 / 25 29

h t r : /w s w o guigr Wtopd/p r ews : .lia p r o d aa m mo.it

WEB 2.0 Un plugin un creare un di eventi in WordPress Wordpress: la guidaUn plugin per creareper calendario calendario di eventi in WP
var map; var markers = []; var rome = new google.maps.LatLng(41.9012,12.4752); var center = rome; var geocoder = new google.maps.Geocoder();

Al clic dellutente, viene prima invocata la funzione revgeocode(), che restituir lindirizzo postale partendo dalle coordinate, viene poi aggiunto un marker, e in ne vengono mandate a video le coordinate del punto individuato, come valore del campo di testo #iop_latlng_ eld.
function geocode( address ) { geocoder.geocode({address: address}, function(results, status){ if (status == google.maps.GeocoderStatus.OK) { var ll = results[0].geometry.location; map.setCenter( ll ); addMarker( ll ); jQuery(#iop_latlng_eld).val( ll.lat() + , + ll.lng() ); }else{ jQuery(#iop_latlng_eld).val( Location not found ); } }); }

Abbiamo ssato un oggetto GLatLng che utilizzeremo per centrare la mappa allavvio dello script, o in caso di reset dei dati. Baster cambiare le coordinate iniziali per avere un nuovo centro. E ora passiamo alle singole funzioni:
function loadMap() { var myOptions = { zoom: 4, mapTypeId: google.maps.MapTypeId.SATELLITE }; map = new google.maps.Map( jQuery(#canvas)[0], myOptions );

NOTA

ACTION HOOK E FILTER HOOKS


Gli action hooks di WordPress sono dei tag che permettono di agganciare una funzione ad un evento. Quando si veri ca levento, laction hook viene attivato e invia una chiamata ad una funzione di callback. I lter hooks, invece, permettono di e ettuare operazioni sui dati. Un lter hook agisce sui contenuti prima che questi vengano archiviati nel database, o mandati a video. La documentazione online ricca di riferimenti, tutti disponibili allindirizzo http://codex. wordpress.org/Plugin_API Una risorsa non u ciale, ma incredibilmente utile, il WordPress Hook Database, consultabile su http://adambrown. info/p/wp_hooks

Abbiamo creato un object literal, contenente i parametri di visualizzazione e generato una nuova mappa. Preleviamo poi le coordinate geogra che dal campo input#iop_latlng_ eld:
var coords = jQuery(#iop_latlng_eld).val(); if(coords && coords != ) { var location = coords.split(/\s*,\s*/); center = new google.maps.LatLng( parseFloat(location[0]), parseFloat(location[1]) ); map.setZoom(15); }else { map.setZoom(5); } map.setCenter( center ); addMarker( center );

Il metodo geocode accetta come argomenti un object literal di parametri (in questo caso vi solo lindirizzo postale) e una funzione di callback cui vengono passati gli argomenti obbligatori results e status. Il primo un array contenente i dati della risposta (normalmente una sola), il secondo una stringa che rappresenta lo stato delloperazione. Una volta individuate le coordinate geogra che (results[0].geometry.location), si ssa il nuovo centro, si aggiunge un marker e si visualizzano le coordinate. In caso di errore, viene generato il messaggio Location not found. La funzione che e ettua loperazione inversa, ossia genera lindirizzo a partire dalle coordinate, quasi identica alla precedente:
function revgeocode( location ){ geocoder.geocode({location: location}, function(results, status){ if (status == google.maps.GeocoderStatus.OK) { jQuery(#iop_address_eld).val( results[0]. formatted_address ); }else{ jQuery(#iop_address_eld).val( Address not found ); } }); }

Se esiste un valore nel campo di testo, vengono eliminati eventuali spazi e generato il nuovo centro della mappa, con uno zoom elevato. Se il campo di testo vuoto, allora non si modi ca il centro iniziale, che rimane su Roma, e si mantiene basso il livello di zoom. Ora bisogner intercettare lazione dellutente sulla mappa:
google.maps.event.addListener(map, click, function(evt) { revgeocode ( evt.latLng ); addMarker( evt.latLng ); jQuery(#iop_latlng_eld).val( evt.latLng.lat() + , + evt.latLng.lng() ); }); }

Lunica di erenza di rilievo sta nei parametri passati al geocoder: in questo caso si tratta di una istanza di GLatLng che rappresenta la localit geogra ca individuata sulla mappa. In ne, le funzioni che aggiungono ed eliminano i marker dalla mappa:

26 30 / Marzo 2012

http://www.iopro s :r aa g uodia Wordpre s g l m m i . t

Un plugin per creare un calendario di eventi WP WEB 2.0 Un plugin per creare un calendario di eventi in in WordPress Wordpress: la guida
function addMarker( location ) { deleteOverlays(); var marker = new google.maps.Marker( { position: location, map: map }); marker.setMap( map ); markers.push(marker); }

rizzati in tre custom field, pronti per essere mandati a video.

I FILTER HOOKS E LA RESA A VIDEO


Se un action hook viene utilizzato per eseguire una funzione al verificarsi di un evento, un filter hook modifica un contenuto prima che questo venga salvato nel database, o mandato a video. Per aggiungere un filtro, lAPI di WP dispone della funzione add_filter:
<?php add_lter( $tag, $function, $priority, $num_args ); ?>

La funzione addMarker() elimina i precedenti puntatori e crea un nuovo marker, subito fissato sulla mappa. Il marker viene poi aggiunto allarray markers. Lultima funzione dello script cancella i markers dalla mappa:
function deleteOverlays() { if (markers) { for (i in markers) { markers[i].setMap(null); } markers.length = 0; } }

Gli argomenti sono gli stessi di add_action. Quello che cambia il valore di $tag, che in questo caso sar un filter hook. Per visualizzare nel front-end i valori dei custom fields, faremo, dunque, ricorso ad un filter hook:
add_lter(the_content, iop_lter_content); function iop_lter_content( $content ) { global $post; global $iop_elds; $date_meta = get_post_meta($post->ID, $iop_ elds[0][id], true); $address_meta = get_post_meta($post->ID, $iop_ elds[1][id], true); $location_meta = get_post_meta($post->ID, $iop_ elds[2][id], true); if( is_single() ) { $content .= <h2> . __(Event details) . </h2>; $content .= <p> . __(Date) . : . $date_meta; $content .= <br /> . __(Address) . : . $address_ meta; $content .= <br /> . __(Location) . : . $location_meta . </p>; } return $content; }

SUL WEB

PUBBLICARE I PLUGIN
Pubblicare il plugin nella repository di wordpress.org (http:// wordpress.org/extend/plugins/) potrebbe essere una buona idea per ottenere visibilit in una community di migliaia di utenti. Volendo rendere disponibile pubblicamente un plugin, caso sar necessario aggiungere allintestazione del le la licenza duso GNU GPL (riportata nel codice allegato.

Vengono prima rimossi i markers dalla mappa, poi svuotato il relativo array. Questultima operazione necessaria in quanto il metodo setMap(null) nasconde gli array senza eliminarli. Occorrer, per questo, azzerare larray markers.

Fig. 4: La gura mostra come appare il custom meta box nella scheda Modi ca articolo. Si pu notare come i valori dei campi del meta box corrispondano ai tre custom eld visualizzati in basso

Abbiamo definito le variabili globali e prelevato i valori dei custom field. Il contenuto del post, passato come argomento della funzione, verr modificato con laggiunta dei metadati e restituito con return $content. Concludiamo qui la prima parte del tutorial. Il nostro plugin perfettamente funzionante, sebbene siano ancora molte le funzioni che possono essere aggiunte. Nel prossimo numero vedremo come perfezionarlo con una pagina di amministrazione, un widget e altro ancora. Non mancate! Carlo Daniele Marzo 2012 / 27 31

Il Custom Meta Box finalmente pronto! Ora, quando il post viene salvato, i dati inseriti vengono memo-

h t r : /w s w o guigr Wtopd/p r ews : .lia p r o d aa m mo.it

nostro primo template template fai da te per WEB 2.0 Wordpress: la guidaHTML 5 il HTML 5 il nostro primofai da te per Wordpress WP

CREARE UN TEMPLATE AD HOC PER WORDPRESS


reare il proprio sito, che sia un semplice sito vetrina o un complesso e-commerce, passando per le RIA (Rich Internet Applications) ormai quasi una necessit per tutti, addetti ai lavori del Web e non. Chiunque voglia mettersi online non pu non avere una sua vetrina virtuale. Ancor meglio se questa vetrina pratica e veloce da gestire, soprattutto nei contenuti. Realizzare un gestionale per un sito non sempre cosa facile (soprattutto se dobbiamo crearlo ad-hoc e/o su misura per il nostro cliente). Allora ecco diffondersi ormai da diversi anni i CMS (Content Management System). Molti sono oggi i CMS attualmente disponibili sul mercato. Con questo mi riferisco a WordPress e Joomla tanto per citare i pi famosi, ai quali aggiungiamo anche quelli forse meno conosciuti (ma non per questo meno interessanti) come Drupal, DotNetNuke o (qualcuno storcer un po il naso) Blogger di Google. La diffusione delluno o altro CMS dipende sicuramente dalla reperibilit di informazioni, documentazione, esempi, forum e sopratutto da temi e plug-in pronti per luso che ci permettano di potenziare il nostro progetto oltre le opzioni di serie.

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

GESTIAMO IL MATERIALE
Anzitutto cominciamo con una buona notizia: quando dobbiamo creare un tema (o convertire un progetto grafico, solitamente realizzato in Photoshop o Illustrator) possiamo fare pi o meno come desideriamo. Questo passaggio, ovviamente, necessita di una conoscenza minima della piattaforma da parte nostra. Nel momento in cui ci accingiamo a creare un tema, pu essere sufficiente creare un documento che funga da modello. Una sorta di pagina mastro. Data una pagina, come quella mostrata nella figura seguente, proviamo a scrivere la struttura della pagina HTML.

CD

mediacinema.zip

WEB

cdrom.ioprogrammo.it

Fig. 1: Creiamo il codice HTML di questa pagina di esempio

I TEMI, PER CAMBIARE FACCIA AL BLOG


I temi (themes) o template (i nomi variano a seconda del CMS) sono uno dei punti focali della stragrande maggioranza dei progetti web. Tuttavia non sempre quelli disponibili sulla rete, siano essi a pagamento o gratuiti, ci accontentano. Allora siamo costretti a modificare un tema che pi si avvicina alle nostre richieste, talvolta in maniera talmente approfondita da rendere il lavoro cos lungo e difficile da farci considerare lipotesi di crearne uno noi appositamente. In questo articolo studieremo il motore utilizzato da WordPress per realizzare un template creato ad hoc partendo dai semplici asset grafici (delle comuni immagini JPG), creando la nostra pagina in HTML (per loccorrenza sfruttando alcune peculiarit dellHTML5 e CSS3) e infine montando il tutto come tema di WordPress. Iniziamo!

Come soluzione abbiamo quindi previsto il seguente codice HTML:


<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>Media Cinema WebSite</title> <!--[if lt IE 9]> <script src=http://html5shiv.googlecode.com/svn/ trunk/html5.js></script> <![endif]--> <link href=style.css rel=stylesheet type=text/css> </head> <body>

Conoscenze richieste HTML, CSS, PHP Software HTML editor, Browser aggiornati per lHTML5 Impegno

Tempo di realizzazione

24 / Gennaio 2012 32

http://www.iopro s :r aa g uodia Wordpre s g l m m i . t

HTML 5 il nostro primo template da te per WP WEB 2.0 HTML 5 il nostro primo template fai fai da te per Wordpress Wordpress: la guida
<div id=wrapper> <header> <div id=logo><img src=images/logo.png alt=Media Cinema Logo></div> <nav id=main_nav> <ul> <li><a href=#>Home</a></li> <li><a href=#>Attori</a></li> <li><a href=#>Attrici</a></li> <li><a href=#>Autori</a></li> <li><a href=#>FAQ</a></li> <li><a href=#>Contatti</a></li> </ul> </nav> </header> <div id=content> <div id=main><img src=images/home_splash. png alt=Image intro></div> <aside> } </aside> </div> <footer>Info footer .... </footer> </div> </body> </html> Version: 1.0 Author: Faber04 Author URI: http://www.faber04.com/ Tags: fixed width, one column, sidebar */ nel footer. Il tema stato realizzato in HTML5 e CSS3. Autore: Fabio Bernardi (www.faber04.com).

Abbiamo specificato il nome del tema, un link di riferimento dallautore, una veloce descrizione e delle sue caratteristiche, e altre informazioni utili. Tutte queste info saranno disponibili nella pagina dei temi della nostra applicazione WordPress. Sfruttando le caratteristiche dei CSS3, abbiamo anche usato una font esterna ai soliti font di sistema.
@font-face{ font-Family:Koz; src:url(KozGoPr6N-Light.otf);

NOTA

PER SAPERNE DI PI: LA DOCUMENTAZIONE DI WORDPRESS


Per quanto tutti i CMS siano particolarmente performanti, bisogna sempre avere ben presente come lavora la piattaforma. A tal riguardo suggeriamo il seguente link: http://codex. wordpress.org.

Come potete vedere, la struttura abbastanza semplice. Alcune soluzioni, come il menu creato (per ora staticamente), dovranno essere rimosse nel momento in cui convertiremo questa pagina in un vero e proprio modello. Dove possibile abbiamo utilizzato alcuni TAG dellHTML5 che non dovrebbero creare problemi di compatibilit tra i vari browser. Per questo abbiamo usato soprattutto i TAG che potenziano la semantica: nav per i menu di navigazione, aside per contenuto tangenziale (correlato al contenuto del sito ma non principale), footer per il pi di pagina del sito, header per lintestazione del sito.

In alcuni casi abbiamo utilizzato unaltra importante novit dei CSS3: i gradienti. Come avete visto nellimmagine iniziale del progetto, le voci del menu erano divise a tab. Lo sfondo delle tab non costituito da immagini, ma si tratta di gradienti creati tramite CSS3. Nello stile #main_nav li potrete trovare un esempio di gradiente. Andiamo ora a strutturare il nostro progetto.

CREIAMO IL TEMPLATE PER WORDPRESS


I template di WordPress sono articolati in una struttura di una decina di file circa, come minimo. Ogni file corrisponde, orientativamente, a una sezione della struttura: header, footer, page, sidebar, ecc... . A queste pagine si aggiungono una o pi pagine contente solo codice PHP per potenziare il tutto (solitamente una pagina chiamata functions.php). Prendiamo la pagina HTML della nostra demo, presente nella cartella mediacinema (main.html) e cominciamo a dividerla in parti.

NOTA

SE A VISUALIZZARE LHTML5 INTERNET EXPLORER...


Avendo utilizzato lHTML5 si reso necessario inserire una condizione che utilizzi un file JavaScript per forzare i browser Internet Explorer 8 e 9 di Microsoft alla comprensione dei tag HTML5.

ORA OCCUPIAMOCI DELLASPETTO GRAFICO


Commentare tutto il file CSS sarebbe eccessivo. Ci limiteremo quindi ad analizzare alcuni aspetti importanti, tipici dellultima versione CSS3, o utili per WordPress. Anzitutto un CSS per template Wordpress dovrebbe avere allinizio un blocco di commento che dia alcune info sul tema, il nome dellautore, la possibilit di aggiungere widget e altro ancora:
/* Theme Name: Media Cinema Theme URI: http://www.faber04.com Description: Tema demo per Media Cinema. Il tema supporta aree widget nella sidebar (laterale sinistro) e

PARTIAMO DALLA TESTATA


Tutto il codice iniziale della nostra pagina, fino al menu di navigazione compreso, dovr essere salvato in una pagina specifica chiamata header.php. Nel nostro caso, corrisponde a tutto quello compreso tra il DOCTYPE e la chiusura del tag header. Allinterno dellintestazione di un sito ci sono molte informazioni utili da gestire. Ad esempio il titolo del sito, il link al file RSS, il charset utilizzato, nonch le voci di menu dettate dal numero (e dal nome) delle pagine eventualmente presenti nel sito.

h t r : /w s w o guigr Wtopd/p r ews : .lia p r o d aa m mo.it

Gennaio 2012 / 25 33

nostro primo template template fai da te per WEB 2.0 Wordpress: la guidaHTML 5 il HTML 5 il nostro primofai da te per Wordpress WP
Lintestazione diventerebbe quindi:
<!DOCTYPE HTML> <html> <head> <meta charset=<?php bloginfo(charset); ?>> <title><?php bloginfo(name); ?> <?php if ( is_ single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title> <!--[if lt IE 9]> <script src=http://html5shiv.googlecode.com/svn/ trunk/html5.js></script> <![endif]--> <link rel=stylesheet href=<?php bloginfo(stylesheet_ url); ?> type=text/css media=screen /> <link rel=alternate type=application/rss+xml title=<?php bloginfo(name); ?> RSS Feed href=<?php bloginfo(rss2_url); ?> /> <link rel=pingback href=<?php bloginfo(pingback_ url); ?> /> <?php wp_head(); ?> } ?> </head> <body> <div id=wrapper> <header> <div id=logo><img src=<?php bloginfo(template_directory)?>/images/logo.png alt=Media Cinema Logo></div> <nav id=main_nav> <ul> <?php wp_list_pages(depth=1&title_li=); ?> </ul> </nav> </header> )); if ( function_exists(register_sidebar) ){ register_sidebar(array( name => Footer Widget, before_widget => , after_widget => , before_title => <h4>, after_title => </h4>, } )); if ( function_exists(register_sidebar) ) { register_sidebar(array( name => Main Side Bar, before_widget => , after_widget => , before_title => <h4>, after_title => </h4>,

NOTA

TESTARE LHTML5 DEL PROPRIO BROWSER


Volete sapere quanti (e quali) caratteristiche dellHTML5 supporta il browser che state utilizzando maggiormente? HTML5Test: www.html5test.com

NOTA

A PROPOSITO DI FONT
Se siete interessati ad approfondire il discorso riguardo alluso di font specifiche tramite CSS3, vi consigliamo la lettura di questo articolo presente su HTML5Today, un portale che affronta in maniera verticale luso di HTML5 e CSS3: http://www.html5today.it/ tutorial/css3-fontface-tuoi-fontpreferiti-sito

Tramite queste due condizioni, non solo permettiamo linserimento di aree widget nelle pagine footer e sidebar, ma creiamo anche le aree correlate per la gestione dei widget nellarea amministrativa di WordPress.

Fig. 2: Le aree del nostro sito predisposte per i widget

NOTA

GRADIENTI CON I CSS3


Sicuramente i gradienti non sono semplici da disegnare, n tanto meno da modificare. Tuttavia, in Rete, disponibile una piccola App per loccorrenza: Ultimate CSS Gradient Generator: http://www.colorzilla.com/ gradient-editor/

Le parti in PHP sono quelle che la piattaforma di WordPress mette a disposizione, come la lista delle pagine (data dal metodo wp_list_pages()), la directory della template, ecc... Come avrete sicuramente notato, molto utile risulta il metodo bloginfo(); che permette di risalire alle info principali del sito. Lintestazione pronta. Proseguiamo con il resto. Prima di procedere verso le pagine principali (index, page, single, search) affrontiamo quelle pi semplici: footer, sidebar e functions. Le prime due (come possiamo intuire dal nome) servono a gestire il footer e la barra laterale del sito. Nel nostro footer abbiamo inserito alcune info staticamente, cos come la possibilit di gestire dei widget. Questo significa che dobbiamo prevedere nel footer un area apposita per i widget, cos come per la sidebar. Prima di vedere queste due pagine, sarebbe bene considerare la pagina functions.php:
<?php

Spostiamoci ora nella pagina footer. Per poter inserire unarea widget nel footer cos come faremo poi nella sidebar - baster scrivere il seguente codice:
</div> <footer>Theme powered by <a href=http://www. faber04.com>Faber04</a>. <?php if ( !function_exists(dynamic_sidebar) || !dyna mic_sidebar(Footer Widget) ) {} ?> <div> </footer> </div> </body> </html>

La pagina sidebar, invece, potrebbe essere costruita secondo la struttura classica di un tema per WordPress: inserire degli elementi standard (link, blogroll, elenco categorie) qualora lutente abbia lasciata vuota larea per i widget . Analizzando il file sidebar.php possiamo

26 / Gennaio 2012 34

http://www.iopro s :r aa g uodia Wordpre s g l m m i . t

HTML 5 il nostro primo template da te per WP WEB 2.0 HTML 5 il nostro primo template fai fai da te per Wordpress Wordpress: la guida
infatti leggere le seguenti righe iniziali:
<aside> <?php if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar(Main Side Bar) ) : ?> <?php $today = current_time(mysql, 1); if ( $recentposts = $wpdb->get_results(SELECT ID, post_title FROM $wpdb->posts WHERE post_status = publish AND post_date_gmt < $today ORDER BY post_date DESC LIMIT 10)): ?> <div class=sideblock> <h3> </ h3> <ul> <?php foreach ($recentposts as $post) { if ($post->post_title == ) $post->post_title = sprintf(__(Post #%s), $post->ID); echo <li><a href=.get_permalink($post>ID).>; the_title(); echo </a></li>; } <?php _e(Recent Posts); ?> <?php get_footer(); ?>

In mezzo a questi due blocchi di codice dovremo inserire tutto loccorrente per gestire pagine, post e quantaltro. Nel nostro caso, inoltre, la parte della sidebar era immediatamente precedente al footer, quindi ci siamo potuti permettere di richiamarla poco prima del footer stesso. Il resto del codice, che potete leggere nella pagina index.php della nostra demo verifica la presenza di eventuali post, controlla se la pagina visualizzata lhome page, ecc... . Ovviamente scelte ed esigenze variano a seconda delle necessit del sito. Una volta completata la index come gi detto, possiamo salvarla esattamente identica con i seguenti nomi: page.php, single.php, search.php. Terminata la creazione della struttura dovremmo avere una cartella contente (almeno) i seguenti file:

SUL WEB

comments.php footer.php functions.php header.php index.php page.php search.php sidebar.php single.php style.css
Il caricamento di suddetto tema potr essere effettuato direttamente copiando la cartella (per intero) allinterno di quella di WordPress: wp-content/themes, oppure salvandola come file compresso (ZIP) e caricandola tramite il gestionale dei temi di WordPress. Una volta presente nellelenco dei temi disponibili, potr essere attivato e utilizzato tranquillamente.

UN PUNTO DI PARTENZA: BLOGINFO()


Nella pagina specifica della documentazione on line vengono elencati i parametri disponibili per accedere alle info principali del nostro progetto WordPress. http://codex.wordpress.org/ Function_Reference/bloginfo

Queste righe specificano esattamente quanto detto: in assenza di widget, la sidebar verr popolata di altri elementi secondari.

LE PARTI PRINCIPALI
Ora non resta che gestire le parti principali del nostro progetto WordPress: index, page, single e search. Tutte pagine simili per la loro struttura, ma riutilizzate per levenienza a seconda che lutente stia leggendo una pagina specifica, un post, oppure abbia effettuato una ricerca allinterno del sito. Queste pagine, salvo eccezioni particolari, sono solitamente tutte uguali. Baster quindi crearne una per fare anche un semplice copia&incolla. Partiamo dalla index.php. Allinizio sicuramente servir inserire lheader. Pertanto:
<?php get_header(); ?>

PER ANDARE PI VELOCI


Per quanto possiamo prediligere la scrittura a mano del codice, talvolta la creazione di temi pu richiedere pi del necessario. Esistono diverse possibilit di creazione di temi ad hoc chiavi in mano. Artisteer (www.artisteer.com) ad esempio un programma, a pagamento, molto potente che permette di realizzare template non solo per WordPress, ma anche per Drupal, Joomla e Blogger partendo da layout predefiniti e rimodellati ad hoc per le nostre esigenze. Se invece solo un piccolo aiuto quello che state cercando, in rete disponibile WordPress editor generator: http://www.yvoschaap.com/wpthemegen una web-app gratuita di Yvo Schaap. Molto spartano in verit, ma efficace per le esigenze minime per iniziare a mettere mano a un progetto pronto per loccorrenza.

LAUTORE

Cos come alla fine della pagina avremo bisogno del footer e/o della sidebar:
<?php get_sidebar(); ?>

Fabio Bernardi nato a Roma, sviluppatore freelance dal 2003 Investe buona parte della sua attivit tra formazione e sviluppo soprattutto in ambiente Flash Platform. Collabora con diverse societ di advertising e web agency nonch docente presso diverse strutture di formazione. Dal 2007 al 2010 stato channel manager per lo User Group ufficiale di Adobe per Flex: FlexGALA. Dal 2008 entrato a far parte del gruppo di professionisti/ collaboratori esterni di Adobe: Adobe|Guru Come Adobe|Guru ha partecipato a diversi eventi live e seminari online di promozione dei prodotti Adobe per il Web

Fabio Bernardi Gennaio 2012 / 27 35

h t r : /w s w o guigr Wtopd/p r ews : .lia p r o d aa m mo.it

Gestione xxxx NON SOLO CODICEdei siti gestitimultipla dei siti gestiti da Wordpress Gestione multipla guida da Wordpress Wordpress: la

ECCO IL SUPER ADMIN PER WORDPRESS


olti utenti si trovano con la necessit di dover gestire pi blog WordPress contemporaneamente, installati su provider hosting differenti. Questa incombenza si trasforma in sofferenza, quando il numero di blog da gestire diviene elevato: per ogni blog bisogna connettersi alla pagina di amministrazione dedicata, ricordare di ognuno il nome utente e la password e poi operare allinterno, autorizzando commenti o pubblicando nuovi post. Qualora poi si voglia pubblicare uno stesso post in pi blog, necessario riscrivere il testo su ogni singolo blog e via discorrendo. In situazioni come queste, gli amministratori hanno la necessit di una piattaforma unificata, un unico centro di controllo che dia loro accesso a tutti i blog WordPress, indipendentemente dallhosting sulla quale questi siano memorizzati. Una possibilit del genere esiste e si concretizza in ManageWP.

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

alla portata di tutti, anche dei neofiti. La registrazione avviene in pochi minuti. sufficiente collegarsi alla paginahttp://managewp.com, cliccare sul pulsante Sign Up presente al centro dello schermo ed inserire i dati necessari alla registrazione. Alla fine dellinserimento, cliccare su Register e il servizio invier una email allindirizzo di posta elettronica segnalato, nella quale sono presenti i dati di autenticazione, ossia lusername scelto ed una password autogenerata. A questo punto bisogna digitare http://managewp. com/wp-login.php nella barra degli indirizzi del browser, indicare i dati di accesso e premere su Log In. ManageWP comparir in tutto il suo splendore e con tutte le sue funzionalit.

AGGIUNGERE I BLOG
Affinch i blog possano essere gestiti in modo centralizzato sar necessario associarli alla piattaforma, installando su ogni blog WordPress un plugin fornito direttamente dal servizio. Il plugin si chiama Worker e il suo download parte in automatico non appena si clicca sul link Download Worker (Fig.1) presente nella barra superiore del Control Panel. Come al solito, il plugin gi fornito in un archivio zip e pu essere installato sul blog di interesse, seguendo le normali procedure di setup per i tradizionali addon di WordPress. Una volta conclusa linstallazione del plugin dal pannello di amministrazione del blog o via FTP, e dopo aver proceduto alla sua attivazione, ritornare sulla console di ManageWP e cliccare sul pulsante Add New Site. Nel modulo che appare, indicare lindirizzo del blog, il nome utente dellamministratore e la sua password, per poi concludere loperazione cliccando su Add Site. Il blog verr aggiunto a ManageWP e comparir nella lista dei siti da gestire. Le medesime operazioni dovranno essere compiute per tutti i blog che si vuole amministrare centralmente con ManageWP e, ad inserimento terminato, ci si potr dimenticare di tutti i singoli accessi ai pannelli di amministrazione di WordPress e lavorare contemporaneamente su tutti i blog direttamente dal servizio.

REGISTRAZIONE SEMPLICE
Chi lavora gi con i blog WordPress e ne apprezza la facilit duso, allora si trover a suo agio anche ad operare con ManageWP. Fin da subito, il servizio, per quanto ancora in fase beta, si dimostra affidabile ed

Fig. 1: Per gestire un blog con ManageWP, necessario installare nel blog il plugin Worker

86 / Settembre 2011 36

http://www.ioprog rsa m m o . i d a Wordpre s : l a g u i t

Gestione multipla deiGestionexxxx siti gestitimultipla dei siti gestiti da Wordpress da Wordpress NON la guida Wordpress: SOLO CODICE

FACCIAMO GRUPPO!
Nellelenco Site compariranno tutti i blog su cui possibile operare. Prima di procedere oltre, consigliabile creare dei gruppi nei quali raccogliere diversi blog. Soprattutto se si stanno amministrando pi di tre blog con ManageWP, la funzionalit dei gruppi permette di concentrare diversi blog inerenti, ad esempio, lo stesso argomento allinterno di ununica entit, con la quale poi operare direttamente, senza agire sui singoli blog. Per creare un gruppo, cliccare su Groups (Fig. 2), inserire il nome del gruppo nellunico campo di compilazione disponibile e premere su Add Group. Per aggiungere un blog al gruppo appena creato, individuare il blog dallelenco Site, cliccare

WordPress classica. A queste funzionalit, ManageWP aggiunge la sezione Select Blogs, dalla quale lutente pu decidere su quali blog o gruppi pubblicare larticolo redatto, con la possibilit di postare il medesimo intervento anche su pi blog contemporaneamente (Fig. 4). Per farlo, basta inserire il segno di spunta su ogni blog o gruppo nella quale si vuole che compaia il nuovo post. Alla fine dellediting, cliccare su Publish e ManageWP si occuper di pubblicare il post scritto su ogni blog scelto. Ovviamente, ad ogni blog verranno associate anche le categorie ed i tags indicati. Infine, si pu notare che la funzionalit di pubblicazione multipla non presente solo per i post, ma anche per le pagine del blog WordPress: cliccando su Create new page o su Pages/Create A New Page, si potr decidere su quali blog pubblicare la medesima pagina, grazie alla sezione di selezione multipla Select Blogs.

NOTA

ESPRIMITI. APRI UN BLOG!


Realizzata da Matt Mullenweg e distribuita sotto licenza Gnu, WordPress si dimostrata la migliore soluzione, in qualit di piattaforma software per la pubblicazione di contenuti Web, disponibile sul mercato del software libero. Originariamente nata per la sola funzione di blog (e, in effetti, ne conserva ancora tutte le caratteristiche), ma la sua elasticit estrema lo ha reso un vero e proprio CMS per la gestione di interi siti, anche professionali. I suo punti di forza sono: facilit di installazione: per installare WordPress basta scompattare larchivio compresso (disponibile sul CD allegato alla rivista) sul proprio spazio hosting e seguire la procedura guidata che si conclude in 5 passi; semplicit duso: grazie ad un pannello di amministrazione (dashboard o bacheca), localizzata in italiano, ben organizzato, facile da utilizzare anche per i neofiti (Fig. 3); ampia community: molti sono gli sviluppatori che si cimentano nella realizzazioni di componenti, plugin e temi, che vengono poi resi disponibili gratuitamente; hosting gratuito: oltre al CMS vero e proprio, da scaricare e installare su qualsiasi spazio web che abbia i requisiti giusti, su http://it.wordpress.com possibile creare gratis un proprio blog WordPress con dominio tipo mionome.wordpress.it.

Fig. 2: Con i Groups si possono operare alcune attivit su pi blog contemporaneamente

su Add Group ed inserire il segno di spunta accanto al gruppo nella quale si vuole far confluire il blog. Ripetere poi loperazione per ogni blog da associare ad un determinato gruppo.
Fig. 4: Pubblicazione multipla: si possono scegliere i blog su cui pubblicare un post

PLUGIN E TEMI
A questo punto, un amministratore pu avere la necessit di installare il medesimo plugin o lo stesso tema su blog differenti. Con ManageWP non c nulla di pi semplice: cliccare su Upload Themes/Plugins dal Control Panel per far comparire il pannello di installazione delle estensioni di WordPress. Qui, gli step da seguire sono pochi: scegliere cosa installare dal menu a tendina Plugins, indicare se attivare il plugin dopo linstallazione con un segno di spunta su Activate Plugins After Install e cliccare su Upload a file, per scegliere larchivio zip da caricare (Fig. 5). Ora, indicare se linstallazione deve avvenire per gruppo con un clic su Install By Group o scegliendo i singoli blog con un clic su Install By Blog: nelluno e nellaltro caso bisogna spuntare il gruppo od i blog sui quali si vuole installare il componente. Linstallazione avr dunque inizio cliccando su Install. Al termine, i plugin od i temi voluti saranno correttamente installati su ogni blog indicato, senza che lutente debba fare nullaltro. Per visualizzare quali temi o plugin sono installati su ogni singolo blog, si possono usare i pulsanti Plugins

Fig. 3: La Bacheca di WordPress da cui amministrare un blog

PUBBLICAZIONI MULTIPLE
Dopo la fase organizzativa, si pu passare allo step operativo. Per redigere un post, si pu procedere in due modi differenti, cliccando sul pulsante Posts/ Create a New Post del blog specifico presente nella lista dei siti amministrabili oppure cliccando sul pulsante Create new post nel Control Panel. Le due modalit dazione sono praticamente identiche: infatti, in entrambi i casi comparir un pannello nella quale inserire il titolo, il testo, eventuali excerpt supportati da particolari temi, i trackback, i custom field, le opzioni di discussione, le categorie di appartenenza ed i tag per lindicizzazione del post, insomma tutti gli strumenti normalmente a disposizione nella console

Wh t t p : / / ws : w . ig u ird a r a mmo.it ordpres w la op og

Settembre 2011 / 87 37

Gestione xxxx NON SOLO CODICEdei siti gestitimultipla dei siti gestiti da Wordpress Gestione multipla guida da Wordpress Wordpress: la
i pulsanti Import/Export e Backup/Restore (Fig.6). La funzione Import/Export permette di effettuare il download di un file CSV, nel quale sono memorizzati tutti i dati di accesso ai differenti blog attestati su ManageWP. Il CSV ottenuto diventa utile qualora gli stessi blog debbano essere associati ad unaltra utenza di ManageWP, senza voler ripetere le operazione iniziali di inserimento dei blog nella piattaforma. Allo stesso modo, qualora i blog da aggiungere siano davvero molti, si pu pensare di creare un file CSV con tre campi (nellordine: URL del blog, username e password di WordPress) e caricarlo utilizzando il pulsante Upload a file. Questo permetter di configurare al volo ManageWP, senza utilizzare la procedura Add New Site descritta allinizio. Lunica accortezza da usare di aver installato il plugin worker in ogni blog, prima dellupload del file CSV. Con Backup/Restore si effettuano invece i backup od i ripristini dei blog remoti. Per effettuare il salvataggio del blog, basta cliccare Backup Now e decidere se conservare una copia di tutto il blog, del solo database o delle sole cartelle di temi, plugin e upload. A operazione terminata, il backup pu essere scaricato tramite il link Download oppure recuperato con il pulsante Restore.

NOTA

Fig. 5: ManageWP consente una gestione centralizzata anche per i plugin e i temi

CLONE SITE: DA UN HOSTING AD UN ALTRO!


In ManageWP assolutamente interessante la funzionalit Clone site, che consente di clonare o spostare un blog da un servizio di hosting a un altro senza fatica, seguendo pochi passaggi. Infatti, basta scegliere un blog dallelenco proposto e cliccare su Next, indicare un backup come sorgente della clonazione o effettuarne uno aggiornato con Take a New snapshot e cliccare nuovamente su Next (Fig. 8). Indicare tutti i dati del servizio hosting di destinazione e dare il via alla clonazione con il pulsante Next: ManageWP inizier a copiare il blog da un sito allaltro, senza perdere nulla. Sul sito di destinazione deve comunque essere disponibile uninstallazione di WordPress gi funzionate.

e Themes presenti su ogni voce dellelenco Site. Con il primo si pu visualizzare quali plugin sono installati per quel determinato blog, agendo eventualmente anche sul loro stato di attivazione. Con il secondo pulsante, invece, si verifica quale tema attualmente installato. In Plugins presente il pulsante Add new plugin, che permette di installare una nuova estensione al blog ed, in modo speculare, anche in Themes presente il tasto Add new theme, con cui caricare un nuovo tema o cercarne uno adatto fra quelli preinstallati, raggiungibili dalle voci Search, Featured, Newest e Recently Updated. Attenzione per, perch tutte le operazioni svolte da questi pannelli riguarderanno solo ed esclusivamente il blog prescelto

STRUMENTI AMMINISTRATIVI
ManageWP offre ai suoi utenti una serie di utili strumenti che permettono di gestire al meglio il servizio. Le funzioni pi importanti si raggiungono attraverso

Fig. 8: La funzione Clone site consente di clonare o spostare un blog da un servizio di hosting a un altro

Fig. 6: Il Backup/Restore serve per avere una copia di salvataggio dellintero blog o di sue parti

LA GESTIONE CENTRALIZZATA DEI BLOG


ManageWP permette una gestione centralizzata di differenti blog, anche se non tutte le funzionalit esplicabili su un blog possono essere concentrate: ad esempio, permangono suddivise i sistemi di controllo ed editing delle categorie, dei tag e dei commenti, alle quali bisogna accedere singolarmente da ogni blog in elenco, usando i pulsanti Categories, Tags e Comments (Fig. 7), con la speranza che nelle prossime edizioni dellapplicazione ManageWP anche queste caratteristiche possano essere gestite in modo unificato.

Fig. 7: La gestione dei commenti avviene ancora su singolo blog e non in modo centralizzato

88 / Settembre 2011 38

http://www.ioprog rsa m m o . i d a Wordpre s : l a g u i t

www.punto-informatico.it

Dallinstallazione alluso 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.

www.punto-informatico.it

Potrebbero piacerti anche