Infinite scroll et Twenty Thirteen

Infinite Scroll et Twenty Thirteen

Vous voulez mettre en place le chargement infini sur vos pages d’articles ? Votre thème WordPress est Twenty Thirteen ? Cet article peut vous aider. Voyons comment configurer, et surtout quels paramètres utiliser pour l’extension Infinite Scroll.

Infinite Scroll ?

D’abord, l’infinite scroll, ou chargement infini sert à ne plus avoir de bouton ‘Page précédente’ ou ‘Page suivante’ pour sur les listes d’articles.

Infinite Scroll et Twenty Thirteen : Les boutons de navigation
Les boutons de navigation et…
La liste est mise à jour avec les articles suivants, automatiquement, au moment où le visiteur arrive à la fin de celle-ci.

Il existe plusieurs moyens pour intégrer cette fonctionnalité à votre blog.

Si vous utilisez déjà l’extension multi usages JetPack, vous pouvez activer la fonctionnalité ‘Chargement infini’.

Il est même possible de mettre en place un scroll infini sans plugin.

Enfin, certains thèmes proposent cette fonctionnalité intégrée directement.

Infinite Scroll et Twenty Thirteen : le chargement des articles suivants
…le chargement des articles suivants
Dans cet article, j’utilise l’extension Infinite Scroll, assez populaire et plutôt éprouvée.

Inconvénients du scroll infini

Cette façon d’afficher les articles automatiquement propose tout de même quelques inconvénients. Sinon ce serait trop beau.

Selon votre but, ces inconvénients peuvent plus ou moins vous impacter, à vous de choisir d’utiliser de l’activer, ou non.

Sur les listes d’articles, si votre site ou votre blog propose un nombre conséquent d’articles (félicitations), le pied de page de votre site ne sera jamais visible pour vos visiteurs.
La raison : à chaque fois que le bas de la page est atteint, de nouveaux articles arrivent et le décale hors de la surface affichée.

Un autre inconvénient : accéder à une page donnée de la liste d’articles est presque impossible.

Enfin, les outils d’analyse ne peuvent pas tracer le comportement de vos visiteurs.

Une note à propos du SEO : l’utilisation du scroll infini peut poser des problèmes si les pages sont générées à la volée avec JavaScript. En effet les robots des moteurs de recherches n’auront certainement jamais accès au contenu, comme ils lisent le contenu de manière brute.
L’extension que nous allons voir n’agit que si JavaScript est activé. Dans le cas contraire, le comportement du site est celui d’origine : il présente les boutons de navigation. En clair : c’est tout bon.

Les paramètres

Infinite Scroll et Twenty Thirteen : La configuration pour Twenty Thirteen
La configuration pour Twenty Thirteen
Les paramètres à modifier varient d’un thème à l’autre.

Voici ceux pour Twenty Thirteen, à définir dans Réglages/Infinite scroll :

  • Content selector : #content
  • Navigation selector : .paging-navigation
  • Next selector : .nav-previous a:first
  • Item selector : .post
  • Loading message : Chargement…
  • Finished message : Fin de la liste atteinte, plus rien à charger

Les deux derniers paramètres correspondent respectivement au texte à afficher pendant le chargement des articles suivants et lorsque le dernier article est atteint.

D’ailleurs, ce deuxième message disparaît quelques secondes après être apparu.

Le mot de la fin

Depuis cette semaine, la nouvelle version de WordPress est sortie, incluant déjà son nouveau thème : Twenty Fourteen, qui s’annonce être une nouvelle fois un excellent cru.

En plus de rendre cet article presque déjà obsolète, cette sortie remet un peu en cause mes plans, mais rien de bien grave, je vais essayer tout ça, avec assurément de nouvelles perspectives à partager avec vous.

Et comme c’est le thème pour 2014, et que cet article est le dernier de 2013, j’en profite pour vous souhaiter d’excellentes fêtes de fin d’années, et je vous dis à… Twenty Fourteen !

Cet article vous a été utile ? Partage it !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.