Infinte scroll in un tema WordPress
L’Infinite Scroll è una tecnica molto utilizzata nel web per caricare i contenuti di un sito durante la navigazione di un utente. Recentemente, infatti, l’impaginazione dei siti più famosi, è stata variata: invece di utilizzare l’approccio tradizionale < < Prev 1 2 3 Next>>, vengono utilizzati script alternativi che consentono di caricare i contenuti nella stessa pagina, semplicemente scrollando o attraverso la selezione di un “pulsante more”.
Esempi: beh avete presente facebook? utilizza l’Infinite Scroll nell’home per visualizzare tutti gli vari elementi e l’elenco sembra non finisca mai. Twitter utilizza il cosiddetto pulsante d’azione more per visualizzare più tweets, Google Images, infine, utilizza sia l’Infinite Scroll che il pulsante d’azione.
L’Infinite scroll consente agli utenti di mantenere visibile costantemente la barra di navigazione, godere anteprime o feedback sui contenuti, tenere traccia sulla quantità di contenuto caricato e quello da caricare, utilizzare il tasto “More” se il sito dispone di un piè di pagina.
Per integrare l’Infinite Scroll in un tema WordPress sono disponibili due vie: l’integrazione e l’implementazione di apposite funzioni di JQuery oppure con l’ausilio di un facile plugin gratuito.
Integrazione della funzione JQuery
Il primo passo da compiere è quello di scaricare il file “jquery.infinitescroll.min.js” dalla repository GitHub, e copiarlo nella cartella “js” del tema di WordPress. Scegliere, poi, l’immagine da utilizzare come effetto loading, cioè solitamente una gif che esprima al meglio il concetto, e aggiungerla nella cartella “immagini” utilizzata dal nostro tema.
A questo punto è necessario aggiungere nel file functions.php lo script desiderato:
/**
* Caricare il javascripts utilizzato dal tema
*/
function custom_theme_js(){
wp_register_script( 'infinite_scroll', get_template_directory_uri() . '/js/jquery.infinitescroll.min.js', array('jquery'),null,true );
if( ! is_singular() ) {
wp_enqueue_script('infinite_scroll');
}
}
add_action('wp_enqueue_scripts', 'custom_theme_js');
/**
* Infinite Scroll
*/
function custom_infinite_scroll_js() {
if( ! is_singular() ) { ?>
<script>
var infinite_scroll = {
loading: {
img: "<?php echo get_template_directory_uri(); ?>/images/ajax-loader.gif",
msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
},
"nextSelector":"#nav-below .nav-previous a",
"navSelector":"#nav-below",
"itemSelector":"article",
"contentSelector":"#content"
};
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
</script>
<?php
}
}
add_action( 'wp_footer', 'custom_infinite_scroll_js',100 );
Una volta inserito lo script, che va ovviamente adattato al proprio tema, in particolare vanno controllati i selettori css, è necessario testarlo.
Un controllo aggiuntivo:
/**
* Se si scorre oltre all’ultima pagina e la richiesta punta ad una pagina che non esite,
* forzo WordPress a tornarmi il valore 404.
*/
function custom_paged_404_fix( ) {
global $wp_query;
if ( is_404() || !is_paged() || 0 != count( $wp_query->posts ) )
return;
$wp_query->set_404();
status_header( 404 );
nocache_headers();
}
add_action( 'wp', 'custom_paged_404_fix' );
In generale questo script funziona perfettamente, nonostante rallenti parecchio l’usabilità del sito e potrebbe richiedere qualche piccolo aggiustamento. Tuttavia, se non viene utilizzato molto codice javascript nei contenuti di WordPress, le prestazioni sono piuttosto efficienti.
Plugin di WordPress per Infinite Scroll
Il plugin gratuito Infinite Scroll richiede la versione 2.3 di WordPress o successive. Il suo processo di installazione è molto semplice, le uniche configurazioni riguardano i css dei pulsanti d’azione.
Il plugin di solito funziona subito senza particolari configurazioni.
Nel caso in cui non funzioni occorre modificare i parametri dei vari selettori.
Offre di base un bell’effetto grafico, ma potete ulteriorlmente personalizzarlo scegliendo il testo e l’immagine del loading.
Trovate tutte le varie informazioni anche sul sito del plugin http://www.infinite-scroll.com/
Un ulteriore ed interessante plugin è WP-Page Scroll che offre una funzionalità aggiuntiva e decisamente interessante: verrà mantenuta sempre visibile una barra di navigazione (paginator) che viene aggiornata automaticamente ad ogni scroll, permettendo agli utenti di mantenere sempre la possibilità di navigazione all’interno del resto del sito e di non sentirsi persi nella pagina. Una specie di menu di navigazione aggiuntivo.
Va detto però che questo plugin è un po’ datato.
Io personalmente preferisco Infinite Scroll
Voi avete mai avuto la necessità di usare l’infinite scroll?
L'Autore
Andrea. Internet per me è una passione... che ti cambia la vita! Sono innamorato di webmarketing, seo e adoro la comunicazione. Ormai sono webmaster da parecchi anni. Hai bisogno di un consiglio? Contattami!
5 Commenti
Ma Google come fa a trovare gli articoli precedenti, mancando i classici pulsantini 1, 2, 3?
In teoria i vecchi articoli dovrebbero essere già stati indicizzati perchè presenti nelle prime posizioni.
Poi c’è sempre la sitemap…
Ciao Andrea. Sembra una buona idea. Sicuramente è più rapido per l’utente scorrere i contenuti.
Ma se un utente deve cercare un articolo che è rimasto in cima oppure a metà deve ripercorrere a ritroso il percorso e impiegarci del tempo.
Tu consigli di inserirlo? O è meglio lasciare i pulsantini?
E’ molto utile però secondo me creerebbe mancate indicizzazione nel SEO.
Ottima guida.