Infinite Scroll: Come inserirlo su un sito WordPress

L’infinite scroll è una tecnica di visualizzazione di contenuti, ereditata in parte dal modello delle timeline dei più famosi social networks, propone un sistema di caricamento automatico dei contenuti ogni volta che si arriva a fondo pagina.

Quest’effetto è molto utile nel caso di liste di risultati molto lunghe, potrebbe essere utilizzate nella visualizzazione di elenchi di articoli in un blog o di prodotti in un eccommerce, L’infinite scroll, di fatto, sostituisce la navigazione tradizionale, risparmiando all’utente la fatica del clic per andare di pagina in pagina.

In questo guida propongo un modo per integrare questa funzionalità su un sito WordPress attraverso l’uso di un plugin ed eventuali piccoli modifiche ai file del tema installato.

Scaricare ed installare il plugin “YITH Infinite Scrolling”

Scaricate il plugin al seguente link:

https://it.wordpress.org/plugins/yith-infinite-scrolling/

Installatelo attraverso il pulsante “Carica plugin” dalla sezione plugin nella parte amministrativa del vostro sito WordPress è, di seguito attivatelo.

Se preferite potete anche installarlo direttamente nella sezione [Plugin > Aggiungi nuovo] digitando nell’input di ricerca il nome del plugin “YITH Infinite Scrolling”

Configurare le impostazioni del plugin con gli elementi html del tema

Ora che avete installato e attivato il plugin noterete nel menu principale (fascia nera a sinistra) della parte amministrativa del vostro sito WordPress la voce “ YIT Plugin”. Cliccandoci su accederete alle impostazioni del plugin.

Di seguito un elenco di passi da svolgere per configurare correttamente il plugin:

1) Enable Infinite Scrolling:

Vi basterà spostare lo switch su ON per attivare la funzionalità del plugin.

2) Navigation Selector:

Qui dovete inserire il selettore css applicato all’elemento html in cui vi è la funzione php che gestisce la paginazione.

<div class="post-nav-container">
   <?php next_posts_link( __('Newer Posts &larr; ',$loop->max_num_pages)); ?>
</div>

Nel codice proposto la class css da inserire è “post-nav-container” e la funzione php per la paginazione “next_posts_link” in questo caso è quella ufficiale del codex di WordPress. Tuttavia tale codice lo potrete trovare scritto in altro modo.

Qui l’esempio sulla guida ufficiale del plugin.

3) Next Selector:

In questo campo invece dovete inserire il selettore css del link che porta alla pagina successiva, riprendendo il codice di esempio, il settore sarà “post-nav-container a

<div class="post-nav-container">
   <a href="http://staging.iaki.it/blog/page/2/">Newer Posts ← </a>
</div>

Qui l’esempio sulla guida ufficiale del plugin.

4) Item Selector:

Qui dovete inserire il selettore del singolo articolo della lista. Secondo il seguente codice di esempio.

Potrebbe essere il selettore css “article.post”.

Qui l’esempio sulla guida ufficiale del plugin.

5) Content selector:

l’ultimo selettore css da individuare ed inserire è quello gobale, cioè l’elemento html in cui vi sono tutti i contenuti del sito. Di solito è un tag html <main> con class css .site-main, quindi il selettore da inserire sarà “.site-main

Qui l’esempio sulla guida ufficiale del plugin.

6) Loading image

attraverso questa voce potete caricare una nuova icona di precaricamento.

Una volta completati correttamente i settaggi, verificate che lo switch di attivazione del plugin sia su ON e proseguite a controllare se l’effetto “infinite scroll” funziona sul vostro sito.

Nel caso di dubbi potete visionare la seguente videoguida del plugin.

The following two tabs change content below.
Sono un Web Designer, ma sopratutto un appassionato di grafica, di internet, nuove tecnologie e in particolare del potente cms che è WordPress.
  • ciao Luca, ho letto la tua guida e mi interessa molto questo sistema e questo plugin, ma mi piacerebbe attivarlo solo per la pagine commenti in alcuni articoli ho molti commenti e sono costretta a spezzare al pagina per evitare di caricarli tutti…mi è capitato di vedere sul web l’infinite scrollign sotto l a pagina commenti ..tu sai se si può fare? se esitse un sistema solo pe r questo?
    Grazie pe r ogni indicazione Un cordiale saluto marni

Lascia un commento

XHTML: È possibile utilizzare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>