Comment ajouter le défilement infini à votre site WordPress (étape par étape)

Le défilement infini est l'une de ces tendances de sites Web qui ont fait leur apparition et disparu au fil des ans. Il est idéal pour les sites riches en contenu comme les blogs, les portails d'actualités et les plateformes de médias sociaux où les utilisateurs apprécient la navigation sans fin.

Si vous cherchez à garder les visiteurs scotchés à votre contenu, le défilement infini pourrait être la solution que vous recherchez. Cette fonctionnalité charge automatiquement le nouveau contenu à mesure que les utilisateurs font défiler la page, de sorte qu'ils n'ont pas à cliquer sur la page suivante.

Mais comment ajouter cela à votre site WordPress ? Ne vous inquiétez pas, car nous avons trouvé 3 moyens faciles d'implémenter le défilement infini, quelles que soient vos compétences techniques.

Pour le défilement infini ou pas ? 🔍

Soyons clairs : le défilement infini n'est pas pour tout le monde. Bien que cet élément de conception Web WordPress fonctionne à merveille pour les sites riches en contenu comme les flux de médias sociaux et les portails d'actualités, il pourrait frustrer les utilisateurs d'un site de commerce électronique qui recherchent des produits spécifiques.

D'après nos observations et notre aide à des millions d'utilisateurs WordPress, le défilement infini fonctionne mieux lorsque vos visiteurs souhaitent parcourir et découvrir du contenu naturellement.

Pensez aux galeries de photos de style Instagram ou aux sites d'actualités comme BuzzFeed où les lecteurs apprécient l'exploration de contenu transparente. Cela peut rendre plus facile et plus agréable pour les visiteurs de parcourir vos articles individuels, surtout s'ils sont sur mobile.

Mais cela peut être frustrant sur des sites ou des annuaires web où les utilisateurs ont besoin d'une navigation claire ou souhaitent trouver rapidement des informations spécifiques.

Une autre considération importante ? Bien que le défilement infini puisse augmenter l'engagement, il doit être implémenté correctement pour éviter de ralentir votre site ou de créer des problèmes d'accessibilité. Donc, si vous voulez l'essayer, il est conseillé d'optimiser les performances de votre site WordPress.

Cela étant dit, examinons comment ajouter le défilement infini WordPress à votre site web. Vous pouvez utiliser ces liens rapides pour passer à une méthode spécifique :

• Option 1 : Utiliser Catch Infinite Scroll pour une configuration rapide
• Option 2 : Ajouter le défilement infini à WooCommerce avec YITH
• Option 3: Advanced Customization with Ajax Load More

Option 1 : Utiliser Catch Infinite Scroll pour une configuration rapide

Lors de nos tests et recherches, nous avons constaté que la meilleure façon d'ajouter le défilement infini est d'utiliser le plugin Catch Infinite Scroll. En plus d'être simple à utiliser, il vous permet également de personnaliser le comportement du défilement infini sur votre site.

La première chose à faire est d'installer et d'activer le plugin Catch Infinite Scroll. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous verrez un nouvel élément de menu intitulé « Catch Infinite Scroll » dans votre tableau de bord WordPress. Cliquez simplement dessus pour configurer les paramètres du plugin.

Nous voulons déclencher le défilement infini lorsque l'utilisateur commence à faire défiler la page vers le bas.

Dans cette optique, ouvrez le menu déroulant « Charger au » et choisissez « Défilement ». Si vous choisissez « Clic », Catch Infinite Scroll affichera un bouton « Charger plus » à la place.

Ensuite, vous pouvez personnaliser le sélecteur de navigation, le sélecteur suivant, le sélecteur de contenu et le sélecteur d'élément. Les paramètres par défaut fonctionnent très bien, vous n'avez donc pas besoin de faire de changements.

La section « Image » affiche l'icône de chargement de contenu que Infinite Scroll montrera lors du chargement du contenu.

Par défaut, il utilise une image GIF de chargement, mais vous pouvez la modifier si vous le souhaitez. Cliquez simplement sur « Télécharger », puis choisissez une image dans la bibliothèque de médias ou téléchargez un nouveau fichier.

Lorsque vous êtes satisfait de la configuration du défilement infini, cliquez sur le bouton « Enregistrer les modifications » pour sauvegarder vos changements.

Maintenant, si vous visitez votre site Web WordPress, vous verrez le défilement infini en action.

Option 2 : Ajouter le défilement infini à WooCommerce avec YITH

YITH Infinite Scrolling est un plugin de défilement infini par YITH, un développeur de plugins WooCommerce. Donc, si vous souhaitez ajouter le défilement infini à vos pages produits, c'est le plugin que nous recommandons. Il fonctionne très bien avec d'autres plugins YITH comme YITH WooCommerce Points and Rewards.

Ce plugin fonctionne dès l'installation, vous pouvez donc simplement l'installer et l'activer pour ajouter le défilement infini à votre site WordPress. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous pouvez visiter votre site web pour voir la nouvelle fonctionnalité de défilement infini en action.

Si vous souhaitez ajuster le défilement infini, vous trouverez quelques réglages simples en allant dans YITH » Infinite Scrolling dans votre tableau de bord WordPress.

Ici, vous pouvez activer et désactiver le défilement infini.

Vous pouvez également modifier l'image ou le GIF que YITH affiche lors du chargement du contenu. Faites simplement défiler jusqu'à la section « Image de chargement », puis téléchargez votre image. Vous pouvez également télécharger une image via une URL.

N'oubliez pas de cliquer sur le bouton « Enregistrer les options ».

Option 3 : Personnalisation avancée avec Ajax Load More

Ajax Load More dispose d'une interface avancée avec de nombreuses options différentes, y compris un modèle répéteur, un générateur de shortcodes et des requêtes WordPress.

Le plugin offre également plus de paramètres de personnalisation, y compris de nombreux styles d'icônes de chargement de page et de styles de boutons.

Compte tenu de cela, il présente une courbe d'apprentissage plus raide et n'est pas recommandé pour les débutants. Cependant, il offre aux utilisateurs plus avancés un contrôle total sur le défilement infini de leur site Web.

Pour un guide détaillé, vous pouvez consulter notre tutoriel sur la création d'un bouton Charger plus d'articles dans WordPress à l'aide du plugin Ajax Load More.

Ajout du défilement infini dans WordPress : FAQ

Avez-vous encore des questions sur l'ajout du défilement infini à votre site Web WordPress ? Discutons de quelques questions fréquemment posées sur cette fonctionnalité de conception.

Le défilement infini est-il bon ou mauvais ?

Le défilement infini a ses avantages et ses inconvénients. Il est idéal pour les sites Web comme les réseaux sociaux, les blogs et les sites d'actualités où les utilisateurs aiment parcourir une variété de contenu. Cependant, pour les sites axés sur des objectifs comme le commerce électronique, cela peut être frustrant pour les utilisateurs qui essaient de trouver des articles spécifiques.

Le défilement infini améliore-t-il les performances ?

Le défilement infini peut faciliter l'accès rapide à plus de contenu pour les utilisateurs, en particulier sur les appareils mobiles où le défilement est naturel.

Cependant, sans optimisation appropriée, il peut ralentir les temps de chargement des pages, en particulier avec de gros fichiers multimédias. C'est pourquoi il est judicieux de suivre les meilleures pratiques en matière de vitesse et de performance des sites Web.

Le défilement infini est-il mauvais pour le SEO ?

Sans optimisation appropriée, le défilement infini peut être mauvais pour le SEO WordPress. Les moteurs de recherche peuvent ne pas indexer tout le contenu car ils ne font pas défiler automatiquement vers le bas.

Mais il existe des moyens de l'optimiser pour un meilleur référencement. Vous pouvez ajouter un bouton « charger plus » à l'aide d'AJAX afin que les moteurs de recherche reconnaissent le contenu supplémentaire, utiliser le balisage Schema pour clarifier votre contenu pour les moteurs de recherche, et précharger les liens vers le contenu à venir.

Le défilement infini est-il meilleur que la pagination ?

Le fait que le défilement infini soit meilleur que la pagination dépend de ce qui fonctionne le mieux pour votre site Web et vos utilisateurs. Le défilement infini offre une expérience transparente, tandis que la pagination offre une structure plus claire. Les deux ont leurs avantages, alors choisissez en fonction de votre contenu et des préférences de votre public.

Apprenez d'autres façons d'optimiser la conception de votre blog WordPress

Vous voulez plus de conseils et d'astuces pour améliorer votre blog WordPress ? Consultez ces guides :

• Comment ajouter un effet parallax à n'importe quel thème WordPress
• Comment ajouter un redimensionneur de police dans WordPress pour l'accessibilité
• Comment créer un séparateur de forme personnalisé dans WordPress
• Astuces de barre latérale WordPress pour obtenir des résultats maximum
• Comment ajouter une barre de défilement personnalisée à n'importe quel élément dans WordPress
• Comment surligner du texte dans WordPress (Guide pour débutants)
• Comment ajouter du contenu dynamique dans WordPress (Guide pour débutants)

Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter le défilement infini à votre site WordPress. Vous voudrez peut-être aussi consulter notre guide pour débutants sur comment modifier votre site Web WordPress et nos sélections d'experts des meilleures alternatives à Canva pour les graphiques de sites Web.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.