Quante volte abbiamo visto siti di magazine dotati di spettacolari slideshow a centro pagina che presentano gli ultimi articoli con immagini a ripetizione? Basta guardare il sito di wired o dell’Economist.. Molti temi wordpress per magazine presentano soluzioni di questo tipo, spesso però pescano le immagini da presentare tra i custom fields di wordpress.

La soluzione che propongo in questo articolo pubblica invece la prima foto allegata al post e la fa girare a rotazione assieme al titolo e all’excerpt (il riassunto). Il risultato finale è visibile in questa demo.

Per fare il tutto ho scelto un javascript gratuito: Slideshow2! Grazie a questa splendida classe per Mootools è possibile creare in pochi istanti effetti davvero accattivanti.
Ci sono diversi plugin per wordpress in giro che utilizzano i più noti script per generare slideshow e gallerie, ma tutti quelli che ho visto servono per creare una gallery a partire da un singolo post. Il mio obbiettivo era diverso: creare uno slideshow con la prima immagine degli ultimi articoli pubblicati. Vediamo come fare..

Prima di tutto il codice.

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/slideshow.css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mootools.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slideshow.js"></script>


Questa prima parte va aggiunta nell’elemento <head>, nel file header.php del template wordpress. Non fa altro che caricare un file CSS, la libreria mootools e lo script slideshow. Sempre all’interno dell’elemento <head> va inserito il codice sottostante. Si può posizionare questa porzione di codice anche appena prima del div in cui si desidera far apparire lo slideshow, tipicamente nel file index.php del template wordpress.

<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
var data = {
<?php $temp_query3 = $wp_query; ?>
<?php query_posts('showposts=5&cat=4'); ?>
<?php if (have_posts()) : ?>
<?php $conta=0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php
// Rileva ID del post
$iPostID = $post->ID;
// Rileva immagini per questo post
$arrImages =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $iPostID );
// Se esistono immagini allegate al post
if($arrImages) {
// Rileva array con le chiavi che rappresentano le immagini allegate
$arrKeys = array_keys($arrImages);
// Rileva la prima immagine allegata
$iNum = $arrKeys[0];
// Rileva url thumbnail
// $sThumbUrl = wp_get_attachment_thumb_url($iNum);
// Rileva url full-size
$sUrl = wp_get_attachment_image_src($iNum,'full');
// Rileva excerpt - riassunto del post
$descrizione = get_the_excerpt();
// Rimpiazza caratteri particolari
$descrizione = str_replace("'", "\'", $descrizione);
$descrizione = str_replace("\n", " ", $descrizione);
?>
<?php if ($conta>0) { ?>, <?php } ?><?php } ?><?php $conta++; ?>
'<?php echo($sUrl[0]) ?>': { caption: '<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link a <?php the_title(); ?>"><?php the_title(); ?></a><br/><?php echo($descrizione) ?></p>' }

<?php } ?>
<?php endwhile; ?>
<?php endif; ?>
<?php //Reset Query
wp_reset_query(); ?>
};
var myShow = new Slideshow('show', data, {captions: true, controller: true, delay: 5000, duration: 2000, height: 300, thumbnails: false, width: 780});
});
//]]>
</script>

Questa seconda parte serve per far apparire lo slideshow nel div con ID=”show”. All’inizio vengono indicati il numero di post e la categoria relativa che si desidera far apparire, nella funzione query_posts(). Il codice è ben commentato e non fa altro che rilevare la prima immagine di ogni post per pubblicarla assieme al titolo e al riassunto del post.
La parte HTML necessaria all’interno del <body> è questa:

<div id="show">
<img src="<?php bloginfo('template_url'); ?>/images/default.jpg" alt="welcome" />
</div>

Dove come default.jpg verrà caricata una immagine standard, utile nel caso non ci siano articoli da visualizzare oppure l’utente abbia disabilitato javascript.
Per aggiungere l’effetto di zoom in movimento è possibile utilizzare l’estensione kenburns dello script Slideshow. Caricando nell’ <head> un altro javascrip:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slideshow.kenburns.js"></script>

e modificando le ultime righe dello script sopra in questo modo:

var myShow = new Slideshow.KenBurns('show', data, {captions: true, controller: true, delay: 5000, duration: 2000, height: 300, thumbnails: false, width: 670, zoom: 50, pan: [25, 75]});

Le proprietà di zoom e pan sono da regolare per ottenere effetti diversi.

Il risultato HTML è il seguente:

<script type="text/javascript" src="http://lab.diplod.it/demo/wp-content/themes/diplo-magazine/js/slideshow.kenburns.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
//avvio slideshow
var data = {
'http://lab.diplod.it/demo/wp-content/uploads/2009/08/3691087551_74e61f4da0_b.jpg': { caption: '<p><a href="http://lab.diplod.it/demo/2009/08/29/campo-di-grano/" rel="bookmark" title="Permanent Link a Campo di Grano">Campo di Grano<\/a><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<\/p>' },
'http://lab.diplod.it/demo/wp-content/uploads/2009/08/3691896442_cafb3a1487_b.jpg': { caption: '<p><a href="http://lab.diplod.it/demo/2009/08/29/le-braccia-del-costruttore/" rel="bookmark" title="Permanent Link a Le braccia del Costruttore">Le braccia del Costruttore<\/a><br/>Le braccia del costruttore ha un riassunto molto breve..<\/p>' },
'http://lab.diplod.it/demo/wp-content/uploads/2009/08/3166795508_d5cd33c968_b.jpg': { caption: '<p><a href="http://lab.diplod.it/demo/2009/08/29/secondo-articolo-in-rilievo/" rel="bookmark" title="Permanent Link a Secondo Articolo in Rilievo">Secondo Articolo in Rilievo<\/a><br/>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem<\/p>' },
'http://lab.diplod.it/demo/wp-content/uploads/2009/08/3691094985_4327680ea2_b.jpg': { caption: '<p><a href="http://lab.diplod.it/demo/2009/08/29/primo-articolo-in-rilievo/" rel="bookmark" title="Permanent Link a Primo articolo in Rilievo">Primo articolo in Rilievo<\/a><br/> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat [...]<\/p>' },
};
var myShow = new Slideshow.KenBurns('show', data, {captions: true, controller: true, delay: 5000, duration: 2000, height: 300, thumbnails: false, width: 670, zoom: 50, pan: [25, 75]});
});
//]]>
</script>

Per quanto riguarda il CSS, quello proposto assieme allo script è sicuramente un buon punto di partenza, da sistemare se si vogliono cambiare le dimensioni del div che presenta lo slideshow.

Buon design a tutti..

PS: Nel caso in cui qualcuno si stesse domandando da dove provenga il design della demo sopra.. beh: seguite questo blog, prossimamente arriverà un tema wordpress in stile magazine, completamente personalizzabile dal pannello di amministrazione e soprattutto italianissimo. ;)

Quando si mette in pratica un’azione di redesign, si pensa anche alla riprogettazione strutturale delle categorie. Ultimamente sentivo sempre più forte l’esigenza di separare gli articoli “tecnici” (passatemi il termine) da quelli prettamente personali. I contenuti di un post sulle vacanze in irlanda sono decisamente diversi da quelli di un articolo sul knowledge management. E’ nell’utilità dei lettori far percepire questi articoli come diversi: una esigenza che deve necessariamente prendere forma nel design.

A parte la separazione dei feed (a cui sto lavorando), il primo passo è quello di differenziare visivamente questi contenuti. Ho quindi pensato di realizzare il calendarietto che solitamente sta a fianco del titolo in due versioni differenti: una classica e una in stile post-it.

Già con un primo colpo d’occhio sarà quindi intuibile il taglio dell’articolo (tecnico piuttosto che personale). I box grigi sotto il calendarietto servono a contenere i link all’articolo precedente e successivo.

Questo è lo screenshot di come appare una pagina di ricerca.

Per quanto riguarda il codice css e xhtml, lo riporto di seguito con commenti a lato.

Partiamo dall’xhtml:

<div class="data personale">
<span class="d">10</span> <span class="m">DIC</span>
<!--div che contiene i link agli articoli prec. e succ.-->
<div class="scroller">
<!--sui link l'attributo onclick richiama il javascript jquery-->
<a class="scroll-link scroll-up" href="#header" title="post precedente" onclick="$diplod('#header').ScrollTo(800); return false;">pre</a>
<a class="scroll-link scroll-down" href="#footer-wrap" title="post successivo" onclick="$diplod('#footer-wrap').ScrollTo(800); return false;">suc</a>
</div><!--fine div scroller-->
</div><!--fine div data-->


Ed ecco il CSS:

div.data {
float: left; /* la data fluttua a sinistra per lasciare spazio al titolo sulla destra */
clear: both;
width: 60px; /* stessa larghezza dell'immagine di sfondo*/
height: 70px;
margin: 0 5px 0 0;
text-align: center;
color: #666;
padding-bottom: 0;
background: transparent url(images/date.gif) no-repeat;
line-height: 1.3em;
}
div.personale { /*classe per riconoscere gli articoli di determinate categorie */
background: transparent url(images/date-personale.gif) no-repeat;
}
div.data span.d { /*stili per il giorno */
display: block;
height: 16px;
font-size: 150%;
font-weight: bold;
color: #666;
padding-top: 20px;
background: transparent;
}
div.data span.m { /*stili per il mese */
text-transform: uppercase;
font-size: 90%;
padding-top: 5px;
height: 15px;
}


Veniamo ora all’implementazione in wordpress, che forse è la cosa più interessante.

<?php $postcount=0; ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php $postcount=$postcount+1; ?>
<div id="scroll-<?php echo $postcount; ?>" class="data<?php if(in_category(260) || in_category(14) || in_category(1)) { echo(' personale'); } ?>"><span class="d"><?php the_time('j') ?></span> <span class="m"><?php the_time('M') ?></span>
<div class="scroller">
<?php if ($postcount!=1) { ?>
<a class="scroll-link scroll-up" href="#scroll-<?php echo ($postcount-1); ?>" title="post precedente" onclick="$diplod('#scroll-<?php echo ($postcount-1); ?>').ScrollTo(800); return false;">pre</a>
<?php } ?>
<?php if ($postcount!=5) { ?>
<a class="scroll-link scroll-down" href="#scroll-<?php echo ($postcount+1); ?>" title="post successivo" onclick="$diplod('#scroll-<?php echo ($postcount+1); ?>').ScrollTo(800); return false;">suc</a>
<?php } ?>
</div></div>
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link a <?php the_title(); ?>"><?php the_title(); ?></a></h1>
[..]


Cosa fa il codice?

Con il tag di wordpress in_category() ci si chiede se il post appartiene a determinate categorie (in questo caso quelle con ID 1, 260 o 14), se è così si aggiunge la classe “personale” al div della data. A questo div viene assegnato poi un id univoco del tipo “scroll-2″, dove 2 è il valore del contatore $postcount, inizializzato a zero fuori dal loop e incrementato di una unità dentro al ciclo.

Gli if sui link servono per evitare di pubblicare il link “precedente” sul primo articolo o il link “successivo” sull’ultimo articolo. In questo caso ho scelto di pubblicare solo 5 articoli per pagina, quindi il controllo viene fatto su $postcount diverso da 1 e da 5.
Infine viene pubblicato il titolo del post con relativo link.

Veniamo ora al form dei commenti: volevo qualcosa di originale ma non troppo pacchiano. Qualcosa di insolito ma al tempo stesso funzionale. A parte le icone (classiche famfam), che ormai reputo insostituibili, ho pensato di mettere delle delicate sfumature sui campi di input. Che ne pensate? Sono aperte le critiche..

Questa è la demo con il risultato. (ma potete vederlo anche sotto)

Gli utenti non IE (Internet Explorer) potranno notare come selezionando il campo questo cambia colore sfumando verso il grigio.
Utilizzando una tecnica ormai nota detta CSS Fast Rollover, ho replicato l’effetto sui campi input del form. L’idea è semplicissima: mettere come background una immagine che contiene i diversi sfondi e cambiare la posizione dello sfondo con le pseudo classi css (:hover, :active). Nell’articolo di Wellstyled viene descritta la tecnica per i link, ma si può impiegare anche per la pseudo classe :focus degli elementi input del form.
Il vantaggio è che non viene caricata nessun’altra immagine quando si seleziona il campo di input, ma semplicemente viene traslata quella caricata in precedenza, in questo modo l’utente non avverte un tempo di attesa e l’efetto risultante è molto più fluido. Questo vale per i campi di input che hanno altezza fissa, mentre per la textarea è necessario caricare una seconda immagine e si avverte un leggero tempo di attesa.

Questa è l’immagine che ho utilizzato per il campo di input.

Si tratta di una immagine “doppia”. Sul :focus del campo input ho semplicemente cambiato le coordinate di posizionamento dello sfondo, traslando l’immagine di 30px. Ecco il codice css:

form.comment-form input {
padding: 5px;
margin: 0;
border: none;
background: #fff url(images/input-bg.gif) no-repeat top right; /*immagine allineata in alto */
}
form.comment-form input:focus, form.comment-form input:active {
background: #f1f9ff url(images/input-bg.gif) no-repeat bottom right; /*immagine allineata in basso*/
color: #333;
}


Unico neo: su Safari l’evidenziazione azzurrina dei campi attivi fa svanire l’effetto sfumatura, ma rende bene ugualmente.

PS: se sei arrivato fin qui a leggere, probabilmente non sei in vacanza. Un saluto dalla Sicilia (o da Pompei, Caserta, Orvieto.. non so bene dove si fermerà la macchina).. ;)

Riporto qualce appunto per installare senza problemi la piattaforma Apache+MySQL+php, così da avere in locale un server dove testare e sviluppare le proprie applicazioni (come wordpress o joomla).

Installazione Apache Server 2.2.6

Installare Apache è stato piuttosto semplice. Ecco i passi da seguire:

1. Scaricare l’installer (MSI) per Windows dal sito di Apache HTTP Server
2. Disattivare il controllo UAC: Su Vista: start -> pannello di controllo -> Account Utente e protezione per la famiglia -> Account Utente -> Attiva o disattiva controllo account utente [tra parentesi questa cosa vi libererà delle fastidiosissime finestrelle "consenti" che appaiono dopo ogni clic]Su Windows 7:  start -> pannello di controllo -> Account Utente -> Account Utente -> Modifica le impostazioni di controllo dell’account utente -> Impostare su Nessuna Notifica
3. Lanciare l’installer appena scaricato e seguire le istruzioni, come Network Domain e Server Name possiamo mettere “localhost” (se l’installazione avviene in locale) e come porta scegliere 80.
4. Ora è possibile configurare Apache Server, aprendo il file “C:\Program Files\Apache Software Foundation\Apache2.2\conf\httpd.conf” con un editor di testo.La cosa principale da fare è indicare la cartella dove vengono salvate le nostre pagine web per poi renderle accessibili via browser grazie al server. La cartella di default è /htdocs/, si trova all’interno di quella dove abbiamo installato Apache.Se vogliamo cambiarla è sufficiente trovare il paramentro “DocumentRoot” e modificarlo come segue:#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "C:/www"

   C:/www/ in questo caso è la cartella dove andremo a posizionarele pagine web e tutti i file annessi.

5. Lo stesso percorso va riportato sotto, in questo modo:#
# This should be changed to whatever you set DocumentRoot to.
#
<Directory "C:/www">
6. Salvare e riavviare il server.
7. Se dovessero presentari problemi in fase di avvio del server, per prima cosa controllare l’application log di windows; se dovessero mancare delle dll può tornare utile questa pagina: http://windows.php.net/download/
   Un’altra operazione da fare è settare anche questi due ulteriori parametri sul file di configurazione come da testo sotto:
   # ServerName gives the name and port that the server uses to identify itself.
# This can often be determined automatically, but we recommend you specify
# it explicitly to prevent problems during startup.
#
# If your host doesn't have a registered DNS name, enter its IP address here.
#
ServerName localhost:80
# Listen: Allows you to bind Apache to specific IP addresses and/or
# ports, instead of the default. See also the <VirtualHost>
# directive.
#
# Change this to Listen on specific IP addresses as shown below to
# prevent Apache from glomming onto all bound IP addresses.
#
Listen 127.0.0.1:80

Il problema all’avvio dell’icona Apache Monitor nella systray con Windows Vista – risoluzione

Una volta installato il server è sufficiente digitare l’indirizzo “http://localhost/” nella barra degli indirizzi del browser per capire se tutto funziona. Su Windows XP però eravamo abituati all’iconcina con la piuma dalla quale era possibile avviare o stoppare il server apache.

Con Vista questa icona non c’è più, inoltre un fastidioso problema all’avvio ci accoglie perchè Apache Monitor non riesce a caricarsi correttamente. Per risolvere l’inconveniente basta andare nella cartella di installazione di Apache Server, entrare nella cartella /bin/ e cliccare col tasto destro sul file ApacheMonitor.exe, da qui clic su Proprietà. In alto selezionare la tab “Compatibilità” e spuntare l’opzione “Esegui il programma in modalità compatibile per Windows XP (Service Pack 2)”. Vedi figure sottostanti.

Installazione MySQL 5.0

MySQL è un server per database relazionali open source, ormai affermato e robusto, soprattutto in ambito web. Per l’installazione è necessario:

1. Scaricare dal sito ufficiale l’installer per windows.
2. Lanciare l’installer e seguire le istruzioni a video, scegliendo l’installazione Typical.
3. Alla fine dell’installazione scegliere di configurare il server.
4. Scegliamo l’opzione “Detailed Configuration“



5. Impostare la tipologia come “Developer Machine” (il server sarà infatti utilizzato principalmente per i nostri test in locale)



6. Al passaggio successivo selezionare “Multifunctional Database“



7. Lasciare invariato al punto successivo e proseguire, a meno che non si voglia specificare una directory particolare per InnoDB
8. Come numero approssimativo di connessioni al server possiamo specificare 20. Più che sufficienti se lo utilizziamo come server di test.



9. Al passaggio successivo selezionare entrambe le opzioni, è poi possibile specificare la porta di connessione al database: generalmente la 3306



10. Come impostazioni dei caratteri scegliere “Best support for Multilingualism“



11. Se vogliamo cheMySQL si avvii in automatico all’accensione di windows selezionare “Install as Windows Service” e “Launch the MySQL server automatically“.



12. Indicare la password per l’utente amministratore (root) ed eventualmente creare un utente anonimo (anche se sarebbe meglio evitare, è poco sicuro)



13. Per l’amministrazione del Database installare MySQL Workbench. Si tratta di utili strumenti per la gestione “visiva” del server, degli utenti, dei permessi e dei database. Comprende inoltre il Query Browser per lanciare le query SQL.

Installazione php 5 sul server Apache

Con l’installazione di php e delle estensioni per la connessione al database avremo completato l’opera. In questo caso è meglio eseguire una installazione manuale. Come riportato nella Guida php su Windows di HTML.it:

Questa installazione, consigliata dal manuale ufficiale Php, ha il vantaggio di non richiedere lo spostamento di file nelle directory di sistema (Windows, System32 e altre): infatti modificando la sola variabile di sistema PATH e mantenenedo i file in c:\php, tutto rimane più ordinato e l’aggiornamento diventa molto più semplice.

Ecco i passi da seguire:

1. Scaricare il pacchetto zip dal sito ufficiale
2. Estrarre i files nella cartella C:/php/ (il nome breve è più comodo)
3. Aprire Pannello di Controllo -> Sistema e Sicurezza (Sistema e Manutenzione su Vista) -> Sistema. Nella barra di sinistra cliccare su “Proprietà di Sistema avanzate” (Vista) o su “Impostazioni avanzate di sistema” (Windows 7), poi sul tasto “Variabili d’ambiente..“.Dalla tendina sotto (variabili di sistema) selezionare “Path” e cliccare su “Modifica”. In fondo al testo già presente aggiungere la stringa “;C:\php” (con il punto e virgola, senza gli apici).

   In questo modo abbiamo indicato al sistema dove si trova l’interprete php.

4. Riavviare windows
5. Ora è necessario integrare l’interprete php nel server Apache. Per farlo bisogna aprire il file di configurazione di Apache: “C:\Program Files\Apache Software Foundation\Apache2.2\conf\httpd.conf”C’è una lunga lista di “LoadModule” (molti di questi sono commentati) alla fine della quale bisogna aggiungere queste righe:# Start Php integrationLoadModule php5_module "C:/php/php5apache2_2.dll"

   AddType application/x-httpd-php .php

   PhpIniDir "C:/php"

   # End Php integration

6. Infine modifichiamo il parametro DirectoryIndex come segue:#
# DirectoryIndex: sets the file that Apache will serve if a directory
# is requested.
#
<IfModule dir_module>
DirectoryIndex index.html index.php
</IfModule>

7. Ora andiamo nella directory di php e rinominiamo il file “php.ini-development” in “php.ini“.Si tratta del file di configurazione dell’interprete php. Apriamolo con un editor di testo.
8. Cambiamo il parametro “extension_dir” come segue:; Directory in which the loadable extensions (modules) reside. extension_dir = "C:/php/ext"
9. Settare il parametro “display_errors” su On per poter vedere gli errori generati dagli script che svilupperemo
10. Infine decommentare (togliendo il punto e virgola davanti) il parametro “session.save_path” e moficarlo come segue:session.save_path = "C:/php/sessionfiles"


    sessionfiles è una cartella da creare, dove verranno salvati i file relativi alle sessioni di php.

11. Ora dovremo attivare i connettori php-MySQL (maggiori info nella pagina dei download dal sito ufficiale di MySQL). Si tratta di file dll che permettono la connessione da parte di php al database: mysqli e mysql
12. Assicurarsi che siano presenti i file php_mysql.dll e php_mysqli.dll nella cartella /ext/ di php (dove ci sono le estensioni)
13. Ora nel file php.ini aperto in precedenza decommentare (togliendo il ; ad inizio riga) le estensioni di mysql come segue:extension=php_mysql.dll
extension=php_mysqli.dll

14. Altra estensione utile è quella per la gestione delle immagini, che conviene decommentare:extension=php_gd2.dll
15. A questo punto salvare tutto, riavviare il server Apache e tutto dovrebbe funzionare.

Per essere sicuri possiamo creare un file “index.php” con all’interno il semplice codice

<?php phpinfo() ; ?>


Aprire il browser e digitare l’indirizzo: “http://localhost/index.php” Se tutto è stato eseguito correttamente dovremmo vedere una pagina che riporta diverse informazioni sulla versione di php installata.

Si noti che questo semplice test non ci dà informazioni sulla corretta installazione delle estensioni per la connessione al database, che dovremo testare in un secondo momento, magari provando l’installazione in locale di un cms come wordpress.

Anche su Windows Vista e Windows 7 gira, buon lavoro. :)