Downloaded 241 times
![I Custom Post Types di Post Types3.0 WordPress 3.0
Wordpress: la guida I Custom WordPress di WEB 2.0
All’avvio di WP viene invocata la funzione register_groups().
All’interno di questa funzione vengono generati due array:
il primo ($labels) provvede all’assegnazione delle etichette
che vengono visualizzate nel pannello di amministrazione e
costituisce uno degli elementi del secondo array; $args impo-
sta una serie di parametri che stabiliscono il funzionamento
del tipo di post. Per una lettura dettagliata degli argomenti
del secondo array, rinviamo al codex (http://goo.gl/tJxCe);
qui ci soffermiamo solo sull’argomento supports. Questo
permette di definire gli elementi del form che appariranno
nel pannello di amministrazione, in fase di inserimento
e modifica dei contenuti. Nel nostro primo “custom post
type” saranno attivi i campi del titolo, l’editor del testo, il
link per l’inserimento dell’immagine di anteprima, il campo
dell’estratto del testo. Una volta definiti i valori degli elementi Fig. 1: Una volta registrata una nuova tassonomia, questa appare
degli array, la funzione register_post_type(‘group’,$args) com- nel menu di sinistra del back-end di WordPress
pleta il lavoro e registra il tipo group. In ultimo, per evitare NOTA
eventuali problemi nella lettura dei permalink, forziamo il
refresh delle regole di rewriting memorizzate, con la funzio- array(‘hierarchical’ => true, ‘label’ => “Genres”, REQUISITI DI SISTEMA
ne 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 diverse
REGISTRARE I CUSTOM FIELDS i seguenti argomenti: le incompatibilità rilevate in
Una 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 requisiti
di 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 laterale
function 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 di
Gli argomenti che questa accetta impostano l’ID del campo, eventuali errori nel recupero
il titolo, il nome di una funzione di callback, il tipo di post cui function save_group_meta() { global $post;
dei dati. Nelle istallazioni di
associare il campo, l’area della pagina dove caricarlo, infine la update_post_meta($post->ID, ‘year’, $_POST[‘year’]); } WordPress su cui è stato testato
priorità. La funzione di callback year() genera il codice HTML il codice riportato, tuttavia, non
del 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 “custom
REGISTRARE field”. Ora tutto è pronto per l’inserimento dei dati. Possiamo
LE 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 il
genere cui si ispira l’artista (o la band):
add_action(‘init’, ‘register_custom_taxonomies’); AGGIUNGIAMO GLI ALBUM
function 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-
10
h 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](https://image.slidesharecdn.com/wordpresslaguida-121012044928-phpapp02/85/Wordpress-la-guida-10-320.jpg)
![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 tipi
dal pannello di amministrazione. personalizzati: di post personalizzati. Nel nostro sito di esempio, vogliamo
Tra 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 agli
ad 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 METADATI
modificando 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, per
ioProgrammo 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](https://image.slidesharecdn.com/wordpresslaguida-121012044928-phpapp02/85/Wordpress-la-guida-11-320.jpg)
![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 PER
con 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 DATI
predisporre 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 di
mo 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](https://image.slidesharecdn.com/wordpresslaguida-121012044928-phpapp02/85/Wordpress-la-guida-15-320.jpg)
![Wordpress: la guida Le Widgets API di WordPress
Le Widgets API di WordPress WEB 2.0
VISUALIZZIAMO nel front-end del sito. Per far questo servirà un feed
IL WIDGET della Calendar Data API e , ovviamente, del codice
L’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() e
sto 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’]); NOTA
vengono estratti grazie alla funzione PHP extract(), $startmax = esc_attr($instance[‘startmax’]);
che genera una variabile per ogni elemento dell’ar- … LA LICENZA
ray: le variabili che utilizziamo qui sono $befo- } DEI PLUG-IN
re_widget e $after_widget. Queste generano il codice La maggior parte delle
HTML 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 requisito
zionante. 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 plugin
al 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( ‘order
DAL 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’);
16
h 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](https://image.slidesharecdn.com/wordpresslaguida-121012044928-phpapp02/85/Wordpress-la-guida-16-320.jpg)
![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 this
che, 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](https://image.slidesharecdn.com/wordpresslaguida-121012044928-phpapp02/85/Wordpress-la-guida-17-320.jpg)
![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- • plugins
meranno la URI del feed e ricomposti nella stringa o gcal_events_list
$params. Viene, poi, inoltrata la richiesta alla Data - gcal_events_list.php
API: - 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(). Creiamo
Infine, 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’header
echo ‘<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ù istruzioni
per generare la data è quello di facilitare la localizza-
zione dei testi (vedi nota), grazie alla funzione __().
Infine, una serie di echo mandano i dati a video.
AGGIUNGIAMO
UN FOGLIO DI STILE
Trattandosi di resa a video di dati, è probabile che
si avverta la necessità di adattare l’aspetto del wid-
get al proprio tema: utilizzeremo, quindi, un foglio
di stile. Prima di aggiungere il codice necessario, Fig. 7: La resa a video del widget: data, titolo e orario
però, bisogna modificare la struttura del plug-in. degli eventi
18
h 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](https://image.slidesharecdn.com/wordpresslaguida-121012044928-phpapp02/85/Wordpress-la-guida-18-320.jpg)
![Utilizzare le PayPal API con PHP con PHP Wordpress: la guida
Utilizzare le PayPal API WEB 2.0
INSERT 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 lista
no con prezzi diversi. Il file di configurazione della prodotti e stamperemo la lista dei prodotti contenuta
connessione 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 WEB
Passiamo 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à <strong>” . $value . “</strong> PayPal? Allora dovete iscrivervi
echo ‘<ul>’; Totale: <strong>” . ($row[“prezzo”] * $value) . al sito dedicato agli sviluppatori
PayPal che trovate all’indirizzo
while ($row = mysql_fetch_assoc($result)) “€</strong><br />”;
https://developer.paypal.com/ o
{ $totale += ($row[“prezzo”] * $value); più semplicemente http://x.com.
echo ‘<li>’. $row[‘nome’] . ‘ €’ . $row[‘prezzo’]; } Troverete API, documentazione
echo ‘ - <a href=”carrello.php?op=add&id=’.$row[‘id’].’” echo “TOTALE: “ . $totale .”€”; 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 i
Ecco 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 recuperati
aggiungere al carrello. la descrizione e il prezzo con una query al database
L’operazione che faremo in carrello.php sarà quella MySQL.
di aggiungere all’array $_SESSION[‘carrello’] presente Sommare poi prezzi e quantità per ottenere il totale
nella 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 nostro
if(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 decine
h t r : /w s w o guigr
Wtopd/p r ews : .lia p r o d aa m mo.it Febbraio 2011 / 21](https://image.slidesharecdn.com/wordpresslaguida-121012044928-phpapp02/85/Wordpress-la-guida-21-320.jpg)
![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 i
più 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](https://image.slidesharecdn.com/wordpresslaguida-121012044928-phpapp02/85/Wordpress-la-guida-24-320.jpg)
![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
rie 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 hook
con il plugin. Sarà necessario, invece, caricare jQuery add_meta_boxes:
UI: la versione disponibile in WP 3.2.1 non dispone
del 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 agli
script 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 );
NOTA
Le caratteristiche specifiche dei custom meta box ven- }
gono stabilite da una serie di parametri, che qui defi- NONCE: NUMBER
niamo 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 online
Gli 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_Nonces
post_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_metabox
andremo 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.it
h t r : /w s w o guigr Marzo 2012 / 23
27](https://image.slidesharecdn.com/wordpresslaguida-121012044928-phpapp02/85/Wordpress-la-guida-27-320.jpg)
![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 aggiorna
WP, utilizzata per lo sviluppo del I CUSTOM FIELDS E il valore del custom field; nel caso venga trasmesso un
nostro 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 non
com/, 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: PERFEZIONIAMO
click 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 evitare
di 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](https://image.slidesharecdn.com/wordpresslaguida-121012044928-phpapp02/85/Wordpress-la-guida-28-320.jpg)
![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’indirizzo
attivato 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 geografiche
vengano 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](https://image.slidesharecdn.com/wordpresslaguida-121012044928-phpapp02/85/Wordpress-la-guida-30-320.jpg)
![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 sulla
mappa. Il marker viene poi aggiunto all’array mar- <?php add_filter( $tag, $function, $priority, $num_args
kers. ); ?>
L’ultima funzione dello script cancella i markers dalla
mappa: 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 possono
corrispondano 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, quando
il post viene salvato, i dati inseriti vengono memo- Carlo Daniele
Wtopd/p r ews : .lia p r o d aa m mo.it
h t r : /w s w o guigr Marzo 2012 / 27
31](https://image.slidesharecdn.com/wordpresslaguida-121012044928-phpapp02/85/Wordpress-la-guida-31-320.jpg)
![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
CREARE UN TEMPLATE
AD HOC PER WORDPRESS
IN QUESTO ARTICOLO APPROFONDIREMO LE NUOVE POTENZIALITÀ OFFERTE DA HTML5 E DA CSS3
PER REALIZZARE UN COMPLETO TEMPLATE “FROM SCRATCH”, DA INSTALLARE NEL NOSTRO BLOG
IN WORDPRESS
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 funga
mediacinema.zip ad-hoc e/o su misura per il nostro cliente). Allora da modello. Una sorta di “pagina mastro”. Data una
cdrom.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](https://image.slidesharecdn.com/wordpresslaguida-121012044928-phpapp02/85/Wordpress-la-guida-32-320.jpg)
![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() ) { ?> » 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 gestione
all’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](https://image.slidesharecdn.com/wordpresslaguida-121012044928-phpapp02/85/Wordpress-la-guida-34-320.jpg)
Wordpress la guida
- 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 guida Dall’installazione all’usodei post personalizzati, dai widget ai plug-in più usati, dai template ad-hoc fino alla realizzazione di un Super Admin per la gestione dei contenuti. Ecco la guida dedicata al più famoso CMS opensource per la gestione di blog: Wordpress. E in più, i tutorial per integrare il modulo Paypal nel tuo blog e usare jquery e Google Maps API. Questo approfondimento tematico è stato pensa- to per chi desidera lanciarsi nel mondo del Web e vuole farlo in maniera professionale, imparando ad utilizzare una piattaforma che, nella sua semplicità disarmante, offre grandi potenzialità. Wordpress, nel suo essere facile da utilizzare, nascon- de innumerevoli funzioni avanzate che posso fare da ago della bilancia nel decretare, o meno, il successo di un blog nell’infinito universo della blogosfera.
- 3. Wordpress 3.0, tuttele novità. . . . . . . . . . . . . . . . 4 Wordpress si aggiorna alla versione 3.0, portando molte novità. scopriamo passo passo come installarlo e come approfittare delle numerose innovazioni introdotte: e se ora fosse meglio di Joomla come CMS? Post personalizzati con Wordpress. . . . . . . . . . . 9 I Custom Post Types di Wordpress 3 rendono il software un potente e completo cms, adatto anche alla realizzazione di siti aziendali complessi. vediamo come sfruttare la nuova caratteristia per integrare tipi di dati con contenuto personalizzato Utilizzare i widget di Wordpress. . . . . . . . . . . . . 13 I widget di Wordpress sono gli strumenti ideali per aggiungere ogni tipo di funzionalità ai propri siti: vediamo come creare un’agenda di appuntamenti utilizzando gli stessi e google calendar Integrare Paypal nel tuo sito o blog . . . . . . . . 20 Avere uno strumento per elaborare pagamenti online è ormai una prerogativa di qualsiasi sito che propone servizi e prodotti. Per questo scopo, uno degli strumenti più utilizzati è PayPal. vediamo come utilizzarlo con php e Wordpress Usa jquery e le Google Maps API in Wordpress. . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Grazie ai plugin, wordpress si presta senza problemi ad ogni esigenza di sviluppo. vediamo come creare un calendario di eventi con un plugin, le librerie jQuery e jQueryUi e, ciliegina sulla torta, le Google Maps Creare un template ad hoc per Wordpress. . . . . . . . . . . . . . . . . . . . . . . 32 In questo articolo approfondiremo le nuove potenzialità offerte da html5 e da css3 per realizzare un completo template “from scratch”, da installare nel nostro blog in Wordpress Ecco il Super Admin per Wordpress. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Come sfruttare una console di comando, utile per amministrare tutti i tuoi blog wordpress insieme. Ti permetterà di ottimizzare la gestione di temi e plug-in, e la pubblicazione multipla dei tuoi post
- 4. Wordpress: la guidaAnteprima di Wordpress 3.0 WEB 2.0 Anteprima di Wordpress 3.0 WORDPRESS 3.0 TUTTE LE NOVITÀ WORDPRESS SI AGGIORNA ALLA VERSIONE 3.0, PORTANDO MOLTE NOVITÀ. SCOPRIAMO PASSO PASSO COME INSTALLARLO E COME APPROFITTARE DELLE NUMEROSE INNOVAZIONI INTRODOTTE: E SE ORA FOSSE MEGLIO DI JOOMLA COME CMS? 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 ❑ WEB wp3.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 finalmente Software Un’installazione di un’occhiata alle novità più rilevanti! PHP, Database MySQL Impegno I NUOVI MENU Tempo 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 Wordpress3.0 Wordpress: la guida Anteprima di Wordpress 3.0 WEB 2.0 limitavano a mostrare l’elenco delle pagine presenti all’interno del sistema al massimo aggiungendo un elemento “home” e ordinando e formattando la lista di pagine ritornate secondo criteri impostati dallo sviluppatore. Con Wordpress 3.0 cambia tutto: è stato integra- to all’interno un editor visuale per i menu che vi permetterà di assegnare ciascun menu creato alla sua location (vedremo dopo cosa significa) e di Fig. 4: I quattro menu che abbiamo registrato all’interno modificare con semplici drag&drop il contenuto di del nostro tema ciascun sottomenu: possiamo includere nel menu pagine, url personalizzati (siti esterni o link diretti a nati momenti dell’esecuzione del nostro software post, per esempio) o categorie. Nei temi compatibili in cui possiamo chiamare funzioni che eseguono con 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 WORDPRESS Fig. 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 di Vediamo 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 hook usando 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 sidebar Cosa 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 in in Wordpress sono appunto “agganci” a determi- precedenza. htt r : pre w : .i pr i gr W opd/ / ws sw l aog uod a a m mo.it Agosto 2010 / 29 5
- 6. Wordpress: la guidaAnteprima 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 pagina le 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 Wordpress3.0 Wordpress: la guida Anteprima di Wordpress 3.0 WEB 2.0 POST PERSONALIZZATI ‘parent’ => __( ‘Podcast superiorÈ ), Wordpress 3.0 introduce la possibilità di creare post ), personalizzati (custom post): attenzione però… Si parla 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 sito di annunci immobiliari ad esempio, creando un Cosa è successo? Abbiamo aggiunto una nuova custom post “annunci” oppure possiamo creare voce di menu al nostro Wordpress. Cliccando sul un custom post “fotografie” se usiamo il blog come menu visualizzeremo una pagina in tutto e per tutto portfolio 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 per avanzato: infatti, a tutti questi contenuti “specia- cominciare si occuperà di impostare le etichette per li”, possiamo aggiungere campi personalizzati per i pulsanti del nostro pannello, come potete vedere rendere 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 imposta ma in maniera infinitamente più semplice. la “privacy” o meno dei nostri podcast, show_ui Un esempio pratico ci chiarirà le idee. Poniamo permette di attivare il pannello podcast nelle nostre di essere un aspirante DJ che vuole aggiungere la pagine di amministrazione. Per concludere, una propria lista di podcast ad un blog Wordpress: per lista di parametri che imposta la visualizzazione caricare 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” del un 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 parametro tratta 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 ad dai normali post di Wordpress con sue peculiarità albero: nel caso dei podcast potremmo attivarlo per e possibilità molto maggiori rispetto ad un classico creare serie composte da più puntate organizza- post o una pagina. te gerarchicamente). L’array supports indica quali Ecco 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 del add_action(‘init’, ‘crea_custom_podcast’ ); blog, ma come potete vedere non saranno visua- lizzati nella home del nostro blog, se non verranno function 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 personalizzate htt r : pre w : .i pr i gr W opd/ / ws sw l aog uod a a m mo.it Agosto 2010 / 31 7
- 8. Wordpress: la guidaAnteprima 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 PostTypes di WordPress di WordPress Wordpress: la guida WEB 2.0 I Custom Post Types 3.0 3.0 POST PERSONALIZZATI CON WORDPRESS I CUSTOM POST TYPES DI WORDPRESS 3 RENDONO IL SOFTWARE UN POTENTE E COMPLETO CMS, ADATTO ANCHE ALLA REALIZZAZIONE DI SITI AZIENDALI COMPLESSI. VEDIAMO COME SFRUTTARE LA NUOVA CARATTERISTIA PER INTEGRARE TIPI DI DATI CON CONTENUTO PERSONALIZZATO 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” per cdrom.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 PostTypes di Post Types3.0 WordPress 3.0 Wordpress: la guida I Custom WordPress di WEB 2.0 All’avvio di WP viene invocata la funzione register_groups(). All’interno di questa funzione vengono generati due array: il primo ($labels) provvede all’assegnazione delle etichette che vengono visualizzate nel pannello di amministrazione e costituisce uno degli elementi del secondo array; $args impo- sta una serie di parametri che stabiliscono il funzionamento del tipo di post. Per una lettura dettagliata degli argomenti del secondo array, rinviamo al codex (http://goo.gl/tJxCe); qui ci soffermiamo solo sull’argomento supports. Questo permette di definire gli elementi del form che appariranno nel pannello di amministrazione, in fase di inserimento e modifica dei contenuti. Nel nostro primo “custom post type” saranno attivi i campi del titolo, l’editor del testo, il link per l’inserimento dell’immagine di anteprima, il campo dell’estratto del testo. Una volta definiti i valori degli elementi Fig. 1: Una volta registrata una nuova tassonomia, questa appare degli array, la funzione register_post_type(‘group’,$args) com- nel menu di sinistra del back-end di WordPress pleta il lavoro e registra il tipo group. In ultimo, per evitare NOTA eventuali problemi nella lettura dei permalink, forziamo il refresh delle regole di rewriting memorizzate, con la funzio- array(‘hierarchical’ => true, ‘label’ => “Genres”, REQUISITI DI SISTEMA ne 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 diverse REGISTRARE I CUSTOM FIELDS i seguenti argomenti: le incompatibilità rilevate in Una 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 requisiti di 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 laterale function 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 di Gli argomenti che questa accetta impostano l’ID del campo, eventuali errori nel recupero il titolo, il nome di una funzione di callback, il tipo di post cui function save_group_meta() { global $post; dei dati. Nelle istallazioni di associare il campo, l’area della pagina dove caricarlo, infine la update_post_meta($post->ID, ‘year’, $_POST[‘year’]); } WordPress su cui è stato testato priorità. La funzione di callback year() genera il codice HTML il codice riportato, tuttavia, non del 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 “custom REGISTRARE field”. Ora tutto è pronto per l’inserimento dei dati. Possiamo LE 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 il genere cui si ispira l’artista (o la band): add_action(‘init’, ‘register_custom_taxonomies’); AGGIUNGIAMO GLI ALBUM function 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- 10 h 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 PostTypes 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 tipi dal pannello di amministrazione. personalizzati: di post personalizzati. Nel nostro sito di esempio, vogliamo Tra 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 agli ad 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 METADATI modificando 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, per ioProgrammo 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 PostTypes 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 callback pubblicazione dell’album), prelevando il valore del “custom invocata dall’hook pre_get_posts, come visto in precedenza field” year: get_post_meta($post->ID, ‘year’, true). Subito nella modifica della home page: dopo impostiamo una nuova query, con una nuova istanza NOTA dell’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 dalla i 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 Daniele sente la visualizzazione degli archivi per “custom post type”. Per aggirare l’ostacolo, le soluzioni sono due: o si attende con pazienza il rilascio della versione stabile di WP 3.1 (al momento in cui scriviamo è disponibile la RC1), oppure si opta per una soluzione di compro- messo: si crea un template pagina in cui modificare il loop predefinito e vi si associa una pagina con lo stesso nome del tipo di post. Per prima cosa, duplichiamo il file page.php del tema installato e rinominiamo la copia in page-group.php. Cambiamo, poi, l’intestazione del file come segue: /** * Template Name: Group custom post type * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */ Prima del Loop, infine, impostiamo una nuova query: <?php query_posts(array(‘post_type’=>’group’)); ?> Fig. 2: Una volta ridefinita la query, assieme ai normali post, in home page verranno visualizzate Secondo la stessa logica, possiamo creare un nuovo tem- anche i contenuti del tipo group 12 h 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 APIdi WordPress Wordpress: la guida WEB 2.0 Le Widgets API di WordPress UTILIZZARE I WIDGET DI WORDPRESS I WIDGET DI WORDPRESS SONO GLI STRUMENTI IDEALI PER AGGIUNGERE OGNI TIPO DI FUNZIONALITÀ AI PROPRI SITI: VEDIAMO COME CREARE UN’AGENDA DI APPUNTAMENTI UTILIZZANDO GLI STESSI E GOOGLE CALENDAR 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-IN Impegno 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 guidaLe Widgets API di WordPress Le Widgets API di WordPress WEB 2.0 Nel 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 distribuire Partiamo 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 la impostare solo il titolo del widget, mentre visualiz- widget(“gcalEventsList”);). L’impalcatura è pronta. Widget API forniranno tutto zerà 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 WIDGET WordPress di cosa si tratta. L’intestazione va inseri- La prima delle funzioni del listato precedente è il ta 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 widget Plugin 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.1 Author: 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 array altro installato. Ricordiamo che il plug-in serve con l’elemento description (per i dettagli sulla classe come 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 nostro la classe WP_Widgets: widget esiste e possiamo già testarlo. Salviamo il 14 h 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 APIdi 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 PER con 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 DATI predisporre 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 di mo 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 guidaLe Widgets API di WordPress Le Widgets API di WordPress WEB 2.0 VISUALIZZIAMO nel front-end del sito. Per far questo servirà un feed IL WIDGET della Calendar Data API e , ovviamente, del codice L’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() e sto 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’]); NOTA vengono estratti grazie alla funzione PHP extract(), $startmax = esc_attr($instance[‘startmax’]); che genera una variabile per ogni elemento dell’ar- … LA LICENZA ray: le variabili che utilizziamo qui sono $befo- } DEI PLUG-IN re_widget e $after_widget. Queste generano il codice La maggior parte delle HTML 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 requisito zionante. 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 plugin al 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( ‘order DAL 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’); 16 h 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 APIdi 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 this che, 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 guidaLe 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- • plugins meranno la URI del feed e ricomposti nella stringa o gcal_events_list $params. Viene, poi, inoltrata la richiesta alla Data - gcal_events_list.php API: - 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(). Creiamo Infine, 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’header echo ‘<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ù istruzioni per generare la data è quello di facilitare la localizza- zione dei testi (vedi nota), grazie alla funzione __(). Infine, una serie di echo mandano i dati a video. AGGIUNGIAMO UN FOGLIO DI STILE Trattandosi di resa a video di dati, è probabile che si avverta la necessità di adattare l’aspetto del wid- get al proprio tema: utilizzeremo, quindi, un foglio di stile. Prima di aggiungere il codice necessario, Fig. 7: La resa a video del widget: data, titolo e orario però, bisogna modificare la struttura del plug-in. degli eventi 18 h 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 APIdi 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 quale repository delle estensioni sottoporre il plug-in all’approvazione degli amministratori di WordPress: http://wor- di wordpress.org dpress.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 2011 Wordpress: la guida 19 http://www.iopro g r a m m o . i t
- 20. Wordpress: la guidaUtilizzareUtilizzareAPI con PHP con PHP WEB 2.0 le PayPal le PayPal API INTEGRARE PAYPAL NEL TUO SITO O BLOG AVERE UNO STRUMENTO PER ELABORARE PAGAMENTI ONLINE È ORMAI UNA PREROGATIVA DI QUALSIASI SITO CHE PROPONE SERVIZI E PRODOTTI. PER QUESTO SCOPO, UNO DEGLI STRUMENTI PIÙ UTILIZZATI È PAYPAL. VEDIAMO COME UTILIZZARLO CON PHP E WORDPRESS 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.it cdrom.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 PayPalAPI con PHP con PHP Wordpress: la guida Utilizzare le PayPal API WEB 2.0 INSERT 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 lista no con prezzi diversi. Il file di configurazione della prodotti e stamperemo la lista dei prodotti contenuta connessione 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 WEB Passiamo 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à <strong>” . $value . “</strong> PayPal? Allora dovete iscrivervi echo ‘<ul>’; Totale: <strong>” . ($row[“prezzo”] * $value) . al sito dedicato agli sviluppatori PayPal che trovate all’indirizzo while ($row = mysql_fetch_assoc($result)) “€</strong><br />”; https://developer.paypal.com/ o { $totale += ($row[“prezzo”] * $value); più semplicemente http://x.com. echo ‘<li>’. $row[‘nome’] . ‘ €’ . $row[‘prezzo’]; } Troverete API, documentazione echo ‘ - <a href=”carrello.php?op=add&id=’.$row[‘id’].’” echo “TOTALE: “ . $totale .”€”; 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 i Ecco 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 recuperati aggiungere al carrello. la descrizione e il prezzo con una query al database L’operazione che faremo in carrello.php sarà quella MySQL. di aggiungere all’array $_SESSION[‘carrello’] presente Sommare poi prezzi e quantità per ottenere il totale nella 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 nostro if(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 decine h t r : /w s w o guigr Wtopd/p r ews : .lia p r o d aa m mo.it Febbraio 2011 / 21
- 22. Wordpress: la guidaUtilizzareUtilizzareAPI 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 per impersonare 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 PayPalAPI con PHP con PHP Wordpress: la guida Utilizzare le PayPal API WEB 2.0 Come potete vedere dall’immagine di Fig.3, i moduli PAYPAL E WORDPRESS disponibili 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 diversi semplice un pagamento via PayPal o carta di credito. modi: dal Widget per la semplice donazione, fino a Facile e veloce: si tratta fondamentalmente di compi- creare una completa soluzione di e-commerce basata lare dei Wizard e poi inserire il codice HTML ottenuto su Wordpress. all’interno delle nostre pagine web. E se volessimo qualcosa in più? LE PAYPAL API PayPal mette a disposizione un ricchissimo set di API che è possibile utilizzare usando l’apposito SDK che potete scaricare dal sito http://x.com. Fino ad oggi, per utilizzare PayPal all’interno dei nostri siti web, bisognava per forza passare da una pagina PayPal esterna al nostro dominio. Ora, grazie alle API, possiamo integrare completamente la gestione dei Fig. 4: La pagina su Wordpress.org dedicata ai plug-in PayPal pagamenti all’interno del nostro sito, senza dover “spe- dire” l’utente sulle pagine di PayPal.com come accade anche con i vari Wizard che abbiamo visto fino ad ora. Per raggiungere il nostro scopo utilizzeremo qualcuno Nel menu “Dev Tools” del sito X.com potete dare dei numerosi plug-in disponibili sul repository ufficiale un’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/) e valuta 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 ecco importo 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 et middle” per le vostre transazioni. Per giocare con le voilà, ecco il pulsante di Donazione attivo sul nostro Adaptive API , cominciate con lo scaricare l’SDK per il linguaggio PHP a questo indirizzo http://tinyurl.com/ adapi. L’SDK contiene la documentazione e tutta una serie di esempi pronti da visualizzare. Sarà anche necessario installare il pacchetto PEAR XML_Serializer, se non è presente nella vostra installa- zione PEAR installatelo con il comando: pear install -f --alldeps XML_Serializer Andando con il browser all’indirizzo della index.php del pacchetto, vedrete una pagina con cui potrete cominciare a prendere confidenza: il corposo docu- mento che trovate all’indirizzo https://cms.paypal. com/cms_content/US/en_US/files/developer/PP_ AdaptivePayments.pdf può darvi sicuramente un’idea di quanto siano vaste queste API. Sta a voi scegliere la soluzione migliore per il vostro lavoro: wizard e bottoni per semplici attività, adaptive API invece se il vostro lavoro richiede personalizzazioni estreme e gestione massima dei flussi verso il servizio PayPal. Fig. 5: La pagina dei settings del plug-in PayPal Donations h t r : /w s w o guigr Wtopd/p r ews : .lia p r o d aa m mo.it Febbraio 2011 / 23
- 24. Wordpress: la guidaUtilizzareUtilizzareAPI 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 i più 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 percreare un calendario di eventi in in WordPress Wordpress: la guida Un plugin per creare un calendario di eventi WP WEB 2.0 USA JQUERY E LE GOOGLE MAPS API IN WORDPRESS GRAZIE AI PLUGIN, WORDPRESS SI PRESTA SENZA PROBLEMI AD OGNI ESIGENZA DI SVILUPPO. VEDIAMO COME CREARE UN CALENDARIO DI EVENTI CON UN PLUGIN, LE LIBRERIE JQUERY E JQUERYUI E, CILIEGINA SULLA TORTA, LE GOOGLE MAPS I 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 di mento di business e un compagno fidato per chi opera tutti. Un plugin può sopperire a questi inconvenienti e nel 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 ❑ WEB creare e gestire un calendario di eventi. Si tratterà di wp_jquery_gmaps.zip cdrom.ioprogrammo.it creare normali post cui associare una data, un indirizzo postale e una coppia di coordinate geografiche. I dati I CUSTOM META BOX: così inseriti saranno disponibili per la visualizzazione VEDIAMO COSA SONO nel 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 quelli DI WORDPRESS predefiniti. In pratica, un custom meta box è utilizzato I dati di cui si compone un post di Wordpress sono il titolo, il contenuto, una o più categorie, uno o più tag. L’utente può aggiungere ulteriori dati, strutturati come meta-informazioni, servendosi dei cosiddetti “custom fields”. Si tratta di semplici coppie testuali nome-valore, che vengono memorizzate nella tabella wp_postme- ta del database. Nella loro semplicità, i custom field permettono di creare architetture dati anche molto complesse. Purtroppo la UI di WordPress dispone di semplici 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 realizzazione Fig. 1: I custom field sono delle semplici coppie nome-valore che Fig. 2: Un custom meta box può ospitare controlli di ogni tipo. La figura possono essere acquisite grazie a normali campi di testo. mostra come appare il meta box sviluppato in questo articolo Wtopd/p r ews : .lia p r o d aa m mo.it h t r : /w s w o guigr Marzo 2012 / 21 25
- 26. Wordpress: la guidaUnplugin 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 sono WP 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 percreare un calendario di eventi in in WordPress Wordpress: la guida Un plugin per creare un calendario di eventi WP WEB 2.0 rie 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 hook con il plugin. Sarà necessario, invece, caricare jQuery add_meta_boxes: UI: la versione disponibile in WP 3.2.1 non dispone del 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 agli script 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 ); NOTA Le caratteristiche specifiche dei custom meta box ven- } gono stabilite da una serie di parametri, che qui defi- NONCE: NUMBER niamo 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 online Gli 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_Nonces post_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_metabox andremo 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.it h t r : /w s w o guigr Marzo 2012 / 23 27
- 28. Wordpress: la guidaUnplugin 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 aggiorna WP, utilizzata per lo sviluppo del I CUSTOM FIELDS E il valore del custom field; nel caso venga trasmesso un nostro 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 non com/, 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: PERFEZIONIAMO click 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 evitare di 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 percreare 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 fare lback potrà far uso della funzione $ senza alcun rischio dello spazio inutile nel caso in cui l’elaborazione degli di conflitti (maggiori info su http://docs.jquery.com/ script fosse disabilitata. Torniamo al file iop-script.js e Using_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’azzeramento tato mostrato in Fig. 3. dei dati: I parametri passati alla funzione stabiliscono il formato dell’input, la forzatura del formato, la data predefinita, $(‘<input type=”button” id=”iop_find_location” … >’) NOTA l’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 funzione E 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 un campo per le coordinate geografiche. Il plugin darà all’utente la possibilità di inserire manual- UNA GOOGLE MAP PER mente l’indirizzo, oppure di cercare la località serven- LOCALIZZARE GLI EVENTI dosi 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 delle sul pulsante “Find”. Il servizio di geocoding della Maps funzioni utilizzate accederanno alle stesse variabili, le API restituirà le coordinate che andranno a costituire il quali dovranno, per questo, essere definite nel “global valore del secondo campo. scope”: Wtopd/p r ews : .lia p r o d aa m mo.it h t r : /w s w o guigr Marzo 2012 / 25 29
- 30. Wordpress: la guidaUnplugin 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’indirizzo attivato 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 geografiche vengano 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 percreare 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 sulla mappa. Il marker viene poi aggiunto all’array mar- <?php add_filter( $tag, $function, $priority, $num_args kers. ); ?> L’ultima funzione dello script cancella i markers dalla mappa: 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 possono corrispondano 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, quando il post viene salvato, i dati inseriti vengono memo- Carlo Daniele Wtopd/p r ews : .lia p r o d aa m mo.it h t r : /w s w o guigr Marzo 2012 / 27 31
- 32. Wordpress: la guidaHTML5 il HTML 5 il nostro primofai da te per Wordpress WP WEB 2.0 nostro primo template template fai da te per CREARE UN TEMPLATE AD HOC PER WORDPRESS IN QUESTO ARTICOLO APPROFONDIREMO LE NUOVE POTENZIALITÀ OFFERTE DA HTML5 E DA CSS3 PER REALIZZARE UN COMPLETO TEMPLATE “FROM SCRATCH”, DA INSTALLARE NEL NOSTRO BLOG IN WORDPRESS 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 funga mediacinema.zip ad-hoc e/o su misura per il nostro cliente). Allora da modello. Una sorta di “pagina mastro”. Data una cdrom.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 ilnostro 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 di Come potete vedere, la struttura è abbastanza sem- gradiente. Andiamo ora a strutturare il nostro progetto. plice. Alcune soluzioni, come il menu creato (per ora staticamente), dovranno essere rimosse nel momento in cui convertiremo questa pagina in un vero e proprio modello. Dove possibile abbiamo utilizzato alcuni TAG CREIAMO IL TEMPLATE dell’HTML5 che non dovrebbero creare problemi di PER WORDPRESS compatibilità tra i vari browser. Per questo abbiamo I template di WordPress sono articolati in una struttura usato 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... . NOTA principale), footer per il piè di pagina del sito, header A queste pagine si aggiungono una o più pagine per 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 si ORA OCCUPIAMOCI mo a dividerla in parti. è reso necessario inserire una DELL’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 di teremo 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 al avere all’inizio un blocco di commento che dia alcu- menu di navigazione compreso, dovrà essere salvato ne info sul tema, il nome dell’autore, la possibilità di in una pagina specifica chiamata “header.php”. Nel aggiungere 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 molte Theme Name: Media Cinema informazioni utili da gestire. Ad esempio il titolo del Theme URI: http://www.faber04.com sito, il link al file RSS, il charset utilizzato, nonché le voci Description: 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 guigr Wtopd/p r ews : .lia p r o d aa m mo.it Gennaio 2012 / 25 33
- 34. Wordpress: la guidaHTML5 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() ) { ?> » 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 gestione all’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 ilnostro primo template fai fai da te per Wordpress Wordpress: la guida HTML 5 il nostro primo template da te per WP WEB 2.0 infatti 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Ù VELOCI LE 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 2003 progetto WordPress: index, page, single e search. Tutte più del necessario. Investe buona parte della sua attività tra formazione e sviluppo pagine simili per la loro struttura, ma riutilizzate per Esistono diverse possibilità di creazione di temi ad hoc soprattutto in ambiente Flash l’evenienza a seconda che l’utente stia leggendo una “chiavi in mano”. Platform. Collabora con diverse pagina specifica, un post, oppure abbia effettuato una Artisteer (www.artisteer.com) ad esempio è un pro- società di advertising e web ricerca all’interno del sito. Queste pagine, salvo ecce- gramma, a pagamento, molto potente che permette di agency nonchè docente presso zioni particolari, sono solitamente tutte uguali. realizzare template non solo per WordPress, ma anche diverse strutture di formazione. Dal 2007 al 2010 è stato “channel Basterà 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 e Così come alla fine della pagina avremo bisogno del verità, ma efficace per le esigenze minime per iniziare seminari online di promozione dei footer e/o della sidebar: a mettere mano a un progetto pronto per l’occorrenza. prodotti Adobe per il Web <?php get_sidebar(); ?> Fabio Bernardi h t r : /w s w o guigr Wtopd/p r ews : .lia p r o d aa m mo.it Gennaio 2012 / 27 35
- 36. NON SOLO CODICEdeisiti gestitimultipla dei siti gestiti da Wordpress Gestione xxxx Gestione multipla guida Wordpress: la da Wordpress ECCO IL SUPER ADMIN PER WORDPRESS COME SFRUTTARE UNA CONSOLE DI COMANDO, UTILE PER AMMINISTRARE TUTTI I TUOI BLOG WORDPRESS INSIEME. TI PERMETTERÀ DI OTTIMIZZARE LA GESTIONE DI TEMI E PLUG-IN, E LA PUBBLICAZIONE MULTIPLA DEI TUOI POST 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 i Fig. 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 Plugins Wh 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 CODICEdeisiti 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 Add interessante 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 servizio di hosting a un altro senza fatica, pulsante, invece, si verifica quale tema è attualmente plugin worker in ogni blog, prima dell’upload del seguendo pochi passaggi. Infatti, installato. In Plugins è presente il pulsante Add new file CSV. Con Backup/Restore si effettuano invece i basta 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 e indicare 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 altro Fig. 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 gestite Fig. 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.
- 40. Dall’installazione all’uso deipost personalizzati, dai widget ai plug-in più usati, dai template ad-hoc fino alla realizzazione di un Super Admin per la gestione dei contenuti. Ecco la guida dedicata al più famoso CMS opensource per la gestione di blog: Wordpress. E in più, i tutorial per integrare il modulo Paypal nel tuo blog e usare jquery e Google Maps API. www.punto-informatico.it