Ajouter un scroll infini dans un thème WordPress

Le scroll infini est une manière de présenter dynamiquement du contenu au fur et à mesure que l'utilisateur fait défiler une page d'un site Web. Nous allons voir comment implémenter cette fonctionnalité, sans plugin, dans un thème WordPress.

Les fichiers nécessaires

Il faut commencer par télécharger le script jquery.infinitescroll.min.js depuis GitHub puis le placer dans le dossier des scripts de votre thème WordPress.

Récupérez également l'image de chargement puis placez là dans le dossier des images de votre thème.

Chargement du script

Il faut ensuite enregistrer le script dans votre fichier functions.php de la manière suivante :

 Initialisation du script

Dans le code qui suit il vous faudra modifier certains paramètres en fonction de votre thème :

  • img : le chemin de l'image de chargement
  • nextSelector : le sélecteur pour le lien "précédent".
  • navSelector : le container des liens "précédent" et "suivant"
  • itemSelector :  le sélecteur pour les articles (par exemples .hentry, .post, etc.)
  • contentSelector : La  div contenant vos articles.
Notez toutefois que ce script peut entrer en conflit avec certains  plugins et si cela ne fonctionne pas, vous pouvez tenter d'utiliser le plugin Infinite Scroll disponible sur le dépôt WordPress.

Plugin WordPress Infinite Scroll