Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Wordpress
la guida
Passo passo, le principali funzioni del pi famoso CMS opensource per la gestione del tuo blog
Wordpress: la guida
Dallinstallazione alluso dei post personalizzati, dai widget ai plug-in pi usati, dai template ad-hoc fino alla realizzazione di un Super Admin per la gestione dei contenuti. Ecco la guida dedicata al pi famoso CMS opensource per la gestione di blog: Wordpress. E in pi, i tutorial per integrare il modulo Paypal nel tuo blog e usare jquery e Google Maps API. Questo approfondimento tematico stato pensato per chi desidera lanciarsi nel mondo del Web e vuole farlo in maniera professionale, imparando ad utilizzare una piattaforma che, nella sua semplicit disarmante, offre grandi potenzialit. Wordpress, nel suo essere facile da utilizzare, nasconde innumerevoli funzioni avanzate che posso fare da ago della bilancia nel decretare, o meno, il successo di un blog nellinfinito universo della blogosfera.
Wordpress 3.0, tutte le novit . . . . . . . . . . . . . . . 4 Wordpress si aggiorna alla versione 3.0, portando molte novit. scopriamo passo passo come installarlo e come approfittare delle numerose innovazioni introdotte: e se ora fosse meglio di Joomla come CMS? post personalizzati con Wordpress . . . . . . . . . . 9 I Custom Post Types di Wordpress 3 rendono il software un potente e completo CMS, adatto anche alla realizzazione di siti aziendali complessi. vediamo come sfruttare la nuova caratteristia per integrare tipi di dati con contenuto personalizzato utilizzare i Widget di Wordpress . . . . . . . . . . . . 13 I widget di Wordpress sono gli strumenti ideali per aggiungere ogni tipo di funzionalit ai propri siti: vediamo come creare unagenda di appuntamenti utilizzando gli stessi e google calendar integrare paypal nel tuo sito o blog . . . . . . . 20 Avere uno strumento per elaborare pagamenti online ormai una prerogativa di qualsiasi sito che propone servizi e prodotti. Per questo scopo, uno degli strumenti pi utilizzati PayPal. vediamo come utilizzarlo con PhP e Wordpress usa jquery e le google Maps api in Wordpress . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Grazie ai plugin, wordpress si presta senza problemi ad ogni esigenza di sviluppo. vediamo come creare un calendario di eventi con un plugin, le librerie jQuery e jQueryUi e, ciliegina sulla torta, le Google Maps creare un teMplate ad hoc per Wordpress . . . . . . . . . . . . . . . . . . . . . . 32 In questo articolo approfondiremo le nuove potenzialit offerte da hTMl5 e da CSS3 per realizzare un completo template from scratch, da installare nel nostro blog in Wordpress ecco il super adMin per Wordpress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Come sfruttare una console di comando, utile per amministrare tutti i tuoi blog wordpress insieme. Ti permetter di ottimizzare la gestione di temi e plug-in, e la pubblicazione multipla dei tuoi post
WEB 2.0 Anteprima di Wordpress 3.0 Wordpress: la guida Anteprima di Wordpress 3.0
WORDPRESS SI AGGIORNA ALLA VERSIONE 3.0, PORTANDO MOLTE NOVIT. SCOPRIAMO PASSO PASSO COME INSTALLARLO E COME APPROFITTARE DELLE NUMEROSE INNOVAZIONI INTRODOTTE: E SE ORA FOSSE MEGLIO DI JOOMLA COME CMS?
CD WEB
wp3.rar
cdrom.ioprogrammo.it
Wordpress a questo indirizzo http://wordpress.org/ download/nightly/ (oppure prendete quella presente nel CD allegato alla rivista) e copiatela sul vostro server. I requisiti sono assolutamente basilari: PHP 4.3 e MySQL 4.1.2. Per testare Wordpress su macchine Windows potete installare WampServer (http://www. wampserver.com/): linstallazione di Apache, PHP e MySQL semplicissima: un piccolo menu in traybar vi aiuter a gestire il vostro server locale. Linstallazione di Wordpress altrettanto semplice, come da tradizione. Create un database vuoto e seguite il wizard di installazione. Ecco la prima novit, piccola ma rilevante: possiamo ora scegliere lo username dellaccount di amministrazione, aumentando la sicurezza del nostro CMS. La dashboard non cambia molto rispetto alle versioni precedenti, quindi non dovreb-
INSTALLAZIONE
Esamineremo molte di queste novit nel corso dellarticolo, ma partiamo dal setup della nostra macchina di test. Scaricate lultima versione disponibile di
REQUISITI
Conoscenze richieste PHP, HTML, CSS, Apache Software Uninstallazione di PHP, Database MySQL Impegno
be essere un problema muovervi tra i menu: non scopo di questo articolo trattare luso di Wordpress, in rete sono presenti molte guide: fate riferimento ai motori di ricerca nel caso abbiate poca dimestichezza con Wordpress. Diamoci da fare e diamo finalmente unocchiata alle novit pi rilevanti!
I NUOVI MENU
Tempo di realizzazione
Una delle pi grosse limitazioni delle versioni precedenti di Wordpress riguardava la gestione dei menu: le funzioni wp_list_pages() o wp_menu_page() si
4 28 / Agosto 2010
Anteprima di Wordpress 3.0 Wordpress: la guida WEB 2.0 Anteprima di Wordpress 3.0
limitavano a mostrare lelenco delle pagine presenti allinterno del sistema al massimo aggiungendo un elemento home e ordinando e formattando la lista di pagine ritornate secondo criteri impostati dallo sviluppatore. Con Wordpress 3.0 cambia tutto: stato integrato allinterno un editor visuale per i menu che vi permetter di assegnare ciascun menu creato alla sua location (vedremo dopo cosa significa) e di modificare con semplici drag&drop il contenuto di ciascun sottomenu: possiamo includere nel menu pagine, url personalizzati (siti esterni o link diretti a post, per esempio) o categorie. Nei temi compatibili con questa funzionalit le modifiche si rifletteranno immediatamente nel template.
Fig. 4: I quattro menu che abbiamo registrato allinterno del nostro tema
Fig. 3: Un menu creato con leditor visuale: ecco come viene visualizzato in TwentyTen
Vediamo ora come rendere i nostri temi compatibili con questa funzionalit. Per prima cosa registriamo allinterno del template i menu che vogliamo utilizzare. Possiamo dichiarare quanti menu vogliamo, usando la chiamata singola in caso di un solo menu:
add_action( init, registra_menu ); function registra_menu() { register_nav_menu( primo-menu, __( Primo ) ); }
nati momenti dellesecuzione del nostro software in cui possiamo chiamare funzioni che eseguono istruzioni PHP. Una volta registrati i menu necessari, questi compariranno come caselle da riempire allinterno delleditor visuale. Per richiamarli allinterno del nostro tema baster invocare la funzione wp_nav_menu() passando i parametri pi adatti alla visualizzazione nel nostro tema. Chiamando la funzione senza argomenti verr ritornato e stampato il primo menu da noi creato. Questo va bene nel caso in cui il nostro tema supporti un unico menu, ma se vogliamo maggior controllo possiamo passare diversi argomenti alla funzione inserendoli in un array: tra questi il nome del menu da mostrare, le classi css da applicare e cos via. Un esempio di chiamata per il nostro tema potrebbe essere questa:
wp_nav_menu( array( container_class => menu-header, theme_location => secondo, depth => 0) );
NOTA
Oppure la chiamata multipla, per registrare pi menu contemporaneamente, addirittura quattro in questo caso:
add_action( init, registra_menu ); function registra_menu() { register_nav_menus( array( primo-menu => __( Primo ), secondo-menu => __( Secondo ), terzo => __( Terzo ), quarto => __( Quarto ) ) ); }
Cosa succede? Abbiamo agganciato allhook di inizializzazione la funzione registra_menu(). Gli hook in Wordpress sono appunto agganci a determi-
Il menu chiamato secondo sar visualizzato come una lista non ordinata <ul> allinterno di un container con classe css menu-header: il visualizzatore esplorer il menu in tutta la sua profondit (parametro depth uguale a zero). Fate riferimento al codex allindirizzo http://codex.wordpress.org/ Template_Tags/wp_nav_menu per la lista completa dei parametri utilizzabili. Con questa struttura di menu annidati, diventa davvero facile implementare menu multilivello in JavaScript, scrivendo il codice appositamente o utilizzando uno degli innumerevoli script presenti in rete e che mappano liste di link in menu con gli effetti pi svariati. Ricordate: il tema TwentyTen una ottima palestra per imparare ad utilizzare le nuove funzionalit di Wordpress 3.0. Esaminate il codice per capire come sono implementati i menu e ricordate che per i pi pigri disponibile un widget (vi baster attivarlo) che mostrer i nostri menu nelle sidebar abilitate a contenere widget: comunque necessario registrare i menu utilizzando le funzioni viste in precedenza.
Agosto 2010 / 29 5
WEB 2.0 Anteprima di Wordpress 3.0 Wordpress: la guida Anteprima di Wordpress 3.0
TASSONOMIE PERSONALIZZATE
Cerano una volta i tag: parole associate agli articoli di un blog che ne definivano sommariamente il contenuto: se un post ad esempio parla di automobili FIAT possibile che i tag ad esso associati siano fiat, automobili, nuovo modello, ecc Le tagcloud sono una delle pi efficaci rappresentaziono grafiche dei tag e sono costituite dai tag stessi mostrati con font tanto pi grandi quanto il tag maggiormente utilizzato. In Wordpress 3.0 si va oltre il concetto di tag passando al concetto di tassonomia. Wikipedia definisce la Tassonomia come la classificazione gerarchica di concetti, e il principio stesso della classificazione.
array( post ), array( public => true, labels => array( nam => __( Attori ), singular_nam => __( Attor ) ), ) ); }
Ecco fatto. Abbiamo creato la nostra tassonomia Attori che possiamo assegnare ai nostri post e alle nostre pagine (o custom post, che esamineremo pi avanti nellarticolo).
NOTA
WORDPRESS E BUDDYPRESS
Wordpress il sistema alla base di alcuni dei pi famosi blog italiani e stranieri. La sua semplicit ne ha fatto lo strumento ideale per creare sistemi multiblog in pochissimo tempo. BuddyPress (http://buddypress.org/) invece un altro prodotto Automattic composto da una serie di plugin per Wordpress che permettono a Wordpress di diventare un social network a tutti gli effetti!
Praticamente tutti i concetti, gli oggetti animati e non, i luoghi e gli eventi possono essere classificati seguendo uno schema tassonomico. La tassonomia la scienza che si occupa genericamente dei modi di classificazione (degli esseri viventi e non). Quindi per esempio la tassonomia di un album musicale pu essere data dagli artisti che lhanno composto, mentre i film prodotti nel XX secolo potrebbero essere catalogati per gli attori che li hanno recitati. Wordpress si comporta allo stesso modo: passa da una tassonomia semplice (i tag) ad una tassonomia pi complessa e completa, completamente gerarchica, dove possiamo creare nostre tassonomie, composte a loro volta da tag. Per creare una nostra tassonomia procediamo come per i menu: registriamo la nostra tassonomia e questa comparir nel pannello di amministrazione di Wordpress. Pensiamo ad esempio ad un blog che parla di film. Possiamo creare la tassonomia Attori e creare tag ad essa appartenenti che non sono altro che gli attori che vi hanno preso parte.
Come potete vedere in figura, stata creata unapposita voce di menu per questa tassonomia, mentre nel pannello di scrittura dei post vedremo una nuova casella Attori dove potremo selezionare i tag della tassonomia appena creata. Come visualizzare queste tassonomie nella pagina dei post? Baster aggiungere al template (allinterno del loop Wordpress) la chiamata alla funzione get_the_term_list( $post->ID, attori); per recuperare tutti i tag per la tassonomia attori legati a quel particolare post. Facile, no?
Fig. 7: La casella per la tassonomia attori nella pagina di scrittura dei post
Per cosa possiamo usare le tassonomie personalizzate? Pensate ad un catalogo di abbigliamento online magari associato ad uno dei tanti plugin che trasformano Wordpress in un sistema di ecommerce come WP-ecommerce http://wordpress.org/ extend/plugins/wp-e-commerce/. Potete creare diverse tassonomie (colori, taglie, stile, tessuto, ecc) da assegnare a ciascun prodotto per creare il vostro catalogo come pi vi piace.
6 30 / Agosto 2010
Anteprima di Wordpress 3.0 Wordpress: la guida WEB 2.0 Anteprima di Wordpress 3.0
POST PERSONALIZZATI
Wordpress 3.0 introduce la possibilit di creare post personalizzati (custom post): attenzione per Si parla di post nel significato pi generico di oggetto facente parte di un blog Wordpress, quindi nel corso dellarticolo la parola post potrebbe riferirsi ad una pagina, un articolo o addirittura un menu. La documentazione originale li chiama custom post, ci adegueremo quindi a questa denominazione. A cosa servono i custom post? A moltissime cose: possiamo trasformare il nostro blog in un sito di annunci immobiliari ad esempio, creando un custom post annunci oppure possiamo creare un custom post fotografie se usiamo il blog come portfolio fotografico o ancora creare un custom post podcast se siamo aspiranti DJ. I custom post trasformano Wordpress in un CMS avanzato: infatti, a tutti questi contenuti speciali, possiamo aggiungere campi personalizzati per rendere ancora pi custom il template che poi andremo ad utilizzare per inserire quel particolare contenuto: un po come avviene in Joomla o Drupal, ma in maniera infinitamente pi semplice. Un esempio pratico ci chiarir le idee. Poniamo di essere un aspirante DJ che vuole aggiungere la propria lista di podcast ad un blog Wordpress: per caricare gli mp3 dei podcast ci appoggeremo al media manager di Wordpress, mentre creeremo un custom post podcast per gestire gli articoli di questa particolare categoria: attenzione per, non si tratta di una categoria di Wordpress personalizzata, ma si tratta di un vero e proprio oggetto differente dai normali post di Wordpress con sue peculiarit e possibilit molto maggiori rispetto ad un classico post o una pagina. Ecco la chiamata che serve per registrare il nuovo custom post podcast. Anche questa si appogger allhook init, come visto in precedenza.
add_action(init, crea_custom_podcast ); function crea_custom_podcast() { register_post_type(podcast, array( labels => array( nam => __( Podcast ), singular_nam => __( Podcast ), add_new => __( Aggiungi Podcast ), add_new_item => __( Aggiungi nuovo Podcast ), edit => __( Modifica ), edit_item => __( Modifica Podcast ), new_item => __( Nuovo Podcast ), view => __( Visualizza Podcast ), view_item => __( Visualizza ), search_items => __( Cerca Podcast ), not_found => __( Nessun Podcast trovato ), not_found_in_trash => __( Nessun Podcast trovato nel cestino ),
parent => __( Podcast superior ), ), public => true, show_ui => true, capability_typ => post, hierarchical => false, supports => array(titl, editor, author) )); }
Cosa successo? Abbiamo aggiunto una nuova voce di menu al nostro Wordpress. Cliccando sul menu visualizzeremo una pagina in tutto e per tutto simile a quella dei post, ma denominata Podcast. La chiamata register_post_type() accetta un numero molto elevato di parametri. Larray labels per cominciare si occuper di impostare le etichette per i pulsanti del nostro pannello, come potete vedere in Fig.8. A seguire ci sono alcuni parametri che permettono di impostare come i nostri podcast saranno visualizzati o gestiti: il parametro public imposta la privacy o meno dei nostri podcast, show_ui permette di attivare il pannello podcast nelle nostre pagine di amministrazione. Per concludere, una lista di parametri che imposta la visualizzazione del custom post appena creato: capability_type un parametro che imposta il comportamento del nostro contenuto: in questo caso deve comportarsi come un post (articolo) del blog. Il parametro hierarchical definisce se il nostro custom post pu essere organizzato gerarchicamente (struttura ad albero: nel caso dei podcast potremmo attivarlo per creare serie composte da pi puntate organizzate gerarchicamente). Larray supports indica quali sono le feature che il custom post pu supportare: commenti, trackback, revisioni, ecc Con questa prima semplice impostazione possiamo gi creare i nostri podcast come fossero articoli del blog, ma come potete vedere non saranno visualizzati nella home del nostro blog, se non verranno richiamati esplicitamente nel template o nel menu (nellimmagine potete vedere il widget creato automaticamente da Wordpress per il nostro custom post podcast). I custom post hanno indirizzi come que-
Fig. 8: Immagine che evidenzia il nuovo menu creato e lutilizzo delle label personalizzate
Agosto 2010 / 31 7
WEB 2.0 Anteprima di Wordpress 3.0 Wordpress: la guida Anteprima di Wordpress 3.0
sto www.mioblog.it/?post_type=podcast&p=1, dove post_type il nome del custom post creato e il parametro p lid delloggetto. In realt manca ancora un pezzo importante del nostro custom post: come si fa ad aggiungere campi portando Wordpress al di fuori del classico ambito di cms per blog per realizzare qualunque sito vi possa venire in mente in tutta semplicit.
Fig. 10: I campi personalizzati che possiamo visualizzare per i nostri podcast
GESTIRE IL MULTIBLOG
Come abbiamo gi detto allinizio dellarticolo, Wordpress e Wordpress sono ora uniti in un unico prodotto: per gli utenti di Wordpress 2.9.x che aggiornano a Wordpress 3.0 non cambia nulla, cos come non cambier nulla per chi ha gi uninstallazione di Wordpress attiva e aggiorner alla versione 3.0. Solo in fase di nuova installazione ci verr chiesto se vogliamo gestire un singolo blog o un multiblog, mentre sar possibile convertire uninstallazione singola di Wordpress 3.0 in una multipla con un tool apposito che verr rilasciato prossimamente da Wordpress.org. La procedura di installazione assolutamente semplice anche in questo caso. Prima di cominciare linstallazione aggiungete la riga :
define(WP_ALLOW_MULTISIT, true);
personalizzati al nostro podcast? Aggiungiamo delle azioni sempre in functions.php, possiamo aggiungere la durata del podcast ad esempio (possiamo eventualmente calcolarla in maniera dinamica) o lautore del podcast (recuperato attraverso loggetto $post di Wordpress)
add_action(manage_posts_custom_column, colonne_custom); add_filter(manage_edit-podcast_columns, colonne_podcast); function colonne_podcast($columns)
LAUTORE Francesco Napoletano socio della Piko Design (www.pikodesign.it) dove si occupa di tutta la parte di sviluppo web (dal PHP al JavaScript, passando per Flex ed actionscript 3.0). Il suo blog www.napolux. com tra i pi conosciuti nellambiente web italiano.
{ $columns = array( cb => <input type=\checkbox\ />, title => Titolo, description => Descrizione, length => Lunghezza, speakers => Autore, comments => Commenti ); return $columns; } function colonne_custom($column) { global $post; if (ID == $column) echo $post->ID; elseif (description == $column) echo substr($post>post_content,0,30) . ...; elseif (length == $column) echo 12:34; elseif (speakers == $column) echo $post->post_ author; }
al file wp-config.php, Wordpress far il resto. Ovviamente, create network di blog su server abbastanza carrozzati per reggere il carico e non su hosting condiviso con poche risorse!
...ED OPENSOURCE!
Abbiamo dato unocchiata alle novit pi importanti di Wordpress 3.0: la versione finale non ancora uscita, ma la 3.0 si appresta ad essere una versione di svolta per il CMS creato da Matt Mullenweg. Facilit duso, estrema personalizzazione e facilit di creazione dei template sono i suoi punti di forza. Wordpress un CMS che non pu mancare nella nostra collezione di prodotti opensource: offrire ai clienti soluzioni basate su Wordpress non pi un tab e con questa nuova versione possiamo affrontare le richieste del mercato con maggiore fiducia nelloffrire un prodotto completo, moderno ed estremamente personalizzabile. Francesco Napoletano
Con la prima funzione, dichiariamo le colonne personalizzate che dovremmo visualizzare, mentre con la seconda imposteremo i valori per tali colonne. Come avete potuto capire, i custom post sono uno strumento davvero molto flessibile: potete organizzare i vostri contenuti come pi vi piace,
8 32 / Agosto 2010
I Custom Post Types 3.0 3.0 WEB 2.0 I Custom Post Types di WordPress di WordPress Wordpress: la guida
I CUSTOM POST TYPES DI WORDPRESS 3 RENDONO IL SOFTWARE UN POTENTE E COMPLETO CMS, ADATTO ANCHE ALLA REALIZZAZIONE DI SITI AZIENDALI COMPLESSI. VEDIAMO COME SFRUTTARE LA NUOVA CARATTERISTIA PER INTEGRARE TIPI DI DATI CON CONTENUTO PERSONALIZZATO
WEB
na delle novit pi attese e discusse della versione 3.0 di WordPress il supporto dei tipi di contenuto personalizzati. La nuova feature permette a WP di fare il salto di qualit e passare da sistema di gestione di blog a vero e proprio CMS: personalizzare i tipi di contenuto, infatti, permette di creare complesse architetture di dati, che consentono di utilizzare WP anche per lo sviluppo di siti aziendali complessi. Ed ci che dimostriamo in questo articolo: questo mese, infatti, vedremo come utilizzare i custom post types per creare un archivio discografico nel quale verranno messi in relazione artisti e pubblicazioni discografiche, estraendo completamente i contenuti dal normale ciclo iterativo che manda a video i post in WP.
proporre ai lettori un archivio di gruppi musicali con le relative produzioni discografiche. Vedremo, infatti, come creare due diversi tipi di post, uno per le informazioni sugli artisti e uno per le informazioni sugli album. Vedremo come associare ad ognuno dei due tipi le proprie custom taxonomies e, infine, come mandarli a video nel front-end di WP in modo diverso.
Conoscenze richieste Buona conoscenza di PHP; buona conoscenza di WordPress Software Web server con Php5 e MySQL, in ambiente *nix. In locale consigliato il pacchetto XAMPP, scaricabile allindirizzo http:// www.apachefriends. org/it/xampp.html Impegno
Tempo di realizzazione
Febbraio i d a W o r d p r e s s : l a g u 2011
36 /
http://www.iopro g r a m m o . i t
I Custom Post Types di Post Types3.0 WordPress 3.0 WEB 2.0 I Custom WordPress di Wordpress: la guida
Allavvio di WP viene invocata la funzione register_groups(). Allinterno di questa funzione vengono generati due array: il primo ($labels) provvede allassegnazione delle etichette che vengono visualizzate nel pannello di amministrazione e costituisce uno degli elementi del secondo array; $args imposta una serie di parametri che stabiliscono il funzionamento del tipo di post. Per una lettura dettagliata degli argomenti del secondo array, rinviamo al codex (http://goo.gl/tJxCe); qui ci soffermiamo solo sullargomento supports. Questo permette di definire gli elementi del form che appariranno nel pannello di amministrazione, in fase di inserimento e modifica dei contenuti. Nel nostro primo custom post type saranno attivi i campi del titolo, leditor del testo, il link per linserimento dellimmagine di anteprima, il campo dellestratto del testo. Una volta definiti i valori degli elementi degli array, la funzione register_post_type(group,$args) completa il lavoro e registra il tipo group. In ultimo, per evitare eventuali problemi nella lettura dei permalink, forziamo il refresh delle regole di rewriting memorizzate, con la funzione flush_rewrite_rules().
Fig. 1: Una volta registrata una nuova tassonomia, questa appare nel menu di sinistra del back-end di WordPress
NOTA
array(hierarchical => true, label => Genres, singular_label => Genre, rewrite => true)); }
REQUISITI DI SISTEMA
Per provare le feature di WordPress di cui abbiamo parlato in queste pagine, consigliamo fortemente di utilizzare sistemi *nix, dato che sono diverse le incompatibilit rilevate in ambiente Windows. Lelenco dettagliato dei requisiti di sistema disponibile allindirizzo http://codex.wordpress. org/Hosting_WordPress.
Le tassonomie vengono registrate allavvio di WP. Se ne occupa la funzione register_taxonomy(), alla quale passiamo i seguenti argomenti: una stringa con il nome della tassonomia un array con gli ID dei tipi di post cui associare la tassonomia un array con una serie di parametri aggiuntivi (per lelenco di parametri, rinviamo al codex: http://goo.gl/Qte64) Apriamo ora il pannello di amministrazione e diamo unocchiata alla scheda New Group. Noteremo un box laterale che ci permetter di inserire nuovi termini, esattamente allo stesso modo delle categorie dei normali post.
NOTA
AVVERTENZA
Il codice presentato nei nostri esempi non completo. Per esigenze di spazio non si provveduto alla gestione di eventuali errori nel recupero dei dati. Nelle istallazioni di WordPress su cui stato testato il codice riportato, tuttavia, non sono stati rilevati errori di sorta.
La funzione add_meta_box() aggiunge il campo year. Gli argomenti che questa accetta impostano lID del campo, il titolo, il nome di una funzione di callback, il tipo di post cui associare il campo, larea della pagina dove caricarlo, infine la priorit. La funzione di callback year() genera il codice HTML del campo. Il valore del campo, se esiste, viene generato grazie alla variabile $post.
A questo scopo utilizziamo lhook save_post per invocare la nostra funzione save_group_meta(). Qui la variabile globale $post ci fornisce lID del contenuto corrente. Questo viene passato come primo argomento della funzione update_post_meta(), insieme alla chiave e il valore del custom field. Ora tutto pronto per linserimento dei dati. Possiamo cominciare ad inserire le nostre band preferite (attenti, per: ancora non possiamo vederle nel front-end).
h t t p : / / w w w . i o p r o g r a m mo.it
10
I Custom Post Types 3.0 3.0 WEB 2.0 I Custom Post Types di WordPress di WordPress Wordpress: la guida
mente le stesse. Quindi, registriamo il custom post type:
add_action(init, register_albums); function register_albums() { $labels = array( ... ); $args = array( ... ); register_post_type(album,$args); flush_rewrite_rules(); }
generare un selectbox che renda agevole il lavoro di chi inserisce i dati. Il selectbox, infatti, fornisce lID e il nome del gruppo e non consente possibilit di errore nellassociazione degli album agli artisti. Oltre al campo Artist, creiamo un campo per letichetta discografica con un normale textbox. E infine salviamo i dati:
function save_album_meta(){
Registriamo, poi, la tassonomia Genres anche per il tipo Album, integrando semplicemente il codice precedente: NOTA
add_action(init, register_custom_taxonomies); function register_custom_taxonomies() { register_taxonomy(Genres, array(group,album), ...}
global $post; update_post_meta($post->ID, year, $_POST[year]); update_post_meta($post->ID, artist, $_POST[artist]); update_post_meta($post->ID, etichetta, $_ POST[etichetta]); }
ESTENSIONI
Se nello sviluppo del proprio sito non si rendono necessarie architetture dati complesse, invece di registrare i custom post types estendendo il codice del file functions.php, potrebbe essere preferibile utilizzare un plug-in che permetta di operare dal pannello di amministrazione. Tra i vari plug-in disponibili, i pi popolari ricordiamo il Custom Post Type UI (http://wordpress. org/extend/plugins/custompost-type-ui/) e il Simple Custom Post Type Archives (http://wordpress.org/extend/ plugins/simple-custom-posttype-archives/).
La funzione register_custom_taxonomies() la stessa utilizzata per registrare le tassonomie del tipo Group. Per associare la tassonomia anche al tipo Album, ci siamo limitati ad aggiungere lID album allargomento array(group,album) della funzione register_taxonomy(). Infine, aggiungiamo i campi personalizzati:
add_action(admin_init, register_albums_fields); function register_albums_fields(){ add_meta_box(year, Year, year, album, side, low); add_meta_box(meta_info, Meta info, meta_info, album, normal, low); }
NOTA
CHILD THEMES
Quando si apportano modifiche ad un tema, sempre preferibile creare un child theme, ossia un tema che estende le funzionalit del parent theme senza modificarne i file originali. quello che abbiamo fatto in questi esempi, copiando e modificando solo i file necessari. Per una dettagliata analisi dei child themes, rinviamo ad ioProgrammo di dicembre o alla documentazione online, allindirizzo http://codex.wordpress. org/Child_Themes
Noterete subito che non utilizziamo pi la funzione add_ action(), che aggancia unazione ad una funzione, ma la funzione add_filter(), utilizzata da WP per modificare in vario modo i dati prima della loro archiviazione nel db o della loro resa a video nel browser. Lhook pre_get_posts viene attivato prima dellesecuzione della query principale. Dunque, un attimo prima del caricamento dei dati, viene verificata la pagina richiesta dallutente: se questi invoca la home page, la nostra funzione ridefinisce la query aggiungendo, al tipo post, il nostro custom type group. Ora in home page vengono caricati tutti i contenuti relativi agli artisti e ai gruppi.
Non cambia molto rispetto al codice precedente, se non per quanto riguarda il custom field artist. Ogni album, infatti, viene associato ad un artista/band. Quindi utilizziamo un loop per selezionare i titoli dei contenuti del tipo Group e
Febbraio i d a W o r d p r e s s : l a g u 2011
38 /
http://www.iopro g r a m m o . i t
11
I Custom Post Types di Post Types3.0 WordPress 3.0 WEB 2.0 I Custom WordPress di Wordpress: la guida
=> album, meta_key => artist, meta_value => $post->ID)); ?> <?php if ($custom_query->have_posts()) { ?>Albums:<ul> <?php while ($custom_query->have_posts()) : $custom_query->the_post(); ?> <li><a href=<?php the_permalink(); ?> title=<?php the_title(); ?>> <?php the_title(); ?></a></li><?php endwhile; ?></ul> <?php } wp_reset_query(); ?>
Dopo la visualizzazione del testo completo del post, manderemo a video lanno di costituzione del gruppo (o di pubblicazione dellalbum), prelevando il valore del custom field year: get_post_meta($post->ID, year, true). Subito dopo impostiamo una nuova query, con una nuova istanza delloggetto WP_Query. Larray passato come argomento permette di filtrare i dati in base al tipo di post (post_type => album), alla chiave (meta_key => artist) e al valore del custom field (meta_value => $post->ID). In pratica, cerchiamo tutti gli album dellartista individuato da $post->ID. Se la query restituisce dati utili, allora viene generata una lista con i permalink dei singoli album. infine, visualizziamo la lista dei termini della custom taxonomy Genres. Allinterno della div. entry-utility aggiungiamo:
<p>Genres: <?php the_terms( $post->ID, Genres, , , , ); ?></p>
plate pagina per ognuno degli archivi di cui abbiamo bisogno. Creando, poi, delle gerarchie di pagine, possiamo creare archivi in cui il filtro sui dati diviene via via pi preciso. Supponiamo, infatti, di voler ottenere un elenco di gruppi selezionati in base al genere. Dovremo solo creare un nuovo template pagina e impostare una nuova query (si legga al riguardo la pagina http://core.trac.wordpress. org/ticket/13818). Nel caso si preferisca cominciare a lavorare su WP 3.1 (annunciato nel giorno di Natale in questo post http://goo.gl/KCUjC), allora le difficolt saranno decisamente minori. Per gestire perfettamente la visualizzazione degli archivi, baster modificare la funzione di callback invocata dallhook pre_get_posts, come visto in precedenza nella modifica della home page:
add_filter( pre_get_posts, get_home_post_types ); function get_home_post_types($query){ if ( is_home() || is_archive() ) $query->set( post_type, array( post, group ) ); return $query; }
NOTA
RIFERIMENTI
Sono innumerevoli le risorse online su WordPress. Nellimpossibilit di elencarle tutte (o solo una piccola parte), consigliamo di partire dalla documentazione ufficiale, allindirizzo http://codex.wordpress. org/. Una panoramica delle novit introdotte dalla futura versione 3.1, di cui abbiamo dato accenno in queste pagine, si trova su http://codex.wordpress. org/Version_3.1
In pratica, abbiamo semplicemente modificato la condizione che verifica la pagina corrente: if (is_home() || is_archive()). Cos com, per, in WP 3.1 questo codice genera lerrore Warning: Illegal offset type in isset or empty in .... Per risolvere il problema, baster aggiungere il conditional tag is_admin():
if ( (is_home() || is_archive()) && !is_admin() ){ }
Ora c proprio tutto per registrare tipi di post e tassonomie anche in WordPress 3.1. Carlo Daniele
Fig. 2: Una volta ridefinita la query, assieme ai normali post, in home page verranno visualizzate anche i contenuti del tipo group
h t t p : / / w w w . i o p r o g r a m mo.it
12
Le Widgets API di WordPress Wordpress: la guida WEB 2.0 Le Widgets API di WordPress
I WIDGET DI WORDPRESS SONO GLI STRUMENTI IDEALI PER AGGIUNGERE OGNI TIPO DI FUNZIONALIT AI PROPRI SITI: VEDIAMO COME CREARE UNAGENDA DI APPUNTAMENTI UTILIZZANDO GLI STESSI E GOOGLE CALENDAR
ellarticolo sui child themes pubblicato il mese scorso, abbiamo visto come estendere le funzionalit di WordPress aggiungendo nuove funzioni alla libreria del parent theme. Agendo sul file functions.php, possibile arricchire i temi di WordPress di feature uniche, che li distinguano in mezzo allinfinit di temi esistenti. Tuttavia, sviluppare applicazioni allinterno del tema, rende difficoltoso applicare le stesse funzionalit a siti in cui sono istallati temi diversi. Qualora si avverta la necessit di distribuire le proprie applicazioni, allora necessario slegarle dai temi e svilupparle come plug-in. Un plug-in, dunque, unestensione indipendente dal tema, in grado di manipolare in modo autonomo i dati del database, di prelevare dati da origini esterne per importarli allinterno del sito, di offrire interattivit e possibilit di social networking. Grazie ad un plug-in si possono anche generare applicazioni autonome, i widget, utilizzabili per manipolare e visualizzare dati dalle origine pi diverse. E, date le ampie possibilit di utilizzo, dedichiamo questo articolo proprio ai widget: vedremo, infatti, come creare un plug-in che prelevi dati dal feed Atom di un Google Calendar pubblico e li mandi a video attraverso un widget.
La scelta del Google Calendar, in realt, pretestuosa: una volta definita la struttura del plug-in/widget, infatti, con poche modifiche al codice, sar sempre possibile prelevare dati da altre fonti per inserirli allinterno delle pagine di un qualsiasi sito proudly powerd by WordPress.
I WIDGET DI WORDPRESS
In sostanza, un widget una piccola applicazione che esegue delle operazioni e genera un output HTML in unarea determinata della pagina, definita widget area. Linstallazione base di WordPress porta con s una decina di widget che offrono le principali funzioni di supporto al blogging, come le liste di categorie, gli archivi di notizie, le tag clouds. Oltre a quelli predefiniti, esistono migliaia di widget adatti ad ogni scopo, dalla visualizzazione di dati presenti nel database, allaccesso a servizi esterni, come Twitter, Flickr o uno dei mille servizi di Google. Molti sono disponibili gratuitamente nella repository di wordpress.org (http://wordpress.org/extend/plugins/), altri hanno vita autonoma, soprattutto quando non sono distribuiti gratuitamente. Ovviamente, non esiste un widget per ogni esigenza. Nei casi particolari bisogna sviluppare da s, ma il framework offre tutti gli strumenti necessari: a partire dalla versione 2.8, infatti, disponibile la nuova Widgets API, che rende molto pi agevole il lavoro di chi sviluppa su WordPress. Vi sono diverse modalit di sviluppo di un widget. In questo articolo vedremo come farlo utilizzando un plug-in.
REQUISITI
Conoscenze richieste Buona conoscenza di PHP e Wordpress Software Web server con Php5. In locale consigliato il pacchetto XAMPP Impegno
LA STRUTTURA DI UN PLUG-IN
Un plug-in si compone di uno o pi file .php, pi eventuali script JS e fogli di stile, e trova collocazione nella cartella wp-content/plugins dellistallazione di WordPress. Qualora vi sia un unico file .php, questo andr denominato come nome-plugin.php.
Tempo di realizzazione
Fig.1: Un widget per WordPress 3.0.1 che importa dati da un Google Calendar
Wordpress: la guida
26 / Gennaio 2011
http://www.iopro g r a m m o . i t
13
Le Widgets API di WordPress WEB 2.0 Wordpress: la guida Le Widgets API di WordPress
Nel caso in cui il plug-in si componga di pi file, sar necessario collocarli nella cartella wp-content/ plugins/nome-plugin. Il file .php principale assumer lo stesso nome. Il plug-in che svilupperemo avr lo scopo di offrire allutente la possibilit di aggiungere un widget al sito, agendo dal pannello di amministrazione, esattamente come avviene per gli altri widget di WordPress: una volta istallato il plug-in, sar possibile attivare il widget trascinandolo nella sidebar desiderata e impostando i relativi parametri di configurazione.
class gcalEventsList extends WP_Widget { function gcalEventsList(){ } function widget($args, $instance){ } function update($new_instance, $old_instance){ } function form($instance){ } } add_action(widgets_init, create_function(, return register_widget(gcalEventsList);));
NOTA
Fig.2: Una volta caricato e installato il plug-in, il widget apparir nel pannello si amministrazione di WordPress
Partiamo con un esempio semplice e ipotizziamo un widget composto da un solo file: gcal_events_list. php. Il plug-in permetter allamministratore di impostare solo il titolo del widget, mentre visualizzer allutente un messaggio di saluto. Subito dopo presenteremo un esempio pi complesso. Innanzitutto, bisogner inserire nel file principale (nome-plugin.php) unintestazione che indichi a WordPress di cosa si tratta. Lintestazione va inserita allinterno dei simboli di commento:
<?php /* Plugin Name: GCal Events List Plugin URI: http://digitaladoptive.wordpress.com/gcalevents-list Description: GCal Events List generates a list of events from a public Google Calendar. You need the calendar ID to make it work. Version: 0.1 Author: Carlo Daniele Author URI: http://digitaladoptive.wordpress.com/ */
Per creare un widget sono necessarie solo quattro funzioni. La prima, gcalEventsList(), il costruttore di classe; le altre hanno lo scopo di mandare a video il widget nel front-end (funzione widget()), di salvare correttamente le impostazioni dellutente (funzione update()), di generare il form delle impostazioni del widget nel back-end (funzione form()). Una volta creato il widget, bisogner aggiungerlo allelenco dei widget gi presenti. A ci provvede il metodo add_action(), che aggancia una funzione ad unazione specifica. Nel nostro esempio, lazione widgets_init. La funzione generata da create_function(), infine, registra il widget (return register_ widget(gcalEventsList);). Limpalcatura pronta.
CREIAMO IL WIDGET
La prima delle funzioni del listato precedente il costruttore della classe gcalEvetsList. Questa provvede alla creazione del widget:
function gcalEventsList(){ $widget_ops = array(description => A widget that generates a list of events from a public Google Calendar); $this->WP_Widget(gcal-events-list, GCal Events List, $widget_ops); }
In pratica, abbiamo fornito a WP i dati necessari a individuare il plug-in e a distinguerlo da qualunque altro installato. Ricordiamo che il plug-in serve come piattaforma per lo sviluppo di un widget. Quindi, il passo successivo sar quello di estendere la classe WP_Widgets:
La funzione $this->WP_Widget accetta tre argomenti: un ID che individua univocamente il widget, il nome del widget visualizzato nel pannello di amministrazione, infine due array di parametri aggiuntivi, $widget_options e $control_options. Nellesempio abbiamo passato solo il primo array con lelemento description (per i dettagli sulla classe WP_Widget, rinviamo alla documentazione online, allindirizzo http://goo.gl/SpGus). Ora il nostro widget esiste e possiamo gi testarlo. Salviamo il
Wordpre s s l a g Gennaio 2011 / : 27 u i d a
h t t p : / / w w w . i o p r o g r a m mo.it
14
Le Widgets API di WordPress Wordpress: la guida WEB 2.0 Le Widgets API di WordPress
file gcal_events_list.php nella directory wp-content/ plugins e apriamo il pannello di amministrazione: il plug-in gi disponibile per lattivazione, anche se non ancora in grado di eseguire alcuna operazione. ray). Larray di questo primo esempio costituito da un solo elemento, il titolo del widget. Il valore dellelemento $instance[title] viene attribuito alla variabile $title, dopo aver codificato alcuni caratteri speciali (per i dettagli, si legga http:// codex.wordpress.org/Function_Reference/esc_ attr). Viene poi creato il modulo che permette laggiornamento dei parametri di configurazione. I valori dei campi del form sono generati dai metodi get_field_id() e get_field_name() della classe WP_ Widget e dal valore della variabile $title.
NOTA
LOCALIZZAZIONE
Per la localizzazione delle installazioni, WordPress utilizza i file .po e .mo, come previsto dal progetto Gettext (http://www.gnu. org/software/gettext/gettext.html). Per verificare lesistenza della versione localizzata di una stringa di testo, si utilizzano le funzioni __() e _e(). La prima restituisce la stringa tradotta (ovviamente, se ne esiste la traduzione); la seconda, invece, la manda a video con un echo. Se si decide di internazionalizzare il proprio plug-in, bisogner predisporre i file .po e .mo necessari. In mancanza di questi, la localizzazione verr effettuata con le traduzioni disponibili in wp-content/languages. Per un esame approfondito dellargomento, consigliamo di partire dalle seguenti risorse: Writing a Plugin http://codex.wordpress. org/Writing_a_Plugin I18n for WordPress Developers http://codex.wordpress. org/I18n_for_WordPress_ Developers Installing WordPress in your language http://codex.wordpress. org/Installing_WordPress_ in_Your_Language
Fig.3: Una volta caricato, il plug-in appare nel pannello di amministrazione in attesa dellattivazione
Se diamo, poi, unocchiata allelenco dei widget, troveremo anche il nostro Gcal Events List.
Fig.4: Dal pannello di amministrazione possibile aggiungere il widget alla sidebar e impostarne il titolo
Largomento $instance un array contenente le impostazioni correnti del widget (vedremo tra un attimo come vengono generati gli elementi dellar-
La funzione aggiorna larray $instance, restituendone il valore corrente. Se listanza non aggiornata correttamente, la funzione restituisce il valore booleano false. Gli argomenti della funzione sono due array: il primo contiene i nuovi parametri di configurazione; il secondo contiene i parametri memorizzati prima dellaggiornamento dei dati. Questi sono archiviati nella tabella wp_options del database di WordPress.
Wordpress: la guida
28 / Gennaio 2011
http://www.iopro g r a m m o . i t
15
Le Widgets API di WordPress WEB 2.0 Wordpress: la guida Le Widgets API di WordPress
VISUALIZZIAMO IL WIDGET
Lultima fase la generazione delloutput HTML che viene visualizzato nel front-end del sito. A questo provvede la funzione widget():
function widget($args, $instance){ extract($args, EXTR_SKIP); echo $before_widget; $title = apply_filters(widget_title, $instance[title]); if(!empty($title)){ echo $before_title . $title . $after_title; echo un saluto ai lettori di ioProgrammo; } echo $after_widget; }
nel front-end del sito. Per far questo servir un feed della Calendar Data API e , ovviamente, del codice PHP. La struttura del widget rimane la stessa, bisogner solo integrare le funzioni widget(), update() e form(). Il costruttore di classe gcalEventsList() rimane lo stesso dellesempio precedente. Cominciamo con il form. Nel pannello di amministrazione dovremo prevedere i campi necessari ad impostare un maggior numero di parametri:
function form($instance){ $title = esc_attr($instance[title]); $calendar = esc_attr($instance[calendar]); $orderby = esc_attr($instance[orderby]); $sortorder = esc_attr($instance[sortorder]); $maxresults = esc_attr($instance[maxresults]); $startmin = esc_attr($instance[startmin]); $startmax = esc_attr($instance[startmax]); }
La funzione accetta due argomenti. Il primo ($args) un elenco di parametri associati al widget. Questi vengono estratti grazie alla funzione PHP extract(), che genera una variabile per ogni elemento dellarray: le variabili che utilizziamo qui sono $before_widget e $after_widget. Queste generano il codice HTML che racchiude i contenuti del widget: per default si tratta di un <li>. La funzione apply_filters() filtra il valore di $instance[title] e lo applica all hook widget_title. Infine, se la variabile $title assume un valore utile, viene generato il contenuto del widget. Il codice completo e il widget funzionante. Un messaggio di saluto, per, davvero poco: bisogna creare un widget che aggiunga valore al sito.
NOTA
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 lID del campo del form. Gli option button, invece, assumono valori fissi (lastmodified e starttime). Lattributo selected viene generato dinamicamente, in base alle impostazioni esistenti ($instance[orderby]). Un altro campo del form stabilisce il numero massimo di elementi del feed che dovranno costituire la risposta della Data API:
<p>
Fig.5: Il primo widget di questo articolo mostra agli utenti un semplice messaggio di saluto
h t t p : / / w w w . i o p r o g r a m mo.it
16
Le Widgets API di WordPress Wordpress: la guida WEB 2.0 Le Widgets API di WordPress
?>:</label> <select id=<?php echo $this->get_field_id( maxre sults ); ?> name=<?php echo $this->get_field_name( maxre sults ); ?> class=widefat> <option <?php if ( $instance[maxresults] == 1 ) echo selected=selected; ?>>1</option> <option <?php if ( $instance[maxresults] == 3 ) echo selected=selected; ?>>3</option>
IL WIDGET A VIDEO
Per completare lo script manca solo la funzione widget(), che, come abbiamo detto, genera loutput HTML:
function widget($args, $instance){ extract($args, EXTR_SKIP); echo $before_widget; $title = apply_filters(widget_title, $instance[title]); //google calendar parameters $params = array( id => $instance[calendar], orderby => $instance[orderby], sortorder => $instance[sortorder], max-results => $instance[maxresults], start-min => $instance[startmin], start-max => $instance[startmax] );
NOTA
SUBVERSION
Per la pubblicazione delle estensioni nella repository, necessario utilizzare il sistema di controllo versioni Subversion (SVN). Una volta approvata la richiesta di pubblicazione del plug-in, infatti, wordpress.org dar accesso alla SVN repository, da cui sar possibile caricare e aggiornare le proprie estensioni. In pratica, si tratta di un sistema di gestione dei file e delle directory di un progetto, attraverso cui viene registrata ogni modifica apportata ai dati presenti. Grazie a questo sistema, sempre possibile recuperare le versioni precedenti dei propri dati o analizzare le modalit in cui i dati stessi sono stati modificati nel tempo. Per lavorare con Subversion necessario dotarsi di un Subversion Client allindirizzo http:// subversion.apache.org/. Per evitare di lavorare da prompt dei comandi, sono disponibili anche delle comode interfacce grafiche, come TortoiseSVN per Windows (http://tortoisesvn.tigris.org/). Per essere subito operativi con SVN, baster caricare i propri file nella directory trunk di SVN e creare una nuova versione nella directory tag, seguendo i semplici esempi riportati allindirizzo http://wordpress.org/extend/plugins/ about/svn/.
Come si vede, la logica del codice la stessa. Non mostriamo gli altri campi, rinviando al Cd-Rom allegato per il listato completo.
Come prima, vengono estratti gli elementi dellarray $args per generare le variabili $before_widget, $after_widget. Qui si aggiungono $before_title e $after_title, che generano il codice HTML che racchiude il titolo del widget. Viene, poi, inizializzata la variabile $title e creato larray $params, i cui elementi andranno a costituire i parametri da trasmettere alla Data API. Vediamo la seconda parte della funzione:
if(!empty($title)){
Fig. 6: La figura mostra il pannello di amministrazione da cui possibile impostare i parametri di ricerca dei dati che saranno visualizzati nel front-end
echo $before_title . $title . $after_title; } if(!empty($params[id])){ getData($params); }else{ echo __(You shoud set the calendar ID to make this widget work); } echo $after_widget; }
Il motore del widget la funzione getData(), che si occupa della trasmissione della richiesta alla Data API e della resa a video dei dati restituiti. La funzione viene invocata solo se stato impostato lID del calendario. Vediamola nel dettaglio:
function getData($params){ extract($params, EXTR_SKIP); $calID = $params[id]; $feed = http://www.google.com/calendar/feeds/ . $calID . /public/full?;
Wordpress: la guida
30 / Gennaio 2011
http://www.iopro g r a m m o . i t
17
Le Widgets API di WordPress WEB 2.0 Wordpress: la guida Le Widgets API di WordPress
$params = orderby=. $params[orderby] . &sortorder= . $params[sortorder] . &max-results= . $params[max-results] . &start-min= . $params[start-min] . &start-max= . $params[start-max];
Questo dovr essere collocato in una directory cui va assegnato il nome stesso del plug-in. Allinterno della directory potranno essere aggiunti altri file e cartelle, secondo le necessit di sviluppo. Avremo, quindi, la seguente struttura:
plugins o gcal_events_list - gcal_events_list.php - css gcel_style.css
Prima di tutto, vengono estratti i parametri che formeranno la URI del feed e ricomposti nella stringa $params. Viene, poi, inoltrata la richiesta alla Data API:
$contents = @file_get_contents($feed . $params) or die(__(Bad request)); $xml = new SimpleXmlElement($contents);
Vediamo, ora, il codice. Per importare in sicurezza un file .css, WordPress dispone delle funzioni wp_register_style() e wp_enqueue_style(). Creiamo in gcal_events_list.php una nuova funzione add_styles() che registri e accodi il foglio di style allheader della pagina:
function add_styles() { $myStyleUrl = WP_PLUGIN_URL . /gcal_events_list/ css/gcel-style.css; $myStyleFile = WP_PLUGIN_DIR . /gcal_events_list/ css/gcel-style.css; if ( file_exists($myStyleFile) ) { wp_register_style(gcel_styles, $myStyleUrl); wp_enqueue_style( gcel_styles); } }
NOTA
RIFERIMENTI
Il codex il city mall degli sviluppatori di WordPress. Nel codex si trovano tutte le risorse indispensabili allo sviluppo di temi e plugin. Tra le altre, consigliamo di cominciare dalla lettura della documentazione dell Widgets API (http:// codex.wordpress.org/ Widgets_API). Un altro riferimento indispensabile la documentazione della classe WP_Widget (http:// goo.gl/ZZXty). Altra utile lettura quella della guida introduttiva alla creazione dei plugin (http:// codex.wordpress.org/ Writing_a_Plugin).
Allinterno del costruttore di classe aggiungiamo lazione che associa la funzione add_styles() all hook wp_print_styles:
function gcalEventsList() { add_action(wp_print_styles, add_styles); }
Il motivo per cui abbiamo utilizzato pi istruzioni per generare la data quello di facilitare la localizzazione dei testi (vedi nota), grazie alla funzione __(). Infine, una serie di echo mandano i dati a video.
Fig. 7: La resa a video del widget: data, titolo e orario degli eventi
h t t p : / / w w w . i o p r o g r a m mo.it
18
Le Widgets API di WordPress Wordpress: la guida WEB 2.0 Le Widgets API di WordPress
Se nella directory wp-content/plugins/gcal_events_ list/css esiste il foglio di stile, questo verr prima registrato e poi accodato nellintestazione del documento. Ora sar possibile agire dettagliatamente sulla visualizzazione dei dati, semplicemente aggiungendo le proprie istruzione al file css/gcel_style.css.
Fig. 9: La figura mostra la struttura del plug-in pronto per la pubblicazione
Un plug-in destinato alla pubblicazione avr, dunque, una struttura appena pi complessa di quanto visto fino ad ora. Oltre al motore dellapplicazione (il file gcal_ events_list.php del nostro esempio) e ad eventuali altri file allegati, come fogli di stile e script .php e .js, bisogner produrre un file readme.txt, destinato a contenere le informazioni visualizzate nella pagina della repository, ed alcune immagini, non obbligatorie, ma certamente utili allutente a comprendere il funzionamento dellapplicazione prima della sua installazione.
SUL WEB
DISTRIBUIRE UN PLUG-IN
Il luogo migliore per distribuire un plug-in la repository delle estensioni di WordPress: http://wordpress.org/extend/)codex. wordpress.org/
Fig. 8: La figura mostra il modulo attraverso il quale sottoporre il plug-in allapprovazione degli amministratori di wordpress.org
Per pubblicare un plug-in nella repository, lo sviluppatore dovr osservare alcune inderogabili regole che proponiamo di seguito: 1. il plug-in deve essere rilasciato con una licenza compatibile con la GPL2; 2. il plug-in non deve avere finalit illegali; 3. il plugin va caricato nella Subversion repository di wordpress.org; 4. nel plugin non possono essere inseriti collegamenti esterni, come un link powered by, senza lesplicito consenso dellutente; 5. ogni plug-in deve essere accompagnato da un file readme.txt, secondo lo standard specificato allindirizzo http://wordpress.org/extend/plugins/about/readme.txt; 6. consigliato allegare al plugin almeno un paio di screenshot, uno che ne mostri il funzionamento nel pannello di amministrazione e uno che ne mostri lanteprima nel front-end.
Fig. 10: Il plug-in stato approvato e caricato nella SVN repository. Ora ha una pagina dedicata su wordpress.org
Il primo passo sar, ovviamente, quello di aprire un account su wordpress.org. Se il plug-in rispetta le regole su elencate (almeno quelle obbligatorie), si pu procedere alla sua segnalazione dalla pagina http://wordpress.org/ extend/plugins/add/. Avuta lapprovazione alla pubblicazione (ci vorranno pi o meno 24 ore), si avr accesso alla Subversion Repository, dove si potr caricare il plug-in. Da questo momento in poi, ogni upload verr automaticamente visualizzato nella pagina dedicata da wordpress.org al nostro plugin: http:// wordpress.org/extend/plugins/gcal-events-list. Carlo Daniele
Wordpress: la guida
32 / Gennaio 2011
http://www.iopro g r a m m o . i t
19
le PayPal le PayPal API WEB 2.0 Wordpress: la guidaUtilizzareUtilizzare API con PHP con PHP
AVERE UNO STRUMENTO PER ELABORARE PAGAMENTI ONLINE ORMAI UNA PREROGATIVA DI QUALSIASI SITO CHE PROPONE SERVIZI E PRODOTTI. PER QUESTO SCOPO, UNO DEGLI STRUMENTI PI UTILIZZATI PAYPAL. VEDIAMO COME UTILIZZARLO CON PHP E WORDPRESS
WEB
ayPal uno dei sistemi di pagamento online pi diffusi del web: permette a qualsiasi azienda o consumatore che abbia un indirizzo e-mail di inviare e ricevere pagamenti sfruttando linfrastruttura finanziaria esistente (conti bancari e carte di credito) per creare un sistema di pagamento su base globale e in tempo reale: ogni utente PayPal pu inviare e ricevere soldi da altri utenti usando carte di credito (anche prepagate), bonifici bancari e invii di denaro intra-paypal in tutta sicurezza.
cdrom.ioprogrammo.it
Conoscenze richieste PHP, MYSQL, HTML, possedere un account PayPal Software WordPress Impegno
Se vedete il logo PayPal su un sito web potrete utilizzare il vostro conto PayPal per pagare i prodotti in vendita (o fare una donazione): sempre pi siti, anche italiani, supportano PayPal: lintegrazione, come vedremo, facile, veloce e totalmente sicura: PayPal si occuper di gestire tutte le transazioni basate su carte di credito, accollandosi quindi tutti i problemi di sicurezza che derivano da questo genere di attivit. Nel corso dellarticolo getteremo le basi per la creazione di un carrello usando MySQL e PHP, integreremo PayPal allinterno delle nostre pagine web usando PHP e vedremo come possibile, davvero con pochi clic, integrare PayPal in Wordpress in modo da creare un sito di e-commerce sicuro in poco tempo.
Cosa ci serve per creare un piccolo carrello da usare nei nostri siti web? Per prima cosa dobbiamo pianificarne il funzionamento in ogni sua piccola parte: bisogna per prima cosa rendersi conto di quanto sia delicato gestire un carrello utente e di quanto sia possibile per utenti malevoli ingannare un carrello non perfettamente sviluppato. Quello che ci interessa veramente non il funzionamento in s e per s del carrello (infatti ci occuperemo solo di aggiungere elementi al minicarrello che analizzeremo) la sessione utente: ogni visitatore del nostro sito apre automaticamente una sessione di navigazione. Durante questa sessione possiamo creare dati da utilizzare (leggere e scrivere) in quellunica sessione utilizzando per lappunto larray superglobale $_SESSION. Quel che ci serve poi una tabella contenente i prodotti da visualizzare allutente: niente di pi semplice:
CREATE TABLE IF NOT EXISTS `prodotti` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `nome` text NOT NULL, `prezzo` float NOT NULL DEFAULT 0, PRIMARY KEY (`id`)
Tempo di realizzazione
Come potete vedere lo schema della tabella semplice: contiene un id, un nome del prodotto e il prezzo. Possiamo riempirla con alcuni prodotti di prova, eseguiamo in questo caso le seguenti query:
20 / Febbraio 2011
Utilizzare le PayPal API WEB 2.0 Utilizzare le PayPal API con PHP con PHP Wordpress: la guida
INSERT INTO `prodotti` (`id`, `nome`, `prezzo`) VALUES (1, IoProgrammo, raccolta anno 2010, 100), (2, IoProgrammo, raccolta anno 2009, 30.99), (3, IoProgrammo, raccolta anno 2009, 140), (4, IoProgrammo, raccolta anno 2008, 150); } $_SESSION[carrello] = $carrello;
Abbiamo inserito 4 prodotti nel nostro database, ognuno con prezzi diversi. Il file di configurazione della connessione non sar un problema:
$host = localhost; $user = root; $password = TUAPASSWORD; $database = carrello; $dbConn = mysql_connect($host,$user,$password); mysql_select_db($database,$dbConn);
Per completare il nostro carrello potrete aggiungere allinterno dello switch() che vedete tutte le altre operazioni di aggiornamento e update del carrello che riterrete necessarie. Fatta laggiunta al carrello, ritorneremo alla nostra lista prodotti e stamperemo la lista dei prodotti contenuta nel carrello, con prezzi moltiplicati per quantit inserita e totale del nostro ordine.
<?php if(isset($_SESSION[carrello])) { $tmp = array_count_values($_ SESSION[carrello]); $totale = 0; while(list($key,$value)=each($tmp)) { $sql = select * from prodotti where id = . mysql_real_escape_string($key); $res = mysql_query($sql,$dbConn); $row = mysql_fetch_assoc($res); echo <strong> . $row[nome] . </strong> Quantità <strong> . $value . </strong> Totale: <strong> . ($row[prezzo] * $value) . €</strong><br />; $totale += ($row[prezzo] * $value); } echo TOTALE: . $totale .€; } ?>
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>; ?>
SUL WEB
Ecco fatto. Non si tratta nientaltro che di una query sul database che stampa una serie di link ai prodotti da aggiungere al carrello. Loperazione che faremo in carrello.php sar quella di aggiungere allarray $_SESSION[carrello] presente nella sessione utente (se non esiste verr creato) lid dellelemento su cui abbiamo cliccato:
if(!isset($_SESSION[carrello])) $carrello = array(); else $carrello = $_SESSION[carrello]; if(isset($_GET[op])) { $op = $_GET[op]; // Switch switch ($op) { case add: $carrello[] = $_GET[id]; break; }
Il codice, come potete vedere, molto semplice: la funzione array_count_values() si occupa di contare i prodotti presenti nel carrello (distinguendoli per id). Per ciascuno di questi elementi vengono recuperati la descrizione e il prezzo con una query al database MySQL. Sommare poi prezzi e quantit per ottenere il totale dellordine banale.
le PayPal le PayPal API WEB 2.0 Wordpress: la guidaUtilizzareUtilizzare API con PHP con PHP
di script per la gestione di carrelli basati su JavaScript o PHP, che senza linvadenza di un completo sistema di e-commerce vi forniscono comunque tutte le funzionalit necessarie allutilizzo nei vostri siti: PayPal offre molti strumenti di questo tipo (li analizzeremo in seguito). Prima di passare a PayPal, fermiamoci per un momento a guardare cosa offre la comunit: un carrello molto funzionale e di semplice integrazione (anche in servizi web che non supportano PHP come ad esempio Blogspot) ad esempio SimpleCart che potete scaricare allindirizzo http://simplecartjs.com/. Se volete invece qualcosa di pi completo Beh, potete dare unocchiata alla sterminata schiera di sistemi e-commerce disponibili in Rete. Potete cominciare da Zen Cart http://www.zen-cart.com/ e per concludere dare unocchiata ad OpenCart http://www.opencart.com/ o al mastodontico Magento http://www. magento.com.
<form target=paypal action=https://www.paypal. com/cgi-bin/webscr method=post> <input type=hidden name=cmd value=_s-xclick> <input type=hidden name=encrypted value=----BEGIN PKCS7----- QkNjs+ln2DIi9cQbCGx4HTD+BX/rLRI KYgrtZ3Yah0J5XI2Qp5ob6bdLWocMk+YD0yfrkoQjV6GPE wx3plrDR0fOtw/79cNHC2Si8SIcvp99Jth79pS7uLrpzuvvxf 1GmyP79tejqQwg==-----END PKCS7----> <input type=image src=https://www.paypal. com/it_IT/IT/i/btn/btn_viewcart_LG.gif border=0 name=submit alt=PayPal - Il sistema di pagamento online pi facile e sicuro!> <img alt= border=0 src=https://www.paypal.com/ it_IT/i/scr/pixel.gif width=1 height=1> </form>
NOTA
SESSION HIJACKING
Se avete intrapreso la strada del mi creo il mio carrello da zero, fate attenzione alla gestione delle sessioni utente: Il session hijacking (il furto dellid di sessione da parte di un estraneo) un problema di sicurezza in cui potreste incappare. Ogni sessione utente infatti dotata di un proprio id, che se non protetto a dovere potrebbe essere sfruttato da un malintenzionato per impersonare un utente legittimo della vostra piattaforma.
Cliccando su questo pulsante lutente visualizzer il suo carrello, contenente i vostri prodotti, sul sito di PayPal. importante ricordare che questo codice solo esemplificativo: il codice PayPal va creato sul sito di PayPal, visto che i vari form contengono i dati identificativi dellaccount che ricever il pagamento e non va modificato in alcun modo quando incluso in una pagina. Volete vendere un oggetto alla volta? Nessun problema. Il pulsante Paga adesso non prevede nessun carrello, ma una cifra fissa da pagare direttamente sul vostro account. Il codice? Eccolo!
<form action=https://www.paypal.com/cgi-bin/webscr method=post> <input type=hidden name=cmd value=_s-xclick> <input type=hidden name=hosted_button_id value=MIOCODICE> <input type=image src=https://www.paypal.com/ it_IT/IT/i/btn/btn_buynowCC_LG.gif border=0 name=submit alt=PayPal - Il sistema di pagamento online pi facile e sicuro!> <img alt= border=0 src=https://www.paypal.com/ it_IT/i/scr/pixel.gif width=1 height=1> </form>
Vi baster inserire il codice HTML allinterno della pagina prodotto per visualizzare il pulsante Aggiungi al carrello. Una volta creati i pulsanti per ciascun prodotto il momento di creare il pulsante Visualizza Carrello. PayPal vi proporr di creare questo pulsante dopo ogni prodotto creato.
22 / Febbraio 2011
Utilizzare le PayPal API WEB 2.0 Utilizzare le PayPal API con PHP con PHP Wordpress: la guida
Come potete vedere dallimmagine di Fig.3, i moduli disponibili sul sito PayPal sono moltissimi e coprono quasi tutte le esigenze di chi vuole ricevere in maniera semplice un pagamento via PayPal o carta di credito. Facile e veloce: si tratta fondamentalmente di compilare dei Wizard e poi inserire il codice HTML ottenuto allinterno delle nostre pagine web. E se volessimo qualcosa in pi?
PAYPAL E WORDPRESS
Come dicevamo ad inizio articolo, facile poter integrare Wordpress e PayPal e possiamo farlo in diversi modi: dal Widget per la semplice donazione, fino a creare una completa soluzione di e-commerce basata su Wordpress.
LE PAYPAL API
PayPal mette a disposizione un ricchissimo set di API che possibile utilizzare usando lapposito SDK che potete scaricare dal sito http://x.com. Fino ad oggi, per utilizzare PayPal allinterno dei nostri siti web, bisognava per forza passare da una pagina PayPal esterna al nostro dominio. Ora, grazie alle API, possiamo integrare completamente la gestione dei pagamenti allinterno del nostro sito, senza dover spedire lutente sulle pagine di PayPal.com come accade anche con i vari Wizard che abbiamo visto fino ad ora. Nel menu Dev Tools del sito X.com potete dare unocchiata a tutte le API disponibili. Tenete docchio le Adaptive payments API, le prime presentate ufficialmente da PayPal, che permettono di gestire pagamenti semplici, concatenati o paralleli. Il pagamento semplice il classico pagamento: i soldi passano da A a B. I pagamenti concatenati prevedono il passaggio di valuta virtuale da A a B e da questo a C, mentre i pagamenti in parallelo permettono di dividere un unico importo ricevuto tra pi venditori. Decisamente un passo avanti rispetto ai pagamenti 1-1 che coinvolgono il sito PayPal come agente in the middle per le vostre transazioni. Per giocare con le Adaptive API , cominciate con lo scaricare lSDK per il linguaggio PHP a questo indirizzo http://tinyurl.com/ adapi. LSDK contiene la documentazione e tutta una serie di esempi pronti da visualizzare. Sar anche necessario installare il pacchetto PEAR XML_Serializer, se non presente nella vostra installazione PEAR installatelo con il comando:
pear install -f --alldeps XML_Serializer
Per raggiungere il nostro scopo utilizzeremo qualcuno dei numerosi plug-in disponibili sul repository ufficiale di Wordpress che trovate allindirizzo http://wordpress. org/extend/plugins/. Cominciamo dalle cose semplici: creare un widget di donazione PayPal per il vostro blog Wordpress facilissimo. Installiamo il plugin PayPal Donations (http:// wpstorm.net/wordpress-plugins/paypal-donations/) e personalizziamo la pagina delle opzioni. Una volta scelte le nostre impostazioni preferite ecco pronto il Widget: lo troverete nella sezione Aspetto -> Widget del pannello di amministrazione di Wordpress. Vi baster trascinarlo in una delle sidebar del tema et voil, ecco il pulsante di Donazione attivo sul nostro
Andando con il browser allindirizzo della index.php del pacchetto, vedrete una pagina con cui potrete cominciare a prendere confidenza: il corposo documento che trovate allindirizzo https://cms.paypal. com/cms_content/US/en_US/files/developer/PP_ AdaptivePayments.pdf pu darvi sicuramente unidea di quanto siano vaste queste API. Sta a voi scegliere la soluzione migliore per il vostro lavoro: wizard e bottoni per semplici attivit, adaptive API invece se il vostro lavoro richiede personalizzazioni estreme e gestione massima dei flussi verso il servizio PayPal.
Febbraio 2011 / 23
le PayPal le PayPal API WEB 2.0 Wordpress: la guidaUtilizzareUtilizzare API con PHP con PHP
blog. Il codice generato quello che abbiamo gi visto in precedenza, ma non dovrete preoccuparvi di localizzarlo o effettuare altre operazioni: ci penser PayPal Donations a mettere tutto in ordine. te personalizzare per aggiungere descrizione prodotto e prezzo. Nellimmagine Fig.6 potete vedere un post di esempio con un prodotto nel carrello. Il pagamento? Gestito tramite PayPal ovviamente! PayPal si occuper anche della gestione dellindirizzo di spedizione se attiverete lapposita opzione nel pannello di amministrazione del plug-in.
WORDPRESS E PAYPAL
Non limitiamoci a usare i seppur comodi plug-in di donazione: possiamo fare molto di pi con il nostro Wordpress: possiamo mettere in piedi un sito di e-commerce completo, offrendo ai nostri utenti PayPal come metodo di pagamento (e con PayPal tutte le maggiori carte di credito). Come possiamo fare? Ovviamente, grazie a un plug-in, ma non sar banale come visto in precedenza: oltre a installare e configurare un plug-in che agganci il nostro sito al nostro account PayPal occorrer confezionare i post del nostro blog come schede prodotto. Vediamo come fare: per prima cosa installiamo il plug-in WordPress Simple Paypal Shopping Cart che trovate allindirizzo http://phonk.it/24v, attraverso il pannello di amministrazione del vostro blog. Compilate attentamente il pannello opzioni che trovate allindirizzo http://vostroblog.it/ options-general. php?page=wordpress-simple-paypal-shopping-cart/ wp_shopping_cart.php configurando valuta, indirizzo PayPal su cui ricevere i pagamenti ed eventuali spese di spedizione o soglie, raggiunte le quali, le spese di spedizione sono gratuite. Spostate poi il widget di wp_shopping_cart allinterno della sidebar, in modo da mostrare allutente il carrello man mano che questo viene riempito. Una volta completati questi semplici passaggi possiamo creare il nostro post/scheda-prodotto: il titolo e la descrizione sono identici a quelli di un post normale, a fine post va poi aggiunto il markup del plug-in che mostrer prezzo e pulsante Aggiungi al carrello.
[wp_cart:Il mio prodotto:price:100:end]
PER CONCLUDERE
Nel corso di questo articolo abbiamo dato il via alla creazione di un carrello tutto nostro e abbiamo integrato PayPal allinterno del nostro sito web e dei nostri blog Wordpress. Grazie a PayPal possiamo dimenticarci della parte pi pericolosa della gestione di un sito di e-commerce: delegare a terze parti lelaborazione delle transazioni con carte di credito solleva gli sviluppatori da tutta una serie di problemi e grattacapi non indifferenti. PayPal, poi, mette a disposizione dellutenza diversi strumenti gi pronti come abbiamo visto, rendendo la vita di noi sviluppatori ancora pi facile. Perch aspettare ancora? Integrare PayPal nel nostro sito facile, veloce e sicuro! Francesco Napoletano
Come vedete, il codice dato da wp_cart:descrizione_ prodotto:price:prezzo:end. In corsivo i campi che dovre-
LAUTORE
Francesco Napoletano socio fondatore della Piko Design (http://www.pikodesign.it) dove si occupa di tutta la parte di sviluppo web (dal PHP al JavaScript, passando per Flex ed actionscript 3.0). Il suo blog http://www.napolux.com tra i pi conosciuti nellambiente web italiano.
24 / Febbraio 2011
Un plugin per creare un calendario di eventi WP WEB 2.0 Un plugin per creare un calendario di eventi in in WordPress Wordpress: la guida
GRAZIE AI PLUGIN, WORDPRESS SI PRESTA SENZA PROBLEMI AD OGNI ESIGENZA DI SVILUPPO. VEDIAMO COME CREARE UN CALENDARIO DI EVENTI CON UN PLUGIN, LE LIBRERIE JQUERY E JQUERYUI E, CILIEGINA SULLA TORTA, LE GOOGLE MAPS
wp_jquery_gmaps.zip
cdrom.ioprogrammo.it
CD
WEB
Conoscenze richieste Buona conoscenza di PHP; buona conoscenza di WordPress Software Web server con Php5. In locale consigliato il pacchetto XAMPP, disponibile sul CD-Rom allegato a questo numero Impegno
Tempo di realizzazione
Fig. 1: I custom eld sono delle semplici coppie nome-valore che possono essere acquisite grazie a normali campi di testo.
Fig. 2: Un custom meta box pu ospitare controlli di ogni tipo. La gura mostra come appare il meta box sviluppato in questo articolo
Marzo 2012 / 21 25
WEB 2.0 Un plugin per calendario di eventi in WordPress Wordpress: la guidaUn plugin per creare un creare un calendario di eventi in WP
soprattutto per gestire dei custom eld. Nel plugin che presentiamo, il custom meta box conterr tre campi di testo e una mappa. Il primo campo ospiter una data, nel formato aaaa-mm-gg. Per facilitare linserimento dei dati, ed evitare errori di digitazione, al campo verr associato il datepicker di jQuery UI. Il secondo campo conterr un indirizzo postale human readable, inseribile sia direttamente dallutente, sia attraverso il geocoder della Google Maps API. Il terzo campo ospiter le coordinate geogra che corrispondenti allindirizzo, generate dinamicamente dalla Maps API. Questi dati, una volta inseriti, saranno memorizzati allinterno di tre custom eld.
NOTA
$tag il nome dellazione (o action hook), $function la funzione di callback, $priority stabilisce limportanza ai ni dellesecuzione della funzione, $num_args il numero di argomenti passati alla funzione. necessario caricare gli script solo quando lutente crea un nuovo post, oppure ne modi ca uno esistente. Ecco gli hooks cui faremo ricorso in questa prima fase:
add_action(admin_print_styles-post.php, iop_admin_ enqueue_styles ); add_action(admin_print_styles-post-new.php, iop_ admin_enqueue_styles ); add_action(admin_print_scripts-post.php, iop_admin_ enqueue_scripts ); add_action(admin_print_scripts-post-new.php, iop_ admin_enqueue_scripts );
Gli hooks admin_print_styles e admin_print_scripts permettono di agganciare script e stili a quelli caricati di default da WP. I parametri {post.php} e {post-new.php} individuano le pagine in cui eseguire lazione (nuovo post e modi ca post). Ed ecco le funzioni di callback:
function iop_admin_enqueue_styles() { wp_enqueue_style(jquery-ui-theme, /themes/ smoothness/jquery-ui.css); }
Dei dati inseriti, il solo Plugin Name obbligatorio, in quanto permette a WP lindividuazione del plugin. Il nome deve essere, ovviamente, univoco. Le altre informazioni sono facoltative, ma utili alla distribuzione del plugin. Passiamo ad analizzare il codice. La prima istruzione de nisce la costante IOP_DIR, che individua la posizione del plugin:
dene( IOP_DIR, WP_PLUGIN_URL . / . str_ replace(basename( __FILE__),,plugin_basename(__ FILE__)) );
wp_enqueue_style accoda il foglio di stile. Il primo parametro lID, il secondo la URL del le: qui abbiamo inserito il tema di jQuery UI, smoothness. Ora inseriamo gli script:
function iop_admin_enqueue_scripts() { wp_deregister_script(jquery-ui-core); wp_register_script(jquery-ui-core, /jquery-ui.min. js, array(jquery) ); wp_enqueue_script( jquery-ui-core ); wp_enqueue_script(google-maps-api, http://maps. googleapis.com/ ); wp_enqueue_script(iop-script, IOP_DIR . js/ iop-script.js, array(jquery, jquery-ui-core, googlemaps-api) ); }
La costante WP_PLUGIN_URL individua il percorso della directory plugins, mentre la funzione plugin_basename(__FILE__) restituisce il percorso del plugin. Grazie alla sostituzione operata da str_replace(), si otterr il nome della directory.
22 26 / Marzo 2012
Un plugin per creare un calendario di eventi WP WEB 2.0 Un plugin per creare un calendario di eventi in in WordPress Wordpress: la guida
rie jQuery e jQuery UI. Mentre scriviamo, la versione corrente, la 3.2.1, dispone di jQuery 1.6.1, compatibile con il plugin. Sar necessario, invece, caricare jQuery UI: la versione disponibile in WP 3.2.1 non dispone del datepicker. Provvediamo, quindi, a de-registrare la libreria, e a registrare una nuova versione (recuperandola dal Google CDN) grazie a wp_register_script (si veda il codice allegato per le URL complete). Lultimo parametro un array, i cui elementi corrispondono agli script necessari al funzionamento dello script corrente: jQuery UI avr bisogno, ovviamente, di jQuery. Una volta registrato, lo script viene accodato alla lista. I due script successivi sono la Google Maps API e il nostro script, collocato nella directory js. Ora bisogna dire a WP quando il momento di caricare il meta box. Lo faremo grazie allaction hook add_meta_boxes:
add_action(add_meta_boxes, iop_add_meta_box);
Al caricamento dei meta box della pagina, dunque, viene eseguita la callback iop_add_meta_box:
function iop_add_meta_box(){ global $iop_metabox; add_meta_box( $iop_metabox[id], $iop_metabox[title], iop_show_meta_box, // callback function $iop_metabox[page], $iop_metabox[context], $iop_metabox[priority] ); }
NOTA
Oltre ai parametri memorizzati nellarray $iop_metabox, alla funzione add_meta_box() viene passato il nome della callback iop_show_meta_box, che ha lo scopo di generare loutput HTML:
function iop_show_meta_box(){ global $post; global $iop_elds;
Gli elementi dellarray memorizzeranno i campi ID, titolo, tipo di contenuto (post, page, link o custom_ post_type), contesto (la parte della pagina in cui sar visualizzato il meta box: normal, advanced, side) e priorit (high, core, default, low). Dopo $iop_metabox andremo a de nire un array multidimensionale, i cui elementi rappresentano i custom elds in cui verranno memorizzati i dati:
$iop_elds = array( array( name => Text box with datepicker, desc => Event date, id => iop_date_eld, type => text ), array( name => Address, desc => Event location, id => iop_address_eld, type => text ), array ( name => Lat Lng, desc => Latitude and Longitude, id => iop_latlng_eld, type => text));
Per prima cosa vengono de nite le variabili globali. Come detto, vi sar corrispondenza tra campi del meta box e custom elds. Andremo quindi a recuperare i valori dei custom elds utilizzando gli elementi id dellarray $iop_ elds:
$date_meta = esc_attr( get_post_meta($post->ID, $iop_elds[0][id], true) ); $address_meta = esc_attr( get_post_meta($post->ID, $iop_elds[1][id], true) ); $latlng_meta = esc_attr( get_post_meta($post->ID, $iop_elds[2][id], true) );
La funzione get_post_meta() accetta tre argomenti: lID del post corrente, il nome del custom eld e, in ultimo, un valore booleano che stabilisce se il valore restituito debba essere una stringa (true) o un array (false). Ora abbiamo a disposizione, se presenti, i valori di data, indirizzo e coordinate, necessari a generare la struttura HTML del meta box. Qui mostriamo il primo campo:
?><p> <label for=<?php echo $iop_elds[0][id]; ?>> <?php _e( $iop_elds[0][desc] ); ?> </label><br /> <input class=widefat type=text name=<?php echo $iop_elds[0][id]; ?>
Marzo 2012 / 23 27
WEB 2.0 Un plugin per calendario di eventi in WordPress Wordpress: la guidaUn plugin per creare un creare un calendario di eventi in WP
id=<?php echo $iop_elds[0][id]; ?> value=<?php echo $date_meta; ?> size=30 /> </p> if ( !current_user_can( edit_page, $post_id ) ) return $post_id; }else{ if ( !current_user_can( edit_post, $post_id ) ) return $post_id; }
I valori degli attributi di label e input vengono assegnati grazie agli elementi dellarray $iop_ elds. Soltanto il valore dellattributo value dellelemento input viene assegnato in base al valore del custom eld corrispondente eventualmente in memoria ($date_meta). In questo modo, in caso di modi ca del post, nel campo di testo del custom meta box comparir il valore del custom eld. Gli altri due campi di testo si ripetono in modo simile (rinviamo al codice allegato). Concludono il blocco la div che ospita la mappa e un campo nascosto necessario alla trasmissione in sicurezza dei dati:
<div id=canvas></div> <?php echo <input type=hidden name=iop_nonce_eld value= . wp_create_nonce(iop_nonce) . />; }
Il passo successivo il recupero dei dati eventualmente memorizzati nei custom elds, e laggiornamento con i nuovi dati (riportiamo il codice relativo al primo campo, rinviando al cd-rom per il listato completo):
$old_date_value = get_post_meta($post_id, $iop_ elds[0][id], true); $new_date_value = $_POST[$iop_elds[0][id]]; if( $new_date_value && $new_date_value != $old_ date_value ){ update_post_meta( $post_id, $iop_elds[0][id], $new_date_value ); }elseif( == $new_date_value && $old_date_value ){ delete_post_meta( $post_id, $iop_elds[0][id], $old_date_value ); }
NOTA
IL DATEPICKER DI JQUERY UI
Nella nostra applicazione la data deve essere nel formato aaaa-mm-gg. Purtroppo WP non consente di e ettuare una veri ca sulla correttezza dei dati acquisiti. La versione 3.2.1 di WP, utilizzata per lo sviluppo del nostro plugin, dispone di svariati plugin di jQuery UI. Purtroppo il datepicker non tra questi. Bisogner, quindi, scaricare il codice dal sito http://jqueryui. com/, oppure ricorrere al Google CDN, come abbiamo mostrato nellarticolo. Il datepicker verr visualizzato quando lutente far click sul campo di testo associato e faciliter le operazioni di inserimento dati. bene ricordare che il widget datepicker richiede listallazione di un tema gra co per funzionare. Per maggiori informazioni, si vedano http://jqueryui.com/ demos/datepicker/ e http:// jqueryui.com/themeroller/
Il Custom meta box pronto, ma ancora non funzionante. Bisogna dire a WP come memorizzare i dati inseriti dallutente.
Per prima cosa viene recuperato il valore del custom eld corrispondente al primo campo del meta box, quello relativo alla data ($old_date_value). Viene poi prelevato il dato trasmesso dallutente ($new_date_ value). Se il nuovo valore esiste, e se diverso dal valore archiviato, la funzione update_post_meta aggiorna il valore del custom eld; nel caso venga trasmesso un campo vuoto, ed esista un valore salvato in precedenza, la funzione delete_post_meta elimina il custom eld corrispondente.
Laction hook save_post attiva la callback iop_save_ meta_box. Dopo la de nizione della variabile globale $iop_ elds, veri chiamo la token impostata nel campo nascosto:
function iop_save_meta_box( $post_id ){ global $iop_elds; if ( !isset( $_POST[iop_nonce_eld] ) || !wp_veri fy_nonce( $_POST[iop_nonce_eld], iop_nonce ) ) return $post_id;
I successivi test veri cano un eventuale salvataggio automatico, oltre al livello di autorizzazione dellutente corrente:
if( dened(DOING_AUTOSAVE) && DOING_AUTOSAVE ) return $post_id; if ( post == $_POST[post_type] ) {
Il simbolo $ utilizzato da jQuery un alias che sostituisce la funzione jQuery. Se il namespace jQuery senza dubbio univoco, lalias $ pu essere utilizzato da altri script. Con listruzione jQuery.noConflict(), il simbolo $ non rappresenter pi un alias per jQuery, evitando in questo modo ogni possibile conflitto. Ci non significa che non si potr pi utilizzare $: baster passare il namespace alla calback eseguita dal metodo ready:
24 28 / Marzo 2012
Un plugin per creare un calendario di eventi WP WEB 2.0 Un plugin per creare un calendario di eventi in in WordPress Wordpress: la guida
jQuery(document).ready(function($){ });
Tutto il codice eseguito allinterno della funzione di callback potr far uso della funzione $ senza alcun rischio di con itti (maggiori info su http://docs.jquery.com/ Using_jQuery_with_Other_Libraries). Messo al sicuro il codice, passiamo al datepicker:
$(#iop_date_eld).datepicker({ dateFormat: yy-mm-dd, constrainInput: true, gotoCurrent: true, showAnim: slideDown });
Nel secondo caso, la Maps API si occuper di tutto, generando le coordinate e calcolando lindirizzo pi prossimo alla localit individuata. Nel nostro meta box abbiamo predisposto la div#canvas, senza speci carne le dimensioni. Il motivo quello di evitare di fare dello spazio inutile nel caso in cui lelaborazione degli script fosse disabilitata. Torniamo al le iop-script.js e aggiungiamo:
jQuery(document).ready(function($){ $(#canvas).css({height:200px,width:100%}) loadMap();
Basta la sola funzione datepicker() per ottenere il risultato mostrato in Fig. 3. I parametri passati alla funzione stabiliscono il formato dellinput, la forzatura del formato, la data prede nita, lanimazione del calendario.
Qui abbiamo solo impostato le dimensioni della div e invocato la funzione loadMap(), che vedremo tra un po. Prima creiamo due pulsanti: il primo per la geocodi ca dellindirizzo, il secondo per lazzeramento dei dati:
$(<input type=button id=iop_nd_location >) .insertAfter(#iop_address_eld) .click(function(){ geocode( $(#iop_address_eld).val() ); }); $(<input type=button id=iop_clear_location >) .insertAfter(#iop_nd_location) .click(function(){ map.setCenter(rome); map.setZoom(4); addMarker(rome); $(#iop_address_eld).val(); $(#iop_latlng_eld).val(); }); });
NOTA
Fig. 3: Il datepicker di jQuery UI o re una comoda interfaccia gra ca per inserire una data in un campo di testo
Il pulsante viene inserito subito dopo il campo di testo destinato allindirizzo, e gli viene associato un event handler che intercetta il clic e invoca la funzione geocode() (che de niremo pi avanti). Alla funzione viene passato, come argomento, lindirizzo della localit. Il secondo pulsante viene inserito in coda al primo. Al click dellutente, la mappa viene centrata su una localit prede nita (in questo esempio Roma), viene impostato un basso livello di zoom e invocata la funzione addMarker() (vedremo dopo anche questa). In ne, vengono svuotati i campi di testo. E ora tocca alla mappa.
WEB 2.0 Un plugin un creare un di eventi in WordPress Wordpress: la guidaUn plugin per creareper calendario calendario di eventi in WP
var map; var markers = []; var rome = new google.maps.LatLng(41.9012,12.4752); var center = rome; var geocoder = new google.maps.Geocoder();
Al clic dellutente, viene prima invocata la funzione revgeocode(), che restituir lindirizzo postale partendo dalle coordinate, viene poi aggiunto un marker, e in ne vengono mandate a video le coordinate del punto individuato, come valore del campo di testo #iop_latlng_ eld.
function geocode( address ) { geocoder.geocode({address: address}, function(results, status){ if (status == google.maps.GeocoderStatus.OK) { var ll = results[0].geometry.location; map.setCenter( ll ); addMarker( ll ); jQuery(#iop_latlng_eld).val( ll.lat() + , + ll.lng() ); }else{ jQuery(#iop_latlng_eld).val( Location not found ); } }); }
Abbiamo ssato un oggetto GLatLng che utilizzeremo per centrare la mappa allavvio dello script, o in caso di reset dei dati. Baster cambiare le coordinate iniziali per avere un nuovo centro. E ora passiamo alle singole funzioni:
function loadMap() { var myOptions = { zoom: 4, mapTypeId: google.maps.MapTypeId.SATELLITE }; map = new google.maps.Map( jQuery(#canvas)[0], myOptions );
NOTA
Abbiamo creato un object literal, contenente i parametri di visualizzazione e generato una nuova mappa. Preleviamo poi le coordinate geogra che dal campo input#iop_latlng_ eld:
var coords = jQuery(#iop_latlng_eld).val(); if(coords && coords != ) { var location = coords.split(/\s*,\s*/); center = new google.maps.LatLng( parseFloat(location[0]), parseFloat(location[1]) ); map.setZoom(15); }else { map.setZoom(5); } map.setCenter( center ); addMarker( center );
Il metodo geocode accetta come argomenti un object literal di parametri (in questo caso vi solo lindirizzo postale) e una funzione di callback cui vengono passati gli argomenti obbligatori results e status. Il primo un array contenente i dati della risposta (normalmente una sola), il secondo una stringa che rappresenta lo stato delloperazione. Una volta individuate le coordinate geogra che (results[0].geometry.location), si ssa il nuovo centro, si aggiunge un marker e si visualizzano le coordinate. In caso di errore, viene generato il messaggio Location not found. La funzione che e ettua loperazione inversa, ossia genera lindirizzo a partire dalle coordinate, quasi identica alla precedente:
function revgeocode( location ){ geocoder.geocode({location: location}, function(results, status){ if (status == google.maps.GeocoderStatus.OK) { jQuery(#iop_address_eld).val( results[0]. formatted_address ); }else{ jQuery(#iop_address_eld).val( Address not found ); } }); }
Se esiste un valore nel campo di testo, vengono eliminati eventuali spazi e generato il nuovo centro della mappa, con uno zoom elevato. Se il campo di testo vuoto, allora non si modi ca il centro iniziale, che rimane su Roma, e si mantiene basso il livello di zoom. Ora bisogner intercettare lazione dellutente sulla mappa:
google.maps.event.addListener(map, click, function(evt) { revgeocode ( evt.latLng ); addMarker( evt.latLng ); jQuery(#iop_latlng_eld).val( evt.latLng.lat() + , + evt.latLng.lng() ); }); }
Lunica di erenza di rilievo sta nei parametri passati al geocoder: in questo caso si tratta di una istanza di GLatLng che rappresenta la localit geogra ca individuata sulla mappa. In ne, le funzioni che aggiungono ed eliminano i marker dalla mappa:
26 30 / Marzo 2012
Un plugin per creare un calendario di eventi WP WEB 2.0 Un plugin per creare un calendario di eventi in in WordPress Wordpress: la guida
function addMarker( location ) { deleteOverlays(); var marker = new google.maps.Marker( { position: location, map: map }); marker.setMap( map ); markers.push(marker); }
La funzione addMarker() elimina i precedenti puntatori e crea un nuovo marker, subito fissato sulla mappa. Il marker viene poi aggiunto allarray markers. Lultima funzione dello script cancella i markers dalla mappa:
function deleteOverlays() { if (markers) { for (i in markers) { markers[i].setMap(null); } markers.length = 0; } }
Gli argomenti sono gli stessi di add_action. Quello che cambia il valore di $tag, che in questo caso sar un filter hook. Per visualizzare nel front-end i valori dei custom fields, faremo, dunque, ricorso ad un filter hook:
add_lter(the_content, iop_lter_content); function iop_lter_content( $content ) { global $post; global $iop_elds; $date_meta = get_post_meta($post->ID, $iop_ elds[0][id], true); $address_meta = get_post_meta($post->ID, $iop_ elds[1][id], true); $location_meta = get_post_meta($post->ID, $iop_ elds[2][id], true); if( is_single() ) { $content .= <h2> . __(Event details) . </h2>; $content .= <p> . __(Date) . : . $date_meta; $content .= <br /> . __(Address) . : . $address_ meta; $content .= <br /> . __(Location) . : . $location_meta . </p>; } return $content; }
SUL WEB
PUBBLICARE I PLUGIN
Pubblicare il plugin nella repository di wordpress.org (http:// wordpress.org/extend/plugins/) potrebbe essere una buona idea per ottenere visibilit in una community di migliaia di utenti. Volendo rendere disponibile pubblicamente un plugin, caso sar necessario aggiungere allintestazione del le la licenza duso GNU GPL (riportata nel codice allegato.
Vengono prima rimossi i markers dalla mappa, poi svuotato il relativo array. Questultima operazione necessaria in quanto il metodo setMap(null) nasconde gli array senza eliminarli. Occorrer, per questo, azzerare larray markers.
Fig. 4: La gura mostra come appare il custom meta box nella scheda Modi ca articolo. Si pu notare come i valori dei campi del meta box corrispondano ai tre custom eld visualizzati in basso
Abbiamo definito le variabili globali e prelevato i valori dei custom field. Il contenuto del post, passato come argomento della funzione, verr modificato con laggiunta dei metadati e restituito con return $content. Concludiamo qui la prima parte del tutorial. Il nostro plugin perfettamente funzionante, sebbene siano ancora molte le funzioni che possono essere aggiunte. Nel prossimo numero vedremo come perfezionarlo con una pagina di amministrazione, un widget e altro ancora. Non mancate! Carlo Daniele Marzo 2012 / 27 31
Il Custom Meta Box finalmente pronto! Ora, quando il post viene salvato, i dati inseriti vengono memo-
nostro primo template template fai da te per WEB 2.0 Wordpress: la guidaHTML 5 il HTML 5 il nostro primofai da te per Wordpress WP
IN QUESTO ARTICOLO APPROFONDIREMO LE NUOVE POTENZIALIT OFFERTE DA HTML5 E DA CSS3 PER REALIZZARE UN COMPLETO TEMPLATE FROM SCRATCH, DA INSTALLARE NEL NOSTRO BLOG IN WORDPRESS
GESTIAMO IL MATERIALE
Anzitutto cominciamo con una buona notizia: quando dobbiamo creare un tema (o convertire un progetto grafico, solitamente realizzato in Photoshop o Illustrator) possiamo fare pi o meno come desideriamo. Questo passaggio, ovviamente, necessita di una conoscenza minima della piattaforma da parte nostra. Nel momento in cui ci accingiamo a creare un tema, pu essere sufficiente creare un documento che funga da modello. Una sorta di pagina mastro. Data una pagina, come quella mostrata nella figura seguente, proviamo a scrivere la struttura della pagina HTML.
CD
mediacinema.zip
WEB
cdrom.ioprogrammo.it
Conoscenze richieste HTML, CSS, PHP Software HTML editor, Browser aggiornati per lHTML5 Impegno
Tempo di realizzazione
24 / Gennaio 2012 32
HTML 5 il nostro primo template da te per WP WEB 2.0 HTML 5 il nostro primo template fai fai da te per Wordpress Wordpress: la guida
<div id=wrapper> <header> <div id=logo><img src=images/logo.png alt=Media Cinema Logo></div> <nav id=main_nav> <ul> <li><a href=#>Home</a></li> <li><a href=#>Attori</a></li> <li><a href=#>Attrici</a></li> <li><a href=#>Autori</a></li> <li><a href=#>FAQ</a></li> <li><a href=#>Contatti</a></li> </ul> </nav> </header> <div id=content> <div id=main><img src=images/home_splash. png alt=Image intro></div> <aside> } </aside> </div> <footer>Info footer .... </footer> </div> </body> </html> Version: 1.0 Author: Faber04 Author URI: http://www.faber04.com/ Tags: fixed width, one column, sidebar */ nel footer. Il tema stato realizzato in HTML5 e CSS3. Autore: Fabio Bernardi (www.faber04.com).
Abbiamo specificato il nome del tema, un link di riferimento dallautore, una veloce descrizione e delle sue caratteristiche, e altre informazioni utili. Tutte queste info saranno disponibili nella pagina dei temi della nostra applicazione WordPress. Sfruttando le caratteristiche dei CSS3, abbiamo anche usato una font esterna ai soliti font di sistema.
@font-face{ font-Family:Koz; src:url(KozGoPr6N-Light.otf);
NOTA
Come potete vedere, la struttura abbastanza semplice. Alcune soluzioni, come il menu creato (per ora staticamente), dovranno essere rimosse nel momento in cui convertiremo questa pagina in un vero e proprio modello. Dove possibile abbiamo utilizzato alcuni TAG dellHTML5 che non dovrebbero creare problemi di compatibilit tra i vari browser. Per questo abbiamo usato soprattutto i TAG che potenziano la semantica: nav per i menu di navigazione, aside per contenuto tangenziale (correlato al contenuto del sito ma non principale), footer per il pi di pagina del sito, header per lintestazione del sito.
In alcuni casi abbiamo utilizzato unaltra importante novit dei CSS3: i gradienti. Come avete visto nellimmagine iniziale del progetto, le voci del menu erano divise a tab. Lo sfondo delle tab non costituito da immagini, ma si tratta di gradienti creati tramite CSS3. Nello stile #main_nav li potrete trovare un esempio di gradiente. Andiamo ora a strutturare il nostro progetto.
NOTA
Gennaio 2012 / 25 33
nostro primo template template fai da te per WEB 2.0 Wordpress: la guidaHTML 5 il HTML 5 il nostro primofai da te per Wordpress WP
Lintestazione diventerebbe quindi:
<!DOCTYPE HTML> <html> <head> <meta charset=<?php bloginfo(charset); ?>> <title><?php bloginfo(name); ?> <?php if ( is_ single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title> <!--[if lt IE 9]> <script src=http://html5shiv.googlecode.com/svn/ trunk/html5.js></script> <![endif]--> <link rel=stylesheet href=<?php bloginfo(stylesheet_ url); ?> type=text/css media=screen /> <link rel=alternate type=application/rss+xml title=<?php bloginfo(name); ?> RSS Feed href=<?php bloginfo(rss2_url); ?> /> <link rel=pingback href=<?php bloginfo(pingback_ url); ?> /> <?php wp_head(); ?> } ?> </head> <body> <div id=wrapper> <header> <div id=logo><img src=<?php bloginfo(template_directory)?>/images/logo.png alt=Media Cinema Logo></div> <nav id=main_nav> <ul> <?php wp_list_pages(depth=1&title_li=); ?> </ul> </nav> </header> )); if ( function_exists(register_sidebar) ){ register_sidebar(array( name => Footer Widget, before_widget => , after_widget => , before_title => <h4>, after_title => </h4>, } )); if ( function_exists(register_sidebar) ) { register_sidebar(array( name => Main Side Bar, before_widget => , after_widget => , before_title => <h4>, after_title => </h4>,
NOTA
NOTA
A PROPOSITO DI FONT
Se siete interessati ad approfondire il discorso riguardo alluso di font specifiche tramite CSS3, vi consigliamo la lettura di questo articolo presente su HTML5Today, un portale che affronta in maniera verticale luso di HTML5 e CSS3: http://www.html5today.it/ tutorial/css3-fontface-tuoi-fontpreferiti-sito
Tramite queste due condizioni, non solo permettiamo linserimento di aree widget nelle pagine footer e sidebar, ma creiamo anche le aree correlate per la gestione dei widget nellarea amministrativa di WordPress.
NOTA
Le parti in PHP sono quelle che la piattaforma di WordPress mette a disposizione, come la lista delle pagine (data dal metodo wp_list_pages()), la directory della template, ecc... Come avrete sicuramente notato, molto utile risulta il metodo bloginfo(); che permette di risalire alle info principali del sito. Lintestazione pronta. Proseguiamo con il resto. Prima di procedere verso le pagine principali (index, page, single, search) affrontiamo quelle pi semplici: footer, sidebar e functions. Le prime due (come possiamo intuire dal nome) servono a gestire il footer e la barra laterale del sito. Nel nostro footer abbiamo inserito alcune info staticamente, cos come la possibilit di gestire dei widget. Questo significa che dobbiamo prevedere nel footer un area apposita per i widget, cos come per la sidebar. Prima di vedere queste due pagine, sarebbe bene considerare la pagina functions.php:
<?php
Spostiamoci ora nella pagina footer. Per poter inserire unarea widget nel footer cos come faremo poi nella sidebar - baster scrivere il seguente codice:
</div> <footer>Theme powered by <a href=http://www. faber04.com>Faber04</a>. <?php if ( !function_exists(dynamic_sidebar) || !dyna mic_sidebar(Footer Widget) ) {} ?> <div> </footer> </div> </body> </html>
La pagina sidebar, invece, potrebbe essere costruita secondo la struttura classica di un tema per WordPress: inserire degli elementi standard (link, blogroll, elenco categorie) qualora lutente abbia lasciata vuota larea per i widget . Analizzando il file sidebar.php possiamo
26 / Gennaio 2012 34
HTML 5 il nostro primo template da te per WP WEB 2.0 HTML 5 il nostro primo template fai fai da te per Wordpress Wordpress: la guida
infatti leggere le seguenti righe iniziali:
<aside> <?php if ( !function_exists(dynamic_sidebar) || !dynamic_sidebar(Main Side Bar) ) : ?> <?php $today = current_time(mysql, 1); if ( $recentposts = $wpdb->get_results(SELECT ID, post_title FROM $wpdb->posts WHERE post_status = publish AND post_date_gmt < $today ORDER BY post_date DESC LIMIT 10)): ?> <div class=sideblock> <h3> </ h3> <ul> <?php foreach ($recentposts as $post) { if ($post->post_title == ) $post->post_title = sprintf(__(Post #%s), $post->ID); echo <li><a href=.get_permalink($post>ID).>; the_title(); echo </a></li>; } <?php _e(Recent Posts); ?> <?php get_footer(); ?>
In mezzo a questi due blocchi di codice dovremo inserire tutto loccorrente per gestire pagine, post e quantaltro. Nel nostro caso, inoltre, la parte della sidebar era immediatamente precedente al footer, quindi ci siamo potuti permettere di richiamarla poco prima del footer stesso. Il resto del codice, che potete leggere nella pagina index.php della nostra demo verifica la presenza di eventuali post, controlla se la pagina visualizzata lhome page, ecc... . Ovviamente scelte ed esigenze variano a seconda delle necessit del sito. Una volta completata la index come gi detto, possiamo salvarla esattamente identica con i seguenti nomi: page.php, single.php, search.php. Terminata la creazione della struttura dovremmo avere una cartella contente (almeno) i seguenti file:
SUL WEB
comments.php footer.php functions.php header.php index.php page.php search.php sidebar.php single.php style.css
Il caricamento di suddetto tema potr essere effettuato direttamente copiando la cartella (per intero) allinterno di quella di WordPress: wp-content/themes, oppure salvandola come file compresso (ZIP) e caricandola tramite il gestionale dei temi di WordPress. Una volta presente nellelenco dei temi disponibili, potr essere attivato e utilizzato tranquillamente.
Queste righe specificano esattamente quanto detto: in assenza di widget, la sidebar verr popolata di altri elementi secondari.
LE PARTI PRINCIPALI
Ora non resta che gestire le parti principali del nostro progetto WordPress: index, page, single e search. Tutte pagine simili per la loro struttura, ma riutilizzate per levenienza a seconda che lutente stia leggendo una pagina specifica, un post, oppure abbia effettuato una ricerca allinterno del sito. Queste pagine, salvo eccezioni particolari, sono solitamente tutte uguali. Baster quindi crearne una per fare anche un semplice copia&incolla. Partiamo dalla index.php. Allinizio sicuramente servir inserire lheader. Pertanto:
<?php get_header(); ?>
LAUTORE
Cos come alla fine della pagina avremo bisogno del footer e/o della sidebar:
<?php get_sidebar(); ?>
Fabio Bernardi nato a Roma, sviluppatore freelance dal 2003 Investe buona parte della sua attivit tra formazione e sviluppo soprattutto in ambiente Flash Platform. Collabora con diverse societ di advertising e web agency nonch docente presso diverse strutture di formazione. Dal 2007 al 2010 stato channel manager per lo User Group ufficiale di Adobe per Flex: FlexGALA. Dal 2008 entrato a far parte del gruppo di professionisti/ collaboratori esterni di Adobe: Adobe|Guru Come Adobe|Guru ha partecipato a diversi eventi live e seminari online di promozione dei prodotti Adobe per il Web
Gestione xxxx NON SOLO CODICEdei siti gestitimultipla dei siti gestiti da Wordpress Gestione multipla guida da Wordpress Wordpress: la
COME SFRUTTARE UNA CONSOLE DI COMANDO, UTILE PER AMMINISTRARE TUTTI I TUOI BLOG WORDPRESS INSIEME. TI PERMETTER DI OTTIMIZZARE LA GESTIONE DI TEMI E PLUG-IN, E LA PUBBLICAZIONE MULTIPLA DEI TUOI POST
alla portata di tutti, anche dei neofiti. La registrazione avviene in pochi minuti. sufficiente collegarsi alla paginahttp://managewp.com, cliccare sul pulsante Sign Up presente al centro dello schermo ed inserire i dati necessari alla registrazione. Alla fine dellinserimento, cliccare su Register e il servizio invier una email allindirizzo di posta elettronica segnalato, nella quale sono presenti i dati di autenticazione, ossia lusername scelto ed una password autogenerata. A questo punto bisogna digitare http://managewp. com/wp-login.php nella barra degli indirizzi del browser, indicare i dati di accesso e premere su Log In. ManageWP comparir in tutto il suo splendore e con tutte le sue funzionalit.
AGGIUNGERE I BLOG
Affinch i blog possano essere gestiti in modo centralizzato sar necessario associarli alla piattaforma, installando su ogni blog WordPress un plugin fornito direttamente dal servizio. Il plugin si chiama Worker e il suo download parte in automatico non appena si clicca sul link Download Worker (Fig.1) presente nella barra superiore del Control Panel. Come al solito, il plugin gi fornito in un archivio zip e pu essere installato sul blog di interesse, seguendo le normali procedure di setup per i tradizionali addon di WordPress. Una volta conclusa linstallazione del plugin dal pannello di amministrazione del blog o via FTP, e dopo aver proceduto alla sua attivazione, ritornare sulla console di ManageWP e cliccare sul pulsante Add New Site. Nel modulo che appare, indicare lindirizzo del blog, il nome utente dellamministratore e la sua password, per poi concludere loperazione cliccando su Add Site. Il blog verr aggiunto a ManageWP e comparir nella lista dei siti da gestire. Le medesime operazioni dovranno essere compiute per tutti i blog che si vuole amministrare centralmente con ManageWP e, ad inserimento terminato, ci si potr dimenticare di tutti i singoli accessi ai pannelli di amministrazione di WordPress e lavorare contemporaneamente su tutti i blog direttamente dal servizio.
REGISTRAZIONE SEMPLICE
Chi lavora gi con i blog WordPress e ne apprezza la facilit duso, allora si trover a suo agio anche ad operare con ManageWP. Fin da subito, il servizio, per quanto ancora in fase beta, si dimostra affidabile ed
Fig. 1: Per gestire un blog con ManageWP, necessario installare nel blog il plugin Worker
86 / Settembre 2011 36
Gestione multipla deiGestionexxxx siti gestitimultipla dei siti gestiti da Wordpress da Wordpress NON la guida Wordpress: SOLO CODICE
FACCIAMO GRUPPO!
Nellelenco Site compariranno tutti i blog su cui possibile operare. Prima di procedere oltre, consigliabile creare dei gruppi nei quali raccogliere diversi blog. Soprattutto se si stanno amministrando pi di tre blog con ManageWP, la funzionalit dei gruppi permette di concentrare diversi blog inerenti, ad esempio, lo stesso argomento allinterno di ununica entit, con la quale poi operare direttamente, senza agire sui singoli blog. Per creare un gruppo, cliccare su Groups (Fig. 2), inserire il nome del gruppo nellunico campo di compilazione disponibile e premere su Add Group. Per aggiungere un blog al gruppo appena creato, individuare il blog dallelenco Site, cliccare
WordPress classica. A queste funzionalit, ManageWP aggiunge la sezione Select Blogs, dalla quale lutente pu decidere su quali blog o gruppi pubblicare larticolo redatto, con la possibilit di postare il medesimo intervento anche su pi blog contemporaneamente (Fig. 4). Per farlo, basta inserire il segno di spunta su ogni blog o gruppo nella quale si vuole che compaia il nuovo post. Alla fine dellediting, cliccare su Publish e ManageWP si occuper di pubblicare il post scritto su ogni blog scelto. Ovviamente, ad ogni blog verranno associate anche le categorie ed i tags indicati. Infine, si pu notare che la funzionalit di pubblicazione multipla non presente solo per i post, ma anche per le pagine del blog WordPress: cliccando su Create new page o su Pages/Create A New Page, si potr decidere su quali blog pubblicare la medesima pagina, grazie alla sezione di selezione multipla Select Blogs.
NOTA
su Add Group ed inserire il segno di spunta accanto al gruppo nella quale si vuole far confluire il blog. Ripetere poi loperazione per ogni blog da associare ad un determinato gruppo.
Fig. 4: Pubblicazione multipla: si possono scegliere i blog su cui pubblicare un post
PLUGIN E TEMI
A questo punto, un amministratore pu avere la necessit di installare il medesimo plugin o lo stesso tema su blog differenti. Con ManageWP non c nulla di pi semplice: cliccare su Upload Themes/Plugins dal Control Panel per far comparire il pannello di installazione delle estensioni di WordPress. Qui, gli step da seguire sono pochi: scegliere cosa installare dal menu a tendina Plugins, indicare se attivare il plugin dopo linstallazione con un segno di spunta su Activate Plugins After Install e cliccare su Upload a file, per scegliere larchivio zip da caricare (Fig. 5). Ora, indicare se linstallazione deve avvenire per gruppo con un clic su Install By Group o scegliendo i singoli blog con un clic su Install By Blog: nelluno e nellaltro caso bisogna spuntare il gruppo od i blog sui quali si vuole installare il componente. Linstallazione avr dunque inizio cliccando su Install. Al termine, i plugin od i temi voluti saranno correttamente installati su ogni blog indicato, senza che lutente debba fare nullaltro. Per visualizzare quali temi o plugin sono installati su ogni singolo blog, si possono usare i pulsanti Plugins
PUBBLICAZIONI MULTIPLE
Dopo la fase organizzativa, si pu passare allo step operativo. Per redigere un post, si pu procedere in due modi differenti, cliccando sul pulsante Posts/ Create a New Post del blog specifico presente nella lista dei siti amministrabili oppure cliccando sul pulsante Create new post nel Control Panel. Le due modalit dazione sono praticamente identiche: infatti, in entrambi i casi comparir un pannello nella quale inserire il titolo, il testo, eventuali excerpt supportati da particolari temi, i trackback, i custom field, le opzioni di discussione, le categorie di appartenenza ed i tag per lindicizzazione del post, insomma tutti gli strumenti normalmente a disposizione nella console
Settembre 2011 / 87 37
Gestione xxxx NON SOLO CODICEdei siti gestitimultipla dei siti gestiti da Wordpress Gestione multipla guida da Wordpress Wordpress: la
i pulsanti Import/Export e Backup/Restore (Fig.6). La funzione Import/Export permette di effettuare il download di un file CSV, nel quale sono memorizzati tutti i dati di accesso ai differenti blog attestati su ManageWP. Il CSV ottenuto diventa utile qualora gli stessi blog debbano essere associati ad unaltra utenza di ManageWP, senza voler ripetere le operazione iniziali di inserimento dei blog nella piattaforma. Allo stesso modo, qualora i blog da aggiungere siano davvero molti, si pu pensare di creare un file CSV con tre campi (nellordine: URL del blog, username e password di WordPress) e caricarlo utilizzando il pulsante Upload a file. Questo permetter di configurare al volo ManageWP, senza utilizzare la procedura Add New Site descritta allinizio. Lunica accortezza da usare di aver installato il plugin worker in ogni blog, prima dellupload del file CSV. Con Backup/Restore si effettuano invece i backup od i ripristini dei blog remoti. Per effettuare il salvataggio del blog, basta cliccare Backup Now e decidere se conservare una copia di tutto il blog, del solo database o delle sole cartelle di temi, plugin e upload. A operazione terminata, il backup pu essere scaricato tramite il link Download oppure recuperato con il pulsante Restore.
NOTA
Fig. 5: ManageWP consente una gestione centralizzata anche per i plugin e i temi
e Themes presenti su ogni voce dellelenco Site. Con il primo si pu visualizzare quali plugin sono installati per quel determinato blog, agendo eventualmente anche sul loro stato di attivazione. Con il secondo pulsante, invece, si verifica quale tema attualmente installato. In Plugins presente il pulsante Add new plugin, che permette di installare una nuova estensione al blog ed, in modo speculare, anche in Themes presente il tasto Add new theme, con cui caricare un nuovo tema o cercarne uno adatto fra quelli preinstallati, raggiungibili dalle voci Search, Featured, Newest e Recently Updated. Attenzione per, perch tutte le operazioni svolte da questi pannelli riguarderanno solo ed esclusivamente il blog prescelto
STRUMENTI AMMINISTRATIVI
ManageWP offre ai suoi utenti una serie di utili strumenti che permettono di gestire al meglio il servizio. Le funzioni pi importanti si raggiungono attraverso
Fig. 8: La funzione Clone site consente di clonare o spostare un blog da un servizio di hosting a un altro
Fig. 6: Il Backup/Restore serve per avere una copia di salvataggio dellintero blog o di sue parti
Fig. 7: La gestione dei commenti avviene ancora su singolo blog e non in modo centralizzato
88 / Settembre 2011 38
www.punto-informatico.it
Dallinstallazione alluso dei post personalizzati, dai widget ai plug-in pi usati, dai template ad-hoc fino alla realizzazione di un Super Admin per la gestione dei contenuti. Ecco la guida dedicata al pi famoso CMS opensource per la gestione di blog: Wordpress. E in pi, i tutorial per integrare il modulo Paypal nel tuo blog e usare jquery e Google Maps API.
www.punto-informatico.it