[Aggiornato il 4 settembre 2013: il codice del loop personalizzato permette ora di gestire al meglio l’eventuale assenza di post in evidenza e dello slideshow]
Come abbiamo accennato nel post dedicato a Foundation 4 e WordPress, il framework sviluppato da Zurb non è soltanto una base di costruzione per il layout responsive di un sito web, quanto piuttosto una piattaforma di progettazione dell’intero front end: componenti CSS per la navigazione, la tipografia, le tabelle, le liste, i form, i pulsanti e plugin Javascript per sistemi di navigazione avanzati (e ovviamente reattivi ai dispositivi mobili), gallerie fotografiche, slider, finestre modali, tabs, tootips arricchiscono il pacchetto sulle fondamenta del quale sviluppare e personalizzare tutta l’interfaccia del sito web che progettiamo.
Uno dei Javascript più interessanti rilasciati con Foundation è Orbit, uno slider reattivo per immagini e testo che può essere utilizzato per mettere in evidenza post o articoli, se non proprio per pubblicare uno slideshow fotografico.
Ora, le animazioni pongono sempre problemi di accessibilità, sia in senso stretto che ampio, perché la visibilità del contenuto viene parzialmente sottratta alla pagina e alla disponibilità del visitatore. D’altra parte, se ben progettato e dotato di tutti i requisiti che ne permettano un controllo da parte del visitatore (anche sui dispositivi mobili), uno slider è un formato alternativo di presentazione degli articoli che può coinvolgere il navigatore in un’esplorazione più emotiva dei contenuti del blog, specie quando le immagini che accompagnano il testo hanno un forte profumo informativo (information scent, lo chiamano gli anglosassoni).
Per un blog, per esempio, può avere un senso progettuale mantenere in home page alcuni post in evidenza, al di fuori dell’ordine cronologico inverso predefinito, e inserirli al di sopra di tutti gli altri articoli in uno slider dove le immagini, magari di ampie dimensioni, aumentano il contenuto comunicativo del post.
WordPress già dispone nella gestione dei singoli articoli di una funzione ‘sticky’ per la visibilità in home page (in italiano, appunto, ‘in evidenza’), che colloca gli articoli così contrassegnati in testa a tutti gli altri processati nel loop ordinario. Grazie a Foundation e a una personalizzazione del loop, mostreremo ora come raggruppare i post in evidenza in Orbit, così da creare uno slider di articoli dal forte impatto fotografico, facendo comunque attenzione a non diminuire troppo l’accessibilità e l’usabilità dei contenuti promossi in home page.
1. Preparare il tema di WordPress: immagine del post in evidenza
Per associare le immagini ai post e per visualizzarle nello slider utilizzeremo un’altra funzione che WordPress prevede per gli articoli: l’immagine in evidenza (sempre di evidenza parliamo, no?). Con la featured image (per dirla nell’inglese di WordPress) l’autore associa all’articolo un’immagine che, senza essere inserita nel corpo dell’articolo, può essere sfruttata nei template tag del tema, che ne controlleranno quindi la visualizzazione nella pagina web corrispondente. Dato che si tratta di una funzione legata al tema, la sua disponibilità passa per un’esplicita dichiarazione nel file functions.php del tema stesso:
add_theme_support( 'post-thumbnails' );
La riga sopra estende il tema aggiungendo il supporto alle cosiddette post thumbnails (le miniature degli articoli), il nome che WordPress attribuiva alle immagini in evidenza fino alla versione 2.9 e che resiste nelle pieghe del codice dell’applicazione. Il box ‘Immagine in evidenza’ nella colonna a destra dell’interfaccia di editing di un post, di solito sotto tutti gli altri box previsti di default (‘Pubblica’, ‘Categorie’, ‘Tag’) e che serve a caricare una fotografia, un disegno, un’icona da associare all’articolo per rappresentarlo (foto)graficamente, quel box appare proprio per effetto di quella riga nel file functions.php del tema.
2. Personalizzare l’home page di WordPress: home.php
Prima ancora di affrontare le modifiche al loop di WordPress, soffermiamoci a creare un nuovo template file del nostro tema basato su Foundation: home.php. Nella logica gerarchica dei file del tema, il documento con questo nome renderà ai navigatori la visualizzazione della home page del nostro blog, prevalendo su index.php, che insieme a style.css è il file che è condizione necessaria e sufficiente dell’esistenza stessa del tema e che si occuperebbe di tutte le visualizzazioni del blog quando mancassero template file più specifici come appunto home.php per la home, oppure single.php per le pagine dei singoli post, o ancora archive.php per le pagine di archivio (di categoria e cronologiche).
Lasciato intatto in index.php il loop ordinario, ci apprestiamo allora a modificarlo in home.php, nel file che cambierà l’aspetto della pagina principale del blog:
<?php /** * Template file: home.php. * * Il template per visualizzare i contenuti promossi in home page. * */ get_header(); ?> <div id="content" class="row"> <div id="main" class="large-12 columns" role="main"> … </div><!-- Fine #main --> </div><!-- Fine #content --> <?php get_footer(); ?>
3. Modificare il loop di WordPress
Per modificare il loop di WordPress una strada efficace e immediata è l’uso della funzione query_posts(), ma nel nostro caso abbiamo bisogno non di una semplice alterazione del loop, come può essere magari l’esclusione dei post di una particolare categoria dalla visualizzazione in home page. Piuttosto, abbiamo bisogno di dividere il loop, e di conseguenza la presentazione dei contenuti promossi nella nostra home page, in due parti: la prima destinata a promuovere gli articoli in evidenza nello slider; la seconda dedicata ai restanti articoli, ordinati nell’abituale successione cronologica.
Per creare loop molteplici, ci affidiamo quindi alla classe WP_Query, che, come dice Thord Daniel Hedengren, è il cuore pulsante del loop, per cui ogni volta che utilizziamo il normale loop in un tema, utilizziamo di fatto la classe WP_Query. Personalizzandola, possiamo ottenere i loop distinti di cui abbiamo bisogno per la personalizzazione dell’home page del nostro blog.
La prima nuova query ci serve per selezionare gli articoli contrassegnati come ‘in evidenza’:
<?php
$sticky = get_option( 'sticky_posts' );
$args = array(
'post__in' => $sticky,
'posts_per_page' => 3,
'ignore_sticky_posts' => 1
);
$sticky_query = new WP_Query( $args );
if ( $sticky[0] )
{
?>
...
<?php
while ($sticky_query->have_posts()) : $sticky_query->the_post();
?>
...
<?php endwhile; ?>
...
<?php } ?>Cosa succede con questa nuova WP_Query? Innanzitutto, con $sticky = get_option( ‘sticky_posts’ ) controlliamo tutti i post in evidenza, poi dichiariamo le variabili del caso per la query del loop: ‘post__in’ => $sticky recupera gli articoli che l’autore ha impostato in evidenza; ‘posts_per_page’ => 3 limita a tre il numero di articoli visualizzabili; ‘ignore_sticky_posts’ => 1 fa in modo che la pagina continui a funzionare se la query non dovesse trovare alcun articolo con i parametri appena stabiliti. Quindi, diamo un nome alla nuova WP_Query: $sticky_query.
Prima però di procedere con il loop, ne condizioniamo l’esecuzione all’effettiva presenza di post in evidenza: if ( $sticky[0] ). Solo dopo, eseguiamo il loop, specificando che si tratta della nostra query personalizzata:
while ($sticky_query->have_posts()) : $sticky_query->the_post();
Il loop che seguirà recupererà per l’home page dieci restanti articoli tra quelli non posti in evidenza dall’autore:
<?php $args=array( 'posts_per_page' => 10, 'post__not_in' => $sticky $blog_query = new WP_Query($args); if ($blog_query->have_posts()) : while ($blog_query->have_posts()) : $blog_query->the_post(); ?> ... <?php endwhile; endif; ?>
Se per la prima query personalizzata abbiamo utilizzato il parametro post__in, per la seconda il parametro è il suo contrario: post__not_in, che evita la duplicazione di articoli già presenti in $sticky_query. Diamo il nome $blog_query e avviamo la dichiarazione per il loop.
A questo punto non ci resta che creare la struttura HTML per Orbit (e degli altri articoli della nostra home page).
4. Orbit in WordPress: la struttura HTML dello slider
La marcatura ipertestuale di Orbit è la più semplice che si possa immaginare: una lista non ordinata contenente gli item corrispondenti alle slide (nel caso nostro, non più di tre, se ricordiamo bene) e un elementodiv con classe orbit-caption per la didascalia della foto. Con una particolarità: un data attribute per l’elemento ul.
<?php
...
{
?>
<ul data-orbit>
<?php
...
>
<li>
<article>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(array(9999,9999)); ?>
<div class="orbit-caption"><h1 class="entry-title"><?php the_title(); ?></h1></div>
</a>
</article>
</li>
<?php endwhile; ?>
</ul>
<?php } ?>Introdotti con HTML5, i data attributes sono attributi personalizzabili dagli autori nel rispetto della forma ‘data-*’. Una volta scelto un attributo con un nome, è possibile usarlo per incorporare dati nella marcatura o manipolarla dinamicamente con Javascript senza che la struttura HTML e la sua validità originarie siano intaccate. L’attributo data-orbit fa esattamente questo: attiva il plugin Javascript di Foundation, modificando la struttura HTML intorno e dentro la lista e aggiungendo tutti i componenti necessari al funzionamento dello slider, compresi quelli che ne aumentano l’accessibilità (frecce per andare avanti e indietro, pulsante di play and pause, evidenziazione della slide attiva, indicatori del numero totale di slide).
Un’altra lista per i restanti dieci articoli della query $blog_query, con la classe della block grid di Foundation:
<ul class="large-block-grid-1">
<?php
...
?>
<li>
<time class="entry-date" datetime="<?php the_time('Y-m-d') ?>" pubdate="<?phpthe_time('Y-m-d') ?>"><?php the_date(); ?></time>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<h1 class="entry-title"><?php the_title(); ?></h1></a>
<div class="entry-description">
<?php the_excerpt(); ?>
<a class="button more" href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permalink to','iam'); ?> <?php the_title_attribute(); ?>"><?php _e( 'Read more <span class="meta-nav">→</span>', 'requiredfoundation' ); ?></a>
</div>
</article>
<hr/>
</li>
<?php endwhile; endif; ?>
</ul>E la nostra home page personalizzata di WordPress con Orbit, lo slider di Foundation, è pronta e funzionante.
