Jetpack Infinite Scroll, comment l’intégrer dans votre thème WordPress

Le défilement infini est un module proposé dans le plugin Jetpack pour WordPress.

Il fonctionne sur le principe du fameux Infinite Scroll, un script jQuery qui permet d’afficher vos contenus suivants au clic ou au défilement sans rechargement de page. Pour en profiter avec le thème de votre choix, suivez quelques consignes indispensables que j’ai pu expérimenté de longs mois sur ce site avant un passage en mode manuel sans Jetpack.

Étape n°1 – Activation / configuration du module Défilement Infini

Dans l’onglet Jetpack de votre back-office WordPress, cliquez sur Réglages. Dans la liste des modules disponibles, survolez Défilement Infini puis faites Activer.

Survolez de nouveau l’élément afin d’accéder aux options de configuration en cliquant sur Configurer.

Rien de spécial à signaler si ce n’est l’apparition d’une case à cocher pour Suivre chaque nouveau chargement d’articles comme une nouvelle page vue dans Google Analytics.

Indispensable donc si vous utilisez Google Analytics pour collecter des statistiques de visites pour votre site. Ainsi, lorsque vous atteindrez le second lot d’articles – ou de contenu pour un custom post type, vous basculerez sur /page/2 comme sur une pagination classique. Il est donc intéressant de comptabiliser cela comme une nouvelle vue.

Étape n°2 – Ajout du support du défilement continu

Dans le dossier de votre thème, ouvrez le fichier functions.php puis rajoutez les lignes de code PHP suivantes :

function wpc_theme_support() {
add_theme_support('infinite-scroll', array(
'type' => 'scroll',
'container' => 'grid-container',
'render' => 'wpc_scroll_render',
'footer' => false,
'posts_per_page' => 30
) );
}
add_action('after_setup_theme','wpc_theme_support');

Arrêtons-nous un moment pour décrire précisément chacune des différentes lignes qu’il ne suffit pas de copier bêtement dans votre thème sans savoir réellement ce que vous faites. Elles nécessitent, en effet, d’être adaptées selon votre thème et vos besoins :

• type : 2 possibilités, click pour afficher un bouton de chargement du lot suivant ou scroll pour un défilement automatique à la Facebook. Si vous optez pour scroll alors il sera difficile d’atteindre votre pied de page. Dès lors, je vous déconseille d’utiliser des widgets sur les pages ayant recours à ce type d’affichage ;
• container : il s’agit de l’ID du conteneur HTML à l’intérieur duquel se trouve les contenus à charger. A spécifier en fonction du thème, content par défaut ;
• footer : false pour ne pas ajouter de pied de page supplémentaire, true pour activer celui inclus dans le module. Il vient se placer en surimpression des contenus et peut facilement être personnalisé ;
• posts_per_page : par défaut, si vous ne spécifiez aucune valeur, il s’agit de celle définie dans Réglages puis Lecture de WordPress. Sinon, indiquez le nombre de contenus à afficher par lots en prenant en considération les aspects liés à la performance ;
• render : sans doute la propriété la plus importante à comprendre. Il s’agit de faire appel aux bons fichiers de votre thème pour un affichage correct de chaque contenu. Dans les thèmes par défaut de la série des Twenty on retrouve un fichier content.php et ses déclinaisons de la forme content-{post format}.php. Ils abritent les boucles en fonction des formats d’articles choisis. Or, le paramètre render se base, par défaut, sur ces fichiers nommés ainsi. Si tel n’est pas le cas dans votre thème, vous devez créer une fonction comme décrite ci-après et la spécifier ici ;

Pour créer une fonction de rendu, utilisez ce code en modifiant la ligne relative à get_template_part par le nom du fichier utilisé. Ici, il s’agira donc d’avoir recours à content-posts.php :

/* Render Infinite Scroll */
function wpc_scroll_render() {
get_template_part('content', 'posts');
}

Étape n°3 – Tester le résultat

Si tout s’est bien déroulé – jeu de mots quand tu nous tiens, les pages d’affichage des boucles de contenus (page d’accueil et archives) adopteront le scroll infini.

Or, il est nécessaire de tester les différentes situations : avec ou sans pied de page, défilement ou clic sur un bouton de chargement, etc. et ce, avec différents navigateurs afin de vous assurer que vous n’allez pas pénaliser certains visiteurs.

Il s’agit d’un changement de taille sur un site et il peut être nécessaire d’avertir vos visiteurs ou tout au moins d’essayer sur une version de développement avant mise en ligne.

Pour aller plus loin

Utilisation d’un Masonry

Si vous envisagez de combiner un défilement infini avec un affichage de type Masonry, alors voici le code JavaScript à utiliser :

jQuery( document ).ready( function( $ ) {
	
	var $container = jQuery('#grid-container');
    $container.imagesLoaded(function(){
      $container.masonry({
    	itemSelector : '.post',
		isAnimated: false
      });
    });

    infinite_count = 0;
    $( document.body ).on( 'post-load', function () {
	infinite_count = infinite_count   1;
	var $container = $('#grid-container');
	var $selector = $('#infinite-view-'   infinite_count);
	var $elements = $selector.find('.post');
	$elements.hide();
	$container.masonry( 'reload' );
	$elements.fadeIn();
     });

});

Il vous faudra prendre soin de modifier l’ID du conteneur par le votre à la place #grid-container.

Ensuite, ajoutez 'wrapper'=> 'js-masonry' à l’étape n°2 pour la détection de la zone sur laquelle appliquée Masonry.

Enfin, il sera nécessaire d’intégrer le script Masonry via les fonctions wp_register_script et wp_enqueue_script.

Ce tutoriel dédié à Masonry et Infinite Scroll sous WordPress vous permettra de creuser le sujet sans prise de tête inutile.

Ressources indispensables

• La documentation officielle très complète bien que pas toujours très explicite sur certains aspects… d’où l’objet de ce tutoriel !
• Un tutoriel pour savoir comment Activer l’Infinite Scroll de Jetpack pour les pages de recherche ;

Si vous aussi vous utilisez le module Jetpack pour le défilement infini, alors partagez votre expérience dans les commentaires ci-après. Le débat est ouvert !