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.

N.B : ce tutoriel est réservé à des utilisateurs avancés.

É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.

Module 'Défilement Infini' sous Jetpack

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.

Options du 'Défilement Infini' sous Jetpack

É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

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 !

Nick Long

12 commentaires

  1. olivier

    Hello merci pour cet article intéressant, je remarque qu’il y a une petite erreur dans le code de la fonction qui déclare le support du thème, tu as oublié une accolade pour fermer la fonction.
    Merci bcp en tout cas c’est plus clair pour moi maintenant.

      1. olivier

        hahaha merci Je suis en train d’essayer la même technique mais sans le plugin jetpack, juste avec le script infinitescroll mais je rencontre quand même des problèmes car lorsque la deuxième page se charge, mes scripts relatifs à Foundation ne se rechargent pas… bonne journée

  2. Shuta

    Bonjour,
    J’ai remarqué que le plugin servait à faire afficher que sur certaines pages prédéfinie tel que l’accueil etc.
    Mais je voudrais pouvoir l’utiliser sur une page bien précise que j’ai nommé page-lit-amd.php

    Est il possible de l’utiliser ainsi ? Ou bien dois je me débrouiller pour trouver une autre façon pour faire un infinite scroll sur ma page.

    Merci d’avance pour la réponse, bonne journée !

    1. Aurélien Denis auteur de l’article

      On doit pouvoir le faire mais ce sera pas simple à appréhender. Dans une page, on ne sera pas sur une liste d’article donc il faut développer quelque chose de sur-mesure basé sur les mêmes scripts.

Laisser un commentaire