Support Home > Aspetto > Scorrimento infinito

Scorrimento infinito

Non è necessario fare clic su un link per accedere alla serie successiva di articoli: lo scorrimento infinito visualizza automaticamente l’articolo successivo quando il lettore arriva alla fine della pagina.

A differenza di molte funzionalità di Jetpack, Scorrimento infinito funziona solamente con i temi che lo supportano. Poiché ogni tema è costruito in modo leggermente diverso, la funzione Scorrimento infinito necessita di informazioni sul tema per funzionare correttamente.

NOTA: Oggi Scorrimento infinito è già integrato nella maggior parte dei temi! Per controllare se il tuo tema supporta Scorrimento infinito, vai su JetpackImpostazioniScrittura nella Bacheca del tuo sito e controlla nella sezione “Miglioramenti del tema“.

Se Scorrimento infinito non è integrato nel tema, continua a leggere per avere istruzioni dettagliate su come aggiungere tale funzione al tuo tema e utilizzare il CSS per personalizzare il tuo sito.

Aggiunta del supporto

Abilitare Scorrimento infinito è molto simile ad aggiungere un supporto per le miniature articolo o per gli stili dell’editor perché viene utilizzato add_theme_support(). Fornendo poche parti chiave delle informazioni quando viene chiamato add_theme_support(), Scorrimento infinito si integrerà perfettamente con il tuo tema.
Se hai un tema ben realizzato, come i temi predefiniti di WordPress, aggiungere Scorrimento infinito è molto semplice. Questa è la procedura per Twenty Twelve:

add_theme_support( 'infinite-scroll', array(
 'container' => 'content',
 'footer' => 'page',
) );

In questo modo lo scorrimento infinito funzionerà perfettamente.

container

Il parametro container è basilare per aggiungere lo scorrimento infinito al tuo tema: specifica l’identificativo dell’elemento HTML a cui Scorrimento infinito aggiungerà ulteriori articoli. Il parametro predefinito è content, ma puoi impostare qualsiasi identificativo di CSS che sia presente nel tema in questione e compatibile con il caricamento di articoli. In genere, questo sarà il container padre degli articoli nel tuo tema.

footer

Uno dei problemi dello Scorrimento infinito è che non puoi accedere all’area piè di pagina, poiché ogniqualvolta si raggiunge la fine, vengono caricati nuovi articoli. Il nostro Scorrimento infinito include un piè di pagina fisso che si inserisce quando scorri la pagina verso il basso. Il parametro footer aiuta a integrare questo piè di pagina con il design del tuo tema. Fornendo un ulteriore identificativo, il piè di pagina dello Scorrimento infinito farà corrispondere perfettamente la sua larghezza a quella del tuo design. Se passi a un valore false, invece, non verrà aggiunto nessun nuovo piè di pagina.
Ci sono anche altri parametri che puoi impostare—questo è un esempio che mostra tutti i parametri predefiniti per ogni opzione di 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 valori differenti: scroll o click. Questi parametri regolano il comportamento predefinito di Scorrimento infinito. scroll carica automaticamente gli articoli nel momento in cui il visitatore raggiunge la fine dell’elenco corrente di articoli, mentre click mostra il pulsante Carica altri articoli, consentendo all’utente di regolare il caricamento di ulteriori articoli.

scroll è il valore predefinito, ma se un tema ha dei widget del piè di pagina, potrà essere sovrascritto dal valore click così da rendere i widget accessibili.

footer_widgets

L’argomento footer_widgets accetta molteplici valori e indica se un tema ha dei widget del piè di pagina. Se sono presenti dei widget del piè di pagina, il tipo di scorrimento sarà impostato su click così da rendere i widget accessibili.

Nella sua forma più semplice, è possibile impostare un valore booleano true o false nel caso in cui il piè di pagina dovesse essere, rispettivamente, mostrato o meno.
Inoltre, una stringa che rappresenta un identificativo di una barra laterale ('sidebar-1', per esempio) e un array di identificativi delle barre laterali saranno entrambi accettati dall’argomento footer_widgets . Il codice di Scorrimento infinito controllerà se la barra laterale o le barre laterali contengono widget e imposterà l’argomento footer_widgets di conseguenza.

Ogniqualvolta possibile, raccomandiamo vivamente di fornire gli identificativi delle barre laterali nel caso in cui un tema collocasse l’area widget al di sotto dell’elenco di articoli. In questo modo viene garantita una migliore esperienza a chi utilizza i temi, in quanto è possibile impostare in modo dinamico il tipo di scorrimento, scegliendo tra l’opzione scroll o click. Detto questo, se un tema sin dall’inizio presenta come opzione click, allora l’argomento footer_widgets può essere omesso senza problemi.

Se tutte queste opzioni non sono sufficienti, è disponibile il filtro infinite_scroll_has_footer_widgets per una configurazione avanzata. Il filtro deve restituire un valore booleano e può essere utilizzato per rilevare la presenza di menu di navigazione oppure se il visitatore sta utilizzando un dispositivo mobile.

wrapper

L’argomento wrapper funziona in modo simile a footer_widgets, in quanto accetta differenti valori. Questo argomento determina se ogni set di ulteriori articoli è contenuto o meno in un elemento div quando viene aggiunto al contenitore specificato nell’argomento che lo precede.
Se è specificato un valore booleano (true o false), gli articoli aggiuntivi vengono collocati o meno all’interno di un elemento div di classe infinite-wrap.

Per inserire gli articoli in un elemento div con la classe personalizzata, imposta l’argomento wrapper su una stringa che rappresenta la classe personalizzata.
L’argomento wrapper accetta solo una singola stringa senza spazi bianchi.

In generale, è buona pratica trasformare gli articoli aggiunti in div, a meno che ciò non comporti un markup non valido. Ad esempio, se un tema utilizza un elemento dell’elenco (ol, ul) per visualizzare gli articoli, il wrapper deve essere disabilitato in modo che gli elementi div non appaiano in posizioni a cui non appartengono.

Render

Scorrimento infinito ricorre a un loop standard di WordPress per restituire gli articoli aggiuntivi e utilizza la forma content-{post format}.php per le parti del modello. Se un tema include almeno content.php, allora l’argomento render può essere omesso. Di seguito è riportata la funzione predefinita di render utilizzata 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, occorre specificare un nome di funzione per l’argomento render e tale funzione sarà utilizzata per generare il codice per Scorrimento infinito. La funzione deve includere la porzione while() del loop di WordPress e può utilizzare qualsiasi opzione a disposizione del tema quando restituisce gli articoli.

posts_per_page

Per impostazione predefinita, l’argomento type controlla quanti articoli vengono caricati ogni volta che Scorrimento infinito è in funzione. Per il tipo scroll, vengono caricati sette (7) articoli ogni volta che viene attivato Scorrimento infinito. Per il tipo click, viene utilizzato un valore “Le pagine del blog visualizzano al massimo” del sito trovato in Impostazioni → Lettura.
Tuttavia, se le impostazioni di un tema richiedono un certo numero di articoli, l’argomento posts_per_page sovrascriverà le impostazioni predefinite presentate nel precedente paragrafo. Questo controllo è utile, ad esempio, in un tema con la disposizione su tre colonne, dove un numero maggiore o minore di tre articoli causerebbe una disposizione irregolare.

Esempi

Considerando che esiste un’ampia varietà di temi e di programmatori di temi, puntiamo a fornire sufficiente controllo sul comportamento di Scorrimento infinito, dato che deve necessariamente supportare molti temi. Detto questo, la nostra esperienza con WordPress.com ha evidenziato che, in genere, ogni tema ha bisogno di poche opzioni di configurazione. Per dimostrarlo, abbiamo incluso la configurazione Scorrimento infinito nei temi predefiniti di WordPress.

Twenty Twelve
/**
 * Add theme support for infinite scroll.
 *
 * @uses add_theme_support
 * @return void
 */
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, occorre sapere che utilizza parti del modello content-{post format}.php e non ha aree widget al di sotto degli articoli, per cui gli argomenti footer_widgets e render sono stati omessi. In realtà, dal momento che il valore container corrisponde a quello predefinito, anche questo argomento può essere omesso; noi l’abbiamo tenuto per chiarezza.

Twenty Eleven
/**
 * Add theme support for infinity scroll.
 */
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( 'after_setup_theme', 'twenty_eleven_infinite_scroll_init' );

ll tema Twenty Eleven include aree widget che non si possono raggiungere con lo scorrimento, dato che nuovi articoli sono aggiunti ogni volta che si arriva a fondo pagina. Per risolvere questo problema, passiamo un array contenente gli identificativi di queste aree widget all’argomento footer_widgets. Così facendo, se in una di queste barre laterali è presente un widget, il nostro plugin Scorrimento infinito lo rileverà e passerà in automatico al tipo click (dove occorre fare clic per caricare ulteriori articoli su richiesta), in modo che il contenuto del tuo piè di pagina rimanga perfettamente accessibile. Se nel tuo tema sono presenti dei widget del piè di pagina, considera questo metodo per migliorare l’esperienza dei tuoi utenti.

Twenty Ten
/**
 * Add theme support for infinity scroll
 */
function twenty_ten_infinite_scroll_init() {
 add_theme_support( 'infinite-scroll', array(
 'container' => 'content',
 'render' => 'twenty_ten_infinite_scroll_render',
 'footer' => 'wrapper',
 ) );
}
add_action( 'after_setup_theme', 'twenty_ten_infinite_scroll_init' );
/**
 * Set the code to be rendered on for calling posts,
 * hooked to template parts when possible.
 *
 * Note: must define a loop.
 *
function twenty_ten_infinite_scroll_render() {
 get_template_part( 'loop' );
}

Twenty Ten utilizza un modello con una struttura leggermente differente per restituire gli articoli, per cui dobbiamo fornire per Scorrimento infinito una funzione specifica per la restituzione.

Fallo con stile

L’ultimo punto da analizzare è come fondere perfettamente Scorrimento infinito con il design del tuo sito. Scorrimento infinito si avvale del tema che supporta body_class e fornisce agli sviluppatori di temi la massima flessibilità per migliorare l’esperienza usando specifiche classi del corpo: ogni volta che Scorrimento infinito è attivo, sarà disponibile la classe infinite-scroll per body; se lo scorrimento infinito è impostato su “scroll”, sarà anche disponibile una classe neverending . Una volta che l’ultimo articolo è stato caricato su un blog, sarà aggiunta una classe infinity-end. Con queste classi, puoi nascondere sia il piè di pagina che usi normalmente, sia i link di navigazione, e visualizzarli nuovamente quando lo scorrimento infinito è concluso. Esempio:

/* Hides navigation links and site footer when infinite scroll is active */
.infinite-scroll #navigation,
.infinite-scroll.neverending #footer {
 display: none;
}
/* Shows the footer again in case all posts have been loaded */
.infinite-scroll.neverending #footer {
 display: block;
}

Ci sono altri due elementi che vorrai personalizzare per adattarli al tuo tema:

[...]

e

[…]

span.infinite-loader è l’indicatore di caricamento che viene visualizzato mentre sono recuperati i nuovi articoli. È inserito come figlio di container ed è possibile che quando non occorre più, venga nascosto piuttosto che rimosso dal DOM. Assicurati che il tuo CSS gestisca entrambe le classi.
div#infinite-handle è il pulsante Carica altri articoli mostrato per type=click. Puoi ignorarlo se il tuo tema utilizzerà sempre l’impostazione type=scroll e non avrà mai widget del piè di pagina.

Eventi JavaScript

Inevitabilmente, ci sono situazioni in cui un tema richiede di interagire attraverso JavaScript dopo che gli articoli sono stati aggiunti. È quanto succede, ad esempio, con un tema che utilizza jQuery Masonry e che necessita di attivare tale libreria per posizionare gli articoli supplementari. Consapevoli di questa necessità, lanciamo un evento dopo che gli articoli sono stati aggiunti. Per utilizzare questo evento, basta richiamare l’evento post-load quando si attiva su document.body:

( function( $ ) {
 $( document.body ).on( 'post-load', function () {
 // New posts have been added to the page.
 } );
} )( jQuery );

Aggiunta di variabili personalizzate alla query Scorrimento infinito

Alcuni temi e plugin aggiungono variabili alle query dell’articolo, spesso per cambiare il modo in cui gli articoli sono classificati o caricati. Puoi usare il filtro infinite_scroll_query_args per aggiungere anche questi argomenti aggiuntivi a Scorrimento infinito. Nell’esempio sottostante, aggiungeremo 2 parametri di classificazione personalizzati, order e orderby:

/**
 * Sort all Infinite Scroll results alphabetically by post name
 *
 * @param array $args
 * @filter infinite_scroll_query_args
 * @return array
 */
function jetpack_infinite_scroll_query_args( $args ) {
 $args['order'] = 'ASC';
 $args['orderby'] = 'name';
 return $args;
}
add_filter( 'infinite_scroll_query_args', 'jetpack_infinite_scroll_query_args' );

Risoluzione dei problemi

Ho Scorrimento infinito impostato su Carica altri articoli mentre il lettore scorre verso il basso, ma viene invece mostrato un pulsante “Articoli precedenti”.

Nel tuo tema sono presenti widget del piè di pagina? Se hai dei widget nell’area dei widget del piè di pagina, Scorrimento infinito passerà automaticamente a utilizzare il pulsante “Articoli precedenti”, per garantire che i widget del piè di pagina possano essere visualizzati sul tuo sito. Se vuoi che gli articoli siano caricati mentre scorri la pagina, puoi posizionare i widget in un’area widget alternativa, come la barra laterale. Se il tuo tema ha solo aree widget a piè di pagina, probabilmente vorrai cercare un altro tema con più opzioni per le aree widget.

Altre note

Capendo che questa funzione richiede il supporto del tema per essere utile, abbiamo integrato il supporto in Jetpack per i temi WordPress predefiniti, Twenty Ten, Twenty Eleven, ecc. Se ti capita di usare uno di questi temi, puoi abilitare lo Scorrimento infinito e beneficiare subito di questa funzionalità. Se usi uno dei temi Automattic di WordPress.org, questo dovrebbe essere già aggiornato con il supporto per Scorrimento infinito (la scheda della funzionalità fornirà un comando agli utenti che possono aggiornare i temi, se è disponibile un aggiornamento per il tema attivo).

Informazioni sulla privacy

Questa funzione è disattiva per impostazione predefinita. Se avessi bisogno di disattivarla, seleziona l’impostazione Carica altri articoli utilizzando il comportamento del tema predefinito nella sezione Miglioramenti del tema in Jetpack — Impostazioni — Scrittura.

Ulteriori informazioni sull’utilizzo dei dati su tuo sito
Dati usati
Utenti/proprietari sito
Per registrare le visualizzazioni delle pagine con caricamenti aggiuntivi tramite Statistiche WordPress.com (che devono essere attivate qui per tracciare le visualizzazioni della pagina), occorre usare le seguente informazioni: indirizzo IP, ID utente WordPress.com (se connesso), nome utente WordPress.com (se connesso), user agent, URL della visita, URL di riferimento, data e ora dell’evento, lingua del browser, prefisso internazionale.
Visitatori del sito
Per registrare le visualizzazioni delle pagine con caricamenti aggiuntivi tramite Statistiche WordPress.com (che devono essere attivate qui per tracciare le visualizzazioni della pagina), occorre usare le seguente informazioni: indirizzo IP, ID utente WordPress.com (se connesso), nome utente WordPress.com (se connesso), user agent, URL della visita, URL di riferimento, data e ora dell’evento, lingua del browser, prefisso internazionale.
Attività tracciata
Utenti/proprietari sito
Le visualizzazioni di pagina saranno tracciate a ogni caricamento aggiuntivo (ad esempio quando scorri fino alla fine della pagina e una nuova serie di articoli viene caricata automaticamente). Se il proprietario del sito ha attivato Google Analytics per lavorare con questa funzione, verrà anche inviato un evento visualizzazione di pagina all’account di Google Analytics appropriato a ogni caricamento aggiuntivo.
Visitatori del sito
Le visualizzazioni di pagina saranno tracciate a ogni caricamento aggiuntivo (ad esempio quando scorri fino alla fine della pagina e una nuova serie di articoli viene caricata automaticamente). Se il proprietario del sito ha attivato Google Analytics per lavorare con questa funzione, verrà anche inviato un evento visualizzazione di pagina all’account di Google Analytics appropriato a ogni caricamento aggiuntivo.
Dati sincronizzati (leggi di più)
Utenti/proprietari sito
Sincronizziamo opzioni che identificano se la funzione è attivata o disattivata e se Google Analytics è integrato in questa funzione oppure no.
Visitatori del sito
Nessuna informazione.
  • Sommario

  • Categorie