Créer un défilement infini des articles avec Infinite Scroll
Apprenez à mettre en place un système de défilement infini de vos articles (ou Infinite Scroll) sur votre site WordPress grâce à ce tutoriel vidéo.
Dans ce tutoriel vidéo, je vous propose de mettre en place sur votre site un système de défilement infini avec jQuery et sans utiliser de plugins WordPress. Avant de regarder la vidéo, je vous conseille de lire le contenu de cet article afin de mieux comprendre le principe de la technique utilisée durant le tuto.
En 2011, le défilement infini (ou la pagination infinie) a été popularisé par les réseaux sociaux tels que Twitter et Facebook.
En effet, depuis la découverte de cette technique, de nombreux sites ont mis en place l’Infinite Scroll à la place place des paginations à l’ancienne (bouton suivant et précédent). Par exemple, afin d’améliorer l’expérience utilisateur, Tumblr a su adapté les archives de ses blogs avec ce procédé (ex: http://www.tumblr.com/tagged/archives).
L’infinite Scroll permet de charger un nouveau contenu pendant que le visiteur est entrain descendre dans la page. Ceci est plutôt pratique puisque cela permet aux utilisateurs d’éviter un certain nombre de clics sur les liens d’une pagination standard.
On améliore ainsi l’expérience utilisateur grâce à un chargement automatiquement du contenu de la page suivante au fur et à mesure que l’on descend sur la page. De plus, cette technique peut augmenter le temps de visite moyen en réduisant les actions à effectuer des visiteurs pour consulter un contenu. Enfin, une pagination infinie n’a aucune influence sur le référencement naturel d’un site puisqu’on indexe rarement les paginations afin d’éviter du duplicate content.
Par contre, il est important de souligner que l’Infinite Scroll n’est pas adapté à tous les sites. En effet, en fonction votre thématique, le fait de pouvoir passer directement sur les pages suivantes à l’aide d’une pagination peut savérer plus simple. Cela peut être aussi plus rapide pour accéder directement à la page 10 si on se rappelle qu’un article intéressant se trouvait sur cette page.
81 Commentaires
Hello
Super tutoriel ! Charger la page suivante c’est vraiment une bonne idée. Certes on ne pagne pas en poids chargé, mais on gagne en vitesse et ergonomie de navigation !
Je pense devoir l’utiliser cette semaine en plus, merci !
@Julio : Merci :)
Je tiens à préciser aussi dans les commentaires que cette idée de page suivante vient de Sébastien Decamme aka Shakup.
Il faut rendre à César ce qui est à César.
Monsieur est trop bon :)
Du coup le plugin de cache perd de son utilité ?
Qui des performances dans ce cas là puisqu’il n’y a plus de fichier static et tout se charge depuis la bdd ?
@Djib’s : Non le plugin de cache est encore utile. Il permet de mettre en cache les articles présents dans le DOM afin de servir un fichier static au lieu de refaire la requête de la 1ère page à chaque chargement de la page.
Pas d’inquiétude niveau performance, on demande à faire une appel à requête assez simple et qui n’est pas vraiment gourmande en ressource.
D’ailleurs on le voit bien dans la vidéo, les articles se chargent très vite.
bon ne marche pas chez moi. j’ai bien jquery chargé dans le header, j’ai bien mis la div avec l’id i-scroll et j’ai bien mis le js dans mon fichier où je reuni tous mes JS (dans le footer nommé fusion4.js), mais rien !!
j’ai trouvé la solution. Dans le js, au lieu de mettre “article” faut mettre “div.NOM_DE_LA_CLASSE”
Mais ce système pose le probleme de l’affichage de la publicité qui du coup rest seulement en haut une grosse diminution des pages vues
@Djib’s : Il n’y a pas de diminution des pages puisque l’on fait un appel AJAX à la page suivante. Cela revient à faire une visite sur cette page ;)
Comme je l’ai indiqué à la fin de l’article, l’infinite scroll est à utiliser en fonction de la thématique de son site et aussi de son apparence.
Par exemple, dans votre cas, l’utilisation de la pagination infinie n’est pas judicieuse. On se sert rarement de cette technique sur un blog. Cela conviendrait plus à un portfolio ou un site communautaire qui génère beaucoup d’informations.
Hello
J’ai installé un plugin d’infinite scroll sur http://www.rencontredemerde.fr (celui de Jetpack) mais je vais voir si j’implémente ou pas ta solution plus légère.
Sinon mon est très positif car le nombre de pages vues par visite a augmenté.
Seul bémol l’infinite scroll peut parfois entrer en collision avec certains plugins qui utilisent eux aussi de l’AJAX (je pense notamment à Disqus).
Effecctivement, mais en tout cas l’idée était bonne :-).
Ce serait pas mal que tu adaptes ce code pour les commentaires pour ceux qui affichent les commentaires par page au bout d’un certain nombre.
EN plus ça éviterait les duplicate content comme l’expliquait Arnaud dans son dernier article : http://www.seomix.fr/page-commentaire-wordpress/
@Djib’s : Pour mettre en place l’infinite scroll sur les commentaires, c’est exactement le même principe que pour les pages d’archives : il suffit de récupérer l’adresse URL de la page suivante des commentaires :)
Excellent tuto, et excellente idée également pour certains sites dont ce type de chargement peut vraiment améliorer l’ergonomie et la fluidité.
Attention par contre avec ce qui est dit dans cet article sur le référencement et la pagination, comme quoi c’est une très bonne technique à mettre en place pour optimiser son site.
Oui, cela peut aider à réduire le contenu dupliqué mais il existe d’autres méthodes bien plus efficaces pour cela. Et sur des sites avec beaucoup de contenus, la pagination est cruciale pour l’indexation, notamment pour les anciens articles que l’on met à jour ou qui ne possèdent pas assez de liens entrants. Un infinite scroll peut donc éventuellement nuire au SEO dans certains cas.
Le mieux, c’est surtout d’avoir une pagination standard, et un script d’infinite scroll qui remplace cette navigation quand le javascript est activé dans le navigateur de l’utilisateur.
@Daniel : Je ne dis pas que l’infinite scroll est une bonne pratique pour le référencement, mais je précise que cela n’est pas néfaste pour lui.
Ensuite, il ne faut pas voir cela comme une lutte contre le duplicate content, mais il faut comprendre que cette technique n’en provoque pas.
Par contre, je suis d’accord avec toi qu’un infinite scroll sur un site qui ne possède pas de sitemap ira dans le sens d’un négative SEO plus qu’autre chose.
Si un sitemap est en place (ou une page qui contient toutes les URLs du site), par contre je ne vois pas les inconvénients de la pagination infinie au niveau du référencement.
Article intéressant (je n’ai pas encore regardé la vidéo). J’y pense depuis que je l’ai vu dans les possibilités de Jetpack. Mais apparemment cette solution est plus légère (ouiii, du poids en moins).
J’aimerai avoir des retours sur la remarque de Fabien :
“Seul bémol l’infinite scroll peut parfois entrer en collision avec certains plugins qui utilisent eux aussi de l’AJAX (je pense notamment à Disqus).”
Car j’utilise également disqus.
Au passage une petite question technique à propos de l’infinite scroll. Si j’ai un fond de 4000px de haut, quand je descend avec l’infinite scroll le fond continue à défiler?
Cordialement,
Yannick
@Yannick : Perso, je ne vois pas en quoi ce script pourrait être en conflit avec un plugin qui utilise de l’AJAX. Les scripts étaient totalement indépendants, il n’y a pas de raison pour que l’un ne fasse pas marcher l’autre.
Si vous avez un fond de 4000px, c’est déjà une très mauvaise chose à la base. Je n’ose pas imaginé le poids du fichier ;) Pour que le fond soit toujours présent, il faut le mettre en
position: fixed;
@Jonathan Buttigieg
Ne t’inquiète pas pour le fond, mon idée c’est de réalisé un design de fond marin avec un dégradé CSS3 positionné non en %, mais en px, pour qu’on est l’impression en défilant qu’on plonge dans les abîmes, donc très légé ^^. Après j’ai pris le chiffres 4000px aux hasards.
Pour l’AJAX, effectivement ça parait logique ce que tu dis, ça me rassure.
@Yannick : Ouf, j’ai eu peur avec le fond de 4000px de hauteur :)
Super idée. Merci pour le partage !
Sinon dans le js pourquoi tu passes par jQuery(document).ready(function($) plutôt que $(document).ready(function)?
@TweetPress : C’est pour éviter un éventuel conflit avec une autre libraire qui utiliserait elle aussi le $.
Ah ok, en tout cas génial ce tuto. Je vois bien le thème que je prépare l’utiliser :) mais je pense plutôt passer par un fichier loop.php que j’appelle dans chacun des autres fichiers parce qu’éditer 50 fichiers pour ajouter juste une div. Je dis pas ça pour ton exemple, je me doute que là c’est parce que c’est Twenty Twelve :)
Il y a quand même un gros problème pour des blogs classiques: impossible pour le visiteur de mettre en favori une page issue d’une pagination – par exemple lorsqu’il est nouveau et qu’il découvre le site, parcourant tout l’historique. À mon avis, c’est à utiliser avec précaution suivant l’orientation du blog.
@Max : C’est quasiment ce que je dis à la fin de l’article ;)
Bonjour, excellent tuto, j’ai quand même un problème à vous faire part, a chaque scroll mes articles se décalent de quelques millimètre, je pense que ça vient du mauvais emplacement de la div i-scroll, j’ai beau la changer de place ca ne change rien c’est pire. Pourtant le i-scroll est bien entre chaque article
Je suis embarassé je vous ai laissé le lien vers le site en signature si vous voulez y jeter un coup d’oeil je serais ravi, cdlt
@Actuzz : C’est normal, vous avez mis la div à l’intérieur du ol qui possède les class
posts-list hfeed
. En fait, il faudrait supprimer la div i-scroll et mettre l’id sur le ol :)Merci Jonathan je vais corriger cela :) si ça marche ensuite je peux supprimer l’ancienne pagination ? merci pour vos réponses aussi rapide !
@Actubuzz : Oui !
Par contre, je vous conseille de mettre le code de la pagination entre commentaire. Comme ça, le jour où vous souhaitez revenir avec le système de pagination classique, il vous suffira juste de décommenter cette partie du code :)
J’ai une erreur dans la console et rien ne se charge… J’ai acheté le pack.
Uncaught TypeError: Cannot read property ‘top’ of undefined infinite-scroll.js:22
(anonymous function) infinite-scroll.js:22
b.event.dispatch jquery.min.js:3
v.handle
Que faire ?
@Nico : Avaez vous remplacer
#i-scroll article:last
par votre configuration ? :)Effectivement j’ai laissé par défaut. Mais comment puis je trouvé ce que je dois mettre à la place de #i-scroll article:last ?
@Nico : Sans connaître votre site et son code, je ne peux pas vous le dire ^^
mon site est avantjetaisriche.com Or je suis entrain de refaire le design sans le montrer au visiteur via un plug, celui-ci n’est pas changé pour le moment, est ce que vous pouvez savoir sur cette version ?
@Nico : Si le thème est différent, le code sera différent. Et si je ne peux pas voir le code, je ne peux pas vous aider ;)
Le thème reste le même, le css change simplement afin d’avoir un autre aspect sans sidebar. Je sais que ce n’est pas évident pour vous, mais je suis vraiment désireux de mettre en place cette fonction :S
Personnellement je ne suis pas une grande adepte du scroll infini. J’aime pas me dire que je ne peux pas aller voir le footer rapidement, il faut attendre que tout charge correctement. Maintenant s’il y a une pagination c’est mieux :).
Comment résoudre mon problème ?
Merci
@Nico : Comme je l’ai déjà mentionné : si je ne vois pas votre nouveau thème, je ne peux pas vous aider.
Je ne peux pas être plus clair ;)
Superbe solution que tu présentes là Jonathan pour de l’infinite scroll.
J’avais testé plusieurs solutions avec notamment l’usage de plugin mais je n’étais pas très content du résultat.
J’ai notamment testé le plugin Jetpack qui propose de le faire. La solution sans plugin me convient mieux.
Salut ! Vous pensez que ca pourrait fonctionner correctement sur mon site ?
@RG: Oui bien sûr, cela s’adapte à tout type de design.
Merci beaucoup pour cette véritable vraie astuce sans plugin donc on ne surcharge pas son wordpress et surtout l’infinite scroll est très bien vu par google en terme de référencement car elle fait office de page “tous les résultats”.. Et tellement plus ergonomique pour l’utilisateur !! Merci encore !
Hello,
Je viens de suivre ton tutoriel pour le scroll, il fonctionne très bien sur la page d’accueil de mon blog, en revanche, il ne fonctionne pas sur ma page “category.php” on voit le loader s’afficher mais aucun article s’affiche….?
Un peu d’aide svp?
Merci d’avance ;)
@Ab Desgin: Avez-vous bien ajouté l’id qui permet de détecter la liste des articles comme sur la home ?!
@Jonathan Buttigieg : Problème résolu, ce n’était pas un problème d’ID mais une balise mal positionnée ;)
Salut, merci pour ce super tuto.
Qqs remarques:
– @Maisonentravaux Google ne référencera pas « tous les résultats » seulement ceux affichés au départ, d’où l’intérêt de laisser les boutons de navigation en bas de page, car Google suivra les liens. Il faut adapter le javascript pour cacher ou détruire ceux-ci dans le html. On peut aussi les coller dans une balise . Mais la remarque de @Mathilde est valable! parfois on aimerait sauter à la page 10 directement… et pensons aussi à ceux qui n’ont pas javascript activé (accessibilité!),
– @max: mettre en favori “une page issue d’une pagination” n’a pas grand intérêt, puisque son contenu est amené à changer régulièrement à chaque nouvelle publication d’article (le dernier de la page est “poussé” sur la page suivante),
– pour combattre le duplicate content, utiliser l’ “excerpt” sur vos pages d’archives/auteurs et ajouter à celle-ci une meta noindex,follow. Mais ça ce discute… (cas par ex où les tags/catégories ont une description qui alors ne sera pas indéxée).
Vive geekpress!
Bonjour, ça marche bien, sauf que quand je l’utilise avec un wp query, il me charge à chaque fois les même article. En gros, j’ai un modèle de page qui affiche certains articles, j’utilise alors un wp query (avec comme argument, showposts=> 4 et tri avec ASC). et quand j’essaie via l’url d’acceder à http://www.monsite.fr/nompage/page/2/, il m’affiche de nouveaux les mêmes articles.
Savez-vous pourquoi dans les pages 2,3,4… il me sort toujours les mêmes articles et pas les suivants ?
Merci d’avance
Bonjour,
J’ai un soucis lors de l’implémentation de ce code.
Je l’utilise pour des Custom Post Types. La boucle de chargement ne s’arrête pas. Je n’ai que deux pages de contenus, logiquement après avoir chargé la deuxième, il devrait tomber sur une 404, mais rien, il continu en boucle sans jamais s’arrêter…
http://snippi.com/s/l6vz31x
Une idée ?
Merci.
Un peu comme plus haut, j’ai testé aussi Jetpack mais j’évite d’allourdir de trop wordpress. Je trouve ça déjà assez lent la navigation alors si on rajoute la pléthore de plugin qu’on y installer :D on s’en sort plus.
Merci pour ce tuto vraiment génial !
J’ai juste eu un petit soucis avec l’url de la page2 qui ne charger pas.
Les solutions : Dans les options des permaliens sur wordpress il faut mettre “nom de l’article” et changer le fichier “.htaccess”
Ou dans mon cas j’ai changé la ligne
par
.
@dglsn: Si vous avez déjà un problème avec votre pagination, c’est qu’il y a un problème avant même d’utiliser l’infinite scroll. Avez-vous contacter l’auteur de votre thème ?
@Twinkies: La requête a l’air correct, par contre vous avez 2 erreurs dans ce code. Vous devez remplacer :
par
Il ne faut pas oublier de mettre des simples quotes aux valeurs de votre tableau ;)
Excellent tuto ! Mais je confirme, tous les templates ne sont pas adaptés au infinite scroll. J’ai déjà rencontré quelques bugs avec des templates themeforest qui demandent de s’entretenir avec l’auteur du thème si on a un niveau assez limité..
Bonjour,
merci beaucoup pour ce tuto.
cependant je ne sais pas par quoi remplacer “article:last”.
voila mon code
Bonjour Jonathan, bonjour à tous, j’ai suivi ce tuto avec grand soin d’autant plus que c’est le mieux expliqué du net et que je suis novice en la matière. Bref après 3 jours et 3 nuits sans dormir ni manger cela ne fonctionne pas chez moi, après avoir re-re vérifié le code , rien ni fait, et je me demandais si cela était du faite de mon thème gratuit :http://wpshower.com/demo/?preview_theme=imbalance
merci de votre aide et de vos réponses
Bonjour !
Excellent tuto, merci beaucoup, c’était exactement ce que je cherchais. Cela fonctionne très bien, a une exception près. Je construit mon propre thème avec Bootstrap, et j’ai comme l’impression qu’il existe un conflit avec le carousel que j’utilise et l’infinite-scroll car lorsque l’article contenant la galerie apparait, … Et ben pas de galerie. Pourtant, elle fonctionne très bien sans l’infinite scroll. J’y connais vraiment rien en JS et donc je n’arrive pas à identifier le problème. Avez-vous déjà rencontrer des bug avec bootstrap pour ce thème?
Merci.
Bonjour,
Très bon tuto mais j’aurai juste une remarque concernant la page recherche (search.php).
L’utilisation de : document.location.href ne permet pas de positionner la pagination au bon endroit.
Je pense qu’il serait plus intéressant d’avoir :
– document.location.origin
– document.location.search
Pour pallier aux différents paramètres $_GET s’il en existe.
Ce qui pourrait nous donner par exemple :
$.get(document.location.origin + ‘/page/’ + i + document.location.search)
Voilà.. à part ça, le script est light, c’est good :D
Thomas.
@Thomas: Merci pour la remarque.
@Spaceship Graphics: Pas testé avec Bootstrap, donc je ne peux rien dire à ce sujet.
Bonjour,
Très bon tuto, il est fonctionne parfaitement chez moi. Merci.
J’aimerais cependant une petite modification que je n’arrive pas a implémenter.
Cette modification serait de faire en sorte qu’au lieu de lancer directement le chargement des articles suivant, mettre un lien qui sera cliquer avant ce chargement.
Très bon tutoriel, merci !
C’est exactement ce que je cherchais !
Je vais suivre ce tutoriel qui m’a l’air d’être pas très compliqué.
Merci
Superbe tutoriel, c’est exactement ce que je recherchais pour une des réalisation que j’ai à effectuer en ce moment.
Merci encore pour tous les autres tutoriels qui m’ont beaucoup appris sur WordPress.
Absolument génial ce tuto ! Mais gros probleme il marche pas chez moi …
(e-rencontres.org pour l’exemple)
J’ai l’impression que ça bloque après ça :
$.get(document.location.href + ‘page/’ + i)
.done( function( data ) {
Une idée ? Parce que je suis dessus depuis 2 jours sans résultat :(
Merci
Génial !
Super pratique, et je ne connaissais pas la méthode.
Merci beaucoup.
Merci pour ce tuto très bien expliqué et facile à mettre en oeuvre. Je rencontre cependant un problème de conflit avec jquery. j’ai voulu mettre un slide dans mes articles et les 3 que j’ai essayé ne fonctionnent pas à cause de la ligne :
dans footer.php
j’ai essayé d’autres versions de l’ajax dans cette ligne mais rien à faire.
Savez-vous comment je peux corriger le problème ? … sachant que je ne connais rien au javascript et ajax.
merci
@Chiara: Je ne suis désolé, mais je ne comprends pas votre problématique.
Plus de problème : j’ai installé JetPack et grâce à lui j’ai le scroll infini (sans même être un site en wordpress.com) : ça marche super bien et plus de pb d’incompatibilité avec l’Ajax (c’était l’appel du fichier de jquery de google qui posai un pb)
merci de votre réponse et votre tuto qui ne me sers plus mais est vraiment très bien expliqué !!
Bonne suite à votre équipe
Bonjour,
J’utilise ce script depuis quelques temps, il marchait parfaitement jusqu’à la mise à jour vers la version WP 4.0. Depuis, le script fonctionne toujours mais ne s’arrête plus lorsque le dernier article est atteint. Une boucle est faite et repart sur le premier article.
Que puis-je faire ?
Merci !
Voici un exemple de page qui loade à l’infini http://www.vivelapub.fr/geek/
@vivelapub: Je ne serai pas vous dire d’où provient le problème suite au passage à WP 4.0.
Mille merci Jonathan ! Tu m’as été d’une aide précieuse, après avoir passé 48h à essayer de mettre en place un infinite scroll à travers différents tutos ou autre plugins indésirable car lourds pour rien, je suis finalement tombé sur ton article et ta méthode fonctionne comme sur des roulettes.
Excellent tutorial ! J’aurais juste une question est-ce que tu as un fix pour les affichages style mansory ? Car quand il load la page 2, au lieu de l’afficher a la suite il l’affiche par dessus la première page. Ensuite pour la page 3 elle load en dessous de la page 1 et 2 (qui sont l’une sur l’autre) mais sans le style mansory, juste en grid (bizarrement).
Dans tous les cas merci car ta méthode est super.
Merci c’est exactement le genre de script que je cherchais. Cela me parait idéal pour gérer les pages de données que je vais avoir à traiter.
Bonjour Jonathan,
Merci pour ce guide, je cherche à mettre en place un infinite scroll depuis des lustres sur mon site.
En suivant tes explications, je rencontre une erreur : Uncaught TypeError: Cannot read property ‘top’ of undefined infinite-scroll.js.
En lisant les commentaires de l’article j’ai vu que tu disais qu’il fallait adapter le code au template: ce que j’ai fait. L’élement “article” chez toi semble être taggé “works” dans le template que j’utilise.
Néanmoins je recupère toujours la même erreur… Autre observation : tous mes items sont listé en …
As-tu une réponse magique? Je suis au bord de la crise de nerf… Je suis dispo pour te communiquer plus d’infos si tu as 5 min.
Merci par avance pour ton temps et joyeuses fêtes!
Vraiment super ! J’ai cherché un moment avant de tomber sur cette article, c’est ce qu’il me fallait ! Merci, je vais m’empresser d’aller tester tout ça.
Bonjour,
Le système à l’air super mais je ne comprend pas où trouver “article:last” et comment…
Du coup il ne marche pas…
Mais en plus de ça, j’ai un problème de compatibilité avec le jquery importé qui empêche le slider de s’afficher et fait des bugs dans le plugin de userpro…
Vous savez comment parer ce problème ?
Merci d’avance !
Merci pour ce tuto.
j’ai installé infinite scroll et ça marche bien sur mon site. Par contre je voudrais savoir comment remplacer le chargement automatique par un simple clic sur un bouton. Help svp.
Cordialement.
bonjour,
j’ai essayé différents tutos avec pagination ou infinite scroll et rien ne fonctionnait pour moi,
j’ai enfin réussi à faire fonctionner l’infinite scroll grace à votre tuto qui est parfaitement réalisé et permet la compréhension de ce que l’on est entrain de faire.
Cependant, je rencontre un problème que j’ai vu cité plus haut, et je ne trouve pas de solution, cela doit sans aucun doute venir du code de ma boucle et non de l’infinite scroll, mais au lieu de passer à une seconde page, j’ai sans cesse les douze mêmes articles qui se répètent, en boucle, et à l’infini.
Je pense que cela vient de mon code et en trafiquant j’ai rencontré le même problème avec un système de pagination.
Pensez-vous que vous pourriez m’aider à fixer ce problème?
super ce tutoriel, merci pour ce partage qui aide vraiment !
Super Tuto merci beaucoup c’est pile ce qu’il me fallait !!
Petite question cependant pour pouvoir améliorer l’expérience utilisateur : Comment faire pour incrémenter un “ancre” qui te permet de remonter en haut de la page en 1 seul click ?
Merci
Merci pour ce tuto, c’est très tendance en ce moment les défilements infinis. Du coup ça va me servir pour mon site en construction :).
Bonjour,
Super tuto, merci. Par contre comment pourrait-on récupérer les fichiers du tuto, notamment le JS de l’Infinite Scroll ?
Encore merci,
Cris
Le script marche bien pour moi mais ne charge que la page 2, après ça ne veut plus du tout. J’ai bien vérifié et je vois pas mon erreur. :/
Bonjour,
tuto très claire et très utile quand on développe son thème proprement.
Fonctionnement parfaitement.
Merci beaucoup.