A partire dalla versione 2.0, abbiamo introdotto in Jetpack il modulo Scorrimento Infinito. Diversamente da altri moduli precedentemente inclusi in Jetpack, Scorrimento Infinito funziona soltanto con i temi che lo supportano. Dato che ogni tema ha delle peculiarità, il modulo Scorrimento Infinito necessita di informazioni di supporto al tema abilitato per funzionare correttamente.
Aggiungere il Supporto al Tema
Attivare lo Scorrimento Infinito è molto simile ad aggiungere il supporto per le thumbnails o gli stili dell’editor, in quanto usiamo il comando add_theme_support(). Fornendo alcune informazioni chiave quando richiamiamo add_theme_support(), lo Scorrimento Infinito si integrerà perfettamente con il tuo tema.
Se hai un tema ben realizzato, come qualsiasi tema predefinito di WordPress, aggiungere lo Scorrimento Infinito è molto semplice. Nell’esempio viene riportato come fare nel tema Twenty Twelve:
add_theme_support( 'infinite-scroll', array( 'container' => 'content', 'footer' => 'page', ) );
Questo ti permetterà di sperimentare lo scorrimento infinito perfettamente funzionante.
container
Il parametro container è basilare per aggiungere lo Scorrimento Infinito al tuo tema, in quanto definisce l’identificativo dell’elemento HTML a cui Scorrimento Infinito andrà ad aggiungere le sue disposizioni. Il parametro predefinito è content, ma puoi impostare qualsiasi ID di foglio di stile CSS valido, elencato tra i temi che supportano il caricamento di ulteriori articoli. Solitamente, questo parametro è la cartella superiore a quella degli articoli nel tuo tema.
footer
Un problema relativo allo Scorrimento Infinito è che non si può accedere al piè di pagina se non quando ci si avvicina alla fine del caricamento di tutti i nuovi post. Il nostro Scorrimento Infinito è fornito di un piè di pagina fisso che scivola sulla pagina mentre la fai scorrere. Il parametro footer aiuta a fondere questo piè di pagina con il design del tuo tema. Fornendo un ulteriore ID, il piè di pagina di Scorrimento Infinito farà corrispondere la sua larghezza a quella del tuo design, in modo da stare perfettamente in linea. Guardalo in azione qui: http://twentytwelvedemo.wordpress.com/blog/. Se invece imposti il parametro come false non verrà aggiunto nessun nuovo piè di pagina.
Ci sono anche altri parametri che possono essere impostati a proprio piacimento—Qui è riportato un esempio che mostra tutti i parametri di default per ogni configurazione:
add_theme_support( 'infinite-scroll', array( 'type' => 'scroll', 'footer_widgets' => false, 'container' => 'content', 'wrapper' => true, 'render' => false, 'posts_per_page' => false ) );
Le Opzioni Nel Dettaglio:
type
type accetta due differenti valori: scroll (scorri) o click (clicca). Questi parametri stabiliscono il comportamento predefinito dello Scorrimento Infinito. scroll caricherà automaticamente gli articoli non appena il visitatore si avvicina al termine della lista corrente di articoli, mentre click visualizzerà il pulsante Carica altri articoli, permettendo all’utente di stabilire quando caricare ulteriori articoli.
scroll è il valore predefinito, ma se un tema ha dei widget per il piè di pagina, può essere sovrascritto dal valore click in modo da renderli accessibili.
footer_widgets
La variabile footer_widgets accetta svariati valori e stabilisce se un tema visualizza dei widget per il piè di pagina. Se sono presenti dei widget per il piè di pagina, il metodo di scorrimento sarà impostato su click in modo che i widget rimangano accessibili.
O più semplicemente, si può decidere di impostare una variabile booleana true o false per il piè di pagina, per decidere se visualizzare gli widget, sempre oppure mai, rispettivamente.
Inoltre, footer_widgets accetterà come parametri sia una stringa identificativa di una barra laterale ('sidebar-1', per esempio), sia un insieme di identificativi di barra laterale in array. Il codice di Scorrimento Infinito controllerà la/e barre laterali per la presenza di widget, ed accorderà la variabile footer_widgets di conseguenza.
Se un tema colloca la regione per gli widget al di sotto della lista degli articoli, raccomandiamo vivamente di fornire gli ID delle barre laterali ogni qual volta possibile. Fare ciò garantisce la migliore esperienza per chi utilizza i temi, in quanto consente di impostare lo scorrimento su scroll oppure click in modo dinamico. Detto questo, se un tema riporta come opzione click fin dal principio, la variabile footer_widgets può essere tranquillamente omessa.
Se tutte queste opzioni non sono abbastanza, per una configurazione avanzata è disponibile il filtro infinite_scroll_has_footer_widgets. Il filtro deve restituire un valore booleano, può essere usato per rilevare la presenza di menù di navigazione, oppure se il visitatore stà utilizzando un dispositivo mobile.
wrapper
La variabile wrapper funziona in maniera molto simile a quella footer_widgets, incluso il fatto che è possibile assegnarle diversi valori. Questa variabile determina se ogni set di articoli aggiuntivi verrà posizionato in un elemento <div> quando viene aggiunto alla regione specificata nella variabile precedente, oppure lo esclude.
Specificando un valore booleano (true o false) gli articoli aggiuntivi vengono posizionati all’interno di un elemento <div> di classe infinite-wrap, oppure no.
Per far contenere gli articoli da un elemento <div> di classe differente, occorre impostare la variabile wrapper come una stringa contenente la classe desiderata.
E’ buona norma inserire gli articoli aggiunti in un elemento <div>, a meno che facendolo non vengano riportati errori nel codice. Per esempio, se un tema utilizza un elemento liste (<ol>, <ul>) per visualizzare gli articoli, wrapper dovrebbe essere disabilitato in modo che elementi <div> non compaiano dove non devono.
render
Per restituire gli articoli supplementari, lo Scorrimento Infinito si avvale di un loop standard di WordPress, ed utilizza delle parti del modello espresse con la forma content-{post format}.php. Se un tema include almeno content.php allora la variabile render può essere omessa. Di seguito è riportata la funzione di render utilizzata di default da Scorrimento Infinito:
while( have_posts() ) {
the_post();
get_template_part( 'content', get_post_format() );
}
Se hai bisogno di ulteriori personalizzazioni, oppure se un tema non utilizza le parti del modello content, deve essere specificato un nome di funzione per la variabile render e questa funzione verrà utilizzata per generare il codice per lo Scorrimento Infinito. La funzione deve includere la porzione while() del loop di WordPress e può utilizzare qualsiasi opzione a disposizione del tema quando fa il rendering degli articoli.
posts_per_page
Di default, la variabile type controlla quanti articoli vengono caricati ogni volta che Scorrimento Infinito agisce. Impostando su scroll vengono caricati sette (7) articoli ogni volta che Scorrimento Infinito si attiva. Impostando su click si può trovare questo valore alla voce “Le pagine del blog visualizzano al massimo” andando alla voce Impostazioni → Lettura.
Se, comunque, le impostazioni di un tema richiedono un certo numero di articoli, la variabile posts_per_page sovrainciderà le impostazioni predefinite discusse nel precedente paragrafo. Questo controllo va a beneficio, ad esempio, di un tema con la disposizione su tre colonne, dove un numero maggiore o minore di tre articoli causerebbe una disposizione irregolare al momento della visualizzazione.
Esempi
Esistono un’infinità di temi e di programmatori di temi, noi siamo partiti con lo scopo di fornire abbastanza controllo sul comportamento dello Scorrimento Infinito, dato che deve necessariamente supportare molti temi. Detto questo, la nostra esperienza con WordPress.com ha dimostrato che, in genere, ogni tema necessita di una modesta quantità di modifiche nella configurazione delle opzioni. Per dimostrarlo, illustriamo la configurazione di Scorrimento Infinito nel tema predefinito di WordPress.
Twenty Twelve
/**
* Aggiungere il supporto al tema per infinite scroll
*
* @utilizza add_theme_support
* @azione after_setup_theme
* @ritorno null
*/
function twenty_twelve_infinite_scroll_init() {
add_theme_support( 'infinite-scroll', array(
'container' => 'content'
) );
}
add_action( 'after_setup_theme', 'twenty_twelve_infinite_scroll_init' );
Per chi non ha molta familiarità con il tema Twenty Twelve, considerando che questo tema utilizza parti del modello content-{post format}.php e non ha regioni di widget al di sotto degli articoli, abbiamo omesso le variabili footer_widgets e render. Riguardo al valore impostato in container, il dato corrisponde a quello predefinito, in realtà questo comando può essere omesso; noi lo abbiamo tenuto per chiarezza.
Twenty Eleven
/**
* Aggiungere il supporto al tema per scorrimento infinito
*/
function twenty_eleven_infinite_scroll_init() {
add_theme_support( 'infinite-scroll', array(
'container' => 'content',
'footer_widgets' => array( 'sidebar-3', 'sidebar-4', 'sidebar-5' ),
'footer' => 'page',
) );
}
add_action( 'init', 'twenty_eleven_infinite_scroll_init' );
Il tema Twenty Eleven viene fornito con delle aree per i widget non raggiungibili scorrendo, dato che nuovi articoli vengono aggiunti ogni volta che ci si avvicina a fondo pagina. La soluzione è passare un insieme contenente gli ID di queste regioni di widget alla variabile footer_widgets. In questo modo, se una di queste barre laterali ha un widget, il nostro plugin Scorrimento Infinito lo rileverà, passando in automatico alla configurazione click (dove si deve cliccare per caricare ulteriori articoli), così il contenuto del tuo piè di pagina rimane perfettamente accessibile. Se il tuo tema ha dei widget per il piè di pagina considera questo approccio dato che l’esperienza dei tuoi utenti migliorerà esponenzialmente.
Twenty Ten
/**
* Aggiungere il supporto al tema per Scorrimento Infinito
*/
function twenty_ten_infinite_scroll_init() {
add_theme_support( 'infinite-scroll', array(
'container' => 'content',
'render' => 'twenty_ten_infinite_scroll_render',
'footer' => 'wrapper',
) );
}
add_action( 'init', 'twenty_ten_infinite_scroll_init' );
/**
* Impostare il codice per essere costantemente richiamato quando carica i post,
* agganciandolo alle parti del template quando possibile.
*
* Nota: è necessario impostare un loop.
*/
function twenty_ten_infinite_scroll_render() {
get_template_part( 'loop' );
}
Twenty Ten utilizza un modello di struttura leggermente differente per il render degli articoli, così dobbiamo fornire a Scorrimento Infinito una funzione render modificata.
Fallo Con Stile
Quello che ci manca adesso è come fare per fondere IS in maniera perfetta con il design del tuo sito. Scorrimento Infinito si avvale del supporto al tema body_class e fornisce agli sviluppatori di temi estrema flessibilità per migliorarne l’esperienza di utilizzo tramite delle specifiche classi per il corpo: ogni volta che Scorrimento Infinito è attivo, sarà disponibile la classe infinite-scroll per il corpo; se Scorrimento Infinito è impostato su “scroll”, ci sarà anche una classe neverending. Una volta che l’ultimo articolo in un blog è stato caricato, ci sarà una classe infinity-end in aggiunta. Con queste, puoi nascondere sia il piè di pagina che usi normalmente, sia i link di navigazione, e visualizzarli nuovamente quando IS finisce. Esempio:
/* Nasconde i link di navigazione e il piè di pagina del sito se scorrimento infinito è attivo */
.infinite-scroll #navigation,
.infinite-scroll.neverending #footer {
display: none;
}
/* Mostra nuovamente il piè di pagina nel caso che tutti i post sono stati caricati */
.infinity-end.neverending #footer {
display: block;
}
Ci sono anche due elementi che sarebbe meglio modificare, in modo da visualizzarli al meglio nel tuo tema:
<span class="infinite-loader">[...]</span>e
<div id="infinite-handle">[...]</div>span.infinite-loader è l’indicatore di caricamento visualizzato mentre vengono recuperati i nuovi articoli. Entra in gioco come figlio di container, ed è possibile che quando non serve più, venga nascosto piuttosto che rimosso dal DOM. Assicurati che i tuoi CSS possano gestire entrambi i casi.
div#infinite-handle è il pulsante Carica altri articoli mostrato per l’impostazione type=click. Puoi anche evitare di impostarlo se il tuo tema utilizzerà sempre type=scroll e non avrà mai dei widget per il piè di pagina.
Eventi JavaScript
Inevitabilmente, ci sono situazioni in cui è indispensabile interagire con un tema attraverso JavaScript dopo che gli articoli sono stati aggiunti. Un esempio del caso è con un tema che utilizza jQuery Masonry, il quale necessita di richiamare questa libreria per posizionare gli articoli addizionali. Focalizzando questa necessità, stabiliamo il lancio di un evento dopo che gli articoli sono stati aggiunti. Per utilizzare questo evento, basta richiamare l’evento post-load quando parte document.body:
( function( $ ) {
$( document.body ).on( 'post-load', function () {
// Nuovi post sono stati aggiunti alla pagina.
} );
} )( jQuery );
Altre note
Riconoscendo che questa funzionalità richiede il supporto al tema per essere utile, abbiamo fornito in dotazione con Jetpack il supporto per gli ultimi tre temi predefiniti, Twenty Ten, Twenty Eleven, and Twenty Twelve. Se per caso utilizzi uno di questi temi, puoi abilitare il modulo Scorrimento Infinito e godere immediatamente di questa nuova funzionalità. Se stai utilizzando uno dei Temi Automattic reperibili su WordPress.org, questi temi dovrebbero essere stati già aggiornati per supportare lo scorrimento infinito (la scheda del modulo fornirà, a quegli utenti che hanno attivato dei temi di cui sono disponibili aggiornamenti, un collegamento all’indirizzo per l’aggiornamento, se il tema attivo ha un aggiornamento disponibile).
Jetpack di WordPress.com 