Approfondimenti tematici Wordpress · cdrom.ioprogrammo.it WORDPRESS 3.0 TUTTE LE NOVITÀ WORDPRESS...

Wordpressla guida

Passo passo, le principali funzioni

del più famoso CMS opensource

per la gestione del tuo blog

Approfondimenti tematiciApprofondimenti tematici

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

Wordpress: la guida

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 . . . . . . . . . . 9I 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 . . . . . . . . . . . . 13I widget di Wordpress sono gli strumenti ideali per aggiungere ogni tipo di funzionalità ai propri siti: vediamo come creare un’agenda di appuntamenti utilizzando gli stessi e google calendar

integrare paypal nel tuo sito o blog . . . . . . . 20Avere 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Grazie 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 . . . . . . . . . . . . . . . . . . . . . . 32In 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36Come 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

Wordpress : la guida 4

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

http://www.ioprogrammo.it 28 / Agosto 2010

La 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 final-mente aggiunta una nuova gestione di menu e tasso-nomie e, grandissima innovazione, i siti non saranno più composti unicamente da post e pagine: sarà pos-sibile creare “custom post” (tipi di articoli) persona-lizzati. 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 sim-patica 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.

INSTALLAZIONE Esamineremo molte di queste novità nel corso dell’ar-ticolo, ma partiamo dal setup della nostra macchi-na di test. Scaricate l’ultima versione disponibile di

Wordpress a questo indirizzo http://wordpress.org/download/nightly/ (oppure prendete quella presen-te 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/): l’installazione di Apache, PHP e MySQL è semplicissima: un piccolo menu in traybar vi aiuterà a gestire il vostro server locale. L’installazione di Wordpress è altrettanto semplice, come da tradi-zione. Create un database vuoto e seguite il wizard di installazione. Ecco la prima novità, piccola ma rilevante: possiamo ora scegliere lo username dell’ac-count di amministrazione, aumentando la sicurezza del nostro CMS. La dashboard non cambia molto rispetto alle versioni precedenti, quindi non dovreb-

be essere un problema muovervi tra i menu: non è scopo di questo articolo trattare l’uso 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 un’occhiata alle novità più rilevanti!

I NUOVI MENU Una delle più grosse limitazioni delle versioni prece-denti di Wordpress riguardava la gestione dei menu: le funzioni wp_list_pages() o wp_menu_page() si Fig. 1: Il menu di WampServer su Windows XP

REQUISITI

Conoscenze richiestePHP, HTML, CSS, Apache

SoftwareUn’installazione di PHP, Database MySQL

Impegno

Tempo di realizzazione

❑ CD ❑ WEBwp3.rar

cdrom.ioprogrammo.it

WORDPRESS 3.0 TUTTE LE NOVITÀWORDPRESS SI AGGIORNA ALLA VERSIONE 3.0, PORTANDO MOLTE NOVITÀ. SCOPRIAMO PASSO PASSO COME INSTALLARLO E COME APPROFITTARE DELLE NUMEROSE INNOVAZIONI INTRODOTTE: E SE ORA FOSSE MEGLIO DI JOOMLA COME CMS?

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

5 Wordpress : la guida

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

Agosto 2010 / 29 http://www.ioprogrammo.it

NOTA

GLI HOOK IN WORDPRESSWordpress, sin dall’inizio, ha fornito agli sviluppatori moltissimi hook (actions e filters per la precisione), adatti allo sviluppo di nuove funzionalità (attra-verso i plugin) o alla per-sonalizzazione “estrema” di temi. Potete trovare una lista completa degli hook disponibili in Wordpress 2.9 (la versione 3.0 non è ancora stata rilasciata ufficialmente) all’indirizzo http://adambrown.info/p/wp_hooks/version/2.9

limitavano a mostrare l’elenco delle pagine presenti all’interno del sistema al massimo aggiungendo un elemento “home” e ordinando e formattando la lista di pagine ritornate secondo criteri impostati dallo sviluppatore.Con Wordpress 3.0 cambia tutto: è stato integra-to all’interno un editor visuale per i menu che vi permetterà di assegnare ciascun menu creato alla sua location (vedremo dopo cosa significa) e di 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.

Vediamo ora come rendere i nostri temi compatibili con questa funzionalità. Per prima cosa registriamo all’interno del template i menu che vogliamo utiliz-zare. 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’ ) );

}

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 all’hook di ini-zializzazione la funzione registra_menu(). Gli hook in Wordpress sono appunto “agganci” a determi-

nati momenti dell’esecuzione del nostro software in cui possiamo chiamare funzioni che eseguono istruzioni PHP. Una volta registrati i menu neces-sari, questi compariranno come caselle da riempire all’interno dell’editor visuale. Per richiamarli all’in-terno del nostro tema basterà invocare la funzione wp_nav_menu() passando i parametri più adatti alla visualizzazione nel nostro tema.Chiamando la funzione senza argomenti verrà ritornato e stampato il primo menu da noi crea-to. 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’)

);

Il menu chiamato “secondo” sarà visualizzato come una lista non ordinata <ul> all’interno di un con-tainer con classe css menu-header: il visualizza-tore esplorerà il menu in tutta la sua profondità (parametro depth uguale a zero). Fate riferimento al codex all’indirizzo http://codex.wordpress.org/Template_Tags/wp_nav_menu per la lista com-pleta 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 necessa-rio registrare i menu utilizzando le funzioni viste in precedenza.

Fig. 3: Un menu creato con l’editor visuale: ecco come viene visualizzato in TwentyTen

Fig. 4: I quattro menu che abbiamo registrato all’interno del nostro tema




TASSONOMIE PERSONALIZZATEC’erano una volta i tag: parole associate agli articoli di un blog che ne definivano sommariamente il contenuto: se un post ad esempio parla di automo-bili FIAT è possibile che i tag ad esso associati siano fiat, automobili, nuovo modello, ecc… Le tagcloud sono una delle più efficaci rappresenta-ziono grafiche dei tag e sono costituite dai tag stessi mostrati con font tanto più grandi quanto il tag è maggiormente utilizzato.In Wordpress 3.0 si va oltre il concetto di tag passan-do al concetto di tassonomia. Wikipedia definisce la Tassonomia come la classificazione gerarchica di concetti, e il principio stesso della classificazione.

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 l’hanno 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 gerar-chica, dove possiamo creare nostre tassonomie, composte a loro volta da tag.Per creare una nostra tassonomia procediamo come per i menu: registriamo la nostra tassonomia e questa comparirà nel pannello di amministrazio-ne di Wordpress. Pensiamo ad esempio ad un blog che parla di film. Possiamo creare la tassonomia “Attori” e creare tag ad essa appartenenti che non sono altro che gli attori che vi hanno preso parte.

add_action( ‘init’, ‘tassonomia_attori’);

function tassonomia_attori() {

register_taxonomy(

‘attori’,

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 nell’articolo).

Come potete vedere in figura, è stata creata un’ap-posita 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 (all’inter-no del loop Wordpress) la chiamata alla funzione get_the_term_list( $post->ID, ‘attori’); per recupera-re tutti i tag per la tassonomia “attori” legati a quel particolare post. Facile, no?

Per cosa possiamo usare le tassonomie persona-lizzate? Pensate ad un catalogo di abbigliamento online magari associato ad uno dei tanti plugin che trasformano Wordpress in un sistema di ecommer-ce come WP-ecommerce http://wordpress.org/extend/plugins/wp-e-commerce/. Potete crea-re diverse tassonomie (colori, taglie, stile, tessuto, ecc…) da assegnare a ciascun prodotto per creare il vostro catalogo come più vi piace.

NOTA

WORDPRESS E BUDDYPRESS

Wordpress è il sistema alla base di alcuni dei più

famosi blog italiani e stra-nieri. La sua semplicità ne ha fatto lo strumento idea-le per creare sistemi multi-blog in pochissimo tempo.

BuddyPress (http://bud-dypress.org/) invece è un altro prodotto Automattic composto da una serie di plugin per Wordpress che permettono a Wordpress

di diventare un social net-work a tutti gli effetti!

Fig. 5: Un esempio di tagcloud

Fig. 6: La tassonomia “attori”

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


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

Agosto 2010 / 31 http://www.ioprogrammo.it

POST PERSONALIZZATIWordpress 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 dell’articolo 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 denomina-zione. A cosa servono i custom post? A moltissime cose: possiamo trasformare il nostro blog in un sito di annunci immobiliari ad esempio, creando un 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 “specia-li”, 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à all’hook “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 nume-ro molto elevato di parametri. L’array 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 per-mettono di impostare come i nostri podcast saran-no 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 comportar-si 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 organizza-te gerarchicamente). L’array 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 visua-lizzati nella home del nostro blog, se non verranno richiamati esplicitamente nel template o nel menu (nell’immagine potete vedere il widget creato auto-maticamente 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 l’utilizzo delle label personalizzate




L’AUTORE

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

nell’ambiente web italiano.

sto www.mioblog.it/?post_type=podcast&p=1, dove post_type è il nome del custom post creato e il parametro p è l’id dell’oggetto.In realtà manca ancora “un pezzo” importante del nostro custom post: come si fa ad aggiungere campi

personalizzati al nostro podcast? Aggiungiamo delle azioni sempre in functions.php, possiamo aggiun-gere la durata del podcast ad esempio (possiamo eventualmente calcolarla in maniera dinamica) o l’autore del podcast (recuperato attraverso l’oggetto $post di Wordpress)

add_action(“manage_posts_custom_column”,

“colonne_custom”);

add_filter(“manage_edit-podcast_columns”,

“colonne_podcast”);

function colonne_podcast($columns)

{

$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;

}

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

portando Wordpress al di fuori del classico ambito di “cms per blog” per realizzare qualunque sito vi possa venire in mente in tutta semplicità.

GESTIRE IL MULTIBLOG Come abbiamo già detto all’inizio dell’articolo, 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à un’installazione 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 un’installazione sin-gola di Wordpress 3.0 in una “multipla” con un tool apposito che verrà rilasciato prossi-mamente da Wordpress.org. La procedura di installazione è assolutamente semplice anche in questo caso. Prima di cominciare l’installazione aggiungete la riga :

define(‘WP_ALLOW_MULTISITÈ, true);

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 un’occhiata alle novità più impor-tanti 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à d’uso, estrema personalizza-zione 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 nell’offrire un prodotto completo, moderno ed estremamente personalizzabile.

Francesco Napoletano

Fig. 9: I nostri custom post nell’editor visuale del menu

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


Wordpress: la guidaI Custom Post Types di WordPress 3.0

http://www.ioprogrammo. i t 36 / Febbraio 2011

Conoscenze richieste

Buona conoscenza di PHP; buona conoscenza di WordPress

Software

Web server con Php5 e MySQL, in ambiente *nix. In locale è con-sigliato il pacchetto XAMPP, scaricabile all’indirizzo http://www.apachefriends.org/it/xampp.html

Impegno


❑ CD ❑ WEBwp_custom_post_types.rarcdrom.ioprogrammo.it

POST PERSONALIZZATI CON WORDPRESSI 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

Una 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.

I CUSTOM POST TYPESIl termine può trarre in inganno: non si tratta solo di post, ma di tipi di contenuto strutturati in base alle specifiche esigenze dell’utente. L’istallazione 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.Nell’impostazione di questo articolo, abbiamo pensato di

proporre ai lettori un archivio di gruppi musicali con le rela-tive 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 associa-re 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 TYPESAttualmente, per creare nuovi tipi di post, sono percorribili due strade: ricorrere ad uno dei plug-in disponibili gratui-tamente nella repository o integrare il file functions.php del template corrente con il codice necessario (forse preferibile dal programmatore). Nel nostro sito discografico avremo 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(); }

WEB 2.0 I Custom Post Types di WordPress 3.0


Wordpress: la guida I Custom Post Types di WordPress 3.0

Febbraio 2011 / 37 http://www.ioprogrammo. i t

All’avvio di WP viene invocata la funzione register_groups(). All’interno di questa funzione vengono generati due array: il primo ($labels) provvede all’assegnazione delle etichette che vengono visualizzate nel pannello di amministrazione e costituisce uno degli elementi del secondo array; $args impo-sta una serie di parametri che stabiliscono il funzionamento del tipo di post. Per una lettura dettagliata degli argomenti del secondo array, rinviamo al codex (http://goo.gl/tJxCe); qui ci soffermiamo solo sull’argomento supports. Questo permette di definire gli elementi del form che appariranno nel pannello di amministrazione, in fase di inserimento e modifica dei contenuti. Nel nostro primo “custom post type” saranno attivi i campi del titolo, l’editor del testo, il link per l’inserimento dell’immagine di anteprima, il campo dell’estratto del testo. Una volta definiti i valori degli elementi degli array, la funzione register_post_type(‘group’,$args) com-pleta 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 funzio-ne flush_rewrite_rules().

REGISTRARE I CUSTOM FIELDSUna 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 l’anno 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 }

La funzione add_meta_box() aggiunge il campo year. Gli argomenti che questa accetta impostano l’ID del campo, il titolo, il nome di una funzione di callback, il tipo di post cui associare il campo, l’area 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 TAXONOMIESSecondo la stessa logica, registriamo le tassonomie del nostro tipo di contenuto. Nel nostro esempio registriamo il genere cui si ispira l’artista (o la band):

add_action(‘init’, ‘register_custom_taxonomies’);

function register_custom_taxonomies(){

register_taxonomy(“Genres”, array(‘group’),

array(‘hierarchical’ => true, ‘label’ => “Genres”,

‘singular_label’ => “Genre”, ‘rewrite’ => true)); }

Le tassonomie vengono registrate all’avvio 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 tasso-

nomia• un array con una serie di parametri aggiuntivi (per l’elenco

di parametri, rinviamo al codex: http://goo.gl/Qte64)

Apriamo ora il pannello di amministrazione e diamo un’oc-chiata alla scheda “New Group”. Noteremo un box laterale che ci permetterà di inserire nuovi termini, esattamente allo stesso modo delle categorie dei normali post.

IL SALVATAGGIO DEI DATIProvvediamo 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’]); }

A questo scopo utilizziamo l’hook save_post per invocare la nostra funzione save_group_meta(). Qui la variabile glo-bale $post ci fornisce l’ID del contenuto corrente. Questo viene passato come primo argomento della funzione upda-te_post_meta(), insieme alla chiave e il valore del “custom field”. Ora tutto è pronto per l’inserimento dei dati. Possiamo cominciare ad inserire le nostre band preferite (attenti, però: ancora non possiamo vederle nel front-end).

AGGIUNGIAMO GLI ALBUMUna volta definito il tipo Group, possiamo passare a lavorare sul tipo Album. Le funzioni di WP necessarie sono esatta-

REQUISITI DI SISTEMAPer provare le feature di WordPress di cui abbiamo parla-to in queste pagine, consigliamo fortemente di utilizzare sistemi *nix, dato che sono diverse le incompatibilità rilevate in ambiente Windows. L’elenco dettagliato dei requisiti di sistema è disponibile all’in-dirizzo http://codex.wordpress.org/Hosting_WordPress.

NOTA

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

AVVERTENZAIl 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.

NOTA

WEB 2.0I Custom Post Types di WordPress 3.0


Wordpress: la guidaI Custom Post Types di WordPress 3.0


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(); }

Registriamo, poi, la tassonomia Genres anche per il tipo Album, integrando semplicemente il codice precedente:

add_action(‘init’, ‘register_custom_taxonomies’);

function register_custom_taxonomies() {

register_taxonomy(“Genres”, array(‘group’,’album’), ...}

La funzione register_custom_taxonomies() è la stessa utilizza-ta per registrare le tassonomie del tipo Group. Per associare la tassonomia anche al tipo Album, ci siamo limitati ad aggiun-gere l’ID album all’argomento 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’); }

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

}

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

generare un selectbox che renda agevole il lavoro di chi inserisce i dati. Il selectbox, infatti, fornisce l’ID e il nome del gruppo e non consente possibilità di errore nell’associazione degli album agli artisti. Oltre al campo Artist, creiamo un campo per l’etichetta discografica con un normale textbox. E infine salviamo i dati:

function save_album_meta(){

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’]); }

I TIPI DI CONTENUTO DELLA HOME PAGELe impostazioni predefinite di WP non prevedono la visualiz-zazione 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; }

Noterete subito che non utilizziamo più la funzione add_action(), che aggancia un’azione 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. L’hook pre_get_posts viene attivato prima dell’esecuzione della query principale.Dunque, un attimo prima del caricamento dei dati, viene verificata la pagina richiesta dall’utente: se questi invoca la home page, la nostra funzione ridefinisce la query aggiun-gendo, 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 METADATIIn home page, come abbiamo visto, andranno sia i normali post che i nuovi contenuti del tipo Group. Sarebbe oppor-tuno, 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’

NOTA

NOTA

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/custom-post-type-ui/) e il “Simple

Custom Post Type Archives” (http://wordpress.org/extend/

plugins/simple-custom-post-type-archives/).

CHILD THEMESQuando 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, all’in-

dirizzo http://codex.wordpress.org/Child_Themes

WEB 2.0 I Custom Post Types di WordPress 3.0


Wordpress: la guida I Custom Post Types di WordPress 3.0


=> ‘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, man-deremo a video l’anno di costituzione del gruppo (o di pubblicazione dell’album), prelevando il valore del “custom field” year: get_post_meta($post->ID, ‘year’, true). Subito dopo impostiamo una nuova query, con una nuova istanza dell’oggetto WP_Query. L’array 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, cerchia-mo tutti gli album dell’artista 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. All’interno della div.entry-utility aggiungiamo:

<p>Genres: <?php the_terms( $post->ID, ‘Genres’, ‘’,

‘, ‘, ‘’ ); ?></p>

VISUALIZZARE GLI ARCHIVIAbbiamo visto che non ci sono grandi difficoltà nell’ag-giungere un tipo di post alla home page. Purtroppo, però, l’attuale versione stabile di WP, la 3.0, non con-sente la visualizzazione degli archivi per “custom post type”. Per aggirare l’ostacolo, le soluzioni sono due: o si attende con pazienza il rilascio della versione stabile di WP 3.1 (al momento in cui scriviamo è disponibile la RC1), oppure si opta per una soluzione di compro-messo: si crea un template pagina in cui modificare il loop predefinito e vi si associa una pagina con lo stesso nome del tipo di post. Per prima cosa, duplichiamo il file page.php del tema installato e rinominiamo la copia in page-group.php. Cambiamo, poi, l’intestazione del file come segue:

/**

* Template Name: Group custom post type

* @package WordPress

* @subpackage Twenty_Ten

* @since Twenty Ten 1.0

*/

Prima del Loop, infine, impostiamo una nuova query:

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

Secondo la stessa logica, possiamo creare un nuovo tem-

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ù pre-ciso. 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 lavo-rare su WP 3.1 (annunciato nel giorno di Natale in questo post http://goo.gl/KCUjC), allora le difficoltà saranno deci-samente minori. Per gestire perfettamente la visualizzazio-ne degli archivi, basterà modificare la funzione di callback invocata dall’hook 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; }

In pratica, abbiamo semplicemente modificato la con-dizione che verifica la pagina corrente: if (is_home() || is_archive()). Così com’è, però, in WP 3.1 questo codice genera l’errore “Warning: Illegal offset type in isset or empty in ...”. Per risolvere il problema, basterà aggiun-gere il “conditional tag” is_admin():

if ( (is_home() || is_archive()) && !is_admin() ){ … }

Ora c’è proprio tutto per registrare tipi di post e tasso-nomie anche in WordPress 3.1.

Carlo Daniele

RIFERIMENTISono innumerevoli le risor-se online su WordPress. Nell’impossibilità di elencarle tutte (o solo una piccola parte), consigliamo di partire dalla documentazione ufficiale, all’in-dirizzo 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

NOTA

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

WEB 2.0I Custom Post Types di WordPress 3.0


Wordpress: la guidaLe Widgets API di WordPressWEB 2.0 Le Widgets API di WordPress

http://www.ioprogrammo.it 26 / Gennaio 2011

Nell’articolo 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 all’infi-nità di temi esistenti. Tuttavia, sviluppare applicazioni all’interno 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 svi-lupparle come plug-in.Un plug-in, dunque, è un’estensione indipendente dal tema, in grado di manipolare in modo autonomo i dati del database, di prelevare dati da origini esterne per importarli all’interno 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 all’interno delle pagine di un qualsiasi sito “proudly powerd by WordPress”.

I WIDGET DI WORDPRESSIn sostanza, un widget è una piccola applicazione che esegue delle operazioni e genera un output HTML in un’area determinata della pagina, definita “widget area”. L’installazione base di WordPress porta con sé una decina di widget che offrono le principali funzio-ni 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 data-base, all’accesso a servizi esterni, come Twitter, Flickr o uno dei mille servizi di Google. Molti sono disponi-bili 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 neces-sari: 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.

LA STRUTTURA DI UN PLUG-INUn plug-in si compone di uno o più file .php, più eventuali script JS e fogli di stile, e trova collocazio-ne nella cartella wp-content/plugins dell’istallazio-ne di WordPress. Qualora vi sia un unico file .php, questo andrà denominato come nome-plugin.php.

REQUISITI

Conoscenze richiesteBuona conoscenza di PHP e Wordpress

SoftwareWeb server con Php5. In locale è consigliato il pacchetto XAMPP

Impegno


❑ CD ❑ WEBWPwidg.rar

cdrom.ioprogrammo.it

UTILIZZARE I WIDGET DI WORDPRESSI WIDGET DI WORDPRESS SONO GLI STRUMENTI IDEALI PER AGGIUNGERE OGNI TIPO DI FUNZIONALITÀ AI PROPRI SITI: VEDIAMO COME CREARE UN’AGENDA DI APPUNTAMENTI UTILIZZANDO GLI STESSI E GOOGLE CALENDAR

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


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

Gennaio 2011 / 27 http://www.ioprogrammo.it

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 assume-rà lo stesso nome. Il plug-in che svilupperemo avrà lo scopo di offrire all’utente 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à pos-sibile attivare il widget trascinandolo nella sidebar desiderata e impostando i relativi parametri di configurazione.

Partiamo con un esempio semplice e ipotizziamo un widget composto da un solo file: gcal_events_list.php. Il plug-in permetterà all’amministratore di impostare solo il titolo del widget, mentre visualiz-zerà all’utente un messaggio di saluto. Subito dopo presenteremo un esempio più complesso.Innanzitutto, bisognerà inserire nel file principale (nome-plugin.php) un’intestazione che indichi a WordPress di cosa si tratta. L’intestazione va inseri-ta all’interno dei simboli di commento:

<?php

/*

Plugin Name: GCal Events List

Plugin URI: http://digitaladoptive.wordpress.com/gcal-

events-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/

*/

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:

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”);’));

Per creare un widget sono necessarie solo quattro funzioni. La prima, gcalEventsList(), è il costrutto-re di classe; le altre hanno lo scopo di mandare a video il widget nel front-end (funzione widget()), di salvare correttamente le impostazioni dell’utente (funzione update()), di generare il form delle impo-stazioni del widget nel back-end (funzione form()).Una volta creato il widget, bisognerà aggiungerlo all’elenco dei widget già presenti. A ciò provvede il metodo add_action(), che “aggancia” una funzione ad un’azione specifica. Nel nostro esempio, l’azione è widgets_init. La funzione generata da create_fun-ction(), infine, registra il widget (return register_widget(“gcalEventsList”);). L’impalcatura è pronta.

CREIAMO IL WIDGETLa prima delle funzioni del listato precedente è il costruttore della classe gcalEvetsList. Questa prov-vede 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);

}

La funzione $this->WP_Widget accetta tre argomen-ti: un ID che individua univocamente il widget, il nome del widget visualizzato nel pannello di ammi-nistrazione, infine due array di parametri aggiunti-vi, $widget_options e $control_options. Nell’esempio abbiamo passato solo il primo array con l’elemento description (per i dettagli sulla classe WP_Widget, rinviamo alla documentazione online, all’indirizzo http://goo.gl/SpGus). Ora il nostro widget esiste e possiamo già testarlo. Salviamo il

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

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 crea-zione di un plug-in. Il fra-mework di WordPress e la Widget API forniranno tutto ciò di cui si ha bisogno.




NOTA

LOCALIZZAZIONEPer la localizzazione delle

installazioni, WordPress utilizza i file .po e .mo,

come previsto dal progetto Gettext (http://www.gnu.org/software/gettext/get-text.html). Per verificare

l’esistenza della versione localizzata di una stringa

di testo, si utilizzano le funzioni __() e _e().

La prima restituisce la stringa tradotta (ovvia-mente, 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 dell’argomento, consiglia-

mo di partire dalle seguenti risorse:

• Writing a Pluginhttp://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

file gcal_events_list.php nella directory wp-content/plugins e apriamo il pannello di amministrazione: il plug-in è già disponibile per l’attivazione, anche se non è ancora in grado di eseguire alcuna ope-razione.

Se diamo, poi, un’occhiata all’elenco dei widget, troveremo anche il nostro “Gcal Events List”.

UN FORM PER LE IMPOSTAZIONILa funzione form() permette di creare un modulo in cui definire le impostazioni di funzionamento e visualizzazione del widget. Supponiamo di voler offrire all’amministratore del sito la possibilità di cambiare il titolo del widget. La funzione si svilup-perà 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

}

L’argomento $instance è un array contenente le impostazioni correnti del widget (vedremo tra un attimo come vengono generati gli elementi dell’ar-

ray). L’array di questo primo esempio è costituito da un solo elemento, il titolo del widget. Il valore dell’elemento $instance[‘title’] viene attri-buito alla variabile $title, dopo aver codificato alcu-ni caratteri speciali (per i dettagli, si legga http://codex.wordpress.org/Function_Reference/esc_attr). Viene poi creato il modulo che permette l’aggiornamento dei parametri di configurazione. I valori dei campi del form sono generati dai metodi get_field_id() e get_field_name() della classe WP_Widget e dal valore della variabile $title.

L’AGGIORNAMENTO DEI DATII parametri trasmessi dal form vengono archivia-ti 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;

}

La funzione aggiorna l’array $instance, restituendo-ne il valore corrente. Se l’istanza non è aggiornata correttamente, la funzione restituisce il valore boo-leano false. Gli argomenti della funzione sono due array: il primo contiene i nuovi parametri di configurazione; il secondo contiene i parametri memorizzati prima dell’aggiornamento dei dati. Questi sono archiviati nella tabella wp_options del database di WordPress.

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

Fig.4: Dal pannello di amministrazione è possibile aggiungere il widget alla sidebar e impostarne il titolo




VISUALIZZIAMO IL WIDGETL’ultima fase è la generazione dell’output HTML che viene visualizzato nel front-end del sito. A que-sto provvede la funzione widget():


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; }

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 dell’ar-ray: le variabili che utilizziamo qui sono $befo-re_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_fil-ters() 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 fun-zionante. Un messaggio di saluto, però, è davvero poco: bisogna creare un widget che aggiunga valore al sito.

UN ELENCO DI EVENTI DAL GOOGLE CALENDARIl nostro obiettivo è quello di prelevare un elenco di eventi da un calendario pubblico e di visualizzarli

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, biso-gnerà solo integrare le funzioni widget(), update() e form(). Il costruttore di classe gcalEventsList() rima-ne lo stesso dell’esempio precedente.Cominciamo con il form. Nel pannello di ammini-strazione 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’]);

…

}

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>

…

Come sopra, il metodo get_field_id() restituisce l’ID del campo del form. Gli option button, inve-ce, assumono valori fissi (lastmodified e startti-me). L’attributo selected viene generato dinami-camente, in base alle impostazioni esistenti ($instance[‘orderby’]). Un altro campo del form stabilisce il numero massimo di elementi del feed che dovranno costituire la risposta della Data API:

<p>

<label for=”<?php echo $this->get_field_

id(‘maxresults’); ?>”><?php echo __(‘Max results’); Fig.5: Il primo widget di questo articolo mostra agli utenti un semplice messaggio di saluto

NOTA

LA LICENZA DEI PLUG-INLa maggior parte delle licenze con cui vengo-no rilasciati i plug-in di WordPress sono compa-tibili con la GPL2 (http://www.gnu.org/licenses/gpl-2.0.html). La compatibilità è richiesta come requisito per la pubblicazione nella repository delle estensioni. La licenza d’uso del plugin va riportata in testa al file principale del plug-in all’interno dei simboli di commento.




?>:</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>





…

</select>

</p>

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

All’archiviazione dei dati acquisiti provvede la fun-zione 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;

}

Niente da aggiungere rispetto all’esempio prece-

dente, se non che il numero degli elementi dell’ar-ray è decisamente superiore.

IL WIDGET A VIDEOPer completare lo script manca solo la funzione widget(), che, come abbiamo detto, genera l’output HTML:


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’]

);

…

Come prima, vengono estratti gli elementi dell’ar-ray $args per generare le variabili $before_wid-get, $after_widget. Qui si aggiungono $before_title e $after_title, che generano il codice HTML che racchiude il titolo del widget. Viene, poi, inizializ-zata la variabile $title e creato l’array $params, i cui elementi andranno a costituire i parametri da trasmettere alla Data API. Vediamo la seconda parte della funzione:

if(!empty($title)){

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;

}

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 funzio-ne viene invocata solo se è stato impostato l’ID 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?”;

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

NOTA

SUBVERSIONPer la pubblicazione delle

estensioni nella repository, è necessario utilizzare il

sistema di controllo versio-ni Subversion (SVN).

Una volta approvata la richiesta di pubblicazione

del plug-in, infatti, wor-dpress.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 proget-to, attraverso cui viene

registrata ogni modifica apportata ai dati presenti.

Grazie a questo sistema, è sempre possibile recupe-

rare le versioni precedenti dei propri dati o analizzare

le modalità in cui i dati stessi sono stati modificati

nel tempo. Per lavorare con Subversion è necessa-rio dotarsi di un Subversion

Client all’indirizzo http://subversion.apache.org/.

Per evitare di lavorare da prompt dei comandi, sono

disponibili anche delle comode interfacce grafi-

che, come TortoiseSVN per Windows (http://tortoise-

svn.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

all’indirizzo http://wor-dpress.org/extend/plugins/

about/svn/.




$params = “orderby=”. $params[‘orderby’]

. “&sortorder=” . $params[‘sortorder’]

. “&max-results=” . $params[‘max-results’]

. “&start-min=” . $params[‘start-min’]

. “&start-max=” . $params[‘start-max’];

Prima di tutto, vengono estratti i parametri che for-meranno 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>’;

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

AGGIUNGIAMO UN FOGLIO DI STILETrattandosi di resa a video di dati, è probabile che si avverta la necessità di adattare l’aspetto del wid-get al proprio tema: utilizzeremo, quindi, un foglio di stile. Prima di aggiungere il codice necessario, però, bisogna modificare la struttura del plug-in.

Questo dovrà essere collocato in una directory cui va assegnato il nome stesso del plug-in. All’interno 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

Vediamo, ora, il codice. Per importare in sicurez-za un file .css, WordPress dispone delle funzioni wp_register_style() e wp_enqueue_style(). Creiamo in gcal_events_list.php una nuova funzione add_sty-les() che registri e accodi il foglio di style all’header 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’);

}

}

All’interno del costruttore di classe aggiungiamo l’azione che associa la funzione add_styles() all’ “hook” wp_print_styles:

function gcalEventsList()

{

add_action(‘wp_print_styles’, ‘add_styles’);

…

}

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

RIFERIMENTIIl 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).

NOTA




Se nella directory wp-content/plugins/gcal_events_list/css esiste il foglio di stile, questo verrà prima registrato e poi accodato nell’intestazione del docu-mento. Ora sarà possibile agire dettagliatamente sulla visualizzazione dei dati, semplicemente aggiun-gendo le proprie istruzione al file css/gcel_style.css.

LA PUBBLICAZIONE DEL WIDGETOra 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 eco-nomico e professionale. Il luogo migliore per distri-buire un plug-in è la repository delle estensioni di WordPress (http://wordpress.org/extend/).

Per pubblicare un plug-in nella repository, lo svi-luppatore 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 collega-menti esterni, come un link “powered by”, senza l’esplicito consenso dell’utente;5. ogni plug-in deve essere accompagnato da un file readme.txt, secondo lo standard specificato all’indirizzo http://wordpress.org/extend/plu-gins/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 l’anteprima nel front-end.

Un plug-in destinato alla pubblicazione avrà, dun-que, una struttura appena più complessa di quan-to visto fino ad ora. Oltre al motore dell’applicazione (il file gcal_events_list.php del nostro esempio) e ad even-tuali 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 all’utente a comprendere il funzionamento dell’applicazione prima della sua installazione.

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 l’approvazione alla pubblicazione (ci vor-ranno 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

Fig. 8: La figura mostra il modulo attraverso il quale sottoporre il plug-in all’approvazione degli amministratori di wordpress.org

Fig. 9: La figura mostra la struttura del plug-in pronto per la pubblicazione

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

SUL WEB

DISTRIBUIRE UN PLUG-IN

Il “luogo” migliore per distribuire un plug-in è la

repository delle estensioni di WordPress: http://wor-

dpress.org/extend/)codex.wordpress.org/


Wordpress: la guida Utilizzare le PayPal API con PHP


❑ CD ❑ WEBwp_paypal.rarcdrom.ioprogrammo.it


PHP, MYSQL, HTML, possedere un account PayPal

Software

WordPress

Impegno


INTEGRARE PAYPAL NEL TUO SITO O BLOGAVERE 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

PayPal è 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 l’infrastruttura 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.

Se vedete il logo PayPal su un sito web potrete utilizza-re il vostro conto PayPal per pagare i prodotti in vendi-ta (o fare una donazione): sempre più siti, anche italia-ni, supportano PayPal: l’integrazione, 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 dell’articolo getteremo le basi per la creazio-ne di un carrello usando MySQL e PHP, integreremo PayPal all’interno 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.

CREIAMO IL NOSTRO CARRELLO PHPOgni sito di e-commerce che si rispetti mette a dispo-sizione degli utenti un carrello che permette di racco-gliere i prodotti da acquistare per poi inviare il paga-mento e l’ordine al gestore del sito.

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 perfetta-mente sviluppato.Quello che ci interessa veramente non è il funziona-mento in sé e per sé del carrello (infatti ci occupere-mo 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 quell’unica sessione utilizzando per l’appunto l’array superglobale $_SESSION.Quel che ci serve poi è una tabella contenente i pro-dotti da visualizzare all’utente: 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`)

)

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

Fig. 1: Il logo PayPal

Fig. 2: Il carrello del sito webedicola.it

WEB 2.0 Utilizzare le PayPal API con PHP


Wordpress: la guidaUtilizzare le PayPal API con PHP


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);

Abbiamo inserito 4 prodotti nel nostro database, ognu-no 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);

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’] . ‘ €’ . $row[‘prezzo’];

echo ‘ - <a href=”carrello.php?op=add&id=’.$row[‘id’].’”

>Aggiungi al carrello</a></li>’;

}

echo ‘</ul>’;

?>

Ecco fatto. Non si tratta nient’altro che di una query sul database che stampa una serie di link ai prodotti da aggiungere al carrello.L’operazione che faremo in carrello.php sarà quella di aggiungere all’array $_SESSION[‘carrello’] presente nella sessione utente (se non esiste verrà creato) l’id dell’elemento 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;

}

}

$_SESSION[‘carrello’] = $carrello;

Per completare il nostro carrello potrete aggiungere all’interno dello switch() che vedete tutte le altre ope-razioni di aggiornamento e update del carrello che riterrete necessarie.Fatta l’aggiunta 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à <strong>” . $value . “</strong>

Totale: <strong>” . ($row[“prezzo”] * $value) .

“€</strong><br />”;

$totale += ($row[“prezzo”] * $value);

}

echo “TOTALE: “ . $totale .”€”;

}

?>

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 dell’ordine è banale.

CARRELLI OPENSOURCE? OTTIMO, GRAZIE!Abbiamo appena visto come iniziare a creare il nostro carrello utilizzando PHP. Il nostro esempio non è ovvia-mente 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 un’attività 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

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

SUL WEB

WEB 2.0Utilizzare le PayPal API con PHP




di script per la gestione di carrelli basati su JavaScript o PHP, che senza “l’invadenza” di un completo siste-ma di e-commerce vi forniscono comunque tutte le funzionalità necessarie all’utilizzo 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 all’indirizzo http://simplecartjs.com/.Se volete invece qualcosa di più completo… Beh, pote-te dare un’occhiata alla sterminata schiera di sistemi e-commerce disponibili in Rete. Potete cominciare da Zen Cart http://www.zen-cart.com/ e per conclude-re dare un’occhiata ad OpenCart http://www.open-cart.com/ o al “mastodontico” Magento http://www.magento.com.

INTEGRIAMO PAYPAL NEI NOSTRI SITI WEBPayPal 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 all’indirizzo https://www.paypal.com/it/cgi-bin/webscr?cmd=_cart-facto-ry. 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>

Vi basterà inserire il codice HTML all’interno della pagina prodotto per visualizzare il pulsante “Aggiungi al carrello”. Una volta creati i pulsanti per ciascun pro-dotto è il momento di creare il pulsante “Visualizza Carrello”. PayPal vi proporrà di creare questo pulsante dopo ogni prodotto creato.

<form target=”paypal” action=”https://www.paypal.

com/cgi-bin/webscr” method=”post”>


<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!”>



</form>

Cliccando su questo pulsante l’utente 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 iden-tificativi dell’account 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 nes-sun 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=”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!”>



</form>

NOTA

SESSION HIJACKINGSe avete intrapreso la strada del “mi creo il mio carrello da zero”,

fate attenzione alla gestione delle sessioni utente: Il session hijacking (il furto dell’id di ses-

sione da parte di un estraneo) è un problema di sicurezza in cui

potreste incappare. Ogni sessio-ne utente infatti è dotata di un proprio id, che se non protetto

a dovere potrebbe essere sfrut-tato da un malintenzionato per

impersonare un utente legittimo della vostra piattaforma.

Fig. 3: Le varie opzioni disponibili sul sito PayPal



Wordpress: la guidaUtilizzare le PayPal API con PHP


Come potete vedere dall’immagine 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 compi-lare dei Wizard e poi inserire il codice HTML ottenuto all’interno delle nostre pagine web. E se volessimo qualcosa in più?

LE PAYPAL APIPayPal mette a disposizione un ricchissimo set di API che è possibile utilizzare usando l’apposito SDK che potete scaricare dal sito http://x.com. Fino ad oggi, per utilizzare PayPal all’interno 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 all’interno del nostro sito, senza dover “spe-dire” l’utente 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 un’occhiata a tutte le API disponibili. Tenete d’occhio le “Adaptive payments API”, le prime presentate ufficial-mente 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 paga-menti “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 l’SDK per il linguaggio PHP a questo indirizzo http://tinyurl.com/adapi. L’SDK 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 installa-zione PEAR installatelo con il comando:

pear install -f --alldeps XML_Serializer

Andando con il browser all’indirizzo della index.php del pacchetto, vedrete una pagina con cui potrete cominciare a prendere confidenza: il corposo docu-mento che trovate all’indirizzo https://cms.paypal.com/cms_content/US/en_US/files/developer/PP_AdaptivePayments.pdf può darvi sicuramente un’idea 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.

PAYPAL E WORDPRESSCome dicevamo ad inizio articolo, è facile poter inte-grare 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.

Per raggiungere il nostro scopo utilizzeremo qualcuno dei numerosi plug-in disponibili sul repository ufficiale di Wordpress che trovate all’indirizzo http://wordpress.org/extend/plugins/.Cominciamo dalle cose semplici: creare un widget di donazione PayPal per il vostro blog Wordpress è faci-lissimo. 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

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

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

WEB 2.0Utilizzare le PayPal API con PHP




blog. Il codice generato è quello che abbiamo già visto in precedenza, ma non dovrete preoccuparvi di loca-lizzarlo o effettuare altre operazioni: ci penserà PayPal Donations a mettere tutto “in ordine”.

WORDPRESS E PAYPALNon 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-com-merce 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 all’indirizzo http://phonk.it/24v, attra-verso il pannello di amministrazione del vostro blog.Compilate attentamente il pannello opzioni che tro-vate all’indirizzo 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 all’interno della sidebar, in modo da mostrare all’utente il carrello man mano che questo viene riempito. Una volta completati questi semplici passaggi possiamo creare il nostro post/scheda-pro-dotto: 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]

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

te personalizzare per aggiungere descrizione prodotto e prezzo. Nell’immagine 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 dell’indirizzo di spedizione se attiverete l’apposita opzione nel pannello di ammini-strazione del plug-in.

MONETIZZARE CONTENUTI USANDO PAYPALVolete 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/are-paypal/) 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 ammi-nistrazione è chiaro, vi basterà incollare il codice dei vostri pulsanti PayPal all’interno dei campi predisposti.

PER CONCLUDERENel corso di questo articolo abbiamo dato il via alla creazione di un carrello “tutto nostro” e abbiamo inte-grato PayPal all’interno 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 l’elaborazione delle transazioni con carte di credito solleva gli sviluppatori da tutta una serie di problemi e grattacapi non indifferenti. PayPal, poi, mette a disposizione dell’utenza 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

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

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 nell’ambiente web

italiano.

L’AUTORE



Wordpress: la guidaUn plugin per creare un calendario di eventi in WP

Marzo 2012 / 21 http://www.ioprogrammo. i t

USA JQUERY E LE GOOGLE MAPS API IN WORDPRESSGRAZIE 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


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


❑ CD ❑ WEBwp_jquery_gmaps.zipcdrom.ioprogrammo.it

In 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 stru-mento di business e un compagno � dato per chi opera nel mondo del web design. In questo articolo vedremo come estenderne le funzionalità, sviluppando un plu-gin 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.

I CUSTOM FIELDS DI WORDPRESSI dati di cui si compone un post di Wordpress sono il titolo, il contenuto, una o più categorie, uno o più tag. L’utente 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_postme-ta 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

controllo dei dati inseriti dall’utente. 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 amministra-zione un “custom meta box”, per godere di una gestio-ne avanzata dei custom eld.

I CUSTOM META BOX: VEDIAMO COSA SONOUn “post meta box” è un blocco di codice HTML visua-lizzato 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 permet-tono l’inserimento di dati aggiuntivi rispetto a quelli prede� niti. In pratica, un custom meta box è utilizzato

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

WEB 2.0Un plugin per creare un calendario di eventi in WordPress


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

http://www.ioprogrammo. i t 22 / Marzo 2012

NOTA

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 l’utente ha la possibilità di spostare la directory dalla sua

collocazione prede� nita.Maggiori info su http://codex.wordpress.org/Determining_

Plugin_and_Content_Directories

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 l’inserimento 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”, inse-ribile sia direttamente dall’utente, sia attraverso il geo-coder della Google Maps API. Il terzo campo ospiterà le coordinate geogra� che corrispondenti all’indirizzo, generate dinamicamente dalla Maps API. Questi dati, una volta inseriti, saranno memorizzati all’interno di tre custom � eld.

PRIMI PASSI CON I PLUGINUn plugin è una piccola applicazione che aggiunge funzionalità all’istallazione 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 spe-ci� 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 un’intestazio-ne, 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

*/

Dei dati inseriti, il solo Plugin Name è obbligatorio, in quanto permette a WP l’individuazione del plugin. Il nome deve essere, ovviamente, univoco. Le altre infor-mazioni 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:

defi ne( ‘IOP_DIR’, WP_PLUGIN_URL . ‘/’ . str_

replace(basename( __FILE__),””,plugin_basename(__

FILE__)) );

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

INSERIRE SCRIPT E FOGLI DI STILE IN WORDPRESSIl primo passo sarà quello di inserire le librerie. A tal � ne, WP fornisce la funzione add_action(), che aggan-cia una funzione ad un’azione. La funzione viene de� nita dallo sviluppatore, mentre l’azione viene ese-guita al veri� carsi di un determinato evento. La sintassi generica è la seguente:

<?php add_action( $tag, $function, $priority, $num_

args ); ?>

$tag è il nome dell’azione (o “action hook”), $function è la funzione di callback, $priority stabilisce l’importanza ai � ni dell’esecuzione della funzione, $num_args è il numero di argomenti passati alla funzione. È neces-sario caricare gli script solo quando l’utente 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 per-mettono 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 l’azione (“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’);

}

wp_enqueue_style accoda il foglio di stile. Il primo para-metro è l’ID, il secondo è la URL del � le: qui abbiamo inserito il tema di jQuery UI, “smoothness”. Ora inseria-mo 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’, ‘google-

maps-api’) );

}

L’installazione base di WP è già corredata delle libre-

WEB 2.0 Un plugin per creare un calendario di eventi in WordPress




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 (recupe-randola dal Google CDN) grazie a wp_register_script (si veda il codice allegato per le URL complete). L’ultimo 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.

COSTRUIAMO IL CUSTOM META BOXLe caratteristiche speci� che dei custom meta box ven-gono 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’

);

Gli elementi dell’array 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_fi elds = array(

array( ‘name’ => ‘Text box with datepicker’,

‘desc’ => ‘Event date’,

‘id’ => ‘iop_date_fi eld’,

‘type’ => ‘text’

),

array(

‘name’ => ‘Address’,

‘desc’ => ‘Event location’,

‘id’ => ‘iop_address_fi eld’,

‘type’ => ‘text’

),

array

(

‘name’ => ‘Lat Lng’,

‘desc’ => ‘Latitude and Longitude’,

‘id’ => ‘iop_latlng_fi eld’,

‘type’ => ‘text’));

Ora bisogna dire a WP quando è il momento di cari-care il meta box. Lo faremo grazie all’action 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’]

);

}

Oltre ai parametri memorizzati nell’array $iop_meta-box, alla funzione add_meta_box() viene passato il nome della callback iop_show_meta_box, che ha lo scopo di generare l’output HTML:

function iop_show_meta_box(){

global $post;

global $iop_fi elds;

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’ dell’array $iop_� elds:

$date_meta = esc_attr( get_post_meta($post->ID,

$iop_fi elds[0][‘id’], true) );

$address_meta = esc_attr( get_post_meta($post->ID,


$latlng_meta = esc_attr( get_post_meta($post->ID,


La funzione get_post_meta() accetta tre argomenti: l’ID 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_fi elds[0][‘id’]; ?>”>

<?php _e( $iop_fi elds[0][‘desc’] ); ?>

</label><br />

<input class=”widefat”

type=”text”

name=”<?php echo $iop_fi elds[0][‘id’]; ?>”

NONCE: NUMBER USED ONCEWordPress 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� ca-to ad ogni accesso. Informazioni dettagliate e riferimenti online si trovano su http://codex.wor-dpress.org/WordPress_Nonces

NOTA





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 nell’articolo. Il datepicker verrà

visualizzato quando l’utente farà click sul campo di testo associato e faciliterà le operazioni di inse-

rimento dati.È bene ricordare che il widget

datepicker richiede l’istallazione di un tema gra� co per funziona-

re. Per maggiori informazioni, si vedano http://jqueryui.com/

demos/datepicker/ e http://jqueryui.com/themeroller/

id=”<?php echo $iop_fi elds[0][‘id’]; ?>”

value=”<?php echo $date_meta; ?>”

size=”30” />

</p>

I valori degli attributi di label e input vengono assegnati grazie agli elementi dell’array $iop_� elds. Soltanto il valore dell’attributo value dell’elemento input viene assegnato in base al valore del custom � eld corrispon-dente 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 nasco-sto necessario alla trasmissione in sicurezza dei dati:

<div id=”canvas”></div>

<?php

echo ‘<input type=”hidden”

name=”iop_nonce_fi eld”

value=”’ . wp_create_nonce(‘iop_nonce’) . ‘” />’;

}

Il “Custom meta box” è pronto, ma ancora non fun-zionante. Bisogna dire a WP come memorizzare i dati inseriti dall’utente.

I CUSTOM FIELDS E L’ARCHIVIAZIONE DEI DATIAbbiamo generato il blocco HTML del meta box, ma questo è ancora inattivo. Ora l’utente 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 invo-cata quando l’utente salva il post:

add_action(‘save_post’, ‘iop_save_meta_box’);

L’action 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 ){


if ( !isset( $_POST[‘iop_nonce_fi eld’] ) || !wp_veri

fy_nonce( $_POST[‘iop_nonce_fi eld’], ‘iop_nonce’ ) )

return $post_id;

I successivi test veri cano un eventuale salvataggio auto-matico, oltre al livello di autorizzazione dell’utente cor-rente:

if( defi ned(‘DOING_AUTOSAVE’) && DOING_AUTOSAVE )

return $post_id;

if ( ‘post’ == $_POST[‘post_type’] ) {

if ( !current_user_can( ‘edit_page’, $post_id ) )

return $post_id;

}else{

if ( !current_user_can( ‘edit_post’, $post_id ) )

return $post_id;

}

Il passo successivo è il recupero dei dati eventualmen-te memorizzati nei custom � elds, e l’aggiornamento 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_

fi elds[0][‘id’], true);

$new_date_value = $_POST[$iop_fi elds[0][‘id’]];

if( $new_date_value && $new_date_value != $old_

date_value ){

update_post_meta( $post_id, $iop_fi elds[0][‘id’],

$new_date_value );

}elseif( ‘’ == $new_date_value && $old_date_value ){

delete_post_meta( $post_id, $iop_fi elds[0][‘id’],

$old_date_value );

}

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 dall’utente ($new_date_value). Se il nuovo valore esiste, e se è diverso dal valo-re 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 preceden-za, la funzione delete_post_meta elimina il custom eld corrispondente.

PERFEZIONIAMO LA UI CON JQUERYLa nostra impalcatura è pronta. Ora bisognerà sfruttare la potenza di jQuery per rendere davvero utile il plugin. La nostra prima preoccupazione sarà quella di utilizza-re 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.noConfl ict();

Il simbolo $ utilizzato da jQuery è un alias che sosti-tuisce la funzione jQuery. Se il namespace jQuery è senza dubbio univoco, l’alias $ può essere utilizzato da altri script. Con l’istruzione 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:





jQuery(document).ready(function($){

…

});

Tutto il codice eseguito all’interno della funzione di cal-lback 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_fi eld’).datepicker({

dateFormat: ‘yy-mm-dd’,

constrainInput: true,

gotoCurrent: true,

showAnim: ‘slideDown’

});

Basta la sola funzione datepicker() per ottenere il risul-tato mostrato in Fig. 3. I parametri passati alla funzione stabiliscono il formato dell’input, la forzatura del formato, la data prede� nita, l’animazione del calendario.

INDIRIZZO POSTALE E COORDINATE GEOGRAFICHEOltre al campo destinato alla data dell’evento, abbia-mo previsto un campo riservato all’indirizzo e un campo per le coordinate geogra� che.Il plugin darà all’utente la possibilità di inserire manual-mente l’indirizzo, oppure di cercare la località serven-dosi di una Google Map. Nel primo caso, per individua-re le coordinate, basterà inserire l’indirizzo e cliccare sul pulsante “Find”. Il servizio di geocoding della Maps API restituirà le coordinate che andranno a costituire il valore del secondo campo.

Nel secondo caso, la Maps API si occuperà di tutto, generando le coordinate e calcolando l’indirizzo più prossimo alla località individuata. Nel nostro meta box abbiamo predisposto la div#canvas, senza speci� car-ne le dimensioni. Il motivo è quello di evitare di fare dello spazio inutile nel caso in cui l’elaborazione degli script fosse disabilitata. Torniamo al � le iop-script.js e aggiungiamo:

jQuery(document).ready(function($){

…

$(‘#canvas’).css({height:’200px’,width:’100%’})

loadMap();

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 geo-codi� ca dell’indirizzo, il secondo per l’azzeramento dei dati:

$(‘<input type=”button” id=”iop_fi nd_location” … >’)

.insertAfter(‘#iop_address_fi eld’)

.click(function(){

geocode( $(‘#iop_address_fi eld’).val() );

});

$(‘<input type=”button” id=”iop_clear_location” … >’)

.insertAfter(‘#iop_fi nd_location’)

.click(function(){

map.setCenter(rome);

map.setZoom(4);

addMarker(rome);

$(‘#iop_address_fi eld’).val(‘’);

$(‘#iop_latlng_fi eld’).val(‘’);

});

});

Il pulsante viene inserito subito dopo il campo di testo destinato all’indirizzo, e gli viene associato un event handler che intercetta il clic e invoca la funzione geoco-de() (che de� niremo più avanti). Alla funzione viene passato, come argomento, l’indiriz-zo della località.Il secondo pulsante viene inserito in coda al primo. Al click dell’utente, la mappa viene centrata su una loca-lità prede� nita (in questo esempio Roma), viene impo-stato un basso livello di zoom e invocata la funzione addMarker() (vedremo dopo anche questa). In� ne, ven-gono svuotati i campi di testo. E ora tocca alla mappa.

UNA GOOGLE MAP PER LOCALIZZARE GLI EVENTIIl nostro script utilizza più di una funzione per l’in-serimento e la gestione della mappa. Alcune delle funzioni utilizzate accederanno alle stesse variabili, le quali dovranno, per questo, essere de� nite nel “global scope”:

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

GEOCODING E REVERSE GEOCODINGIl 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. L’operazione inversa, che traduce una coppia di coordi-nate geogra� che in un indirizzo comprensibile, viene de� nito “reverse geocoding”. Il riferimento online è all’indiriz-zo http://goo.gl/JXXdN

NOTA





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 l’evento, l’action hook viene

attivato e invia una chiamata ad una funzione di callback.

I “� lter hooks”, invece, permet-tono 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 dispo-nibili all’indirizzo http://codex.

wordpress.org/Plugin_APIUna risorsa non u� ciale, ma

incredibilmente utile, è il WordPress Hook Database, con-sultabile su http://adambrown.

info/p/wp_hooks

var map;

var markers = [];

var rome = new google.maps.LatLng(41.9012,12.4752);

var center = rome;

var geocoder = new google.maps.Geocoder();

Abbiamo ssato un oggetto GLatLng che utilizzeremo per centrare la mappa all’avvio 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 );

Abbiamo creato un “object literal”, contenente i para-metri di visualizzazione e generato una nuova mappa. Preleviamo poi le coordinate geogra che dal campo input#iop_latlng_� eld:

var coords = jQuery(“#iop_latlng_fi 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 );

Se esiste un valore nel campo di testo, vengono elimi-nati 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 l’azione dell’utente sulla mappa: google.maps.event.addListener(map, ‘click’,

function(evt)

{

revgeocode ( evt.latLng );

addMarker( evt.latLng );

jQuery(‘#iop_latlng_fi eld’).val( evt.latLng.lat() + ‘,’ +

evt.latLng.lng() );

});

}

Al clic dell’utente, viene prima invocata la funzione revgeocode(), che restituirà l’indirizzo postale parten-do 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_fi eld’).val( ll.lat() + ‘,’ + ll.lng()

);

}else{

jQuery(‘#iop_latlng_fi eld’).val( “Location not found”

);

}

});

}

Il metodo geocode accetta come argomenti un object literal di parametri (in questo caso vi è solo l’indirizzo 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 dell’operazione. 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 l’operazione inver-sa, ossia genera l’indirizzo 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_fi eld’).val( results[0].

formatted_address );

}else{

jQuery(‘#iop_address_fi eld’).val( “Address not

found” );

}

});

}

L’unica 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 indivi-duata sulla mappa. In ne, le funzioni che aggiungono ed eliminano i mar-ker dalla mappa:


Wordpress: la guida HTML 5 il nostro primo template fai da te per WP

http://www.ioprogrammo. i t 24 / Gennaio 2012

❑ CD ❑ WEBmediacinema.zipcdrom.ioprogrammo.it


HTML, CSS, PHP

Software

HTML editor, Browser aggiornati per l’HTML5

Impegno


CREARE UN TEMPLATE AD HOC PER WORDPRESSIN 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

Creare 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 (qual-cuno storcerà un po’ il naso) Blogger di Google.La diffusione dell’uno o altro CMS dipende sicuramen-te dalla reperibilità di informazioni, documentazione, esempi, forum e sopratutto da temi e plug-in pronti per l’uso che ci permettano di potenziare il nostro pro-getto oltre le opzioni “di serie”.

I TEMI, PER “CAMBIARE FACCIA” AL BLOGI temi (themes) o template (i nomi variano a seconda del CMS) sono uno dei punti focali della stragrande mag-gioranza 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 l’ipotesi di cre-arne uno noi appositamente. In questo articolo studie-remo 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 l’occorrenza sfruttando alcune peculiarità dell’HTML5 e CSS3) e infine montando il tutto come tema di WordPress. Iniziamo!

GESTIAMO IL MATERIALEAnzitutto cominciamo con una buona notizia: quan-do dobbiamo creare un tema (o convertire un pro-getto grafico, solitamente realizzato in Photoshop o Illustrator) possiamo fare più o meno come desideria-mo. 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.

Come soluzione abbiamo quindi previsto il seguente codice HTML:

<!DOCTYPE HTML>

<html>

<head>

<meta charset=”UTF-8”>

<title>Media Cinema WebSite</title>



<link href=”style.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

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

WEB 2.0 HTML 5 il nostro primo template fai da te per Wordpress


Wordpress: la guida

Gennaio 2012 / 25 http://www.ioprogrammo. i t

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

Come potete vedere, la struttura è abbastanza sem-plice. 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 dell’HTML5 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 l’intestazione del sito.

ORA OCCUPIAMOCI DELL’ASPETTO GRAFICOCommentare tutto il file CSS sarebbe eccessivo. Ci limi-teremo quindi ad analizzare alcuni aspetti importanti, tipici dell’ultima versione CSS3, o utili per WordPress.Anzitutto un CSS per template Wordpress dovrebbe avere all’inizio un blocco di commento che dia alcu-ne info sul tema, il nome dell’autore, 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

nel footer. Il tema è stato realizzato in HTML5 e CSS3.

Autore: Fabio Bernardi (www.faber04.com).

Version: 1.0

Author: Faber04

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

Tags: fixed width, one column, sidebar

*/

Abbiamo specificato il nome del tema, un link di riferi-mento dall’autore, 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’);

}

In alcuni casi abbiamo utilizzato un’altra importante novità dei CSS3: i gradienti.Come avete visto nell’immagine 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 WORDPRESSI 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 (soli-tamente una pagina chiamata functions.php).Prendiamo la pagina HTML della nostra demo, presen-te nella cartella “mediacinema” (main.html) e comincia-mo a dividerla in parti.

PARTIAMO DALLA TESTATATutto 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.All’interno dell’intestazione 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.

PER SAPERNE DI PIÙ: LA DOCUMENTAZIONE DI WORDPRESSPer quanto tutti i CMS siano particolarmente performanti, bisogna sempre avere ben pre-sente come lavora la piattafor-ma. A tal riguardo suggeriamo il seguente link: http://codex.wordpress.org.

SE A VISUALIZZARE L’HTML5 È INTERNET EXPLORER...Avendo utilizzato l’HTML5 si è reso necessario inserire una condizione che utilizzi un file JavaScript per forzare i brow-ser Internet Explorer 8 e 9 di Microsoft alla “comprensione” dei tag HTML5.

NOTA

NOTA

WEB 2.0HTML 5 il nostro primo template fai da te per WordpressHTML 5 il nostro primo template fai da te per WP

Wordpress: la guida

http://www.ioprogrammo. i t 26 / Gennaio 2012

L’intestazione diventerebbe quindi:

<!DOCTYPE HTML>

<html>

<head>

<meta charset=”<?php bloginfo(‘charset’); ?>”>

<title><?php bloginfo(‘name’); ?> <?php if ( is_

single() ) { ?> » Blog Archive <?php } ?> <?php

wp_title(); ?></title>



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

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.L’intestazione è 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) ser-vono a gestire il footer e la barra laterale del sito. Nel nostro footer abbiamo inserito alcune info staticamen-te, 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 con-siderare la pagina functions.php:

<?php

if ( function_exists(‘register_sidebar’) )

{

register_sidebar(array(

‘name’ => ‘Main Side Bar’,

‘before_widget’ => ‘’,

‘after_widget’ => ‘’,

‘before_title’ => ‘<h4>’,

‘after_title’ => ‘</h4>’,

));

}

if ( function_exists(‘register_sidebar’) ){

register_sidebar(array(

‘name’ => ‘Footer Widget’,

‘before_widget’ => ‘’,

‘after_widget’ => ‘’,

‘before_title’ => ‘<h4>’,

‘after_title’ => ‘</h4>’,

));

}

?>

Tramite queste due condizioni, non solo permettiamo l’inserimento di aree widget nelle pagine footer e side-bar, ma creiamo anche le aree correlate per la gestione dei widget nell’area amministrativa di WordPress.

Spostiamoci ora nella pagina footer.Per poter “inserire” un’area 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 l’utente abbia lasciata vuota l’area per i widget . Analizzando il file “sidebar.php” possiamo

NOTA

NOTA

NOTA

A PROPOSITO DI FONT Se siete interessati ad appro-

fondire il discorso riguardo all’uso di font specifiche tramite

CSS3, vi consigliamo la lettura di questo articolo presente su HTML5Today, un portale che affronta in maniera verticale

l’uso di HTML5 e CSS3: http://www.html5today.it/

tutorial/css3-fontface-tuoi-font-preferiti-sito

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 l’occorrenza: Ultimate

CSS Gradient Generator: http://www.colorzilla.com/

gradient-editor/

TESTARE L’HTML5 DEL PROPRIO BROWSER

Volete sapere quanti (e quali) caratteristiche dell’HTML5

supporta il browser che state utilizzando maggiormente?

HTML5Test: www.html5test.com

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

WEB 2.0 HTML 5 il nostro primo template fai da te per WordpressHTML 5 il nostro primo template fai da te per WP


Wordpress: la guidaHTML 5 il nostro primo template fai da te per WP

Gennaio 2012 / 27 http://www.ioprogrammo. i t

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>

<?php _e(“Recent Posts”); ?> </

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>’;

}

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

LE PARTI PRINCIPALIOra 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 l’evenienza a seconda che l’utente stia leggendo una pagina specifica, un post, oppure abbia effettuato una ricerca all’interno del sito. Queste pagine, salvo ecce-zioni particolari, sono solitamente tutte uguali.Basterà quindi crearne una per fare anche un semplice “copia&incolla”. Partiamo dalla “index.php”.All’inizio sicuramente servirà inserire l’header. Pertanto:

<?php get_header(); ?>

Così come alla fine della pagina avremo bisogno del footer e/o della sidebar:

<?php get_sidebar(); ?>

<?php get_footer(); ?>

In mezzo a questi due blocchi di codice dovremo inserire tutto l’occorrente per gestire pagine, post e quant’altro. Nel nostro caso, inoltre, la parte della side-bar 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 è l’home page, ecc... . Ovviamente scelte ed esigenze variano a seconda delle necessità del sito.Una volta completata la index come già detto, possia-mo 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:

• 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) all’inter-no 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 nell’elenco dei temi disponibili, potrà essere attivato e utilizzato tranquillamente.

PER ANDARE PIÙ VELOCIPer 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 pro-gramma, a pagamento, molto potente che permette di realizzare template non solo per WordPress, ma anche per Drupal, Joomla e Blogger partendo da layout pre-definiti e rimodellati ad hoc per le nostre esigenze.Se invece è solo un piccolo aiuto quello che state cercando, in rete è disponibile WordPress editor gene-rator: 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 l’occorrenza.

Fabio Bernardi

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 uffi-ciale 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

L’AUTORE

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

SUL WEB

WEB 2.0HTML 5 il nostro primo template fai da te per Wordpress


Wordpress: la guida xxxxGestione multipla dei siti gestiti da Wordpress

http://www.ioprogrammo. i t 86 / Settembre 2011

ECCO IL SUPER ADMIN PER WORDPRESSCOME 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

Molti utenti si trovano con la necessità di dover gestire più blog WordPress con-temporaneamente, 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 all’interno, 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 con-trollo che dia loro accesso a tutti i blog WordPress, indipendentemente dall’hosting sulla quale questi siano memorizzati. Una possibilità del genere esiste e si concretizza in ManageWP.

REGISTRAZIONE SEMPLICEChi lavora già con i blog WordPress e ne apprezza la facilità d’uso, 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

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 dell’inse-rimento, cliccare su Register e il servizio invierà una email all’indirizzo di posta elettronica segnalato, nella quale sono presenti i dati di autenticazione, ossia l’username scelto ed una password autogenerata. A questo punto bisogna digitare http://managewp.com/wp-login.php nella barra degli indirizzi del brow-ser, 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 BLOGAffinché i blog possano essere gestiti in modo cen-tralizzato 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 l’installazione del plu-gin 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 l’indirizzo del blog, il nome utente dell’amministratore e la sua password, per poi concludere l’operazione cliccando su Add Site. Il blog verrà aggiunto a ManageWP e com-parirà nella lista dei siti da gestire. Le medesime ope-razioni 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.Fig. 1: Per gestire un blog con ManageWP, è necessario installare nel blog il plugin Worker

NON SOLO CODICE Gestione multipla dei siti gestiti da Wordpress


Wordpress: la guidaxxxxGestione multipla dei siti gestiti da Wordpress

Settembre 2011 / 87 http://www.ioprogrammo. i t

FACCIAMO GRUPPO!Nell’elenco Site compariranno tutti i blog su cui è possibile operare. Prima di procedere oltre, è consi-gliabile 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 all’interno di un’unica 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 nell’uni-co campo di compilazione disponibile e premere su Add Group. Per aggiungere un blog al gruppo appena creato, individuare il blog dall’elenco Site, cliccare

su Add Group ed inserire il segno di spunta accanto al gruppo nella quale si vuole far confluire il blog. Ripetere poi l’operazione per ogni blog da associare ad un determinato gruppo.

PUBBLICAZIONI MULTIPLEDopo 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 pul-sante Create new post nel Control Panel. Le due moda-lità d’azione sono praticamente identiche: infatti, in entrambi i casi comparirà un pannello nella quale inserire il titolo, il testo, eventuali excerpt suppor-tati da particolari temi, i trackback, i custom field, le opzioni di discussione, le categorie di appartenenza ed i tag per l’indicizzazione del post, insomma tutti gli strumenti normalmente a disposizione nella console

WordPress classica. A queste funzionalità, ManageWP aggiunge la sezione Select Blogs, dalla quale l’utente può decidere su quali blog o gruppi pubblicare l’arti-colo 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 dell’editing, 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.

PLUGIN E TEMIA 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 installa-zione 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 l’installazione con un segno di spunta su Activate Plugins After Install e cliccare su Upload a file, per scegliere l’archivio zip da caricare (Fig. 5). Ora, indi-care se l’installazione deve avvenire per gruppo con un clic su Install By Group o scegliendo i singoli blog con un clic su Install By Blog: nell’uno e nell’altro caso bisogna spuntare il gruppo od i blog sui quali si vuole installare il componente. L’installazione avrà dunque inizio cliccando su Install. Al termine, i plugin od i temi voluti saranno correttamente installati su ogni blog indicato, senza che l’utente debba fare null’altro. Per visualizzare quali temi o plugin sono installati su ogni singolo blog, si possono usare i pulsanti Plugins

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 scom-pattare l’archivio compresso (disponibile sul CD allegato alla rivista) sul proprio spazio hosting e seguire la procedura guidata che si conclude in 5 passi; semplicità d’uso: grazie ad un pannello di amministrazione (dashboard o bacheca), localiz-zata 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 componen-ti, plugin e temi, che vengono poi resi disponibili gratuita-mente; 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.

NOTA

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

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

Fig. 4: Pubblicazione multipla: si possono scegliere i blog su cui pubblicare un post

NON SOLO CODICEGestione multipla dei siti gestiti da Wordpress


Wordpress: la guida xxxxGestione multipla dei siti gestiti da Wordpress

http://www.ioprogrammo. i t 88 / Settembre 2011

e Themes presenti su ogni voce dell’elenco 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 esten-sione 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 pre-installati, raggiungibili dalle voci Search, Featured, Newest e Recently Updated. Attenzione però, perché tutte le operazioni svolte da questi pannelli riguarde-ranno solo ed esclusivamente il blog prescelto

STRUMENTI AMMINISTRATIVIManageWP offre ai suoi utenti una serie di utili stru-menti che permettono di gestire al meglio il servizio.Le funzioni più importanti si raggiungono attraverso

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 un’altra uten-za 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 (nell’ordine: URL del blog, username e password di WordPress) e caricarlo utilizzando il pul-sante Upload a file. Questo permetterà di configurare al volo ManageWP, senza utilizzare la procedura Add New Site descritta all’inizio. L’unica accortezza da usare è di aver installato il plugin worker in ogni blog, prima dell’upload 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 scarica-to tramite il link Download oppure recuperato con il pulsante Restore.

LA GESTIONE CENTRALIZZATA DEI BLOGManageWP 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 con-trollo ed editing delle categorie, dei tag e dei com-menti, 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 dell’applicazione ManageWP anche queste caratteristiche possano essere gestite in modo unificato.

NOTA

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 dall’elen-

co proposto e cliccare su Next, indicare un backup come sorgen-te 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 all’altro, senza

perdere nulla. Sul sito di desti-nazione deve comunque essere

disponibile un’installazione di WordPress già funzionate.

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

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

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

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

NON SOLO CODICE Gestione multipla dei siti gestiti da Wordpress

www.punto-informatico.it

Dall’installazione all’uso dei post personalizzati, dai widget ai plug-in più usati, dai template ad-hoc fino alla realizzazione di un Super Admin per la gestione dei contenuti. Ecco la guida dedicata al più famoso CMS opensource per la gestione di blog: Wordpress. E in più, i tutorial per integrare il modulo Paypal nel tuo blog e usare jquery e Google Maps API.

Approfondimenti tematici Wordpress · cdrom.ioprogrammo.it WORDPRESS 3.0 TUTTE LE NOVITÀ WORDPRESS...

Documents

Transcript of Approfondimenti tematici Wordpress · cdrom.ioprogrammo.it WORDPRESS 3.0 TUTTE LE NOVITÀ WORDPRESS...