skip to Main Content

Comment ajouter le défilement infini sur un blog WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Y at-il quelque chose de plus addictif que le flux d’actualité de Facebook ? Je veux dire, je suis assis ici en train d’écrire ce tutoriel, mais cette fonctionnalité addictive ne cesse d’être défilée encore … encore … et encore.

C’est une fonctionnalité que Facebook utilise, qui se nomme : « défilement infini » ou encore « défilement sans fin », pour le flux d’actualité.

Plutôt que d’avoir à cliquer sur un bouton ou « Suivant » ou « Lire Plus », le contenu ne cesse de se charger lorsque vous faites défiler la page.

Et devine quoi ? Vous pouvez obtenir le même effet sur votre blog WordPress en ajoutant un défilement infini.

Dans ce tutoriel, je vais discuter de certains des avantages et des inconvénients du défilement infini et puis je vais vous montrer comment configurer un défilement infini sur votre blog WordPress.

Mais avant, si vous n’avez jamais installé WordPress découvrez Comment installer un blog WordPress en 7 étapes et Comment rechercher, installer et activer un thème WordPress sur votre blog 

Ensuite revenons vers ce pourquoi nous sommes là.

Avantages du défilement infini

Beaucoup de grandes marques ont expérimenté le défilement infini, ce qui nous donne l’avantage d’être en mesure d’examiner leurs données. Voici quelques-uns des avantages qui ont été expérimentées par les réseaux sociaux :

En passant découvrez comment créer un texte défilant sur Divi

  • Plus Vues – NBC News a trouvé que utilisateurs des postes fixes ont visité 20% plus de pages par visite avec le défilement infini. De même, « Times » a également constaté que 21% de ses utilisateurs ont opté pour la suite du contenu avec un défilement infini.
  • Taux de rebond très bas  – « Times » a également réduit son taux de rebond de 15% quand ils ont opté pour le défilement infini.
  • Expérience utilisateur améliorée – Avec cela, tout le monde est d’accord. Certains experts ont déclaré que le « défilement infini » stimule UX en offrant aux utilisateurs une exposition du contenu, obligeant les utilisateurs à cliquer moins, et tout en offrant généralement une meilleure expérience mobile.

Je ne peux pas dire avec certitude que vous obtiendrez les mêmes résultats que ces grandes marques, mais si vous avez beaucoup d’article de blog, le défilement sera certainement une bonne option.

Découvrez quand et comment installer WordPress dans un sous-répertoire

La plupart des réseaux sociaux comptent sur le défilement infini pour ces mêmes raisons.

Inconvénients avec le défilement infini

Tout n’est pas toujours rose avec le défilement infini. Il y a certainement quelques points négatifs potentiels que vous devez envisager :

  • Pas de pied de page – vous perdez sur votre pied de page, lorsque vous optez pour le défilement infini. Ce sera un fort handicap si vous souhaitez proposer plus d’information dans le pied de page. Par exemple, si vous utilisez votre pied de page pour afficher des informations sur l’affiliation, vous aurez besoin de trouver une nouvelle façon d’afficher ces informations.
  • Barre de défilement rebondissant entraîne une mauvaise expérience  – Parce que le site web est toujours en chargement, il est fort probable que la longueur des barres de chargement change, ce qui peut faire perdre le fil de la lecture, entraînant par la même occasion une mauvaise expérience utilisateur.
  • Aucun sentiment « d’achèvement » – Il ne s’agit pas d’insinuation. Les chercheurs Nielsen ont trouvé que les utilisateurs ressentent de l’achèvement lorsqu’ils atteignent la fin d’une page. Le défilement infini rend cela impossible.

En outre, dans la section des «Avantages», le défilement infini est bon quand vous avez beaucoup d’article de blog d’égale importance. Eh bien, le contraire est aussi vrai :

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Consultez aussi dans cet article comment corriger l’erreur « dossier temporaire manquant » sur WordPress

Si vos articles ont une importance inégale (par exemple, certains articles ont jusqu’à 2.000 mots et certains n’ont que 300 mots), alors le défilement infini, n’est certainement pas une bonne idée pour votre site web.

Comment ajouter le défilement infini sur WordPress

Pour ajouter le défilement infini sur WordPress, vous pouvez utiliser un plugin gratuit nommé « Ajax Loader More ». Ce plugin propose des tonnes d’extensions premium qui peuvent stimuler sa fonctionnalité, mais la version gratuite devrait être suffisante pour ajouter simplement un défilement infini à votre site web.

Allez plus loin aussi en consultant Javascript sur WordPress: cas d’utilisation d’AJAX

Le plugin de base fonctionne en générant un shortcode que vous ajoutez à une page. Cette page affiche alors vos articles de blog dans un défilement infini. Il y a quelques autres petites étapes, que vous aurez également besoin de compléter durant tout le parcours. Voici comment mettre tout cela en place :

Installation et configuration du plugin

Vous pouvez trouver « Ajax Loader More » sur le répertoire de plugins WordPress. Installez et activez le plugin comme vous le feriez pour tout autre plugin.

Une fois qu’il est activé, vous verrez une toute nouvelle option « Ajax Load More ». Accédez à « Ajax Load More >  → Repeater Template » pour créer votre modèle.

« Votre modèle > Repeater » est le modèle qui définit la façon avec laquelle les articles devraient s’afficher dans un défilement infini. Vous pouvez le modifier, mais il faut connaître un peu de PHP. Cependant, le modèle par défaut devrait être très bien pour la plupart des utilisateurs:

construction-dun-model-wordpress

La seule chose importante à noter est que le modèle « Repeater» par défaut n’affichera que des extraits d’article, et non pas les articles complets. Si vous souhaitez afficher les articles complets, vous devez remplacer « the_excerpt() » par « the_content() ».

Si vous maîtrisez le PHP, vous pourrez encore personnaliser ce modèle. Sinon, c’est tout à fait bien de laisser le modèle « Repeater » par défaut.

Il y a beaucoup de chose que vous pouvez configurer ici. Vous avez la possibilité de modifier ce qui s’affichera dans le défilement infini et de comment tout cela se comportera.

Je ne peux pas citer toutes les possibilités dans cet article, mais voici quelques-unes des cases que vous aurez certainement envie de remplir :

  • post_type – La valeur par défaut est d’inclure uniquement les articles. Mais vous pouvez également inclure des pages ou des formats de publication personnalisés.
  • category – Vous pouvez inclure uniquement certaines catégories, ou vous ne pouvez exclure certaines catégories.
  • author – C’est une fonctionnalité intéressante où vous pouvez ajouter un défilement infini pour un auteur spécifique.
  • posts_per_page – Définir le nombre d’article que « Ajax Loader More » devrait charger chaque fois qu’il se rafraîchit.
  • pause – C’est certainement un élément important. Pour un vrai  scrolling infini, vous devriez le définir à « false » ici. Sinon, les utilisateurs devront cliquer pour faire apparaître les autres articles.
  • scroll – La chose importante est que vous activez cette fonctionnalité afin que les articles soient automatiquement chargés au fur et à mesure que les utilisateurs font défiler la page.

Une fois que vous avez tout configuré, copiez le shortcode sur le côté droit de la page:

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

copier-le-shortcode-ajax-loader-more

Tout ce que vous devez faire est d’ajouter ce shortcode à la page où vous souhaitez que votre défilement infini apparaisse. Par exemple, vous pouvez l’ajouter à une page appelée « Blog » pour en faire votre page de blog par défaut.

Découvrez aussi quelques plugins WordPress premium  

Vous pouvez utiliser d’autres plugins WordPress pour donner une apparence moderne et pour optimiser la prise en main de votre blog ou site web.

Nous vous proposons donc ici quelques plugins WordPress premium qui vous aideront à le faire.

1. Youtube & Vimeo Pagination Gallery

Ce plugin WordPress est une galerie responsive et mobile avec de nombreuses fonctionnalités entièrement paramétrables. Il peut afficher des vidéos à partir dune playlist YouTube, des mots-clés ou de la recherche par album, chaîne, groupe ou mot-clé de Vimeo. Les grilles peuvent être personnalisées de plusieurs manières. La galerie Lightbox peut afficher le lecteur avec tous les détails de la vidéo, y compris les commentaires.

Ce plugin WordPress peut être utilisé dans n’importe quelle publication ou zone de page en utilisant des shortcodes ou directement dans les pages PHP. Tout ce dont vous avez besoin est de créer une nouvelle galerie, d’ajouter YouTube Channel ID par exemple, et de générer un shortcode. Plusieurs galeries peuvent être utilisées dans la même page.

Télécharger | Démo | Hébergement Web

2. WooCommerce Infinite Scroll and Ajax Pagination

WooCommerce Infinite Scroll and Ajax Pagination est une extension WordPress (WooCommerce) qui aide à convertir la pagination par défaut d’un produit en une pagination illimitée défilante ou Ajax. Lorsqu’un utilisateur défile vers le bas de page, la page suivante de produits est automatiquement récupérée et ajoutée. Cela signifie qu’il n’a pas besoin de cliquer sur ‘Page suivante’. 

WooCommerce Infinite Scroll and Ajax Pagination

Vous pouvez également ajouter un bouton « Charger plus » à la place du défilement illimité, ou vous pouvez garder la pagination par défaut et la convertir en Pagination Ajax.

En outre, vous pouvez définir différents types de pagination pour les appareils mobiles, comme le défilement illimité pour les appareils à grand écran et le bouton « Charger plus » pour les appareils mobiles.

Télécharger | Démo | Hébergement Web

3. YouTube Videos To WordPress Posts

YouTube Videos To WordPress Posts est un plugin permet aux utilisateurs d’importer des vidéos de YouTube vers WordPress de la manière la plus simple possible. Vous aurez la possibilité d’importer les vidéos par utilisateur, chaîne, requête, id, et vous pourrez aussi les importer en masse pour gagner du temps.

Ses principales fonctionnalités sont :  la possibilité de tester toutes les fonctionnalités avant d’acheter le plugin, un support client courtois et réactif, une conception simple et de puissantes options pour vous permettre de configurer facilement l’importation de vos vidéos, l’importation en masse ou par pagination ou encore programmée, l’insertion des vidés YouTube dans n’importe quel type de contenu disponible sur votre site web, la possibilité d’importer des commentaires, des balises, des catégories et toutes les autres infos vidéo (image miniature, nombre de vues, goûts, aversions, durée, etc), une documentation détaillée et plus.

Télécharger | Démo | Hébergement Web

Créez Facilement votre blog avec SiteGround

SiteGround vous permet de créer votre blog WordPress en quelques clics seulements. Nom de domaine gratuit, hébergement sécurisé, SSL, transfert et bien plus encore... [ Recommandé ]

Ressources recommandées

Découvrez d’autres ressources recommandées qui vous accompagneront dans la création et la gestion de votre site web.

Conclusion

Voilà ! C’est tout pour ce tutoriel, désormais, vous avez la possibilité de configurer un défilement infini sur votre blog WordPress. N’hésitez pas à le partager avec vos amis sur vos réseaux sociaux préférés

Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress.

Si vous avez des suggestions ou des remarques, laissez-les dans notre section commentaires.

… 

Cet article comporte 3 commentaires

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Thèmes WordPress cool que j'ai trouvé sur
Et il y a plus de 50 000 thèmes et modèles parmi lesquels choisir!

Back To Top
16 Partages
Partagez12
Tweetez1
Enregistrer3
WhatsApp