Wordpress la guida

12,403 views

Published on

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

No Downloads
Views
Total views
12,403
On SlideShare
0
From Embeds
0
Number of Embeds
659
Actions
Shares
0
Downloads
236
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Wordpress la guida

  1. 1. Approfondimenti tematici Wordpress la guida Passo passo, le principali funzioni del più famoso CMS opensource per la gestione del tuo blog
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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= 

×