Your SlideShare is downloading. ×
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Wordpress la guida
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Wordpress la guida

10,758

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,758
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
177
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Approfondimenti tematici Wordpress la guida Passo passo, le principali funzioni del più famoso CMS opensource per la gestione del tuo blog
  • 2. Wordpress:la guidaDall’installazione all’uso dei post personalizzati, daiwidget ai plug-in più usati, dai template ad-hoc finoalla realizzazione di un Super Admin per la gestionedei contenuti. Ecco la guida dedicata al più famosoCMS opensource per la gestione di blog: Wordpress.E in più, i tutorial per integrare il modulo Paypal neltuo blog e usare jquery e Google Maps API.Questo approfondimento tematico è stato pensa-to per chi desidera lanciarsi nel mondo del Web evuole farlo in maniera professionale, imparando adutilizzare una piattaforma che, nella sua semplicitàdisarmante, offre grandi potenzialità.Wordpress, nel suo essere facile da utilizzare, nascon-de innumerevoli funzioni avanzate che posso fare daago della bilancia nel decretare, o meno, il successodi un blog nell’infinito universo della blogosfera.
  • 3. Wordpress 3.0, tutte le novità. . . . . . . . . . . . . . . . 4Wordpress si aggiorna alla versione 3.0, portando molte novità.scopriamo passo passo come installarlo e come approfittare dellenumerose innovazioni introdotte: e se ora fosse meglio di Joomlacome CMS?Post personalizzati con Wordpress. . . . . . . . . . . 9I Custom Post Types di Wordpress 3 rendono il software un potentee completo cms, adatto anche alla realizzazione di siti aziendalicomplessi. vediamo come sfruttare la nuova caratteristia perintegrare tipi di dati con contenuto personalizzatoUtilizzare i widget di Wordpress. . . . . . . . . . . . . 13I widget di Wordpress sono gli strumenti ideali per aggiungere ognitipo di funzionalità ai propri siti: vediamo come creare un’agenda diappuntamenti utilizzando gli stessi e google calendarIntegrare Paypal nel tuo sito o blog . . . . . . . . 20Avere uno strumento per elaborare pagamenti online è ormai unaprerogativa di qualsiasi sito che propone servizi e prodotti. Perquesto scopo, uno degli strumenti più utilizzati è PayPal. vediamocome utilizzarlo con php e WordpressUsa jquery e le Google MapsAPI in Wordpress. . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Grazie ai plugin, wordpress si presta senza problemi ad ogniesigenza di sviluppo. vediamo come creare un calendario di eventicon un plugin, le librerie jQuery e jQueryUi e, ciliegina sulla torta, leGoogle MapsCreare un templatead hoc per Wordpress. . . . . . . . . . . . . . . . . . . . . . . 32In questo articolo approfondiremo le nuove potenzialità offerteda html5 e da css3 per realizzare un completo template “fromscratch”, da installare nel nostro blog in WordpressEcco il Super Adminper Wordpress. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36Come sfruttare una console di comando, utile per amministraretutti i tuoi blog wordpress insieme. Ti permetterà di ottimizzare lagestione di temi e plug-in, e la pubblicazione multipla dei tuoi post
  • 4. Wordpress: la guida Anteprima di Wordpress 3.0 WEB 2.0 Anteprima di Wordpress 3.0WORDPRESS 3.0TUTTE LE NOVITÀWORDPRESS SI AGGIORNA ALLA VERSIONE 3.0, PORTANDO MOLTE NOVITÀ. SCOPRIAMOPASSO PASSO COME INSTALLARLO E COME APPROFITTARE DELLE NUMEROSEINNOVAZIONI INTRODOTTE: E SE ORA FOSSE MEGLIO DI JOOMLA COME CMS? L a versione 3.0 di Wordpress era molto attesa: Wordpress a questo indirizzo http://wordpress.org/ il più famoso CMS opensource per la gestione download/nightly/ (oppure prendete quella presen- di blog si aggiorna, e penso sarete tutti curiosi te nel CD allegato alla rivista) e copiatela sul vostro di scoprire le novità. Anzitutto è stato accorpato server. I requisiti sono assolutamente basilari: PHP Wordpress µ (la versione multiblog del CMS creato da 4.3 e MySQL 4.1.2. Per testare Wordpress su macchine Matt Mullenweg): ora è possibile gestire installazioni Windows potete installare WampServer (http://www. multiple direttamente da Wordpress. È stata final- wampserver.com/): l’installazione di Apache, PHP e mente aggiunta una nuova gestione di menu e tasso- MySQL è semplicissima: un piccolo menu in traybar vi nomie e, grandissima innovazione, i siti non saranno aiuterà a gestire il vostro server locale. L’installazione❑ CD ❑ WEBwp3.rar più composti unicamente da post e pagine: sarà pos- di Wordpress è altrettanto semplice, come da tradi- sibile creare “custom post” (tipi di articoli) persona- zione. Create un database vuoto e seguite il wizard cdrom.ioprogrammo.it lizzati. Ovviamente ci sono stati decisi miglioramenti di installazione. Ecco la prima novità, piccola ma per quel che riguarda la sicurezza e le funzionalità rilevante: possiamo ora scegliere lo username dell’ac- core del CMS (ad esempio è stata riscritta la gestione count di amministrazione, aumentando la sicurezza dei contenuti multimediali). Infine, piccola ma sim- del nostro CMS. La dashboard non cambia molto patica novitò: Kubrick non è più il tema di default. rispetto alle versioni precedenti, quindi non dovreb- È stato sostituito da TwentyTen (2010) e ogni anno ci sarà un nuovo aggiornamento del tema di default. INSTALLAZIONE Esamineremo molte di queste novità nel corso dell’ar- ticolo, ma partiamo dal setup della nostra macchi- na di test. Scaricate l’ultima versione disponibile di Fig. 2: Il semplice Wizard di installazione di Wordpress 3.0 REQUISITI be essere un problema muovervi tra i menu: non èConoscenze richieste scopo di questo articolo trattare l’uso di Wordpress, PHP, HTML, CSS, in rete sono presenti molte guide: fate riferimento ai Apache motori di ricerca nel caso abbiate poca dimestichezza con Wordpress. Diamoci da fare e diamo finalmenteSoftware Un’installazione di un’occhiata alle novità più rilevanti! PHP, Database MySQLImpegno I NUOVI MENUTempo di realizzazione Una delle più grosse limitazioni delle versioni prece- denti di Wordpress riguardava la gestione dei menu: Fig. 1: Il menu di WampServer su Windows XP le funzioni wp_list_pages() o wp_menu_page() si 4 28 / Agosto 2010 http://www.iopro g:r aa g uodia Wordpre s s l m m i . t
  • 5. Anteprima di Wordpress 3.0 Wordpress: la guida Anteprima di Wordpress 3.0 WEB 2.0limitavano a mostrare l’elenco delle pagine presentiall’interno del sistema al massimo aggiungendo unelemento “home” e ordinando e formattando la listadi pagine ritornate secondo criteri impostati dallosviluppatore.Con Wordpress 3.0 cambia tutto: è stato integra-to all’interno un editor visuale per i menu che vipermetterà di assegnare ciascun menu creato allasua location (vedremo dopo cosa significa) e di Fig. 4: I quattro menu che abbiamo registrato all’internomodificare con semplici drag&drop il contenuto di del nostro temaciascun sottomenu: possiamo includere nel menupagine, url personalizzati (siti esterni o link diretti a nati momenti dell’esecuzione del nostro softwarepost, per esempio) o categorie. Nei temi compatibili in cui possiamo chiamare funzioni che eseguonocon questa funzionalità le modifiche si rifletteranno istruzioni PHP. Una volta registrati i menu neces-immediatamente nel template. sari, questi compariranno come caselle da riempire all’interno dell’editor visuale. Per richiamarli all’in- terno del nostro tema basterà invocare la funzione wp_nav_menu() passando i parametri più adatti NOTA alla visualizzazione nel nostro tema. Chiamando la funzione senza argomenti verrà ritornato e stampato il primo menu da noi crea- GLI HOOK IN to. Questo va bene nel caso in cui il nostro tema WORDPRESSFig. 3: Un menu creato con l’editor visuale: ecco come supporti un unico menu, ma se vogliamo maggior Wordpress, sin dall’inizio,viene visualizzato in TwentyTen controllo possiamo passare diversi argomenti alla ha fornito agli sviluppatori funzione inserendoli in un array: tra questi il nome moltissimi hook (actions e filters per la precisione), del menu da mostrare, le classi css da applicare e adatti allo sviluppo diVediamo ora come rendere i nostri temi compatibili così via. Un esempio di chiamata per il nostro tema nuove funzionalità (attra-con questa funzionalità. Per prima cosa registriamo potrebbe essere questa: verso i plugin) o alla per-all’interno del template i menu che vogliamo utiliz- sonalizzazione “estrema”zare. Possiamo dichiarare quanti menu vogliamo, wp_nav_menu( di temi. Potete trovare una array( ‘container_class’ => ‘menu-header’, lista completa degli hookusando la chiamata singola in caso di un solo menu: disponibili in Wordpress ‘theme_location’ => ‘secondo’, 2.9 (la versione 3.0 non add_action( ‘init’, ‘registra_menu’ ); ‘depth’ => ‘0’) è ancora stata rilasciata function registra_menu() { ); ufficialmente) all’indirizzo register_nav_menu( ‘primo-menu’, __( ‘Primo’ ) ); http://adambrown.info/p/ } wp_hooks/version/2.9 Il menu chiamato “secondo” sarà visualizzato come una lista non ordinata <ul> all’interno di un con-Oppure la chiamata multipla, per registrare più tainer con classe css menu-header: il visualizza-menu contemporaneamente, addirittura quattro in tore esplorerà il menu in tutta la sua profonditàquesto caso: (parametro depth uguale a zero). Fate riferimento al codex all’indirizzo http://codex.wordpress.org/ add_action( ‘init’, ‘registra_menu’ ); Template_Tags/wp_nav_menu per la lista com- pleta dei parametri utilizzabili. function registra_menu() { Con questa struttura di menu annidati, diventa register_nav_menus( davvero facile implementare menu multilivello in array( JavaScript, scrivendo il codice appositamente o ‘primo-menu’ => __( ‘Primo’ ), utilizzando uno degli innumerevoli script presenti ‘secondo-menu’ => __( ‘Secondo’ ), in rete e che mappano liste di link in menu con gli ‘terzo’ => __( ‘Terzo’ ), effetti più svariati. ‘quarto’ => __( ‘Quarto’ ) Ricordate: il tema TwentyTen è una ottima palestra ) per imparare ad utilizzare le nuove funzionalità ); di Wordpress 3.0. Esaminate il codice per capire } come sono implementati i menu e ricordate che per i più pigri è disponibile un widget (vi basterà attivarlo) che mostrerà i nostri menu nelle sidebarCosa succede? Abbiamo agganciato all’hook di ini- abilitate a contenere widget: è comunque necessa-zializzazione la funzione registra_menu(). Gli hook rio registrare i menu utilizzando le funzioni viste inin Wordpress sono appunto “agganci” a determi- precedenza.htt r : pre w : .i pr i grW opd/ / ws sw l aog uod a a m mo.it Agosto 2010 / 29 5
  • 6. Wordpress: la guida Anteprima di Wordpress 3.0 WEB 2.0 Anteprima di Wordpress 3.0 TASSONOMIE array( ‘post’ ), PERSONALIZZATE array( C’erano una volta i tag: parole associate agli articoli ‘public’ => true, di un blog che ne definivano sommariamente il ‘labels’ => array( contenuto: se un post ad esempio parla di automo- ‘namÈ => __( ‘Attori’ ), bili FIAT è possibile che i tag ad esso associati siano ‘singular_namÈ => __( ‘AttorÈ ) fiat, automobili, nuovo modello, ecc… ), Le tagcloud sono una delle più efficaci rappresenta- ) ziono grafiche dei tag e sono costituite dai tag stessi ); mostrati con font tanto più grandi quanto il tag è } maggiormente utilizzato. In Wordpress 3.0 si va oltre il concetto di tag passan- Ecco fatto. Abbiamo creato la nostra tassonomia do al concetto di tassonomia. Wikipedia definisce la “Attori” che possiamo assegnare ai nostri post e alle Tassonomia come la classificazione gerarchica di nostre pagine (o custom post, che esamineremo più concetti, e il principio stesso della classificazione. avanti nell’articolo). Fig. 6: La tassonomia “attori” NOTA WORDPRESS Fig. 5: Un esempio di tagcloud Come potete vedere in figura, è stata creata un’ap- E BUDDYPRESS posita voce di menu per questa tassonomia, mentre Wordpress è il sistema nel pannello di scrittura dei post vedremo una alla base di alcuni dei più Praticamente tutti i concetti, gli oggetti animati e nuova casella “Attori” dove potremo selezionare i famosi blog italiani e stra- non, i luoghi e gli eventi possono essere classificati tag della tassonomia appena creata. nieri. La sua semplicità ne ha fatto lo strumento idea- seguendo uno schema tassonomico. La tassonomia Come visualizzare queste tassonomie nella paginale per creare sistemi multi- è la scienza che si occupa genericamente dei modi dei post? Basterà aggiungere al template (all’inter- blog in pochissimo tempo. di classificazione (degli esseri viventi e non). Quindi no del loop Wordpress) la chiamata alla funzione BuddyPress (http://bud- per esempio la tassonomia di un album musicale get_the_term_list( $post->ID, ‘attori’); per recupera- dypress.org/) invece è un può essere data dagli artisti che l’hanno composto, re tutti i tag per la tassonomia “attori” legati a quel altro prodotto Automattic composto da una serie di mentre i film prodotti nel XX secolo potrebbero particolare post. Facile, no? plugin per Wordpress che essere catalogati per gli attori che li hanno recitati. permettono a Wordpress Wordpress si comporta allo stesso modo: passa da di diventare un social net- una tassonomia semplice (i tag) ad una tassonomia work a tutti gli effetti! più complessa e completa, completamente gerar- chica, dove possiamo creare nostre tassonomie, composte a loro volta da tag. Per creare una nostra tassonomia procediamo come per i menu: registriamo la nostra tassonomia e questa comparirà nel pannello di amministrazio- Fig. 7: La casella per la tassonomia “attori” nella pagina di scrittura dei post ne di Wordpress. Pensiamo ad esempio ad un blog che parla di film. Possiamo creare la tassonomia “Attori” e creare tag ad essa appartenenti che non sono altro che gli attori che vi hanno preso parte. Per cosa possiamo usare le tassonomie persona- lizzate? Pensate ad un catalogo di abbigliamento online magari associato ad uno dei tanti plugin che add_action( ‘init’, ‘tassonomia_attori’); trasformano Wordpress in un sistema di ecommer- ce come WP-ecommerce http://wordpress.org/ function tassonomia_attori() { extend/plugins/wp-e-commerce/. Potete crea- re diverse tassonomie (colori, taglie, stile, tessuto, register_taxonomy( ecc…) da assegnare a ciascun prodotto per creare il ‘attori’, vostro catalogo come più vi piace. 6 30 / Agosto 2010 http://www.iopro g:r aa g uodia Wordpre s s l m m i . t
  • 7. Anteprima di Wordpress 3.0 Wordpress: la guida Anteprima di Wordpress 3.0 WEB 2.0POST PERSONALIZZATI ‘parent’ => __( ‘Podcast superiorÈ ),Wordpress 3.0 introduce la possibilità di creare post ),personalizzati (custom post): attenzione però… Siparla di post nel significato più generico di “oggetto ‘public’ => true,facente parte di un blog Wordpress”, quindi nel ‘show_ui’ => true,corso dell’articolo la parola post potrebbe riferirsi ‘capability_typÈ => ‘post’,ad una pagina, un articolo o addirittura un menu. ‘hierarchical’ => false,La documentazione originale li chiama “custom ‘supports’ => array(‘titlÈ, ‘editor’, ‘author’)post”, ci adegueremo quindi a questa denomina- ));zione. A cosa servono i custom post? A moltissime }cose: possiamo trasformare il nostro blog in un sitodi annunci immobiliari ad esempio, creando un Cosa è successo? Abbiamo aggiunto una nuovacustom post “annunci” oppure possiamo creare voce di menu al nostro Wordpress. Cliccando sulun custom post “fotografie” se usiamo il blog come menu visualizzeremo una pagina in tutto e per tuttoportfolio fotografico o ancora creare un custom post simile a quella dei post, ma denominata “Podcast”.“podcast” se siamo aspiranti DJ. La chiamata register_post_type() accetta un nume-I custom post trasformano Wordpress in un CMS ro molto elevato di parametri. L’array labels peravanzato: infatti, a tutti questi contenuti “specia- cominciare si occuperà di impostare le etichette perli”, possiamo aggiungere campi personalizzati per i pulsanti del nostro pannello, come potete vedererendere ancora più “custom” il template che poi in Fig.8. A seguire ci sono alcuni parametri che per-andremo ad utilizzare per inserire quel particolare mettono di impostare come i nostri podcast saran-contenuto: un po’ come avviene in Joomla o Drupal, no visualizzati o gestiti: il parametro public impostama in maniera infinitamente più semplice. la “privacy” o meno dei nostri podcast, show_uiUn esempio pratico ci chiarirà le idee. Poniamo permette di attivare il pannello podcast nelle nostredi essere un aspirante DJ che vuole aggiungere la pagine di amministrazione. Per concludere, unapropria lista di podcast ad un blog Wordpress: per lista di parametri che imposta la visualizzazionecaricare gli mp3 dei podcast ci appoggeremo al del custom post appena creato: capability_type èmedia manager di Wordpress, mentre creeremo un parametro che imposta il “comportamento” delun custom post “podcast” per gestire gli articoli di nostro contenuto: in questo caso deve comportar-questa particolare categoria: attenzione però, non si si come un post (articolo) del blog. Il parametrotratta di una categoria di Wordpress personalizzata, hierarchical definisce se il nostro custom post puòma si tratta di un vero e proprio oggetto “differente” essere organizzato gerarchicamente (struttura addai normali post di Wordpress con sue peculiarità albero: nel caso dei podcast potremmo attivarlo pere possibilità molto maggiori rispetto ad un classico creare serie composte da più puntate organizza-post o una pagina. te gerarchicamente). L’array supports indica qualiEcco la chiamata che serve per registrare il nuovo sono le feature che il custom post può supportare:custom post “podcast”. Anche questa si appoggerà commenti, trackback, revisioni, ecc…all’hook “init”, come visto in precedenza. Con questa prima semplice impostazione possiamo già creare i nostri podcast come fossero articoli deladd_action(‘init’, ‘crea_custom_podcast’ ); blog, ma come potete vedere non saranno visua- lizzati nella home del nostro blog, se non verrannofunction crea_custom_podcast() { richiamati esplicitamente nel template o nel menu register_post_type(‘podcast’, array( (nell’immagine potete vedere il widget creato auto- ‘labels’ => array( maticamente da Wordpress per il nostro custom post ‘namÈ => __( ‘Podcast’ ), “podcast”). I custom post hanno indirizzi come que- ‘singular_namÈ => __( ‘Podcast’ ), ‘add_new’ => __( ‘Aggiungi Podcast’ ), ‘add_new_item’ => __( ‘Aggiungi nuovo Podcast’ ), ‘edit’ => __( ‘Modifica’ ), ‘edit_item’ => __( ‘Modifica Podcast’ ), ‘new_item’ => __( ‘Nuovo Podcast’ ), ‘view’ => __( ‘Visualizza Podcast’ ), ‘view_item’ => __( ‘Visualizza’ ), ‘search_items’ => __( ‘Cerca Podcast’ ), ‘not_found’ => __( ‘Nessun Podcast trovato’ ), ‘not_found_in_trash’ => __( ‘Nessun Podcast trovato nel cestino’ ), Fig. 8: Immagine che evidenzia il nuovo menu creato e l’utilizzo delle label personalizzatehtt r : pre w : .i pr i grW opd/ / ws sw l aog uod a a m mo.it Agosto 2010 / 31 7
  • 8. Wordpress: la guida Anteprima di Wordpress 3.0 WEB 2.0 Anteprima di Wordpress 3.0 sto www.mioblog.it/?post_type=podcast&p=1, portando Wordpress al di fuori del classico ambito dove post_type è il nome del custom post creato e il di “cms per blog” per realizzare qualunque sito vi parametro p è l’id dell’oggetto. possa venire in mente in tutta semplicità. In realtà manca ancora “un pezzo” importante del nostro custom post: come si fa ad aggiungere campi Fig. 10: I campi personalizzati che possiamo visualizzare per i nostri podcast Fig. 9: I nostri custom post nell’editor visuale del menu GESTIRE IL MULTIBLOG Come abbiamo già detto all’inizio dell’articolo, personalizzati al nostro podcast? Aggiungiamo delle Wordpress e Wordpress µ sono ora uniti in un azioni sempre in functions.php, possiamo aggiun- unico prodotto: per gli utenti di Wordpress 2.9.x gere la durata del podcast ad esempio (possiamo che aggiornano a Wordpress 3.0 non cambia eventualmente calcolarla in maniera dinamica) o nulla, così come non cambierà nulla per chi l’autore del podcast (recuperato attraverso l’oggetto ha già un’installazione di Wordpress attiva $post di Wordpress) e aggiornerà alla versione 3.0. Solo in fase di nuova installazione ci verrà chiesto se vogliamo add_action(“manage_posts_custom_column”, gestire un singolo blog o un multiblog, mentre “colonne_custom”); sarà possibile convertire un’installazione sin- add_filter(“manage_edit-podcast_columns”, gola di Wordpress 3.0 in una “multipla” con “colonne_podcast”); un tool apposito che verrà rilasciato prossi- mamente da Wordpress.org. La procedura di function colonne_podcast($columns) installazione è assolutamente semplice anche in { questo caso. Prima di cominciare l’installazione L’AUTORE $columns = array( aggiungete la riga : “cb” => “<input type=”checkbox” />”, Francesco Napoletano è “title” => “Titolo”, define(‘WP_ALLOW_MULTISITÈ, true); socio della Piko Design “description” => “Descrizione”, (www.pikodesign.it) dove “length” => “Lunghezza”, al file wp-config.php, Wordpress farà il resto. si occupa di tutta la parte “speakers” => “Autore”,di sviluppo web (dal PHP al Ovviamente, create network di blog su server “comments” => ‘Commenti’ abbastanza carrozzati per reggere il carico e non JavaScript, passando per Flex ed actionscript 3.0). ); su hosting condiviso con poche risorse! Il suo blog www.napolux. return $columns; com è tra i più conosciuti }nell’ambiente web italiano. function colonne_custom($column) ...ED È OPENSOURCE! { Abbiamo dato un’occhiata alle novità più impor- global $post; tanti di Wordpress 3.0: la versione finale non è if (“ID” == $column) echo $post->ID; ancora uscita, ma la 3.0 si appresta ad essere elseif (“description” == $column) echo substr($post- una versione di svolta per il CMS creato da Matt >post_content,0,30) . “...”; Mullenweg. Facilità d’uso, estrema personalizza- elseif (“length” == $column) echo “12:34”; zione e facilità di creazione dei template sono i elseif (“speakers” == $column) echo $post->post_ suoi punti di forza. Wordpress è un CMS che non author; può mancare nella nostra collezione di prodotti } opensource: offrire ai clienti soluzioni basate su Wordpress non è più un tabù e con questa Con la prima funzione, dichiariamo le colonne nuova versione possiamo affrontare le richieste personalizzate che dovremmo visualizzare, men- del mercato con maggiore fiducia nell’offrire un tre con la seconda imposteremo i valori per tali prodotto completo, moderno ed estremamente colonne. Come avete potuto capire, i custom post personalizzabile. sono uno strumento davvero molto flessibile: pote- te organizzare i vostri contenuti come più vi piace, Francesco Napoletano 8 32 / Agosto 2010 http://www.iopro g:r aa g uodia Wordpre s s l m m i . t
  • 9. I Custom Post Types di WordPress di WordPress Wordpress: la guida WEB 2.0 I Custom Post Types 3.0 3.0POST PERSONALIZZATICON WORDPRESSI CUSTOM POST TYPES DI WORDPRESS 3 RENDONO IL SOFTWARE UN POTENTE E COMPLETO CMS,ADATTO ANCHE ALLA REALIZZAZIONE DI SITI AZIENDALI COMPLESSI. VEDIAMO COME SFRUTTARELA NUOVA CARATTERISTIA PER INTEGRARE TIPI DI DATI CON CONTENUTO PERSONALIZZATO U na delle novità più attese e discusse della versione proporre ai lettori un archivio di gruppi musicali con le rela- 3.0 di WordPress è il supporto dei tipi di contenuto tive produzioni discografiche. Vedremo, infatti, come creare personalizzati. La nuova feature permette a WP di due diversi tipi di post, uno per le informazioni sugli artisti e fare il salto di qualità e passare da sistema di gestione di uno per le informazioni sugli album. Vedremo come associa- blog a vero e proprio CMS: personalizzare i tipi di contenuto, re ad ognuno dei due tipi le proprie “custom taxonomies” e, infatti, permette di creare complesse architetture di dati, infine, come mandarli a video nel front-end di WP in modo che consentono di utilizzare WP anche per lo sviluppo di siti diverso. aziendali complessi. ❑ CD ❑ WEB Ed è ciò che dimostriamo in questo articolo: questo mese, wp_custom_post_types.rar infatti, vedremo come utilizzare i “custom post types” percdrom.ioprogrammo.it creare un archivio discografico nel quale verranno messi ATTIVIAMO I CUSTOM in relazione artisti e pubblicazioni discografiche, estraendo POST TYPES completamente i contenuti dal normale ciclo iterativo che Attualmente, per creare nuovi tipi di post, sono percorribili manda a video i post in WP. due strade: ricorrere ad uno dei plug-in disponibili gratui- tamente nella repository o integrare il file functions.php del template corrente con il codice necessario (forse preferibile dal programmatore). Nel nostro sito discografico avremo I CUSTOM POST TYPES bisogno di aggiungere due tipi di post: uno destinato ad Il termine può trarre in inganno: non si tratta solo di post, ma ospitare le schede degli artisti, uno destinato alle schede di tipi di contenuto strutturati in base alle specifiche esigenze degli album. Vediamo come generare il primo tipo: dell’utente. L’istallazione base di WP supporta i seguenti tipi di post: post, page, attachment, revisions, nav_menu e sono add_action(‘init’,’register_groups’); tutti ospitati nella tabella wp_posts del database. Ciò che function register_groups() { cambia tra i vari tipi è il valore del campo post_type. $labels = array( Qualcuno potrebbe chiedersi perché utilizzare i “custom post ‘name’ => _x(‘Groups’, ‘post type general name’), types” e non, magari, le “custom taxonomies”. Apportando le ‘singular_name’ => _x(‘Group’, ‘post type singular name’), opportune modifiche al tema, sarebbe comunque possibile ‘add_new’ => _x(‘Add New’, ‘group’), personalizzare la visualizzazione dei post. La risposta non è ‘add_new_item’ => __(‘Add New Group’), univoca: lavorando con WP ci si trova spesso nella condizione ‘edit_item’ => __(‘Edit Group’),Conoscenze richieste ‘new_item’ => __(‘New Group’), di poter raggiungere lo stesso obiettivo adottando soluzioni Buona conoscenza di ‘view_item’ => __(‘View Group’), PHP; buona conoscenza diverse. Spesso, infatti, potrebbe essere più opportuno (o di WordPress comodo) utilizzare le “custom taxonomies”. Ma allora come ‘search_items’ => __(‘Search Group’),Software ‘not_found’ => __(‘No groups found’), decidere? Un criterio potrebbe essere quello di individuare i Web server con Php5 ‘not_found_in_trash’ => __(‘No groups found in Trash’), e MySQL, in ambiente tipi di contenuto in base ad elementi strutturali: ad esempio, *nix. In locale è con- una FAQ potrebbe essere strutturalmente diversa da un post, ‘parent_item_colon’ => ‘’, ‘menu_name’ => ‘Groups’); sigliato il pacchetto XAMPP, scaricabile organizzata e visualizzata in maniera autonoma, magari con $args = array( ‘labels’ => $labels, ‘public’ => true, all’indirizzo http:// ‘publicly_queryable’ => true, ‘show_ui’ => true, ‘show_ www.apachefriends. tassonomie diverse. Lo stesso potrebbe dirsi per la scheda org/it/xampp.html in_menu’ => true, ‘query_var’ => true, ‘rewrite’ => true, di un libro, per un prodotto in un catalogo e così via. CiòImpegno ‘capabili ty_type’ => ‘post’, ‘has_archive’ => true, ‘hierar che è importante ricordare, comunque, è che le possibilità di personalizzazione offerte dai “custom post types” sono chical’ => false, ‘menu_position’ => null, ‘supports’ => decisamente maggiori rispetto a quelle offerte da categorie, array(‘title’,’editor’,’thumbnail’,’excerpt’));Tempo di realizzazione tag e tassonomie. register_post_type(‘group’,$args); Nell’impostazione di questo articolo, abbiamo pensato di flush_rewrite_rules(); } 36 / W o r d p r e s s : l a g u 2011 Febbraio i d a 9 http://www.iopro g r a m m o . i t
  • 10. I Custom Post Types di Post Types3.0 WordPress 3.0 Wordpress: la guida I Custom WordPress di WEB 2.0All’avvio di WP viene invocata la funzione register_groups().All’interno di questa funzione vengono generati due array:il primo ($labels) provvede all’assegnazione delle etichetteche vengono visualizzate nel pannello di amministrazione ecostituisce uno degli elementi del secondo array; $args impo-sta una serie di parametri che stabiliscono il funzionamentodel tipo di post. Per una lettura dettagliata degli argomentidel secondo array, rinviamo al codex (http://goo.gl/tJxCe);qui ci soffermiamo solo sull’argomento supports. Questopermette di definire gli elementi del form che apparirannonel pannello di amministrazione, in fase di inserimentoe modifica dei contenuti. Nel nostro primo “custom posttype” saranno attivi i campi del titolo, l’editor del testo, illink per l’inserimento dell’immagine di anteprima, il campodell’estratto del testo. Una volta definiti i valori degli elementi Fig. 1: Una volta registrata una nuova tassonomia, questa apparedegli array, la funzione register_post_type(‘group’,$args) com- nel menu di sinistra del back-end di WordPresspleta il lavoro e registra il tipo group. In ultimo, per evitare NOTAeventuali problemi nella lettura dei permalink, forziamo ilrefresh delle regole di rewriting memorizzate, con la funzio- array(‘hierarchical’ => true, ‘label’ => “Genres”, REQUISITI DI SISTEMAne flush_rewrite_rules(). ‘singular_label’ => “Genre”, ‘rewrite’ => true)); } Per provare le feature di WordPress di cui abbiamo parla- Le tassonomie vengono registrate all’avvio di WP. Se ne to in queste pagine, consigliamo fortemente di utilizzare sistemi occupa la funzione register_taxonomy(), alla quale passiamo *nix, dato che sono diverseREGISTRARE I CUSTOM FIELDS i seguenti argomenti: le incompatibilità rilevate inUna volta definito il tipo di post, possiamo associarvi dei • una stringa con il nome della tassonomia ambiente Windows.campi personalizzati destinati ai metadati. Nel caso del tipo • un array con gli ID dei tipi di post cui associare la tasso- L’elenco dettagliato dei requisitidi post group, ci servirà un solo campo, destinato ad inserire nomia di sistema è disponibile all’in- dirizzo http://codex.wordpress.l’anno di costituzione del gruppo: • un array con una serie di parametri aggiuntivi (per l’elenco org/Hosting_WordPress. di parametri, rinviamo al codex: http://goo.gl/Qte64)add_action(‘admin_init’, ‘register_groups_fields’);function register_groups_fields() { Apriamo ora il pannello di amministrazione e diamo un’oc- add_meta_box(‘year’, ‘Year’, ‘year’, ‘group’,‘side’,‘low’);} chiata alla scheda “New Group”. Noteremo un box lateralefunction year() { che ci permetterà di inserire nuovi termini, esattamente allo global $post; $custom = get_post_custom($post->ID); stesso modo delle categorie dei normali post. $year = $custom[“year”][0] ?> NOTA <label>Year:</label> <input name=”year” value=”<?php echo $year; ?>”/> AVVERTENZA <?php } IL SALVATAGGIO DEI DATI Il codice presentato nei nostri Provvediamo ora al salvataggio dei dati: esempi non è completo.La funzione add_meta_box() aggiunge il campo year. Per esigenze di spazio non si add_action(‘save_post’, ‘save_group_meta’); è provveduto alla gestione diGli argomenti che questa accetta impostano l’ID del campo, eventuali errori nel recuperoil titolo, il nome di una funzione di callback, il tipo di post cui function save_group_meta() { global $post; dei dati. Nelle istallazioni diassociare il campo, l’area della pagina dove caricarlo, infine la update_post_meta($post->ID, ‘year’, $_POST[‘year’]); } WordPress su cui è stato testatopriorità. La funzione di callback year() genera il codice HTML il codice riportato, tuttavia, nondel campo. Il valore del campo, se esiste, viene generato A questo scopo utilizziamo l’hook save_post per invocare sono stati rilevati errori di sorta.grazie alla variabile $post. la nostra funzione save_group_meta(). Qui la variabile glo- bale $post ci fornisce l’ID del contenuto corrente. Questo viene passato come primo argomento della funzione upda- te_post_meta(), insieme alla chiave e il valore del “customREGISTRARE field”. Ora tutto è pronto per l’inserimento dei dati. PossiamoLE CUSTOM TAXONOMIES cominciare ad inserire le nostre band preferite (attenti, però:Secondo la stessa logica, registriamo le tassonomie del ancora non possiamo vederle nel front-end).nostro tipo di contenuto. Nel nostro esempio registriamo ilgenere cui si ispira l’artista (o la band):add_action(‘init’, ‘register_custom_taxonomies’); AGGIUNGIAMO GLI ALBUMfunction register_custom_taxonomies(){ Una volta definito il tipo Group, possiamo passare a lavorare register_taxonomy(“Genres”, array(‘group’), sul tipo Album. Le funzioni di WP necessarie sono esatta- 10h t t p : / / w w w . i o p r o g r a m mo.it Wordpre s s : / 37 Febbraio 2011l a g u i d a
  • 11. I Custom Post Types di WordPress di WordPress Wordpress: la guida WEB 2.0 I Custom Post Types 3.0 3.0 mente le stesse. Quindi, registriamo il “custom post type”: generare un selectbox che renda agevole il lavoro di chi inserisce i dati. Il selectbox, infatti, fornisce l’ID e il nome del add_action(‘init’, ‘register_albums’); gruppo e non consente possibilità di errore nell’associazione function register_albums() { degli album agli artisti. Oltre al campo Artist, creiamo un $labels = array( ... ); $args = array( ... ); campo per l’etichetta discografica con un normale textbox. register_post_type(‘album’,$args); E infine salviamo i dati: flush_rewrite_rules(); } function save_album_meta(){ Registriamo, poi, la tassonomia Genres anche per il tipo global $post; Album, integrando semplicemente il codice precedente: update_post_meta($post->ID, ‘year’, $_POST[‘year’]); update_post_meta($post->ID, ‘artist’, $_POST[‘artist’]); NOTA add_action(‘init’, ‘register_custom_taxonomies’); update_post_meta($post->ID, ‘etichetta’, $_ ESTENSIONI function register_custom_taxonomies() { POST[‘etichetta’]); } Se nello sviluppo del proprio register_taxonomy(“Genres”, array(‘group’,’album’), ...} sito non si rendono necessarie architetture dati complesse, La funzione register_custom_taxonomies() è la stessa utilizza- invece di registrare i “custom post types” estendendo il codice ta per registrare le tassonomie del tipo Group. Per associare la I TIPI DI CONTENUTO del file functions.php, potrebbe tassonomia anche al tipo Album, ci siamo limitati ad aggiun- DELLA HOME PAGE essere preferibile utilizzare un gere l’ID album all’argomento array(‘group’,’album’) della Le impostazioni predefinite di WP non prevedono la visualiz- plug-in che permetta di operare funzione register_taxonomy(). Infine, aggiungiamo i campi zazione né in home page, né nelle pagine di archivio, dei tipidal pannello di amministrazione. personalizzati: di post personalizzati. Nel nostro sito di esempio, vogliamoTra i vari plug-in disponibili, i più popolari ricordiamo il “Custom visualizzare in home page, oltre al tipo predefinito post, add_action(‘admin_init’, ‘register_albums_fields’); anche il nostro tipo group. Sempre nel file functions.php, Post Type UI” (http://wordpress. org/extend/plugins/custom- function register_albums_fields(){ aggiungiamo il seguente codice: post-type-ui/) e il “Simple add_meta_box(‘year’, ‘Year’, ‘year’, ‘album’, ‘side’, ‘low’); Custom Post Type Archives” add_meta_box(‘meta_info’, ‘Meta info’, ‘meta_info’, add_filter( ‘pre_get_posts’, ‘get_home_post_types’ ); (http://wordpress.org/extend/ ‘album’, ‘normal’, ‘low’); } function get_home_post_types($query){ plugins/simple-custom-post- if ( is_home() ) type-archives/). Ed ecco la funzione di callback che genera il codice HTML $query->set( ‘post_type’, array( ‘post’, ‘group’ ) ); dei campi: return $query; } function meta_info() { Noterete subito che non utilizziamo più la funzione add_ global $post; action(), che aggancia un’azione ad una funzione, ma la $custom = get_post_custom($post->ID); funzione add_filter(), utilizzata da WP per modificare in vario $artist = $custom[“artist”][0]; modo i dati prima della loro archiviazione nel db o della loro $etichetta = $custom[“etichetta”][0]; resa a video nel browser. L’hook pre_get_posts viene attivato query_posts(‘post_type=group&orderby=title’) ; prima dell’esecuzione della query principale. // the Loop Dunque, un attimo prima del caricamento dei dati, viene if ( have_posts() ){ ?><p> verificata la pagina richiesta dall’utente: se questi invoca la NOTA <label>Artist:</label><select name=”artist”> home page, la nostra funzione ridefinisce la query aggiun- CHILD THEMES <option value=”0”>Select artist</option><?php gendo, al tipo post, il nostro “custom type” group. Ora in Quando si apportano modifiche while (have_posts()) : the_post(); home page vengono caricati tutti i contenuti relativi agliad un tema, è sempre preferibile if ($artist == $post->ID) {$selected = “ selected”; artisti e ai gruppi. creare un “child theme”, } else { $selected = “”; } ossia un tema che estende le $before = ‘<option value=”’ . $post->ID . ‘”’ . funzionalità del “parent theme” $selected . ‘>’;senza modificarne i file originali. È quello che abbiamo fatto $after = ‘</option>’; the_title($before, $after); I SINGOLI CONTENUTI in questi esempi, copiando e endwhile; ?> E I METADATImodificando solo i file necessari. </select> </p> <?php } ?> <p><label>Label:</label> In home page, come abbiamo visto, andranno sia i normali Per una dettagliata analisi dei <input name=”etichetta” value=”<?php echo “child themes”, rinviamo ad post che i nuovi contenuti del tipo Group. Sarebbe oppor- $etichetta; ?>” /></p> tuno, però, cambiare anche la struttura dei singoli post, perioProgrammo di dicembre o alla documentazione online, all’in- <?php consentire una visualizzazione più completa dei dati. dirizzo http://codex.wordpress. } Apriamo, dunque, il file single.php e inseriamo, dopo il tag org/Child_Themes <?php the_content(); ?>, il seguente codice: Non cambia molto rispetto al codice precedente, se non per quanto riguarda il “custom field” artist. Ogni album, infatti, <?php $anno = get_post_meta($post->ID, ‘year’, true); ?> viene associato ad un artista/band. Quindi utilizziamo un <p>Anno: <?php echo $anno; ?></p> loop per selezionare i titoli dei contenuti del tipo Group e <?php $custom_query = new WP_Query(array(‘post_type’ 38 / W o r d p r e s s : l a g u 2011 Febbraio i d a 11 http://www.iopro g r a m m o . i t
  • 12. I Custom Post Types di Post Types3.0 WordPress 3.0 Wordpress: la guida I Custom WordPress di WEB 2.0 => ‘album’, ‘meta_key’ => ‘artist’, ‘meta_value’ => plate pagina per ognuno degli archivi di cui abbiamo $post->ID)); ?> bisogno. Creando, poi, delle gerarchie di pagine, possiamo<?php if ($custom_query->have_posts()) { ?>Albums:<ul> creare archivi in cui il filtro sui dati diviene via via più pre- <?php while ($custom_query->have_posts()) : ciso. Supponiamo, infatti, di voler ottenere un elenco di $custom_query->the_post(); ?> gruppi selezionati in base al genere. Dovremo solo creare <li><a href=”<?php the_permalink(); ?>” un nuovo template pagina e impostare una nuova query title=”<?php the_title(); ?>”> (si legga al riguardo la pagina http://core.trac.wordpress.<?php the_title(); ?></a></li><?php endwhile; ?></ul> org/ticket/13818). Nel caso si preferisca cominciare a lavo-<?php } wp_reset_query(); ?> rare su WP 3.1 (annunciato nel giorno di Natale in questo post http://goo.gl/KCUjC), allora le difficoltà saranno deci-Dopo la visualizzazione del testo completo del post, man- samente minori. Per gestire perfettamente la visualizzazio-deremo a video l’anno di costituzione del gruppo (o di ne degli archivi, basterà modificare la funzione di callbackpubblicazione dell’album), prelevando il valore del “custom invocata dall’hook pre_get_posts, come visto in precedenzafield” year: get_post_meta($post->ID, ‘year’, true). Subito nella modifica della home page:dopo impostiamo una nuova query, con una nuova istanza NOTAdell’oggetto WP_Query. L’array passato come argomento add_filter( ‘pre_get_posts’, ‘get_home_post_types’ );permette di filtrare i dati in base al tipo di post (‘post_type’ function get_home_post_types($query){ RIFERIMENTI=> ‘album’), alla chiave (‘meta_key’ => ‘artist’) e al valore del if ( is_home() || is_archive() ) Sono innumerevoli le risor-custom field (‘meta_value’ => $post->ID). In pratica, cerchia- $query->set( ‘post_type’, array( ‘post’, ‘group’ ) ); se online su WordPress.mo tutti gli album dell’artista individuato da $post->ID. Se la return $query; } Nell’impossibilità di elencarle tutte (o solo una piccola parte),query restituisce dati utili, allora viene generata una lista con consigliamo di partire dallai permalink dei singoli album. infine, visualizziamo la lista dei In pratica, abbiamo semplicemente modificato la con- documentazione ufficiale, all’in-termini della “custom taxonomy” Genres. All’interno della div. dizione che verifica la pagina corrente: if (is_home() || dirizzo http://codex.wordpress.entry-utility aggiungiamo: is_archive()). Così com’è, però, in WP 3.1 questo codice org/. Una panoramica delle genera l’errore “Warning: Illegal offset type in isset or novità introdotte dalla futura<p>Genres: <?php the_terms( $post->ID, ‘Genres’, ‘’, versione 3.1, di cui abbiamo dato empty in ...”. Per risolvere il problema, basterà aggiun- accenno in queste pagine, si ‘, ‘, ‘’ ); ?></p> gere il “conditional tag” is_admin(): trova su http://codex.wordpress. org/Version_3.1 if ( (is_home() || is_archive()) && !is_admin() ){ … }VISUALIZZARE GLI ARCHIVI Ora c’è proprio tutto per registrare tipi di post e tasso-Abbiamo visto che non ci sono grandi difficoltà nell’ag- nomie anche in WordPress 3.1.giungere un tipo di post alla home page. Purtroppo,però, l’attuale versione stabile di WP, la 3.0, non con- Carlo Danielesente la visualizzazione degli archivi per “custom posttype”. Per aggirare l’ostacolo, le soluzioni sono due: osi attende con pazienza il rilascio della versione stabiledi WP 3.1 (al momento in cui scriviamo è disponibilela RC1), oppure si opta per una soluzione di compro-messo: si crea un template pagina in cui modificare illoop predefinito e vi si associa una pagina con lo stessonome del tipo di post. Per prima cosa, duplichiamo ilfile page.php del tema installato e rinominiamo la copiain page-group.php. Cambiamo, poi, l’intestazione del filecome segue:/** * Template Name: Group custom post type * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */Prima del Loop, infine, impostiamo una nuova query:<?php query_posts(array(‘post_type’=>’group’)); ?> Fig. 2: Una volta ridefinita la query, assieme ai normali post, in home page verranno visualizzateSecondo la stessa logica, possiamo creare un nuovo tem- anche i contenuti del tipo group 12h t t p : / / w w w . i o p r o g r a m mo.it Wordpre s s : / 39 Febbraio 2011l a g u i d a
  • 13. Le Widgets API di WordPress Wordpress: la guida WEB 2.0 Le Widgets API di WordPressUTILIZZARE I WIDGETDI WORDPRESSI WIDGET DI WORDPRESS SONO GLI STRUMENTI IDEALI PER AGGIUNGERE OGNI TIPODI FUNZIONALITÀ AI PROPRI SITI: VEDIAMO COME CREARE UN’AGENDA DI APPUNTAMENTIUTILIZZANDO GLI STESSI E GOOGLE CALENDAR N ell’articolo sui “child themes” pubblicato il La scelta del Google Calendar, in realtà, è pretestuosa: mese scorso, abbiamo visto come estendere le una volta definita la struttura del plug-in/widget, infatti, funzionalità di WordPress aggiungendo nuove con poche modifiche al codice, sarà sempre possibile funzioni alla libreria del “parent theme”. Agendo sul file prelevare dati da altre fonti per inserirli all’interno functions.php, è possibile arricchire i temi di WordPress delle pagine di un qualsiasi sito “proudly powerd by di feature uniche, che li distinguano in mezzo all’infi- WordPress”. nità di temi esistenti. Tuttavia, sviluppare applicazioni all’interno del tema, rende difficoltoso applicare le❑ CD ❑ WEB stesse funzionalità a siti in cui sono istallati temi diversi.WPwidg.rar Qualora si avverta la necessità di distribuire le proprie I WIDGET DI WORDPRESS applicazioni, allora è necessario slegarle dai temi e svi- In sostanza, un widget è una piccola applicazione che cdrom.ioprogrammo.it lupparle come plug-in. esegue delle operazioni e genera un output HTML Un plug-in, dunque, è un’estensione indipendente dal in un’area determinata della pagina, definita “widget tema, in grado di manipolare in modo autonomo i dati area”. L’installazione base di WordPress porta con sé del database, di prelevare dati da origini esterne per una decina di widget che offrono le principali funzio- importarli all’interno del sito, di offrire interattività e ni di supporto al blogging, come le liste di categorie, possibilità di social networking. Grazie ad un plug-in gli archivi di notizie, le “tag clouds”. Oltre a quelli si possono anche generare applicazioni autonome, i predefiniti, esistono migliaia di widget adatti ad ogni widget, utilizzabili per manipolare e visualizzare dati scopo, dalla visualizzazione di dati presenti nel data- dalle origine più diverse. E, date le ampie possibilità di base, all’accesso a servizi esterni, come Twitter, Flickr utilizzo, dedichiamo questo articolo proprio ai widget: o uno dei mille servizi di Google. Molti sono disponi- vedremo, infatti, come creare un plug-in che prelevi bili gratuitamente nella repository di wordpress.org dati dal feed Atom di un Google Calendar pubblico e li (http://wordpress.org/extend/plugins/), altri hanno mandi a video attraverso un widget. vita autonoma, soprattutto quando non sono distribuiti gratuitamente. Ovviamente, non esiste un widget per ogni esigenza. Nei casi particolari bisogna sviluppare da sé, ma il framework offre tutti gli strumenti neces- sari: a partire dalla versione 2.8, infatti, è disponibile la nuova Widgets API, che rende molto più agevole il REQUISITI lavoro di chi sviluppa su WordPress. Vi sono diverse modalità di sviluppo di un widget.Conoscenze richieste In questo articolo vedremo come farlo utilizzando un Buona conoscenza di PHP e Wordpress plug-in.Software Web server con Php5. In locale è consigliato il pacchetto XAMPP LA STRUTTURA DI UN PLUG-INImpegno Un plug-in si compone di uno o più file .php, più eventuali script JS e fogli di stile, e trova collocazio-Tempo di realizzazione ne nella cartella wp-content/plugins dell’istallazio- Fig.1: Un widget per WordPress 3.0.1 che importa dati ne di WordPress. Qualora vi sia un unico file .php, da un Google Calendar questo andrà denominato come nome-plugin.php. 26 / Gennaio 2011 Wordpress: la guida 13 http://www.iopro g r a m m o . i t
  • 14. Wordpress: la guida Le Widgets API di WordPress Le Widgets API di WordPress WEB 2.0Nel caso in cui il plug-in si componga di più file,sarà necessario collocarli nella cartella wp-content/ class gcalEventsList extends WP_Widget {plugins/nome-plugin. Il file .php principale assume- function gcalEventsList(){rà lo stesso nome. …Il plug-in che svilupperemo avrà lo scopo di offrire }all’utente la possibilità di aggiungere un widget function widget($args, $instance){al sito, agendo dal pannello di amministrazione, …esattamente come avviene per gli altri widget di }WordPress: una volta istallato il plug-in, sarà pos- function update($new_instance, $old_instance){sibile attivare il widget trascinandolo nella sidebar …desiderata e impostando i relativi parametri di }configurazione. function form($instance){ … NOTA } } CHE STRADA add_action(‘widgets_init’, create_function(‘’, ‘return SEGUIRE? register_widget(“gcalEventsList”);’)); Un widget è una piccola applicazione che genera Per creare un widget sono necessarie solo quattro un output a video. Vi sono diversi modi di creare un funzioni. La prima, gcalEventsList(), è il costrutto- widget, il più semplice dei re di classe; le altre hanno lo scopo di mandare a quali è quello di creare una video il widget nel front-end (funzione widget()), di funzione nel file functions. salvare correttamente le impostazioni dell’utente php e richiamarla in un (funzione update()), di generare il form delle impo- template file. Se si sviluppano temi, stazioni del widget nel back-end (funzione form()). probabilmente questa saràFig.2: Una volta caricato e installato il plug-in, il widget Una volta creato il widget, bisognerà aggiungerlo la soluzione da preferire.apparirà nel pannello si amministrazione di WordPress all’elenco dei widget già presenti. A ciò provvede il In alternativa, soprattutto metodo add_action(), che “aggancia” una funzione se si decide di distribuirePartiamo con un esempio semplice e ipotizziamo ad un’azione specifica. Nel nostro esempio, l’azione le proprie applicazioni, si potrà optare per la crea-un widget composto da un solo file: gcal_events_list. è widgets_init. La funzione generata da create_fun- zione di un plug-in. Il fra-php. Il plug-in permetterà all’amministratore di ction(), infine, registra il widget (return register_ mework di WordPress e laimpostare solo il titolo del widget, mentre visualiz- widget(“gcalEventsList”);). L’impalcatura è pronta. Widget API forniranno tuttozerà all’utente un messaggio di saluto. Subito dopo ciò di cui si ha bisogno.presenteremo un esempio più complesso.Innanzitutto, bisognerà inserire nel file principale(nome-plugin.php) un’intestazione che indichi a CREIAMO IL WIDGETWordPress di cosa si tratta. L’intestazione va inseri- La prima delle funzioni del listato precedente è ilta all’interno dei simboli di commento: costruttore della classe gcalEvetsList. Questa prov- vede alla creazione del widget:<?php/* function gcalEventsList(){Plugin Name: GCal Events List $widget_ops = array(‘description’ => ‘A widgetPlugin URI: http://digitaladoptive.wordpress.com/gcal- that generates a list of events from a public Google events-list Calendar’);Description: GCal Events List generates a list of events $this->WP_Widget(‘gcal-events-list’, ‘GCal Events List’, from a public Google Calendar. You need the calendar $widget_ops); ID to make it work. }Version: 0.1Author: Carlo Daniele La funzione $this->WP_Widget accetta tre argomen-Author URI: http://digitaladoptive.wordpress.com/ ti: un ID che individua univocamente il widget, il*/ nome del widget visualizzato nel pannello di ammi- nistrazione, infine due array di parametri aggiunti-In pratica, abbiamo fornito a WP i dati necessari a vi, $widget_options e $control_options.individuare il plug-in e a distinguerlo da qualunque Nell’esempio abbiamo passato solo il primo arrayaltro installato. Ricordiamo che il plug-in serve con l’elemento description (per i dettagli sulla classecome piattaforma per lo sviluppo di un widget. WP_Widget, rinviamo alla documentazione online,Quindi, il passo successivo sarà quello di estendere all’indirizzo http://goo.gl/SpGus). Ora il nostrola classe WP_Widgets: widget esiste e possiamo già testarlo. Salviamo il 14h t t p : / / w w w . i o p r o g r a m mo.it Gennaio 2011 / : 27 u i d a Wordpre s s l a g
  • 15. Le Widgets API di WordPress Wordpress: la guida WEB 2.0 Le Widgets API di WordPress file gcal_events_list.php nella directory wp-content/ ray). L’array di questo primo esempio è costituito da plugins e apriamo il pannello di amministrazione: un solo elemento, il titolo del widget. il plug-in è già disponibile per l’attivazione, anche Il valore dell’elemento $instance[‘title’] viene attri- se non è ancora in grado di eseguire alcuna ope- buito alla variabile $title, dopo aver codificato alcu- razione. ni caratteri speciali (per i dettagli, si legga http:// codex.wordpress.org/Function_Reference/esc_ attr). Viene poi creato il modulo che permette l’aggiornamento dei parametri di configurazione. I valori dei campi del form sono generati dai metodi get_field_id() e get_field_name() della classe WP_ Widget e dal valore della variabile $title. NOTA LOCALIZZAZIONE Per la localizzazione delle installazioni, WordPress utilizza i file .po e .mo,come previsto dal progetto Gettext (http://www.gnu. Fig.3: Una volta caricato, il plug-in appare nel pannello di amministrazione in attesa dell’attivazione org/software/gettext/get- text.html). Per verificare l’esistenza della versione localizzata di una stringa Se diamo, poi, un’occhiata all’elenco dei widget, di testo, si utilizzano le funzioni __() e _e(). troveremo anche il nostro “Gcal Events List”. La prima restituisce la Fig.4: Dal pannello di amministrazione è possibile stringa tradotta (ovvia- aggiungere il widget alla sidebar e impostarne il titolo mente, se ne esiste la traduzione); la seconda, invece, la manda a video UN FORM PERcon un echo. Se si decide LE IMPOSTAZIONI di internazionalizzare il La funzione form() permette di creare un modulo L’AGGIORNAMENTO proprio plug-in, bisognerà in cui definire le impostazioni di funzionamento DEI DATIpredisporre i file .po e .mo e visualizzazione del widget. Supponiamo di voler I parametri trasmessi dal form vengono archivia- necessari. In mancanza offrire all’amministratore del sito la possibilità di ti nel database, ma non ci si dovrà preoccupare di questi, la localizzazione verrà effettuata con le cambiare il titolo del widget. La funzione si svilup- di stabilire alcuna connessione: il framework di traduzioni disponibili in perà come segue: WordPress è potente e permette di interagire con il wp-content/languages. database in tutta sicurezza.Per un esame approfondito function form($instance) Per aggiornare i parametri di configurazione ci si dell’argomento, consiglia- { serve della funzione update() e di poche righe dimo di partire dalle seguenti $title = esc_attr($instance[‘title’]); risorse: codice: ?> • Writing a Plugin <p> function update($new_instance, $old_instance) http://codex.wordpress. <label for=”<?php echo $this->get_field_id(‘title’); { org/Writing_a_Plugin ?>”>Title: $instance = $old_instance; • I18n for WordPress <input class=”widefat” $instance[‘title’] = strip_tags($new_instance[‘title’]); Developers id=”<?php echo $this->get_field_id(‘title’); ?>” return $instance; http://codex.wordpress. name=”<?php echo $this->get_field_name(‘title’); } org/I18n_for_WordPress_ ?>” Developers type=”text” La funzione aggiorna l’array $instance, restituendo- • Installing WordPress in value=”<?php echo $title; ?>” /> ne il valore corrente. Se l’istanza non è aggiornata your language </label> correttamente, la funzione restituisce il valore boo- http://codex.wordpress. </p> leano false. org/Installing_WordPress_ <?php Gli argomenti della funzione sono due array: il in_Your_Language } primo contiene i nuovi parametri di configurazione; il secondo contiene i parametri memorizzati prima L’argomento $instance è un array contenente le dell’aggiornamento dei dati. impostazioni correnti del widget (vedremo tra un Questi sono archiviati nella tabella wp_options del attimo come vengono generati gli elementi dell’ar- database di WordPress. 28 / Gennaio 2011 Wordpress: la guida 15 http://www.iopro g r a m m o . i t
  • 16. Wordpress: la guida Le Widgets API di WordPress Le Widgets API di WordPress WEB 2.0VISUALIZZIAMO nel front-end del sito. Per far questo servirà un feedIL WIDGET della Calendar Data API e , ovviamente, del codiceL’ultima fase è la generazione dell’output HTML PHP. La struttura del widget rimane la stessa, biso-che viene visualizzato nel front-end del sito. A que- gnerà solo integrare le funzioni widget(), update() esto provvede la funzione widget(): form(). Il costruttore di classe gcalEventsList() rima- ne lo stesso dell’esempio precedente.function widget($args, $instance){ Cominciamo con il form. Nel pannello di ammini- extract($args, EXTR_SKIP); strazione dovremo prevedere i campi necessari ad echo $before_widget; impostare un maggior numero di parametri: $title = apply_filters(‘widget_title’, $instance[‘title’]); if(!empty($title)){ function form($instance){ echo $before_title . $title . $after_title; $title = esc_attr($instance[‘title’]); echo “un saluto ai lettori di ioProgrammo”; $calendar = esc_attr($instance[‘calendar’]); } echo $after_widget; } $orderby = esc_attr($instance[‘orderby’]); $sortorder = esc_attr($instance[‘sortorder’]);La funzione accetta due argomenti. Il primo ($args) $maxresults = esc_attr($instance[‘maxresults’]);è un elenco di parametri associati al widget. Questi $startmin = esc_attr($instance[‘startmin’]); NOTAvengono estratti grazie alla funzione PHP extract(), $startmax = esc_attr($instance[‘startmax’]);che genera una variabile per ogni elemento dell’ar- … LA LICENZAray: le variabili che utilizziamo qui sono $befo- } DEI PLUG-INre_widget e $after_widget. Queste generano il codice La maggior parte delleHTML che racchiude i contenuti del widget: per I valori assunti delle variabili saranno utilizzati per licenze con cui vengo-default si tratta di un <li>. La funzione apply_fil- generare gli attributi degli elementi del form. Subito no rilasciati i plug-in di WordPress sono compa-ters() filtra il valore di $instance[‘title’] e lo applica dopo bisognerà inserire il codice HTML del form. tibili con la GPL2 (http://all’ “hook” widget_title. Infine, se la variabile $title Del campo di testo che genera il titolo del widget www.gnu.org/licenses/gpl-assume un valore utile, viene generato il contenuto abbiamo già detto. Gli altri campi serviranno ad 2.0.html). La compatibilitàdel widget. Il codice è completo e il widget fun- impostare i parametri da trasmettere alla Data API. è richiesta come requisitozionante. Un messaggio di saluto, però, è davvero Vediamo, quindi, un select box: per la pubblicazione nella repository delle estensioni.poco: bisogna creare un widget che aggiunga valore La licenza d’uso del pluginal sito. ?> va riportata in testa al <p> file principale del plug-in <label for=”<?php echo $this->get_field_id(‘orderby’); all’interno dei simboli di ?>”><?php echo __(‘Order by’); ?>: </label> commento.UN ELENCO DI EVENTI <select id=”<?php echo $this->get_field_id( ‘orderDAL GOOGLE CALENDAR by’ ); ?>” name=”<?php echo $this->get_field_name(Il nostro obiettivo è quello di prelevare un elenco di ‘orderby’ ); ?>” class=”widefat”>eventi da un calendario pubblico e di visualizzarli <option <?php if ( $instance[‘orderby’] == ‘lastmo dified’ ) echo ‘selected=”selected”’; ?>>lastmodified</ option> <option <?php if ( $instance[‘orderby’] != ‘lastmo dified’ ) echo ‘selected=”selected”’; ?>>starttime</ option> </select> </p> … Come sopra, il metodo get_field_id() restituisce l’ID del campo del form. Gli option button, inve- ce, assumono valori fissi (lastmodified e startti- me). L’attributo selected viene generato dinami- camente, in base alle impostazioni esistenti ($instance[‘orderby’]). Un altro campo del form stabilisce il numero massimo di elementi del feed che dovranno costituire la risposta della Data API: <p>Fig.5: Il primo widget di questo articolo mostra agli <label for=”<?php echo $this->get_field_utenti un semplice messaggio di saluto id(‘maxresults’); ?>”><?php echo __(‘Max results’); 16h t t p : / / w w w . i o p r o g r a m mo.it Gennaio 2011 / : 29 u i d a Wordpre s s l a g
  • 17. Le Widgets API di WordPress Wordpress: la guida WEB 2.0 Le Widgets API di WordPress ?>:</label> dente, se non che il numero degli elementi dell’ar- <select id=”<?php echo $this->get_field_id( ‘maxre ray è decisamente superiore. sults’ ); ?>” name=”<?php echo $this->get_field_name( ‘maxre sults’ ); ?>” class=”widefat”> IL WIDGET A VIDEO <option <?php if ( $instance[‘maxresults’] == 1 ) Per completare lo script manca solo la funzione echo ‘selected=”selected”’; ?>>1</option> widget(), che, come abbiamo detto, genera l’output <option <?php if ( $instance[‘maxresults’] == 3 ) HTML: echo ‘selected=”selected”’; ?>>3</option> NOTA <option <?php if ( $instance[‘maxresults’] == 5 ) function widget($args, $instance){ echo ‘selected=”selected”’; ?>>5</option> extract($args, EXTR_SKIP); SUBVERSION … echo $before_widget; Per la pubblicazione delle </select> $title = apply_filters(‘widget_title’, $instance[‘title’]); estensioni nella repository, </p> //google calendar parameters è necessario utilizzare il $params = array(sistema di controllo versio- ‘id’ => $instance[‘calendar’], ni Subversion (SVN). Come si vede, la logica del codice è la stessa. Non mostriamo gli altri campi, rinviando al Cd-Rom ‘orderby’ => $instance[‘orderby’], Una volta approvata la richiesta di pubblicazione allegato per il listato completo. ‘sortorder’ => $instance[‘sortorder’], del plug-in, infatti, wor- ‘max-results’ => $instance[‘maxresults’], dpress.org darà accesso ‘start-min’ => $instance[‘startmin’], alla SVN repository, da ‘start-max’ => $instance[‘startmax’] cui sarà possibile caricare ); e aggiornare le proprie estensioni. In pratica, si … tratta di un sistema di gestione dei file e delle Come prima, vengono estratti gli elementi dell’ar- directory di un proget- to, attraverso cui viene ray $args per generare le variabili $before_wid- registrata ogni modifica get, $after_widget. Qui si aggiungono $before_title apportata ai dati presenti. e $after_title, che generano il codice HTML che Grazie a questo sistema, è racchiude il titolo del widget. Viene, poi, inizializ- sempre possibile recupe- zata la variabile $title e creato l’array $params, i rare le versioni precedenti dei propri dati o analizzare cui elementi andranno a costituire i parametri da le modalità in cui i dati trasmettere alla Data API. Vediamo la seconda parte stessi sono stati modificati della funzione: nel tempo. Per lavorare con Subversion è necessa- if(!empty($title)){rio dotarsi di un Subversion echo $before_title . $title . $after_title; Client all’indirizzo http:// Fig. 6: La figura mostra il pannello di amministrazione da cui è possibile impostare i parametri di ricerca dei } subversion.apache.org/. dati che saranno visualizzati nel front-end if(!empty($params[‘id’])){ Per evitare di lavorare da prompt dei comandi, sono getData($params); disponibili anche delle All’archiviazione dei dati acquisiti provvede la fun- }else{ comode interfacce grafi- echo __(‘You shoud set the calendar ID to make thische, come TortoiseSVN per zione update(): widget work’); Windows (http://tortoise- svn.tigris.org/). function update($new_instance, $old_instance){ } Per essere subito operativi $instance = $old_instance; echo $after_widget; con SVN, basterà caricare $instance[‘title’] = strip_tags($new_instance[‘title’]); } i propri file nella directory $instance[‘calendar’] = strip_tags($new_ trunk di SVN e creare instance[‘calendar’]); una nuova versione nella Il motore del widget è la funzione getData(), che si $instance[‘orderby’] = $new_instance[‘orderby’]; occupa della trasmissione della richiesta alla Data directory tag, seguendo i semplici esempi riportati $instance[‘sortorder’] = $new_instance[‘sortorder’]; API e della resa a video dei dati restituiti. La funzio- all’indirizzo http://wor- $instance[‘maxresults’] = (int)$new_ ne viene invocata solo se è stato impostato l’ID del dpress.org/extend/plugins/ instance[‘maxresults’]; calendario. Vediamola nel dettaglio: about/svn/. $instance[‘startmin’] = $new_instance[‘startmin’]; $instance[‘startmax’] = $new_instance[‘startmax’]; function getData($params){ return $instance; extract($params, EXTR_SKIP); } $calID = $params[‘id’]; $feed = “http://www.google.com/calendar/feeds/” . Niente da aggiungere rispetto all’esempio prece- $calID . “/public/full?”; 30 / Gennaio 2011 Wordpress: la guida 17 http://www.iopro g r a m m o . i t
  • 18. Wordpress: la guida Le Widgets API di WordPress Le Widgets API di WordPress WEB 2.0 $params = “orderby=”. $params[‘orderby’] Questo dovrà essere collocato in una directory cui . “&sortorder=” . $params[‘sortorder’] va assegnato il nome stesso del plug-in. All’interno . “&max-results=” . $params[‘max-results’] della directory potranno essere aggiunti altri file e . “&start-min=” . $params[‘start-min’] cartelle, secondo le necessità di sviluppo. Avremo, . “&start-max=” . $params[‘start-max’]; quindi, la seguente struttura:Prima di tutto, vengono estratti i parametri che for- • pluginsmeranno la URI del feed e ricomposti nella stringa o gcal_events_list$params. Viene, poi, inoltrata la richiesta alla Data - gcal_events_list.phpAPI: - css • gcel_style.css$contents = @file_get_contents($feed . $params) or die(__(‘Bad request’)); Vediamo, ora, il codice. Per importare in sicurez-$xml = new SimpleXmlElement($contents); za un file .css, WordPress dispone delle funzioni wp_register_style() e wp_enqueue_style(). CreiamoInfine, vengono mandati i dati a video: in gcal_events_list.php una nuova funzione add_sty- les() che registri e accodi il foglio di style all’headerecho ‘<div id=”eventslist”>’; della pagina:foreach($xml->entry as $entry){ NOTA $gd = $entry->children(‘http://schemas.google. function add_styles() { com/g/2005’); $myStyleUrl = WP_PLUGIN_URL . ‘/gcal_events_list/ RIFERIMENTI $start = strtotime($gd->when->attributes()- css/gcel-style.css’; Il codex è il “city mall” >startTime); $myStyleFile = WP_PLUGIN_DIR . ‘/gcal_events_list/ degli sviluppatori di $end = strtotime($gd->when->attributes()- css/gcel-style.css’; WordPress. Nel codex si >endTime); if ( file_exists($myStyleFile) ) { trovano tutte le risorse indispensabili allo sviluppo $dayName = __(date(‘l’, $start)); wp_register_style(‘gcel_styles’, $myStyleUrl); di temi e plugin. $dayNum = date(‘j’, $start); wp_enqueue_style( ‘gcel_styles’); Tra le altre, consigliamo $month = __(date(‘F’, $start)); } di cominciare dalla lettura $year = date(‘Y’, $start); } della documentazione $date = $dayName . ‘, ‘ . $dayNum . ‘ ‘ . $month . ‘ ‘ dell Widgets API (http:// codex.wordpress.org/ . $year; All’interno del costruttore di classe aggiungiamo Widgets_API). Un altro $startTime = date(‘G:i’, $start); l’azione che associa la funzione add_styles() all’ riferimento indispensabile $endTime = date(‘G:i’, $end); “hook” wp_print_styles: è la documentazione della echo ‘<p>’; classe WP_Widget (http:// echo $date . ‘<br />’; function gcalEventsList() goo.gl/ZZXty). Altra utile lettura è quella echo (string)$entry->title . ‘<br />’; { della guida introduttiva alla if($startTime != $endTime){ add_action(‘wp_print_styles’, ‘add_styles’); creazione dei plugin (http:// echo $startTime . “ - “ . $endTime; … codex.wordpress.org/ } } Writing_a_Plugin).}}echo ‘</p>’;Il motivo per cui abbiamo utilizzato più istruzioniper generare la data è quello di facilitare la localizza-zione dei testi (vedi nota), grazie alla funzione __().Infine, una serie di echo mandano i dati a video.AGGIUNGIAMOUN FOGLIO DI STILETrattandosi di resa a video di dati, è probabile chesi avverta la necessità di adattare l’aspetto del wid-get al proprio tema: utilizzeremo, quindi, un fogliodi stile. Prima di aggiungere il codice necessario, Fig. 7: La resa a video del widget: data, titolo e orarioperò, bisogna modificare la struttura del plug-in. degli eventi 18h t t p : / / w w w . i o p r o g r a m mo.it Gennaio 2011 / : 31 u i d a Wordpre s s l a g
  • 19. 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 nell’intestazione del docu- mento. Ora sarà possibile agire dettagliatamente sulla visualizzazione dei dati, semplicemente aggiun- gendo le proprie istruzione al file css/gcel_style.css. Fig. 9: La figura mostra la struttura del plug-in pronto per la pubblicazione LA PUBBLICAZIONE DEL WIDGET Ora che il codice è completo, si potrebbe anche Un plug-in destinato alla pubblicazione avrà, dun- pensare di mettere il plug-in a disposizione della que, una struttura appena più complessa di quan- comunità di utenti e sviluppatori. to visto fino ad ora. Distribuire un plug-in può voler dire acquisire Oltre al motore dell’applicazione (il file gcal_ notorietà, e la notorietà ha sempre un valore eco- events_list.php del nostro esempio) e ad even- nomico e professionale. Il luogo migliore per distri- tuali altri file allegati, come fogli di stile e script buire un plug-in è la repository delle estensioni di .php e .js, bisognerà produrre un file readme.txt, WordPress (http://wordpress.org/extend/). destinato a contenere le informazioni visualizzate nella pagina della repository, ed alcune immagini, non obbligatorie, ma certamente utili all’utente a comprendere il funzionamento dell’applicazione prima della sua installazione. SUL WEB DISTRIBUIRE UN PLUG-IN Il “luogo” migliore per distribuire un plug-in è la Fig. 8: La figura mostra il modulo attraverso il qualerepository delle estensioni sottoporre il plug-in all’approvazione degli amministratori di WordPress: http://wor- di wordpress.orgdpress.org/extend/)codex. wordpress.org/ Per pubblicare un plug-in nella repository, lo svi- luppatore dovrà osservare alcune inderogabili Fig. 10: Il plug-in è stato approvato e caricato nella SVN regole che proponiamo di seguito: repository. Ora ha una pagina dedicata su wordpress.org 1. il plug-in deve essere rilasciato con una licenza compatibile con la GPL2; Il primo passo sarà, ovviamente, quello di aprire 2. il plug-in non deve avere finalità illegali; un account su wordpress.org. 3. il plugin va caricato nella Subversion repository Se il plug-in rispetta le regole su elencate (almeno di wordpress.org; quelle obbligatorie), si può procedere alla sua 4. nel plugin non possono essere inseriti collega- segnalazione dalla pagina http://wordpress.org/ menti esterni, come un link “powered by”, senza extend/plugins/add/. l’esplicito consenso dell’utente; Avuta l’approvazione alla pubblicazione (ci vor- 5. ogni plug-in deve essere accompagnato da un ranno più o meno 24 ore), si avrà accesso alla file readme.txt, secondo lo standard specificato Subversion Repository, dove si potrà caricare il all’indirizzo http://wordpress.org/extend/plu- plug-in. Da questo momento in poi, ogni upload gins/about/readme.txt; verrà automaticamente visualizzato nella pagina 6. è consigliato allegare al plugin almeno un paio dedicata da wordpress.org al nostro plugin: http:// di screenshot, uno che ne mostri il funzionamento wordpress.org/extend/plugins/gcal-events-list. nel pannello di amministrazione e uno che ne mostri l’anteprima nel front-end. Carlo Daniele 32 / Gennaio 2011Wordpress: la guida 19 http://www.iopro g r a m m o . i t
  • 20. Wordpress: la guidaUtilizzareUtilizzare API con PHP con PHP WEB 2.0 le PayPal le PayPal APIINTEGRARE PAYPALNEL TUO SITO O BLOGAVERE UNO STRUMENTO PER ELABORARE PAGAMENTI ONLINE È ORMAI UNA PREROGATIVADI QUALSIASI SITO CHE PROPONE SERVIZI E PRODOTTI. PER QUESTO SCOPO, UNO DEGLI STRUMENTIPIÙ UTILIZZATI È PAYPAL. VEDIAMO COME UTILIZZARLO CON PHP E WORDPRESS P 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 l’infrastruttura finanziaria esistente (conti bancari e carte di credito) per creare un sistema di pagamento su base globale e in tempo reale: ogni utente PayPal può inviare e ricevere soldi da altri utenti usando carte di credito ❑ CD ❑ WEB (anche prepagate), bonifici bancari e invii di denaro wp_paypal.rar “intra-paypal” in tutta sicurezza. Fig. 2: Il carrello del sito webedicola.itcdrom.ioprogrammo.it 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 Fig. 1: Il logo PayPal utenti “malevoli” ingannare un carrello non perfetta- mente sviluppato. Quello che ci interessa veramente non è il funziona- Se vedete il logo PayPal su un sito web potrete utilizza- mento in sé e per sé del carrello (infatti ci occupere- re il vostro conto PayPal per pagare i prodotti in vendi- mo solo di aggiungere elementi al minicarrello che ta (o fare una donazione): sempre più siti, anche italia- analizzeremo) è la sessione utente: ogni visitatore del ni, supportano PayPal: l’integrazione, come vedremo, nostro sito apre automaticamente una sessione di è facile, veloce e totalmente sicura: PayPal si occuperà navigazione. Durante questa sessione possiamo creare di gestire tutte le transazioni basate su carte di credito, dati da utilizzare (leggere e scrivere) in quell’unica “accollandosi” quindi tutti i problemi di sicurezza che sessione utilizzando per l’appunto l’array superglobale derivano da questo genere di attività. $_SESSION. Nel corso dell’articolo getteremo le basi per la creazio- Quel che ci serve poi è una tabella contenente i pro- ne di un carrello usando MySQL e PHP, integreremo dotti da visualizzare all’utente: niente di più semplice: PayPal all’interno delle nostre pagine web usando PHP e vedremo come è possibile, davvero con pochi clic, CREATE TABLE IF NOT EXISTS `prodotti`Conoscenze richieste ( integrare PayPal in Wordpress in modo da creare un PHP, MYSQL, HTML, `id` int(11) unsigned NOT NULL AUTO_INCREMENT, possedere un account sito di e-commerce sicuro in poco tempo. PayPal `nome` text NOT NULL,Software `prezzo` float NOT NULL DEFAULT ‘0’, WordPress PRIMARY KEY (`id`) CREIAMO IL NOSTRO )Impegno CARRELLO PHP Ogni sito di e-commerce che si rispetti mette a dispo- Come potete vedere lo schema della tabella è sempli-Tempo di realizzazione sizione degli utenti un carrello che permette di racco- ce: contiene un id, un nome del prodotto e il prezzo. gliere i prodotti da acquistare per poi inviare il paga- Possiamo riempirla con alcuni prodotti di prova, ese- mento e l’ordine al gestore del sito. guiamo in questo caso le seguenti query: 20 / Febbraio 2011 http://www.iopro s :r aa g uodia Wordpre s g l m m i . t
  • 21. Utilizzare le PayPal API con PHP con PHP Wordpress: la guida Utilizzare le PayPal API WEB 2.0INSERT INTO `prodotti` (`id`, `nome`, `prezzo`) } VALUES $_SESSION[‘carrello’] = $carrello;(1, ‘IoProgrammo, raccolta anno 2010’, 100),(2, ‘IoProgrammo, raccolta anno 2009’, 30.99), Per completare il nostro carrello potrete aggiungere(3, ‘IoProgrammo, raccolta anno 2009’, 140), all’interno dello switch() che vedete tutte le altre ope-(4, ‘IoProgrammo, raccolta anno 2008’, 150); razioni di aggiornamento e update del carrello che riterrete necessarie.Abbiamo inserito 4 prodotti nel nostro database, ognu- Fatta l’aggiunta al carrello, ritorneremo alla nostra listano con prezzi diversi. Il file di configurazione della prodotti e stamperemo la lista dei prodotti contenutaconnessione non sarà un problema: nel carrello, con prezzi moltiplicati per quantità inserita e totale del nostro ordine.$host = ‘localhost’;$user = ‘root’; <?php$password = ‘TUAPASSWORD’; if(isset($_SESSION[“carrello”]))$database = ‘carrello’; {$dbConn = mysql_connect($host,$user,$password); $tmp = array_count_values($_mysql_select_db($database,$dbConn); SESSION[“carrello”]); $totale = 0;Basterà includere il file di configurazione in ogni file in while(list($key,$value)=each($tmp))cui ci servirà poter raggiungere il database. { SUL WEBPassiamo ora alla creazione della lista prodotti nel $sql = “select * from prodotti where id = “ .nostro file PHP. mysql_real_escape_string($key); SVILUPPARE $res = mysql_query($sql,$dbConn); PER PAYPAL<?php $row = mysql_fetch_assoc($res); Volete affrontare seriamente lo$sql = ‘SELECT * FROM prodotti ORDER BY id’; echo “<strong>” . $row[“nome”] . “</strong> sviluppo di soluzioni basate su$result = mysql_query($sql,$dbConn); Quantit&agrave; <strong>” . $value . “</strong> PayPal? Allora dovete iscriverviecho ‘<ul>’; Totale: <strong>” . ($row[“prezzo”] * $value) . al sito dedicato agli sviluppatori PayPal che trovate all’indirizzowhile ($row = mysql_fetch_assoc($result)) “&euro;</strong><br />”; https://developer.paypal.com/ o{ $totale += ($row[“prezzo”] * $value); più semplicemente http://x.com. echo ‘<li>’. $row[‘nome’] . ‘ &euro;’ . $row[‘prezzo’]; } Troverete API, documentazione echo ‘ - <a href=”carrello.php?op=add&id=’.$row[‘id’].’” echo “TOTALE: “ . $totale .”&euro;”; e una community ricchissima di >Aggiungi al carrello</a></li>’; } spunti per le vostre applicazioni.} ?>echo ‘</ul>’;?> Il codice, come potete vedere, è molto semplice: la funzione array_count_values() si occupa di contare iEcco fatto. Non si tratta nient’altro che di una query sul prodotti presenti nel carrello (distinguendoli per id).database che stampa una serie di link ai prodotti da Per ciascuno di questi elementi vengono recuperatiaggiungere al carrello. la descrizione e il prezzo con una query al databaseL’operazione che faremo in carrello.php sarà quella MySQL.di aggiungere all’array $_SESSION[‘carrello’] presente Sommare poi prezzi e quantità per ottenere il totalenella sessione utente (se non esiste verrà creato) l’id dell’ordine è banale.dell’elemento su cui abbiamo cliccato:if(!isset($_SESSION[‘carrello’])) $carrello = array(); CARRELLI OPENSOURCE?else OTTIMO, GRAZIE! $carrello = $_SESSION[‘carrello’]; Abbiamo appena visto come iniziare a creare il nostroif(isset($_GET[‘op’])) carrello utilizzando PHP. Il nostro esempio non è ovvia-{ mente pienamente funzionante e richiede ancora $op = $_GET[‘op’]; molto codice per poter essere usato “nel mondo reale”. // Switch Come dicevamo prima, creare un carrello “a prova di switch ($op) bomba” può essere un’attività lunga e “noiosa”: potete { ovviamente metter mano al vostro codice e renderlo il case ‘add’: carrello perfetto per voi, ma se il tempo a disposizione $carrello[] = $_GET[“id”]; è scarso potete raccogliere a piene mani da quanto break; messo a disposizione dalla comunità opensource e } dal mondo del free software: là fuori esistono decineh t r : /w s w o guigrWtopd/p r ews : .lia p r o d aa m mo.it Febbraio 2011 / 21
  • 22. Wordpress: la guidaUtilizzareUtilizzare API con PHP con PHP WEB 2.0 le PayPal le PayPal API di script per la gestione di carrelli basati su JavaScript <form target=”paypal” action=”https://www.paypal. o PHP, che senza “l’invadenza” di un completo siste- com/cgi-bin/webscr” method=”post”> ma di e-commerce vi forniscono comunque tutte le funzionalità necessarie all’utilizzo nei vostri siti: PayPal <input type=”hidden” name=”cmd” value=”_s-xclick”> offre molti strumenti di questo tipo (li analizzeremo <input type=”hidden” name=”encrypted” value=”----- in seguito). Prima di passare a PayPal, fermiamoci per BEGIN PKCS7----- QkNjs+ln2DIi9cQbCGx4HTD+BX/rLRI un momento a guardare cosa offre la comunità: un KYgrtZ3Yah0J5XI2Qp5ob6bdLWocMk+YD0yfrkoQjV6GPE carrello molto funzionale e di semplice integrazione wx3plrDR0fOtw/79cNHC2Si8SIcvp99Jth79pS7uLrpzuvvxf (anche in servizi web che non supportano PHP come 1GmyP79tejqQwg==-----END PKCS7----- ad esempio Blogspot) è ad esempio SimpleCart che “> potete scaricare all’indirizzo http://simplecartjs.com/. <input type=”image” src=”https://www.paypal. Se volete invece qualcosa di più completo… Beh, pote- com/it_IT/IT/i/btn/btn_viewcart_LG.gif” border=”0” te dare un’occhiata alla sterminata schiera di sistemi name=”submit” alt=”PayPal - Il sistema di pagamento e-commerce disponibili in Rete. Potete cominciare da online più facile e sicuro!”> Zen Cart http://www.zen-cart.com/ e per conclude- <img alt=”” border=”0” src=”https://www.paypal.com/ re dare un’occhiata ad OpenCart http://www.open- it_IT/i/scr/pixel.gif” width=”1” height=”1”> cart.com/ o al “mastodontico” Magento http://www. </form> magento.com. Cliccando su questo pulsante l’utente visualizzerà il suo carrello, contenente i vostri prodotti, sul sito di PayPal. È importante ricordare che questo codice è NOTA INTEGRIAMO PAYPAL solo esemplificativo: il codice PayPal va creato sul sito NEI NOSTRI SITI WEB di PayPal, visto che i vari form contengono i dati iden- SESSION HIJACKING PayPal mette a disposizione di noi sviluppatori diversi tificativi dell’account che riceverà il pagamento e non Se avete intrapreso la strada del tool già pronti da utilizzare sui nostri siti: quella che va modificato in alcun modo quando incluso in una “mi creo il mio carrello da zero”, segue è una breve panoramica di ciò che PayPal rende pagina. Volete vendere un oggetto alla volta? Nessun fate attenzione alla gestione possibile fare: vediamo per prima cosa il pulsante problema. Il pulsante “Paga adesso” non prevede nes- delle sessioni utente: Il session hijacking (il furto dell’id di ses- “donazioni”. Per prima cosa registratevi (o fate login) sun carrello, ma una cifra fissa da pagare direttamente sione da parte di un estraneo) è sul sito http://www.paypal.it. Verificate poi il vostro sul vostro account. Il codice? Eccolo! un problema di sicurezza in cui conto PayPal per avere accesso alla pagina “Strumenti potreste incappare. Ogni sessio- per commercianti”. Il primo strumento che vedremo è il <form action=”https://www.paypal.com/cgi-bin/webscr” ne utente infatti è dotata di un carrello PayPal che potete trovare all’indirizzo https:// method=”post”> proprio id, che se non protetto <input type=”hidden” name=”cmd” value=”_s-xclick”> a dovere potrebbe essere sfrut- www.paypal.com/it/cgi-bin/webscr?cmd=_cart-facto- ry. Vi troverete davanti a un Wizard che vi permetterà <input type=”hidden” name=”hosted_button_id” tato da un malintenzionato perimpersonare un utente legittimo di creare un nuovo pulsante da aggiungere ad una value=”MIOCODICE”> della vostra piattaforma. pagina prodotto. Il form risultante sarà qualcosa di <input type=”image” src=”https://www.paypal.com/ questo tipo: it_IT/IT/i/btn/btn_buynowCC_LG.gif” border=”0” name=”submit” alt=”PayPal - Il sistema di pagamento <form target=”paypal” action=”https://www.paypal. online più facile e sicuro!”> com/cgi-bin/webscr” method=”post”> <img alt=”” border=”0” src=”https://www.paypal.com/ <input type=”hidden” name=”cmd” value=”_s-xclick”> it_IT/i/scr/pixel.gif” width=”1” height=”1”> <input type=”hidden” name=”hosted_button_id” </form> value=”VALORE_SEGRETO”> <input type=”image” src=”https://www.paypal.com/it_ IT/IT/i/btn/btn_cart_LG.gif” border=”0” name=”submit” alt=”PayPal - Il sistema di pagamento online più facile e sicuro!”> <img alt=”” border=”0” src=”https://www.paypal.com/ it_IT/i/scr/pixel.gif” width=”1” height=”1”> </form> Vi basterà inserire il codice HTML all’interno della pagina prodotto per visualizzare il pulsante “Aggiungi al carrello”. Una volta creati i pulsanti per ciascun pro- dotto è il momento di creare il pulsante “Visualizza Carrello”. PayPal vi proporrà di creare questo pulsante dopo ogni prodotto creato. Fig. 3: Le varie opzioni disponibili sul sito PayPal 22 / Febbraio 2011 http://www.iopro s :r aa g uodia Wordpre s g l m m i . t
  • 23. Utilizzare le PayPal API con PHP con PHP Wordpress: la guida Utilizzare le PayPal API WEB 2.0Come potete vedere dall’immagine di Fig.3, i moduli PAYPAL E WORDPRESSdisponibili sul sito PayPal sono moltissimi e coprono Come dicevamo ad inizio articolo, è facile poter inte-quasi tutte le esigenze di chi vuole ricevere in maniera grare Wordpress e PayPal e possiamo farlo in diversisemplice un pagamento via PayPal o carta di credito. modi: dal Widget per la semplice donazione, fino aFacile e veloce: si tratta fondamentalmente di compi- creare una completa soluzione di e-commerce basatalare dei Wizard e poi inserire il codice HTML ottenuto su Wordpress.all’interno delle nostre pagine web. E se volessimoqualcosa in più?LE PAYPAL APIPayPal mette a disposizione un ricchissimo set di APIche è possibile utilizzare usando l’apposito SDK chepotete scaricare dal sito http://x.com.Fino ad oggi, per utilizzare PayPal all’interno dei nostrisiti web, bisognava per forza passare da una paginaPayPal esterna al nostro dominio. Ora, grazie alle API,possiamo integrare completamente la gestione dei Fig. 4: La pagina su Wordpress.org dedicata ai plug-in PayPalpagamenti all’interno del nostro sito, senza dover “spe-dire” l’utente sulle pagine di PayPal.com come accadeanche con i vari Wizard che abbiamo visto fino ad ora. Per raggiungere il nostro scopo utilizzeremo qualcunoNel menu “Dev Tools” del sito X.com potete dare dei numerosi plug-in disponibili sul repository ufficialeun’occhiata a tutte le API disponibili. Tenete d’occhio di Wordpress che trovate all’indirizzo http://wordpress.le “Adaptive payments API”, le prime presentate ufficial- org/extend/plugins/.mente da PayPal, che permettono di gestire pagamenti Cominciamo dalle cose semplici: creare un widget di“semplici”, “concatenati” o “paralleli”. Il pagamento donazione PayPal per il vostro blog Wordpress è faci-semplice è il classico pagamento: i soldi passano da A lissimo. Installiamo il plugin PayPal Donations (http://a B. I pagamenti concatenati prevedono il passaggio di wpstorm.net/wordpress-plugins/paypal-donations/) evaluta virtuale da A a B e da questo a C, mentre i paga- personalizziamo la pagina delle opzioni.menti “in parallelo” permettono di dividere un unico Una volta scelte le nostre impostazioni preferite eccoimporto ricevuto tra più venditori. pronto il Widget: lo troverete nella sezione Aspetto ->Decisamente un passo avanti rispetto ai pagamenti Widget del pannello di amministrazione di Wordpress.1-1 che coinvolgono il sito PayPal come agente “in the Vi basterà trascinarlo in una delle sidebar del tema etmiddle” per le vostre transazioni. Per giocare con le voilà, ecco il pulsante di Donazione attivo sul nostroAdaptive API , cominciate con lo scaricare l’SDK per illinguaggio PHP a questo indirizzo http://tinyurl.com/adapi.L’SDK contiene la documentazione e tutta una serie diesempi pronti da visualizzare.Sarà anche necessario installare il pacchetto PEARXML_Serializer, se non è presente nella vostra installa-zione PEAR installatelo con il comando:pear install -f --alldeps XML_SerializerAndando con il browser all’indirizzo della index.phpdel pacchetto, vedrete una pagina con cui potretecominciare a prendere confidenza: il corposo docu-mento che trovate all’indirizzo https://cms.paypal.com/cms_content/US/en_US/files/developer/PP_AdaptivePayments.pdf può darvi sicuramente un’ideadi quanto siano vaste queste API.Sta a voi scegliere la soluzione migliore per il vostrolavoro: wizard e bottoni per semplici attività, adaptiveAPI invece se il vostro lavoro richiede personalizzazioniestreme e gestione massima dei flussi verso il servizioPayPal. Fig. 5: La pagina dei settings del plug-in PayPal Donationsh t r : /w s w o guigrWtopd/p r ews : .lia p r o d aa m mo.it Febbraio 2011 / 23
  • 24. Wordpress: la guidaUtilizzareUtilizzare API con PHP con PHP WEB 2.0 le PayPal le PayPal API blog. Il codice generato è quello che abbiamo già visto te personalizzare per aggiungere descrizione prodotto in precedenza, ma non dovrete preoccuparvi di loca- e prezzo. Nell’immagine Fig.6 potete vedere un post di lizzarlo o effettuare altre operazioni: ci penserà PayPal esempio con un prodotto nel carrello. Il pagamento? Donations a mettere tutto “in ordine”. Gestito tramite PayPal ovviamente! PayPal si occuperà anche della gestione dell’indirizzo di spedizione se attiverete l’apposita opzione nel pannello di ammini- WORDPRESS E PAYPAL strazione del plug-in. 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-com- merce completo, offrendo ai nostri utenti PayPal come MONETIZZARE CONTENUTI metodo di pagamento (e con PayPal tutte le maggiori USANDO PAYPAL carte di credito). Come possiamo fare? Ovviamente, Volete proteggere i vostri contenuti offrendoli solo a grazie a un plug-in, ma non sarà banale come visto in chi ha pagato una specie di “fee” di ingresso? Il plug-in precedenza: oltre a installare e configurare un plug-in Are PayPal (http://wordpress.org/extend/plugins/are- che “agganci” il nostro sito al nostro account PayPal paypal/) viene utilizzato per monetizzare il contenuto occorrerà confezionare i post del nostro blog come di un blog di WordPress utilizzando PayPal. “schede prodotto”. Vediamo come fare: per prima cosa Il plug-in è stato progettato per permettere la visione installiamo il plug-in WordPress Simple Paypal Shopping di certi post (o pagine) di Wordpress solo ad utenti che Cart che trovate all’indirizzo http://phonk.it/24v, attra- hanno pagato il fee di ingresso. Il pannello di ammi- verso il pannello di amministrazione del vostro blog. nistrazione è chiaro, vi basterà incollare il codice dei Compilate attentamente il pannello opzioni che tro- vostri pulsanti PayPal all’interno dei campi predisposti. vate all’indirizzo http://vostroblog.it/ options-general. php?page=wordpress-simple-paypal-shopping-cart/ wp_shopping_cart.php configurando valuta, indirizzo PayPal su cui ricevere i pagamenti ed eventuali spese PER CONCLUDERE di spedizione o soglie, raggiunte le quali, le spese di Nel corso di questo articolo abbiamo dato il via alla spedizione sono gratuite. Spostate poi il widget di creazione di un carrello “tutto nostro” e abbiamo inte- wp_shopping_cart all’interno della sidebar, in modo grato PayPal all’interno del nostro sito web e dei nostri da mostrare all’utente il carrello man mano che questo blog Wordpress. viene riempito. Una volta completati questi semplici Grazie a PayPal possiamo dimenticarci della parte “più passaggi possiamo creare il nostro post/scheda-pro- pericolosa” della gestione di un sito di e-commerce: dotto: il titolo e la descrizione sono identici a quelli delegare a terze parti l’elaborazione delle transazioni di un post “normale”, a fine post va poi aggiunto il con carte di credito solleva gli sviluppatori da tutta una markup del plug-in che mostrerà prezzo e pulsante serie di problemi e grattacapi non indifferenti. PayPal, “Aggiungi al carrello”. poi, mette a disposizione dell’utenza diversi strumenti “già pronti” come abbiamo visto, rendendo la vita di [wp_cart:Il mio prodotto:price:100:end] noi sviluppatori ancora più facile. Perché aspettare ancora? Integrare PayPal nel nostro Come vedete, il codice è dato da wp_cart:descrizione_ sito è facile, veloce e sicuro! prodotto:price:prezzo:end. In corsivo i campi che dovre- Francesco Napoletano L’AUTORE 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 ipiù conosciuti nell’ambiente web italiano. Fig. 6: In azione il nostro e-commerce basato su Wordpress 24 / Febbraio 2011 http://www.iopro s :r aa g uodia Wordpre s g l m m i . t
  • 25. Un plugin per creare un calendario di eventi in in WordPress Wordpress: la guida Un plugin per creare un calendario di eventi WP WEB 2.0USA JQUERY E LE GOOGLEMAPS API IN WORDPRESSGRAZIE AI PLUGIN, WORDPRESS SI PRESTA SENZA PROBLEMI AD OGNI ESIGENZA DI SVILUPPO.VEDIAMO COME CREARE UN CALENDARIO DI EVENTI CON UN PLUGIN, LE LIBRERIE JQUERYE JQUERYUI E, CILIEGINA SULLA TORTA, LE GOOGLE MAPSI n Rete sono decine di milioni i siti sviluppati con controllo dei dati inseriti dall’utente. Inoltre, decodifi- WordPress. La semplicità di utilizzo e il numero care un indirizzo postale per trasformarlo in coordinate incredibile di estensioni, oltre ai temi grafici, ne geografiche (uno degli scopi di questo nostro articolo)hanno fatto uno dei CMS più diffusi, un poderoso stru- non è affatto operazione immediata e alla portata dimento di business e un compagno fidato per chi opera tutti. Un plugin può sopperire a questi inconvenienti enel mondo del web design. In questo articolo vedremo arricchire la UI, inserendo nel pannello di amministra-come estenderne le funzionalità, sviluppando un plu- zione un “custom meta box”, per godere di una gestio-gin in cui si fondono le funzionalità delle librerie jQuery ne avanzata dei custom field.e jQuery UI, con le API di Google Maps, con lo scopo di ❑ CD ❑ WEBcreare e gestire un calendario di eventi. Si tratterà di wp_jquery_gmaps.zip cdrom.ioprogrammo.itcreare normali post cui associare una data, un indirizzopostale e una coppia di coordinate geografiche. I dati I CUSTOM META BOX:così inseriti saranno disponibili per la visualizzazione VEDIAMO COSA SONOnel front-end. Un “post meta box” è un blocco di codice HTML visua- lizzato nelle pagine di acquisizione e modifica dei post. In aggiunta ai “post meta box”, lo sviluppatore può creare dei “custom meta box”, ossia blocchi che permet-I CUSTOM FIELDS tono l’inserimento di dati aggiuntivi rispetto a quelliDI WORDPRESS predefiniti. In pratica, un custom meta box è utilizzatoI dati di cui si compone un post di Wordpress sono iltitolo, il contenuto, una o più categorie, uno o più tag.L’utente può aggiungere ulteriori dati, strutturati comemeta-informazioni, servendosi dei cosiddetti “customfields”. Si tratta di semplici coppie testuali nome-valore,che vengono memorizzate nella tabella wp_postme-ta del database. Nella loro semplicità, i custom fieldpermettono di creare architetture dati anche moltocomplesse. Purtroppo la UI di WordPress dispone disemplici campi di testo, e non offre alcuna possibilità di Conoscenze richieste Buona conoscenza di PHP; buona conoscenza di WordPress Software Web server con Php5. In locale è consigliato il pacchetto XAMPP, disponibile sul CD-Rom allegato a questo numero Impegno Tempo di realizzazioneFig. 1: I custom field sono delle semplici coppie nome-valore che Fig. 2: Un custom meta box può ospitare controlli di ogni tipo. La figurapossono essere acquisite grazie a normali campi di testo. mostra come appare il meta box sviluppato in questo articoloWtopd/p r ews : .lia p r o d aa m mo.ith t r : /w s w o guigr Marzo 2012 / 21 25
  • 26. Wordpress: la guidaUn plugin per creare un creare un calendario di eventi in WP WEB 2.0 Un plugin per calendario di eventi in WordPress soprattutto per gestire dei custom field. Nel plugin che INSERIRE SCRIPT E FOGLI presentiamo, il custom meta box conterrà tre campi di DI STILE IN WORDPRESS testo e una mappa. Il primo campo ospiterà una data, Il primo passo sarà quello di inserire le librerie. A tal nel formato aaaa-mm-gg. Per facilitare l’inserimento fine, WP fornisce la funzione add_action(), che aggan- dei dati, ed evitare errori di digitazione, al campo verrà cia una funzione ad un’azione. La funzione viene associato il datepicker di jQuery UI. Il secondo campo definita dallo sviluppatore, mentre l’azione viene ese- conterrà un indirizzo postale “human readable”, inse- guita al verificarsi di un determinato evento. La sintassi ribile sia direttamente dall’utente, sia attraverso il geo- generica è la seguente: coder della Google Maps API. Il terzo campo ospiterà le coordinate geografiche corrispondenti all’indirizzo, <?php add_action( $tag, $function, $priority, $num_ generate dinamicamente dalla Maps API. Questi dati, args ); ?> una volta inseriti, saranno memorizzati all’interno di tre custom field. $tag è il nome dell’azione (o “action hook”), $function è la funzione di callback, $priority stabilisce l’importanza ai fini dell’esecuzione della funzione, $num_args è il numero di argomenti passati alla funzione. È neces- NOTA PRIMI PASSI CON I PLUGIN sario caricare gli script solo quando l’utente crea un Un plugin è una piccola applicazione che aggiunge nuovo post, oppure ne modifica uno esistente. Ecco gli LE COSTANTI funzionalità all’istallazione base di WP. Esistono plugin “hooks” cui faremo ricorso in questa prima fase: DELLE DIRECTORY per qualunque scopo e, teoricamente, non ci sonoWP dispone di varie costanti che limiti a quello che si può creare. Un plugin si compone add_action(‘admin_print_styles-post.php’, ‘iop_admin_ conservano i percorsi di alcune di almeno un file, chiamato plugin-slug.php collocato, enqueue_styles’ ); directory cui accedono plugin e in fase di istallazione, nella directory /wp-content/ add_action(‘admin_print_styles-post-new.php’, ‘iop_ temi. La costante WP_PLUGIN_ admin_enqueue_styles’ ); URL, utilizzata nel nostro plugins. Spesso il plugin dispone di una directory spe- cifica avente lo stesso nome. Lo slug del nostro plugin add_action(‘admin_print_scripts-post.php’, ‘iop_admin_ esempio, memorizza la URL completa della directory plugin. sarà ioprogrammo_events, il nome sarà “ioProgrammo enqueue_scripts’ ); Il ricorso alla costante, piuttosto Events plugin”. add_action(‘admin_print_scripts-post-new.php’, ‘iop_che alla scrittura per esteso delle Il file .php dovrà contenere innanzitutto un’intestazio- admin_enqueue_scripts’ ); URL, è sempre preferibile, dato che l’utente ha la possibilità di ne, nella forma di commento: spostare la directory dalla sua Gli hooks admin_print_styles e admin_print_scripts per- collocazione predefinita. /* mettono di agganciare script e stili a quelli caricati di Maggiori info su http://codex. Plugin Name: ioProgrammo Events plugin default da WP. I parametri {post.php} e {post-new.php} wordpress.org/Determining_ Plugin URI: http://digitaladoptive.wordpress.com/ individuano le pagine in cui eseguire l’azione (“nuovo Plugin_and_Content_ Description: This plugin allows admin to manage single Directories post” e “modifica post”). Ed ecco le funzioni di callback: day events Version: 1.0 function iop_admin_enqueue_styles() { Author: Carlo Daniele wp_enqueue_style(‘jquery-ui-theme’, ‘…/themes/ Author URI: http://digitaladoptive.wordpress.com/ smoothness/jquery-ui.css’); Copyright 2011 Carlo Daniele } */ wp_enqueue_style accoda il foglio di stile. Il primo para- Dei dati inseriti, il solo Plugin Name è obbligatorio, in metro è l’ID, il secondo è la URL del file: qui abbiamo quanto permette a WP l’individuazione del plugin. Il inserito il tema di jQuery UI, “smoothness”. Ora inseria- nome deve essere, ovviamente, univoco. Le altre infor- mo gli script: mazioni sono facoltative, ma utili alla distribuzione del plugin. Passiamo ad analizzare il codice. La prima function iop_admin_enqueue_scripts() { istruzione definisce la costante IOP_DIR, che individua wp_deregister_script(‘jquery-ui-core’); la posizione del plugin: wp_register_script(‘jquery-ui-core’, ‘…/jquery-ui.min. js’, array(‘jquery’) ); define( ‘IOP_DIR’, WP_PLUGIN_URL . ‘/’ . str_ wp_enqueue_script( ‘jquery-ui-core’ ); replace(basename( __FILE__),””,plugin_basename(__ wp_enqueue_script(‘google-maps-api’, ‘http://maps. FILE__)) ); googleapis.com/…’ ); wp_enqueue_script(‘iop-script’, IOP_DIR . ‘js/ La costante WP_PLUGIN_URL individua il percorso della iop-script.js’, array(‘jquery’, ‘jquery-ui-core’, ‘google- directory plugins, mentre la funzione plugin_basena- maps-api’) ); me(__FILE__) restituisce il percorso del plugin. Grazie } alla sostituzione operata da str_replace(), si otterrà il nome della directory. L’installazione base di WP è già corredata delle libre- 22 26 / Marzo 2012 http://www.iopro s :r aa g uodia Wordpre s g l m m i . t
  • 27. Un plugin per creare un calendario di eventi in in WordPress Wordpress: la guida Un plugin per creare un calendario di eventi WP WEB 2.0rie jQuery e jQuery UI. Mentre scriviamo, la versione Ora bisogna dire a WP quando è il momento di cari-corrente, la 3.2.1, dispone di jQuery 1.6.1, compatibile care il meta box. Lo faremo grazie all’action hookcon il plugin. Sarà necessario, invece, caricare jQuery add_meta_boxes:UI: la versione disponibile in WP 3.2.1 non disponedel datepicker. Provvediamo, quindi, a de-registrare add_action(‘add_meta_boxes’, ‘iop_add_meta_box’);la libreria, e a registrare una nuova versione (recupe-randola dal Google CDN) grazie a wp_register_script (si Al caricamento dei meta box della pagina, dunque,veda il codice allegato per le URL complete). L’ultimo viene eseguita la callback iop_add_meta_box:parametro è un array, i cui elementi corrispondono agliscript necessari al funzionamento dello script corrente: function iop_add_meta_box(){jQuery UI avrà bisogno, ovviamente, di jQuery. Una global $iop_metabox;volta registrato, lo script viene accodato alla lista. I due add_meta_box(script successivi sono la Google Maps API e il nostro $iop_metabox[‘id’],script, collocato nella directory js. $iop_metabox[‘title’], ‘iop_show_meta_box’, // callback function $iop_metabox[‘page’], $iop_metabox[‘context’],COSTRUIAMO $iop_metabox[‘priority’]IL CUSTOM META BOX ); NOTALe caratteristiche specifiche dei custom meta box ven- }gono stabilite da una serie di parametri, che qui defi- NONCE: NUMBERniamo come elementi di un array: Oltre ai parametri memorizzati nell’array $iop_meta- USED ONCE box, alla funzione add_meta_box() viene passato il WordPress dispone di un $iop_metabox = array( nome della callback iop_show_meta_box, che ha lo meccanismo di sicurezza che ‘id’ => ‘iop_meta_box’, scopo di generare l’output HTML: consente di ridurre i rischi di ‘title’ => ‘ioProgrammo meta box’, attacchi hacker, definito “nonce” (“number used once”). Si tratta ‘page’ => ‘post’, function iop_show_meta_box(){ di un codice numerico utilizzato ‘context’ => ‘side’, global $post; in fase di trasmissione dati, che ‘priority’ => ‘high’ global $iop_fields; previene accessi non autorizzati: ); il codice cambia e viene verifica- to ad ogni accesso. Informazioni Per prima cosa vengono definite le variabili globali. dettagliate e riferimenti onlineGli elementi dell’array memorizzeranno i campi ID, Come detto, vi sarà corrispondenza tra campi del meta si trovano su http://codex.wor-titolo, tipo di contenuto (post, page, link o custom_ box e custom fields. Andremo quindi a recuperare i dpress.org/WordPress_Noncespost_type), contesto (la parte della pagina in cui sarà valori dei custom fields utilizzando gli elementi ‘id’visualizzato il meta box: normal, advanced, side) e dell’array $iop_fields:priorità (high, core, default, low). Dopo $iop_metaboxandremo a definire un array multidimensionale, i cui $date_meta = esc_attr( get_post_meta($post->ID,elementi rappresentano i custom fields in cui verranno $iop_fields[0][‘id’], true) );memorizzati i dati: $address_meta = esc_attr( get_post_meta($post->ID, $iop_fields[1][‘id’], true) ); $iop_fields = array( $latlng_meta = esc_attr( get_post_meta($post->ID, array( ‘name’ => ‘Text box with datepicker’, $iop_fields[2][‘id’], true) ); ‘desc’ => ‘Event date’, ‘id’ => ‘iop_date_field’, La funzione get_post_meta() accetta tre argomenti: l’ID ‘type’ => ‘text’ del post corrente, il nome del custom field e, in ultimo, ), un valore booleano che stabilisce se il valore restituito array( debba essere una stringa (true) o un array (false). Ora ‘name’ => ‘Address’, abbiamo a disposizione, se presenti, i valori di data, ‘desc’ => ‘Event location’, indirizzo e coordinate, necessari a generare la struttura ‘id’ => ‘iop_address_field’, HTML del meta box. Qui mostriamo il primo campo: ‘type’ => ‘text’ ), ?><p> array <label for=”<?php echo $iop_fields[0][‘id’]; ?>”> ( <?php _e( $iop_fields[0][‘desc’] ); ?> ‘name’ => ‘Lat Lng’, </label><br /> ‘desc’ => ‘Latitude and Longitude’, <input class=”widefat” ‘id’ => ‘iop_latlng_field’, type=”text” ‘type’ => ‘text’)); name=”<?php echo $iop_fields[0][‘id’]; ?>”Wtopd/p r ews : .lia p r o d aa m mo.ith t r : /w s w o guigr Marzo 2012 / 23 27
  • 28. Wordpress: la guidaUn plugin per creare un creare un calendario di eventi in WP WEB 2.0 Un plugin per calendario di eventi in WordPress id=”<?php echo $iop_fields[0][‘id’]; ?>” if ( !current_user_can( ‘edit_page’, $post_id ) ) value=”<?php echo $date_meta; ?>” return $post_id; size=”30” /> }else{ </p> if ( !current_user_can( ‘edit_post’, $post_id ) ) return $post_id; I valori degli attributi di label e input vengono assegnati } grazie agli elementi dell’array $iop_fields. Soltanto il valore dell’attributo value dell’elemento input viene Il passo successivo è il recupero dei dati eventualmen- assegnato in base al valore del custom field corrispon- te memorizzati nei custom fields, e l’aggiornamento dente eventualmente in memoria ($date_meta). In con i nuovi dati (riportiamo il codice relativo al primo questo modo, in caso di modifica del post, nel campo campo, rinviando al cd-rom per il listato completo): di testo del custom meta box comparirà il valore del custom field. Gli altri due campi di testo si ripetono in $old_date_value = get_post_meta($post_id, $iop_ modo simile (rinviamo al codice allegato). Concludono fields[0][‘id’], true); il blocco la div che ospita la mappa e un campo nasco- $new_date_value = $_POST[$iop_fields[0][‘id’]]; sto necessario alla trasmissione in sicurezza dei dati: if( $new_date_value && $new_date_value != $old_ date_value ){ <div id=”canvas”></div> update_post_meta( $post_id, $iop_fields[0][‘id’], <?php $new_date_value ); echo ‘<input type=”hidden” }elseif( ‘’ == $new_date_value && $old_date_value ){ name=”iop_nonce_field” delete_post_meta( $post_id, $iop_fields[0][‘id’], value=”’ . wp_create_nonce(‘iop_nonce’) . ‘” />’; $old_date_value ); NOTA } } IL DATEPICKER DI JQUERY UI Il “Custom meta box” è pronto, ma ancora non fun- Per prima cosa viene recuperato il valore del custom Nella nostra applicazione la zionante. Bisogna dire a WP come memorizzare i dati field corrispondente al primo campo del meta box, data deve essere nel formato inseriti dall’utente. quello relativo alla data ($old_date_value). Viene poi aaaa-mm-gg. Purtroppo WP prelevato il dato trasmesso dall’utente ($new_date_ non consente di effettuare una verifica sulla correttezza dei dati value). Se il nuovo valore esiste, e se è diverso dal valo- acquisiti. La versione 3.2.1 di re archiviato, la funzione update_post_meta aggiornaWP, utilizzata per lo sviluppo del I CUSTOM FIELDS E il valore del custom field; nel caso venga trasmesso unnostro plugin, dispone di svariati L’ARCHIVIAZIONE DEI DATI campo vuoto, ed esista un valore salvato in preceden- plugin di jQuery UI. Purtroppo Abbiamo generato il blocco HTML del meta box, ma za, la funzione delete_post_meta elimina il custom field il datepicker non è tra questi. Bisognerà, quindi, scaricare il questo è ancora inattivo. Ora l’utente può riempire corrispondente. codice dal sito http://jqueryui. i campi di testo, ma il loro contenuto scompare noncom/, oppure ricorrere al Google appena si esce dalla pagina. Occorre salvare i valori CDN, come abbiamo mostrato inseriti in appositi custom field, con una callback invo- nell’articolo. Il datepicker verràvisualizzato quando l’utente farà cata quando l’utente salva il post: PERFEZIONIAMOclick sul campo di testo associato LA UI CON JQUERY add_action(‘save_post’, ‘iop_save_meta_box’); La nostra impalcatura è pronta. Ora bisognerà sfruttare e faciliterà le operazioni di inse- rimento dati. la potenza di jQuery per rendere davvero utile il plugin. È bene ricordare che il widget L’action hook save_post attiva la callback iop_save_ La nostra prima preoccupazione sarà quella di utilizza- datepicker richiede l’istallazione meta_box. Dopo la definizione della variabile globale re le funzioni di jQuery e jQuery UI in modo da evitaredi un tema grafico per funziona- re. Per maggiori informazioni, $iop_fields, verifichiamo la token impostata nel campo conflitti con script e librerie di altri plugin. Apriamo il si vedano http://jqueryui.com/ nascosto: file iop-script.js, nella directory wp-contents/plugins/ demos/datepicker/ e http:// ioprogrammo_events/js. jqueryui.com/themeroller/ function iop_save_meta_box( $post_id ){ global $iop_fields; jQuery.noConflict(); if ( !isset( $_POST[‘iop_nonce_field’] ) || !wp_veri fy_nonce( $_POST[‘iop_nonce_field’], ‘iop_nonce’ ) ) Il simbolo $ utilizzato da jQuery è un alias che sosti- return $post_id; tuisce la funzione jQuery. Se il namespace jQuery è I successivi test verificano un eventuale salvataggio auto- senza dubbio univoco, l’alias $ può essere utilizzato matico, oltre al livello di autorizzazione dell’utente cor- da altri script. Con l’istruzione jQuery.noConflict(), il rente: simbolo $ non rappresenterà più un alias per jQuery, evitando in questo modo ogni possibile conflitto. if( defined(‘DOING_AUTOSAVE’) && DOING_AUTOSAVE ) Ciò non significa che non si potrà più utilizzare $: return $post_id; basterà passare il namespace alla calback eseguita if ( ‘post’ == $_POST[‘post_type’] ) { dal metodo ready: 24 28 / Marzo 2012 http://www.iopro s :r aa g uodia Wordpre s g l m m i . t
  • 29. Un plugin per creare un calendario di eventi in in WordPress Wordpress: la guida Un plugin per creare un calendario di eventi WP WEB 2.0 jQuery(document).ready(function($){ Nel secondo caso, la Maps API si occuperà di tutto, … generando le coordinate e calcolando l’indirizzo più }); prossimo alla località individuata. Nel nostro meta box abbiamo predisposto la div#canvas, senza specificar-Tutto il codice eseguito all’interno della funzione di cal- ne le dimensioni. Il motivo è quello di evitare di farelback potrà far uso della funzione $ senza alcun rischio dello spazio inutile nel caso in cui l’elaborazione deglidi conflitti (maggiori info su http://docs.jquery.com/ script fosse disabilitata. Torniamo al file iop-script.js eUsing_jQuery_with_Other_Libraries). Messo al sicuro il aggiungiamo:codice, passiamo al datepicker: jQuery(document).ready(function($){ $(‘#iop_date_field’).datepicker({ … dateFormat: ‘yy-mm-dd’, $(‘#canvas’).css({height:’200px’,width:’100%’}) constrainInput: true, loadMap(); gotoCurrent: true, showAnim: ‘slideDown’ Qui abbiamo solo impostato le dimensioni della div e }); invocato la funzione loadMap(), che vedremo tra un po’. Prima creiamo due pulsanti: il primo per la geo-Basta la sola funzione datepicker() per ottenere il risul- codifica dell’indirizzo, il secondo per l’azzeramentotato mostrato in Fig. 3. dei dati:I parametri passati alla funzione stabiliscono il formatodell’input, la forzatura del formato, la data predefinita, $(‘<input type=”button” id=”iop_find_location” … >’) NOTAl’animazione del calendario. .insertAfter(‘#iop_address_field’) .click(function(){ GEOCODING E REVERSE geocode( $(‘#iop_address_field’).val() ); GEOCODING }); Il servizio di geocoding della $(‘<input type=”button” id=”iop_clear_location” … >’) Google Maps API permette di .insertAfter(‘#iop_find_location’) convertire un indirizzo postale .click(function(){ “human readable” in coordinate geografiche, necessarie alla map.setCenter(rome); collocazione di elementi su una map.setZoom(4); mappa. L’operazione inversa, addMarker(rome); che traduce una coppia di coordi- $(‘#iop_address_field’).val(‘’); nate geografiche in un indirizzo $(‘#iop_latlng_field’).val(‘’); comprensibile, viene definito “reverse geocoding”. }); Il riferimento online è all’indiriz- }); zo http://goo.gl/JXXdN Il pulsante viene inserito subito dopo il campo di testo destinato all’indirizzo, e gli viene associato un event handler che intercetta il clic e invoca la funzione geoco- de() (che definiremo più avanti).Fig. 3: Il datepicker di jQuery UI offre una comoda interfaccia grafica Alla funzione viene passato, come argomento, l’indiriz-per inserire una data in un campo di testo zo della località. Il secondo pulsante viene inserito in coda al primo. Al click dell’utente, la mappa viene centrata su una loca- lità predefinita (in questo esempio Roma), viene impo-INDIRIZZO POSTALE stato un basso livello di zoom e invocata la funzioneE COORDINATE addMarker() (vedremo dopo anche questa). Infine, ven-GEOGRAFICHE gono svuotati i campi di testo. E ora tocca alla mappa.Oltre al campo destinato alla data dell’evento, abbia-mo previsto un campo riservato all’indirizzo e uncampo per le coordinate geografiche.Il plugin darà all’utente la possibilità di inserire manual- UNA GOOGLE MAP PERmente l’indirizzo, oppure di cercare la località serven- LOCALIZZARE GLI EVENTIdosi di una Google Map. Nel primo caso, per individua- Il nostro script utilizza più di una funzione per l’in-re le coordinate, basterà inserire l’indirizzo e cliccare serimento e la gestione della mappa. Alcune dellesul pulsante “Find”. Il servizio di geocoding della Maps funzioni utilizzate accederanno alle stesse variabili, leAPI restituirà le coordinate che andranno a costituire il quali dovranno, per questo, essere definite nel “globalvalore del secondo campo. scope”:Wtopd/p r ews : .lia p r o d aa m mo.ith t r : /w s w o guigr Marzo 2012 / 25 29
  • 30. Wordpress: la guidaUn plugin per creareper calendario calendario di eventi in WP WEB 2.0 Un plugin un creare un di eventi in WordPress var map; Al clic dell’utente, viene prima invocata la funzione var markers = []; revgeocode(), che restituirà l’indirizzo postale parten- var rome = new google.maps.LatLng(41.9012,12.4752); do dalle coordinate, viene poi aggiunto un marker, var center = rome; e infine vengono mandate a video le coordinate del var geocoder = new google.maps.Geocoder(); punto individuato, come valore del campo di testo #iop_latlng_field. Abbiamo fissato un oggetto GLatLng che utilizzeremo per centrare la mappa all’avvio dello script, o in caso di function geocode( address ) reset dei dati. { Basterà cambiare le coordinate iniziali per avere un geocoder.geocode({‘address’: address}, nuovo centro. E ora passiamo alle singole funzioni: function(results, status){ if (status == google.maps.GeocoderStatus.OK) { function loadMap() var ll = results[0].geometry.location; { map.setCenter( ll ); var myOptions = addMarker( ll ); { jQuery(‘#iop_latlng_field’).val( ll.lat() + ‘,’ + ll.lng() zoom: 4, ); mapTypeId: google.maps.MapTypeId.SATELLITE }else{ }; jQuery(‘#iop_latlng_field’).val( “Location not found” NOTA map = new google.maps.Map( jQuery(‘#canvas’)[0], ); ACTION HOOK myOptions ); } E FILTER HOOKS }); Gli “action hooks” di WordPress Abbiamo creato un “object literal”, contenente i para- } sono dei tag che permettono di metri di visualizzazione e generato una nuova mappa. “agganciare” una funzione ad Preleviamo poi le coordinate geografiche dal campo Il metodo geocode accetta come argomenti un object un evento. Quando si verifica l’evento, l’action hook viene input#iop_latlng_field: literal di parametri (in questo caso vi è solo l’indirizzoattivato e invia una chiamata ad postale) e una funzione di callback cui vengono passati una funzione di callback. var coords = jQuery(“#iop_latlng_field”).val(); gli argomenti obbligatori results e status. Il primo è un I “filter hooks”, invece, permet- if(coords && coords != ‘’) array contenente i dati della risposta (normalmente tono di effettuare operazioni { una sola), il secondo è una stringa che rappresenta lo sui dati. Un “filter hook” agisce var location = coords.split(/s*,s*/); sui contenuti prima che questi stato dell’operazione. center = new google.maps.LatLng( Una volta individuate le coordinate geografichevengano archiviati nel database, o mandati a video. parseFloat(location[0]), parseFloat(location[1]) ); (results[0].geometry.location), si fissa il nuovo centro, La documentazione online è map.setZoom(15); si aggiunge un marker e si visualizzano le coordinate. ricca di riferimenti, tutti dispo- }else In caso di errore, viene generato il messaggio ‘Location nibili all’indirizzo http://codex. { wordpress.org/Plugin_API not found’. La funzione che effettua l’operazione inver- map.setZoom(5); sa, ossia genera l’indirizzo a partire dalle coordinate, è Una risorsa non ufficiale, ma incredibilmente utile, è il } quasi identica alla precedente: WordPress Hook Database, con- map.setCenter( center ); sultabile su http://adambrown. addMarker( center ); function revgeocode( location ){ info/p/wp_hooks geocoder.geocode({‘location’: location}, Se esiste un valore nel campo di testo, vengono elimi- function(results, status){ nati eventuali spazi e generato il nuovo centro della if (status == google.maps.GeocoderStatus.OK) { mappa, con uno zoom elevato. jQuery(‘#iop_address_field’).val( results[0]. Se il campo di testo è vuoto, allora non si modifica formatted_address ); il centro iniziale, che rimane su Roma, e si mantiene }else{ basso il livello di zoom. Ora bisognerà intercettare jQuery(‘#iop_address_field’).val( “Address not l’azione dell’utente sulla mappa: found” ); } google.maps.event.addListener(map, ‘click’, }); function(evt) } { revgeocode ( evt.latLng ); L’unica differenza di rilievo sta nei parametri passati addMarker( evt.latLng ); al geocoder: in questo caso si tratta di una istanza di jQuery(‘#iop_latlng_field’).val( evt.latLng.lat() + ‘,’ + GLatLng che rappresenta la località geografica indivi- evt.latLng.lng() ); duata sulla mappa. }); Infine, le funzioni che aggiungono ed eliminano i mar- } ker dalla mappa: 26 30 / Marzo 2012 http://www.iopro s :r aa g uodia Wordpre s g l m m i . t
  • 31. Un plugin per creare un calendario di eventi in in WordPress Wordpress: la guida Un plugin per creare un calendario di eventi WP WEB 2.0 function addMarker( location ) rizzati in tre custom field, pronti per essere mandati { a video. deleteOverlays(); var marker = new google.maps.Marker( { position: location, I FILTER HOOKS map: map E LA RESA A VIDEO }); Se un “action hook” viene utilizzato per eseguire marker.setMap( map ); una funzione al verificarsi di un evento, un “filter markers.push(marker); hook” modifica un contenuto prima che questo } venga salvato nel database, o mandato a video. Per aggiungere un filtro, l’API di WP dispone della fun-La funzione addMarker() elimina i precedenti pun- zione add_filter:tatori e crea un nuovo marker, subito fissato sullamappa. Il marker viene poi aggiunto all’array mar- <?php add_filter( $tag, $function, $priority, $num_argskers. ); ?>L’ultima funzione dello script cancella i markers dallamappa: Gli argomenti sono gli stessi di add_action. Quello che cambia è il valore di $tag, che in questo caso SUL WEB function deleteOverlays() sarà un filter hook. Per visualizzare nel front-end i { valori dei custom fields, faremo, dunque, ricorso ad PUBBLICARE I PLUGIN if (markers) un filter hook: Pubblicare il plugin nella repo- { sitory di wordpress.org (http:// for (i in markers) add_filter(‘the_content’, ‘iop_filter_content’); wordpress.org/extend/plugins/) { function iop_filter_content( $content ) potrebbe essere una buona idea per ottenere visibilità in una markers[i].setMap(null); { community di migliaia di utenti. } global $post; Volendo rendere disponibile markers.length = 0; global $iop_fields; pubblicamente un plugin, caso } $date_meta = get_post_meta($post->ID, $iop_ sarà necessario aggiungere } fields[0][‘id’], true); all’intestazione del file la licenza d’uso GNU GPL (riportata nel $address_meta = get_post_meta($post->ID, $iop_ codice allegato.Vengono prima rimossi i markers dalla mappa, poi fields[1][‘id’], true);svuotato il relativo array. Quest’ultima operazione è $location_meta = get_post_meta($post->ID, $iop_necessaria in quanto il metodo setMap(null) nascon- fields[2][‘id’], true);de gli array senza eliminarli. Occorrerà, per questo, if( is_single() )azzerare l’array markers. { $content .= ‘<h2>’ . __(‘Event details’) . ‘</h2>’; $content .= ‘<p>’ . __(‘Date’) . ‘: ‘ . $date_meta; $content .= ‘<br />’ . __(‘Address’) . ‘: ‘ . $address_ meta; $content .= ‘<br />’ . __(‘Location’) . ‘: ‘ . $location_meta . ‘</p>’; } return $content; } Abbiamo definito le variabili globali e prelevato i valori dei custom field. Il contenuto del post, passato come argomento della funzione, verrà modificato con l’aggiunta dei metadati e restituito con return $content. Concludiamo qui la prima parte del tuto-Fig. 4: La figura mostra come appare il custom meta box nella scheda rial. Il nostro plugin è perfettamente funzionante,“Modifica articolo”. Si può notare come i valori dei campi del meta box sebbene siano ancora molte le funzioni che possonocorrispondano ai tre custom field visualizzati in basso essere aggiunte. Nel prossimo numero vedremo come perfezionarlo con una pagina di amministra- zione, un widget e altro ancora. Non mancate!Il Custom Meta Box è finalmente pronto! Ora, quandoil post viene salvato, i dati inseriti vengono memo- Carlo DanieleWtopd/p r ews : .lia p r o d aa m mo.ith t r : /w s w o guigr Marzo 2012 / 27 31
  • 32. Wordpress: la guidaHTML 5 il HTML 5 il nostro primofai da te per Wordpress WP WEB 2.0 nostro primo template template fai da te perCREARE UN TEMPLATEAD HOC PER WORDPRESSIN QUESTO ARTICOLO APPROFONDIREMO LE NUOVE POTENZIALITÀ OFFERTE DA HTML5 E DA CSS3PER REALIZZARE UN COMPLETO TEMPLATE “FROM SCRATCH”, DA INSTALLARE NEL NOSTRO BLOGIN WORDPRESS C reare il proprio sito, che sia un semplice “sito GESTIAMO IL MATERIALE vetrina” o un complesso e-commerce, passando Anzitutto cominciamo con una buona notizia: quan- per le RIA (Rich Internet Applications) è ormai do dobbiamo creare un tema (o convertire un pro- quasi una necessità per tutti, addetti ai lavori del Web getto grafico, solitamente realizzato in Photoshop o e non. Chiunque voglia mettersi “online” non può non Illustrator) possiamo fare più o meno come desideria- avere una sua vetrina virtuale. Ancor meglio se questa mo. Questo passaggio, ovviamente, necessita di una vetrina è pratica e veloce da gestire, soprattutto nei conoscenza minima della piattaforma da parte nostra. contenuti. Realizzare un gestionale per un sito non è Nel momento in cui ci accingiamo a creare un tema,❑ CD ❑ WEB sempre cosa facile (soprattutto se dobbiamo crearlo può essere sufficiente creare un documento che fungamediacinema.zip ad-hoc e/o su misura per il nostro cliente). Allora da modello. Una sorta di “pagina mastro”. Data unacdrom.ioprogrammo.it ecco diffondersi ormai da diversi anni i CMS (Content pagina, come quella mostrata nella figura seguente, Management System). proviamo a scrivere la struttura della pagina HTML. Molti sono oggi i CMS attualmente disponibili sul mercato. Con questo mi riferisco a WordPress e Joomla tanto per citare i più famosi, ai quali aggiungiamo anche quelli forse meno conosciuti (ma non per questo meno interessanti) come Drupal, DotNetNuke o (qual- cuno storcerà un po’ il naso) Blogger di Google. La diffusione dell’uno o altro CMS dipende sicuramen- te dalla reperibilità di informazioni, documentazione, esempi, forum e sopratutto da temi e plug-in pronti per l’uso che ci permettano di potenziare il nostro pro- getto oltre le opzioni “di serie”. Fig. 1: Creiamo il codice HTML di questa pagina di esempio I TEMI, PER “CAMBIARE Come soluzione abbiamo quindi previsto il seguente FACCIA” AL BLOG codice HTML: I temi (themes) o template (i nomi variano a seconda del CMS) sono uno dei punti focali della stragrande mag- <!DOCTYPE HTML> gioranza dei progetti web. Tuttavia non sempre quelli <html> disponibili sulla rete, siano essi a pagamento o gratuiti, <head>Conoscenze richieste ci accontentano. Allora siamo costretti a modificare un <meta charset=”UTF-8”> HTML, CSS, PHP tema che più si avvicina alle nostre richieste, talvolta <title>Media Cinema WebSite</title> in maniera talmente approfondita da rendere il lavoro <!--[if lt IE 9]>Software <script src=”http://html5shiv.googlecode.com/svn/ così lungo e difficile da farci considerare l’ipotesi di cre- HTML editor, Browser trunk/html5.js”></script> aggiornati per l’HTML5 arne uno noi appositamente. In questo articolo studie- remo il “motore” utilizzato da WordPress per realizzare <![endif]-->Impegno un template creato ad hoc partendo dai semplici asset grafici (delle comuni immagini JPG), creando la nostra <link href=”style.css” rel=”stylesheet” type=”text/css”> pagina in HTML (per l’occorrenza sfruttando alcune </head>Tempo di realizzazione peculiarità dell’HTML5 e CSS3) e infine montando il tutto come tema di WordPress. Iniziamo! <body> 24 / Gennaio 2012 32 http://www.iopro s :r aa g uodia Wordpre s g l m m i . t
  • 33. HTML 5 il nostro primo template fai fai da te per Wordpress Wordpress: la guida HTML 5 il nostro primo template da te per WP WEB 2.0 <div id=”wrapper”> nel footer. Il tema è stato realizzato in HTML5 e CSS3. <header> Autore: Fabio Bernardi (www.faber04.com). <div id=”logo”><img src=”images/logo.png” Version: 1.0 alt=”Media Cinema Logo”></div> Author: Faber04 <nav id=”main_nav”> Author URI: http://www.faber04.com/ <ul> Tags: fixed width, one column, sidebar <li><a href=”#”>Home</a></li> */ <li><a href=”#”>Attori</a></li> <li><a href=”#”>Attrici</a></li> Abbiamo specificato il nome del tema, un link di riferi- <li><a href=”#”>Autori</a></li> mento dall’autore, una veloce descrizione e delle sue NOTA <li><a href=”#”>FAQ</a></li> caratteristiche, e altre informazioni utili. <li><a href=”#”>Contatti</a></li> Tutte queste info saranno disponibili nella pagina dei PER SAPERNE DI PIÙ: </ul> temi della nostra applicazione WordPress. LA DOCUMENTAZIONE </nav> Sfruttando le caratteristiche dei CSS3, abbiamo anche DI WORDPRESS </header> usato una font esterna ai soliti font di sistema. Per quanto tutti i CMS siano <div id=”content”> particolarmente performanti, <div id=”main”><img src=”images/home_splash. @font-face{ bisogna sempre avere ben pre- png” alt=”Image intro”></div> font-Family:Koz; sente come lavora la piattafor- ma. A tal riguardo suggeriamo <aside> src:url(‘KozGoPr6N-Light.otf’); il seguente link: http://codex. } wordpress.org. </aside> </div> In alcuni casi abbiamo utilizzato un’altra importante <footer>Info footer .... </footer> novità dei CSS3: i gradienti. </div> Come avete visto nell’immagine iniziale del progetto, le voci del menu erano divise a tab. Lo sfondo delle tab</body> non è costituito da immagini, ma si tratta di gradienti</html> creati tramite CSS3. Nello stile #main_nav li potrete trovare un esempio diCome potete vedere, la struttura è abbastanza sem- gradiente. Andiamo ora a strutturare il nostro progetto.plice. Alcune soluzioni, come il menu creato (per orastaticamente), dovranno essere rimosse nel momentoin cui convertiremo questa pagina in un vero e propriomodello. Dove possibile abbiamo utilizzato alcuni TAG CREIAMO IL TEMPLATEdell’HTML5 che non dovrebbero creare problemi di PER WORDPRESScompatibilità tra i vari browser. Per questo abbiamo I template di WordPress sono articolati in una strutturausato soprattutto i TAG che potenziano la semantica: di una decina di file circa, come minimo.nav per i menu di navigazione, aside per contenuto Ogni file corrisponde, orientativamente, a una sezione“tangenziale” (correlato al contenuto del sito ma non della struttura: header, footer, page, sidebar, ecc... . NOTAprincipale), footer per il piè di pagina del sito, header A queste pagine si aggiungono una o più pagineper l’intestazione del sito. contente solo codice PHP per potenziare il tutto (soli- SE A VISUALIZZARE tamente una pagina chiamata functions.php). L’HTML5 È INTERNET Prendiamo la pagina HTML della nostra demo, presen- EXPLORER... te nella cartella “mediacinema” (main.html) e comincia- Avendo utilizzato l’HTML5 siORA OCCUPIAMOCI mo a dividerla in parti. è reso necessario inserire unaDELL’ASPETTO GRAFICO condizione che utilizzi un file JavaScript per forzare i brow-Commentare tutto il file CSS sarebbe eccessivo. Ci limi- ser Internet Explorer 8 e 9 diteremo quindi ad analizzare alcuni aspetti importanti, Microsoft alla “comprensione”tipici dell’ultima versione CSS3, o utili per WordPress. PARTIAMO DALLA TESTATA dei tag HTML5.Anzitutto un CSS per template Wordpress dovrebbe Tutto il codice iniziale della nostra pagina, fino alavere all’inizio un blocco di commento che dia alcu- menu di navigazione compreso, dovrà essere salvatone info sul tema, il nome dell’autore, la possibilità di in una pagina specifica chiamata “header.php”. Nelaggiungere widget e altro ancora: nostro caso, corrisponde a tutto quello compreso tra il DOCTYPE e la chiusura del tag header./* All’interno dell’intestazione di un sito ci sono molteTheme Name: Media Cinema informazioni utili da gestire. Ad esempio il titolo delTheme URI: http://www.faber04.com sito, il link al file RSS, il charset utilizzato, nonché le vociDescription: Tema demo per Media Cinema. Il tema di menu dettate dal numero (e dal nome) delle pagine supporta aree widget nella sidebar (laterale sinistro) e eventualmente presenti nel sito.h t r : /w s w o guigrWtopd/p r ews : .lia p r o d aa m mo.it Gennaio 2012 / 25 33
  • 34. Wordpress: la guidaHTML 5 il HTML 5 il nostro primofai da te per Wordpress WP WEB 2.0 nostro primo template template fai da te per L’intestazione diventerebbe quindi: if ( function_exists(‘register_sidebar’) ) { <!DOCTYPE HTML> register_sidebar(array( <html> ‘name’ => ‘Main Side Bar’, <head> ‘before_widget’ => ‘’, <meta charset=”<?php bloginfo(‘charset’); ?>”> ‘after_widget’ => ‘’, <title><?php bloginfo(‘name’); ?> <?php if ( is_ ‘before_title’ => ‘<h4>’, single() ) { ?> &raquo; Blog Archive <?php } ?> <?php ‘after_title’ => ‘</h4>’, wp_title(); ?></title> )); NOTA <!--[if lt IE 9]> }TESTARE L’HTML5 DEL <script src=”http://html5shiv.googlecode.com/svn/ PROPRIO BROWSER trunk/html5.js”></script> if ( function_exists(‘register_sidebar’) ){ Volete sapere quanti (e quali) <![endif]--> register_sidebar(array( caratteristiche dell’HTML5 <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_ ‘name’ => ‘Footer Widget’, supporta il browser che state url’); ?>” type=”text/css” media=”screen” /> ‘before_widget’ => ‘’, utilizzando maggiormente? <link rel=”alternate” type=”application/rss+xml” ‘after_widget’ => ‘’,HTML5Test: www.html5test.com title=”<?php bloginfo(‘name’); ?> RSS Feed” ‘before_title’ => ‘<h4>’, href=”<?php bloginfo(‘rss2_url’); ?>” /> ‘after_title’ => ‘</h4>’, <link rel=”pingback” href=”<?php bloginfo(‘pingback_ )); url’); ?>” /> <?php wp_head(); ?> } </head> ?> NOTA A PROPOSITO DI FONT <body> Tramite queste due condizioni, non solo permettiamo Se siete interessati ad appro- <div id=”wrapper”> l’inserimento di aree widget nelle pagine footer e side- fondire il discorso riguardo <header> bar, ma creiamo anche le aree correlate per la gestioneall’uso di font specifiche tramite <div id=”logo”><img src=”<?php dei widget nell’area amministrativa di WordPress. CSS3, vi consigliamo la lettura bloginfo(‘template_directory’)?>/images/logo.png” di questo articolo presente su alt=”Media Cinema Logo”></div> HTML5Today, un portale che affronta in maniera verticale <nav id=”main_nav”> l’uso di HTML5 e CSS3: <ul> http://www.html5today.it/ <?php wp_list_pages(‘depth=1&title_li=’);tutorial/css3-fontface-tuoi-font- ?> preferiti-sito </ul> </nav> </header> Fig. 2: Le aree del nostro sito predisposte per i widget NOTA Le parti in PHP sono quelle che la piattaforma di WordPress mette a disposizione, come la lista delle Spostiamoci ora nella pagina footer.GRADIENTI CON I CSS3 pagine (data dal metodo ‘wp_list_pages()’), la directory Per poter “inserire” un’area widget nel footer – cosìSicuramente i gradienti non sono della template, ecc... come faremo poi nella sidebar - basterà scrivere il semplici da disegnare, né tanto Come avrete sicuramente notato, molto utile risulta seguente codice: meno da modificare. Tuttavia, in il metodo bloginfo(); che permette di risalire alle info Rete, è disponibile una piccola </div> App per l’occorrenza: Ultimate principali del sito. L’intestazione è pronta. Proseguiamo con il resto. <footer>Theme powered by <a href=’http://www. CSS Gradient Generator: http://www.colorzilla.com/ Prima di procedere verso le pagine principali (index, faber04.com’>Faber04</a>. gradient-editor/ page, single, search) affrontiamo quelle più semplici: <?php if ( !function_exists(‘dynamic_sidebar’) || !dyna footer, sidebar e functions. mic_sidebar(‘Footer Widget’) ) {} ?> <div> Le prime due (come possiamo intuire dal nome) ser- </footer> vono a gestire il footer e la barra laterale del sito. Nel </div> nostro footer abbiamo inserito alcune info staticamen- </body> te, così come la possibilità di gestire dei widget. </html> Questo significa che dobbiamo prevedere nel footer un “area” apposita per i widget, così come per la sidebar. La pagina sidebar, invece, potrebbe essere costruita Prima di vedere queste due pagine, sarebbe bene con- secondo la struttura classica di un tema per WordPress: siderare la pagina functions.php: inserire degli elementi standard (link, blogroll, elenco categorie) qualora l’utente abbia lasciata vuota l’area <?php per i widget . Analizzando il file “sidebar.php” possiamo 26 / Gennaio 2012 34 http://www.iopro s :r aa g uodia Wordpre s g l m m i . t
  • 35. HTML 5 il nostro primo template fai fai da te per Wordpress Wordpress: la guida HTML 5 il nostro primo template da te per WP WEB 2.0infatti leggere le seguenti righe iniziali: <?php get_footer(); ?> <aside> In mezzo a questi due blocchi di codice dovremo <?php if ( !function_exists(‘dynamic_sidebar’) || inserire tutto l’occorrente per gestire pagine, post e !dynamic_sidebar(‘Main Side Bar’) ) : ?> quant’altro. Nel nostro caso, inoltre, la parte della side- <?php bar era immediatamente precedente al footer, quindi $today = current_time(‘mysql’, 1); ci siamo potuti permettere di richiamarla poco prima if ( $recentposts = $wpdb->get_results(“SELECT del footer stesso. Il resto del codice, che potete leggere ID, post_title FROM $wpdb->posts WHERE post_status nella pagina “index.php” della nostra demo verifica = ‘publish’ AND post_date_gmt < ‘$today’ ORDER BY la presenza di eventuali post, controlla se la pagina post_date DESC LIMIT 10”)): visualizzata è l’home page, ecc... . Ovviamente scelte ed esigenze variano a seconda delle necessità del sito. ?> Una volta completata la index come già detto, possia- <div class=”sideblock”> <h3> mo salvarla esattamente identica con i seguenti nomi: <?php _e(“Recent Posts”); ?> </ page.php, single.php, search.php. h3> Terminata la creazione della struttura dovremmo avere SUL WEB <ul> una cartella contente (almeno) i seguenti file: <?php UN PUNTO DI • comments.php PARTENZA: foreach ($recentposts as $post) • footer.php BLOGINFO() { • functions.php Nella pagina specifica della • header.php documentazione on line if ($post->post_title == ‘’) • index.php vengono elencati i parametri disponibili per accedere alle info • page.php principali del nostro progetto $post->post_title = sprintf(__(‘Post #%s’), • search.php WordPress. $post->ID); • sidebar.php http://codex.wordpress.org/ • single.php Function_Reference/bloginfo echo “<li><a href=’”.get_permalink($post- • style.css >ID).”’>”; the_title(); Il caricamento di suddetto tema potrà essere effettuato direttamente copiando la cartella (per intero) all’inter- echo ‘</a></li>’; no di quella di WordPress: wp-content/themes, oppure } salvandola come file compresso (ZIP) e caricandola tramite il gestionale dei temi di WordPress.Queste righe specificano esattamente quanto detto: Una volta presente nell’elenco dei temi disponibili,in assenza di widget, la sidebar verrà popolata di altri potrà essere attivato e utilizzato tranquillamente.elementi secondari. L’AUTORE PER ANDARE PIÙ VELOCILE PARTI PRINCIPALI Per quanto possiamo prediligere la scrittura “a mano” Fabio Bernardi nato a Roma, èOra non resta che gestire le parti principali del nostro del codice, talvolta la creazione di temi può richiedere sviluppatore freelance dal 2003progetto WordPress: index, page, single e search. Tutte più del necessario. Investe buona parte della sua attività tra formazione e sviluppopagine simili per la loro struttura, ma riutilizzate per Esistono diverse possibilità di creazione di temi ad hoc soprattutto in ambiente Flashl’evenienza a seconda che l’utente stia leggendo una “chiavi in mano”. Platform. Collabora con diversepagina specifica, un post, oppure abbia effettuato una Artisteer (www.artisteer.com) ad esempio è un pro- società di advertising e webricerca all’interno del sito. Queste pagine, salvo ecce- gramma, a pagamento, molto potente che permette di agency nonchè docente pressozioni particolari, sono solitamente tutte uguali. realizzare template non solo per WordPress, ma anche diverse strutture di formazione. Dal 2007 al 2010 è stato “channelBasterà quindi crearne una per fare anche un semplice per Drupal, Joomla e Blogger partendo da layout pre- manager” per lo User Group uffi-“copia&incolla”. Partiamo dalla “index.php”. definiti e rimodellati ad hoc per le nostre esigenze. ciale di Adobe per Flex: FlexGALA.All’inizio sicuramente servirà inserire l’header. Pertanto: Se invece è solo un piccolo aiuto quello che state Dal 2008 è entrato a far parte cercando, in rete è disponibile WordPress editor gene- del gruppo di professionisti/<?php get_header(); ?> rator: http://www.yvoschaap.com/wpthemegen una collaboratori esterni di Adobe: Adobe|Guru Come Adobe|Guru ha web-app gratuita di Yvo Schaap. Molto spartano in partecipato a diversi eventi live eCosì come alla fine della pagina avremo bisogno del verità, ma efficace per le esigenze minime per iniziare seminari online di promozione deifooter e/o della sidebar: a mettere mano a un progetto pronto per l’occorrenza. prodotti Adobe per il Web <?php get_sidebar(); ?> Fabio Bernardih t r : /w s w o guigrWtopd/p r ews : .lia p r o d aa m mo.it Gennaio 2012 / 27 35
  • 36. NON SOLO CODICEdei siti gestitimultipla dei siti gestiti da Wordpress Gestione xxxx Gestione multipla guida Wordpress: la da WordpressECCO IL SUPER ADMINPER WORDPRESSCOME SFRUTTARE UNA CONSOLE DI COMANDO, UTILE PER AMMINISTRARE TUTTI I TUOI BLOGWORDPRESS INSIEME. TI PERMETTERÀ DI OTTIMIZZARE LA GESTIONE DI TEMI E PLUG-IN, E LAPUBBLICAZIONE MULTIPLA DEI TUOI POST M olti utenti si trovano con la necessità di alla portata di tutti, anche dei neofiti. La registrazione dover gestire più blog WordPress con- avviene in pochi minuti. È sufficiente collegarsi alla temporaneamente, installati su provider paginahttp://managewp.com, cliccare sul pulsante hosting differenti. Questa incombenza si trasforma Sign Up presente al centro dello schermo ed inserire in sofferenza, quando il numero di blog da gestire i dati necessari alla registrazione. Alla fine dell’inse- diviene elevato: per ogni blog bisogna connettersi rimento, cliccare su Register e il servizio invierà una alla pagina di amministrazione dedicata, ricordare di email all’indirizzo di posta elettronica segnalato, nella ognuno il nome utente e la password e poi operare quale sono presenti i dati di autenticazione, ossia all’interno, autorizzando commenti o pubblicando l’username scelto ed una password autogenerata. nuovi post. Qualora poi si voglia pubblicare uno A questo punto bisogna digitare http://managewp. stesso post in più blog, è necessario riscrivere il testo com/wp-login.php nella barra degli indirizzi del brow- su ogni singolo blog e via discorrendo. In situazioni ser, indicare i dati di accesso e premere su Log In. come queste, gli amministratori hanno la necessità ManageWP comparirà in tutto il suo splendore e con di una piattaforma unificata, un unico centro di con- tutte le sue funzionalità. trollo che dia loro accesso a tutti i blog WordPress, indipendentemente dall’hosting sulla quale questi siano memorizzati. Una possibilità del genere esiste e si concretizza in ManageWP. AGGIUNGERE I BLOG Affinché i blog possano essere gestiti in modo cen- tralizzato sarà è necessario associarli alla piattaforma, installando su ogni blog WordPress un plugin fornito REGISTRAZIONE SEMPLICE direttamente dal servizio. Il plugin si chiama Worker Chi lavora già con i blog WordPress e ne apprezza e il suo download parte in automatico non appena la facilità d’uso, allora si troverà a suo agio anche ad si clicca sul link Download Worker (Fig.1) presente operare con ManageWP. Fin da subito, il servizio, per nella barra superiore del Control Panel. Come al quanto ancora in fase beta, si dimostra affidabile ed solito, il plugin è già fornito in un archivio zip e può essere installato sul blog di interesse, seguendo le normali procedure di setup per i tradizionali addon di WordPress. Una volta conclusa l’installazione del plu- gin dal pannello di amministrazione del blog o via FTP, e dopo aver proceduto alla sua attivazione, ritornare sulla console di ManageWP e cliccare sul pulsante Add New Site. Nel modulo che appare, indicare l’indirizzo del blog, il nome utente dell’amministratore e la sua password, per poi concludere l’operazione cliccando su Add Site. Il blog verrà aggiunto a ManageWP e com- parirà nella lista dei siti da gestire. Le medesime ope- razioni dovranno essere compiute per tutti i blog che si vuole amministrare centralmente con ManageWP e, ad inserimento terminato, ci si potrà dimenticare di tutti i singoli accessi ai pannelli di amministrazione di WordPress e lavorare contemporaneamente su tutti iFig. 1: Per gestire un blog con ManageWP, è necessario installare nel blog il plugin Worker blog direttamente dal servizio. 86 / Settembre 2011 36 http://www.ioprog rsa m m o . i d a Wordpre s : l a g u i t
  • 37. Gestione multipla deiGestionexxxx siti gestitimultipla dei siti gestiti da Wordpress da Wordpress Wordpress: SOLO CODICE NON la guida FACCIAMO GRUPPO! WordPress classica. A queste funzionalità, ManageWP Nell’elenco Site compariranno tutti i blog su cui è aggiunge la sezione Select Blogs, dalla quale l’utente possibile operare. Prima di procedere oltre, è consi- può decidere su quali blog o gruppi pubblicare l’arti- gliabile creare dei gruppi nei quali raccogliere diversi colo redatto, con la possibilità di postare il medesimo blog. Soprattutto se si stanno amministrando più di intervento anche su più blog contemporaneamente tre blog con ManageWP, la funzionalità dei gruppi (Fig. 4). Per farlo, basta inserire il segno di spunta su permette di concentrare diversi blog inerenti, ad ogni blog o gruppo nella quale si vuole che compaia il esempio, lo stesso argomento all’interno di un’unica nuovo post. Alla fine dell’editing, cliccare su Publish e entità, con la quale poi operare direttamente, senza ManageWP si occuperà di pubblicare il post scritto su agire sui singoli blog. Per creare un gruppo, cliccare ogni blog scelto. Ovviamente, ad ogni blog verranno NOTA su Groups (Fig. 2), inserire il nome del gruppo nell’uni- associate anche le categorie ed i tags indicati. Infine, co campo di compilazione disponibile e premere su si può notare che la funzionalità di pubblicazione ESPRIMITI. Add Group. Per aggiungere un blog al gruppo appena multipla non è presente solo per i post, ma anche per APRI UN BLOG! creato, individuare il blog dall’elenco Site, cliccare le pagine del blog WordPress: cliccando su Create new Realizzata da Matt Mullenweg page o su Pages/Create A New Page, si potrà decidere e distribuita sotto licenza Gnu, su quali blog pubblicare la medesima pagina, grazie WordPress si è dimostrata la migliore soluzione, in qualità alla sezione di selezione multipla Select Blogs. di piattaforma software per la pubblicazione di contenuti Web, disponibile sul mercato del software libero. Originariamente è nata per la sola funzione di blog (e, in effetti, ne conserva ancora tutte le caratteristiche), ma la sua elasticità estrema lo Fig. 2: Con i Groups si possono operare alcune attività su più blog ha reso un vero e proprio CMS contemporaneamente per la gestione di interi siti, anche professionali. I suo punti di forza sono: facilità di installazione: per su Add Group ed inserire il segno di spunta accanto installare WordPress basta scom- al gruppo nella quale si vuole far confluire il blog. pattare l’archivio compresso Ripetere poi l’operazione per ogni blog da associare (disponibile sul CD allegato alla ad un determinato gruppo. rivista) sul proprio spazio hosting e seguire la procedura guidata Fig. 4: Pubblicazione multipla: si possono scegliere i blog su cui che si conclude in 5 passi; pubblicare un post semplicità d’uso: grazie ad un pannello di amministrazione (dashboard o bacheca), localiz- zata in italiano, ben organizzato, facile da utilizzare anche per i PLUGIN E TEMI neofiti (Fig. 3); A questo punto, un amministratore può avere la ampia community: molti sono necessità di installare il medesimo plugin o lo stesso gli sviluppatori che si cimentano tema su blog differenti. Con ManageWP non c’è nulla nella realizzazioni di componen- Fig. 3: La Bacheca di WordPress da cui amministrare un blog di più semplice: cliccare su Upload Themes/Plugins dal ti, plugin e temi, che vengono poi resi disponibili gratuita- Control Panel per far comparire il pannello di installa- mente; zione delle estensioni di WordPress. Qui, gli step da hosting gratuito: oltre al CMS seguire sono pochi: scegliere cosa installare dal menu vero e proprio, da scaricare e PUBBLICAZIONI MULTIPLE a tendina Plugins, indicare se attivare il plugin dopo installare su qualsiasi spazio Dopo la fase organizzativa, si può passare allo step l’installazione con un segno di spunta su Activate web che abbia i requisiti giusti, su http://it.wordpress.com è operativo. Per redigere un post, si può procedere Plugins After Install e cliccare su Upload a file, per possibile creare gratis un proprio in due modi differenti, cliccando sul pulsante Posts/ scegliere l’archivio zip da caricare (Fig. 5). Ora, indi- blog WordPress con dominio tipo Create a New Post del blog specifico presente nella care se l’installazione deve avvenire per gruppo con mionome.wordpress.it. lista dei siti amministrabili oppure cliccando sul pul- un clic su Install By Group o scegliendo i singoli blog sante Create new post nel Control Panel. Le due moda- con un clic su Install By Blog: nell’uno e nell’altro caso lità d’azione sono praticamente identiche: infatti, in bisogna spuntare il gruppo od i blog sui quali si vuole entrambi i casi comparirà un pannello nella quale installare il componente. L’installazione avrà dunque inserire il titolo, il testo, eventuali excerpt suppor- inizio cliccando su Install. Al termine, i plugin od i temi tati da particolari temi, i trackback, i custom field, le voluti saranno correttamente installati su ogni blog opzioni di discussione, le categorie di appartenenza indicato, senza che l’utente debba fare null’altro. Per ed i tag per l’indicizzazione del post, insomma tutti gli visualizzare quali temi o plugin sono installati su ogni strumenti normalmente a disposizione nella console singolo blog, si possono usare i pulsanti PluginsWh t t p : / / ws : w . ig u ird a r a mmo.it ordpres w la op og Settembre 2011 / 87 37
  • 38. NON SOLO CODICEdei siti gestitimultipla dei siti gestiti da Wordpress Gestione xxxx Gestione multipla guida Wordpress: la da Wordpress i pulsanti Import/Export e Backup/Restore (Fig.6). La funzione Import/Export permette di effettuare il download di un file CSV, nel quale sono memorizzati tutti i dati di accesso ai differenti blog attestati su ManageWP. Il CSV ottenuto diventa utile qualora gli stessi blog debbano essere associati ad un’altra uten- za di ManageWP, senza voler ripetere le operazione Fig. 5: ManageWP consente una gestione centralizzata anche iniziali di inserimento dei blog nella piattaforma. per i plugin e i temi Allo stesso modo, qualora i blog da aggiungere siano NOTA davvero molti, si può pensare di creare un file CSV CLONE SITE: con tre campi (nell’ordine: URL del blog, username e DA UN HOSTING password di WordPress) e caricarlo utilizzando il pul- AD UN ALTRO! e Themes presenti su ogni voce dell’elenco Site. Con il sante Upload a file. Questo permetterà di configurare In ManageWP è assolutamente primo si può visualizzare quali plugin sono installati al volo ManageWP, senza utilizzare la procedura Addinteressante la funzionalità Clone per quel determinato blog, agendo eventualmente New Site descritta all’inizio. site, che consente di clonare o anche sul loro stato di attivazione. Con il secondo L’unica accortezza da usare è di aver installato il spostare un blog da un serviziodi hosting a un altro senza fatica, pulsante, invece, si verifica quale tema è attualmente plugin worker in ogni blog, prima dell’upload delseguendo pochi passaggi. Infatti, installato. In Plugins è presente il pulsante Add new file CSV. Con Backup/Restore si effettuano invece ibasta scegliere un blog dall’elen- plugin, che permette di installare una nuova esten- backup od i ripristini dei blog remoti. Per effettuare co proposto e cliccare su Next, sione al blog ed, in modo speculare, anche in Themes il salvataggio del blog, basta cliccare Backup Now eindicare un backup come sorgen- è presente il tasto Add new theme, con cui caricare decidere se conservare una copia di tutto il blog, del te della clonazione o effettuarne uno aggiornato con Take a New un nuovo tema o cercarne uno adatto fra quelli pre- solo database o delle sole cartelle di temi, plugin e snapshot e cliccare nuovamente installati, raggiungibili dalle voci Search, Featured, upload. su Next (Fig. 8). Indicare tutti Newest e Recently Updated. Attenzione però, perché A operazione terminata, il backup può essere scarica- i dati del servizio hosting di tutte le operazioni svolte da questi pannelli riguarde- to tramite il link Download oppure recuperato con il destinazione e dare il via alla ranno solo ed esclusivamente il blog prescelto pulsante Restore. clonazione con il pulsante Next: ManageWP inizierà a copiare il blog da un sito all’altro, senza perdere nulla. Sul sito di desti- nazione deve comunque essere STRUMENTI disponibile un’installazione di WordPress già funzionate. AMMINISTRATIVI ManageWP offre ai suoi utenti una serie di utili stru- menti che permettono di gestire al meglio il servizio. Le funzioni più importanti si raggiungono attraverso Fig. 8: La funzione Clone site consente di clonare o spostare un blog da un servizio di hosting a un altroFig. 6: Il Backup/Restore serve per avere una copia di salvataggio dell’intero blog o di sue parti LA GESTIONE CENTRALIZZATA DEI BLOG ManageWP permette una gestione centralizzata di differenti blog, anche se non tutte le funzionalità esplicabili su un blog possono essere concentrate: ad esempio, permangono suddivise i sistemi di con- trollo ed editing delle categorie, dei tag e dei com- menti, alle quali bisogna accedere singolarmente da ogni blog in elenco, usando i pulsanti Categories, Tags e Comments (Fig. 7), con la speranza che nelle prossime edizioni dell’applicazione ManageWP anche queste caratteristiche possano essere gestiteFig. 7: La gestione dei commenti avviene ancora su singolo blog e non in modo centralizzato in modo unificato. 88 / Settembre 2011 38 http://www.ioprog rsa m m o . i d a Wordpre s : l a g u i t
  • 39. www.punto-informatico.it
  • 40. Dall’installazione all’uso dei post personalizzati, dai widget ai plug-in più usati,dai template ad-hoc fino alla realizzazione di un Super Admin per la gestionedei contenuti. Ecco la guida dedicata al più famoso CMS opensource per lagestione di blog: Wordpress. E in più, i tutorial per integrare il modulo Paypalnel tuo blog e usare jquery e Google Maps API. www.punto-informatico.it

×