Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Note éditoriale : Nous percevons une commission sur les liens des partenaires sur WPBeginner. Les commissions n'affectent pas les opinions ou les évaluations de nos rédacteurs. En savoir plus sur Processus éditorial.

Voulez-vous ajouter le défilement infini à votre blog WordPress ?

Le défilement infini charge automatiquement le contenu de votre page suivante afin que les internautes n’aient pas à cliquer sur les liens de pagination ou sur le bouton « load more » en bas de page.

Dans cet article, nous allons vous afficher comment ajouter facilement le défilement infini sur votre blog WordPress, étape par étape.

How to Add Infinite Scroll to Your WordPress Site (Step by Step)

Pourquoi ajouter le défilement infini à votre site WordPress ?

Le défilement infini est une tendance de conception web qui utilise la technologie de chargement de page AJAX pour charger automatiquement la page de contenu suivante et l’afficher à la fin de la page actuelle. Cela peut rendre plus facile et plus agréable la navigation des internautes dans votre contenu.

Au lieu de cliquer sur des liens pour en savoir plus, le défilement infini charge automatiquement le nouveau contenu au fur et à mesure que les utilisateurs/utilisatrices défilent vers le bas. Cette expérience plus fluide peut inciter les internautes à rester plus longtemps sur votre site et augmenter le nombre de pages vues.

Pagination on a WordPress website

Cela dit, le défilement infini n’est peut-être pas le meilleur choix pour tous les types de sites, comme les répertoires web où chaque page représente une lettre différente de l’alphabet. Si vous utilisez le défilement infini, vous ne pouvez pas non plus afficher de pied de page sur votre blog WordPress.

De plus, le défilement infini pourrait mettre une pression supplémentaire sur votre serveur. Donc, si vous voulez l’essayer, c’est une bonne idée d’optimiser les performances de votre site WordPress.

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

Méthode 1 : Ajouter un défilement infini avec Catch Infinite Scroll (Recommandé)

Au cours de nos tests et recherches, nous avons trouvé que la meilleure façon d’ajouter le défilement infini est avec l’extension Catch Infinite Scroll. En plus d’être simple à utiliser, il vous permet de personnaliser le comportement du défilement infini.

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 l’installation d’une extension WordPress.

Une fois activé, vous verrez un nouvel élément de menu libellé  » Catch Infinite Scroll  » dans votre Tableau de bord WordPress. Il suffit de lui donner un clic pour configurer les réglages de l’extension.

Adding infinite scroll to your WordPress website

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 « Chargement sur » et choisissez « Défilement ».

Adding infinite scroll to your WordPress blog

Si vous choisissez « Cliquer », 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’article. Les réglages par défaut fonctionnent très bien, il n’est donc pas nécessaire d’y apporter des modifications.

La section « Image » affiche l’icône du chargeur de contenu qu’Infinite Scroll affichera 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éverser » et choisissez une image dans la médiathèque ou téléversez un nouvel outil.

Creating an infinite scrolling animation

Lorsque vous êtes satisfait de la façon dont le défilement infini est configuré, cliquez sur le bouton « Enregistrer les modifications » pour stocker vos modifications.

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

WordPress Infinite Scroll Preview

Méthode 2 : Ajouter le défilement infini avec YITH Infinite Scrolling (Facile)

Si vous recherchez une alternative simple sans aucun réglage à définir, alors vous pouvez essayer YITH Infinite Scrolling.

Cette extension fonctionne dès le départ, 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 l’installation d’une extension WordPress.

Dès qu’elle est activée, vous pouvez visiter votre site pour voir la nouvelle fonctionnalité de défilement infini en action.

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

The YITH Infinite Scrolling WordPress plugin

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

Vous pouvez également modifier l’image ou le GIF que le Modifié affiche lors du chargement du contenu. Il vous suffit de défiler jusqu’à la section  » Image de chargement « , puis de cliquer sur  » Téléverser « .

How to change the loading icon

Ensuite, choisissez une image dans la médiathèque de WordPress ou téléversez une nouvelle image depuis votre ordinateur.

Méthode 3 : Ajouter un défilement infini avec Ajax Load More (Avancé)

Ajax Load More dispose d’une interface avancée avec de nombreuses options différentes, notamment un modèle de répéteur, un constructeur de codes courts et des requêtes WordPress.

L’extension offre également davantage de réglages de personnalisation, notamment de nombreux styles d’icônes de chargement de page et de boutons.

C’est pourquoi sa courbe d’apprentissage est plus raide et il n’est pas recommandé aux débutants. Cependant, il permet aux utilisateurs/utilisatrices plus avancés de contrôler entièrement le défilement infini de leur site.

Pour un guide détaillé, vous pouvez consulter notre tutoriel sur la création d’un bouton charger plus de publications dans WordPress en utilisant l’extension Ajax Load More.

The AJAX Load More WordPress plugin

Ajout d’un défilement infini dans WordPress : FAQ

Avez-vous encore des questions sur l’ajout du défilement infini à votre site 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 tels que les réseaux sociaux, les blogs et les sites d’information, où les utilisateurs/utilisatrices aiment parcourir une grande variété de contenus. Cependant, pour les sites axés sur les objectifs comme le commerce électronique, il peut être frustrant pour les utilisateurs/utilisatrices qui essaient de trouver des articles spécifiques.

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

Le défilement infini peut permettre aux utilisateurs/utilisatrices d’accéder plus facilement et rapidement à davantage de contenu, en particulier sur les appareils mobiles où le défilement est naturel.

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

Le défilement infini est-il mauvais pour le référencement ?

Sans une optimisation appropriée, le défilement infini peut être mauvais pour le référencement de WordPress. Les moteurs de recherche peuvent ne pas indexer tout le contenu puisqu’ils ne défilent pas automatiquement.

Mais il existe des moyens de l’optimiser pour un meilleur référencement. Vous pouvez ajouter un bouton « load more » à l’aide d’AJAX afin que les moteurs de recherche reconnaissent le matériel 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 préférable à la pagination ?

La question de savoir si le défilement infini est préférable à la pagination dépend de ce qui fonctionne le mieux pour votre site et vos utilisateurs/utilisatrices. Le défilement infini offre une expérience transparente, tandis que la pagination fournit une structure plus claire. Les deux ont leurs avantages, alors choisissez en fonction de votre contenu et des préférences de votre public.

Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter le défilement infini à votre site WordPress. Vous voudrez peut-être aussi apprendre comment augmenter le trafic de votre blog ou consulter nos choix d’experts pour les plugins WordPress incontournables pour développer votre site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

22 commentairesLaisser une réponse

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    How does the search bot behave with infinite scrolling? Can it load the site content, does it only load the first page and skip the rest of the content? I’m interested in this for SEO reasons.

    • WPBeginner Support says

      Search plugins would normally scan all of your content but it would depend on the infinite scroll solution for how it would interact with your search in terms of displaying the results.

      Administrateur

  3. Ben says

    Hi, When using infinite scroll and the user clicks on a post the back button takes them to the top of the list rather than where they were before.
    Is there a fix for this?

    • WPBeginner Support says

      Not at this time, you would want to reach out to the plugin’s support for the possibility to add that feature in the future.

      Administrateur

    • WPBeginner Support says

      You would want to reach out to elementor’s support for that question as elementor’s settings would be the ones your site follows.

      Administrateur

    • WPBeginner Support says

      You would want to check with the support for the plugin you are using for if that is an option or if they have a recommended method for setting that up.

      Administrateur

  4. Max says

    Hi, great post as usual! Is there also a solution to implement a sorting by a category or a tag that the user can choose like in the Neil Patel’s blog listing page?! Thank you in advance.

  5. Fman says

    Hi there wpbeginner!

    I would like to add infinite scroll to related products on my woocommerce site, how do we do that ?

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.