Lorsque vous concevez des sites WordPress pour vos clients, la convivialité est un facteur important à considérer. Cependant, certaines des techniques utilisées pour améliorer l’expérience utilisateur (UX) sur un site, peuvent ne pas être les meilleures méthodes pour un autre.

Le défilement infini est une tactique que les développeurs et les concepteurs utilisent pour garder les visiteurs du site engagés. Alors que certains posent qu’il peut effectivement nuire à l’utilisabilité des sites Web, il existe de nombreux cas dans lesquels il peut être bénéfique.

Dans ce post, nous allons expliquer ce qu’est le défilement infini et quels types de sites peuvent en bénéficier. Puis nous vous guiderons à travers trois méthodes que vous pouvez utiliser pour ajouter cette fonctionnalité aux sites Web de vos clients. Commençons !

Une introduction au défilement infini

Le défilement infini est une technique de conception web dans laquelle le nouveau contenu est automatiquement chargé lorsqu’un visiteur atteint le bas de la page. Le résultat est un flux régulier, apparemment sans fin, de contenu.

Les exemples populaires de sites qui utilisent le défilement infini sont les réseaux sociaux tels que Facebook, Twitter et Pinterest. Vous pouvez également le voir sur des sites de blog et de divertissement tels que Mashable et Buzzfeed :

Il y a de nombreux avantages à intégrer le défilement infini sur ces sites Web. Le plus évident est qu’il permet de gagner du temps et de fournir à vos utilisateurs davantage de contenu sans qu’ils aient besoin de cliquer sur un bouton Lire la suite ou sur des liens de pagination.

Avec moins de distractions, le flux automatique de contenu peut également signifier que les utilisateurs restent plus longtemps, ce qui peut se traduire par des taux d’engagement plus élevés. De plus, cette fonctionnalité est adaptée aux mobiles.

Cependant, tous les sites Web ne sont pas adaptés au défilement infini. Par exemple, si vous avez un site Web axé sur les objectifs, comme une boutique de commerce électronique, cela peut rendre difficile pour les utilisateurs de trouver ce qu’ils recherchent. Il peut également avoir un impact sur les performances du site s’il n’est pas optimisé correctement.

En revanche, si vous avez un site avec une structure linéaire, il peut être très bénéfique. Le défilement infini peut être particulièrement utile à des fins de narration, que ce soit par le biais d’articles de blog de longue forme ou de contenu visuel tel que des images.

Comment ajouter le défilement infini aux sites Web des clients (3 méthodes)

Si vous créez des sites Web de clients qui sont axés sur le contenu, vous pourriez envisager d’ajouter une fonction de défilement infini. Jetons un coup d’œil à trois méthodes que vous pouvez utiliser pour le faire.

Utiliser un plugin de défilement infini

L’une des méthodes les plus rapides et les plus faciles que vous pouvez utiliser pour ajouter le défilement infini aux sites Web de vos clients est d’utiliser un plugin. Certains, comme Jetpack, comprennent des fonctionnalités pour mettre en œuvre cet élément de conception.

Il n’y a pas trop de plugins autonomes de défilement infini. Cependant, un populaire que nous recommandons d’utiliser est Ajax Load More:

Ce plugin est gratuit et facile à utiliser, bien qu’il nécessite quelques connaissances en programmation. Il vous permet d’ajouter le défilement infini pour les articles, les pages et les commentaires à chargement paresseux.

Après avoir installé et activé le plugin, vous pouvez configurer les paramètres de requête WordPress pertinents en fonction des différents types de contenu. Sur la page des paramètres, vous pouvez ajuster et personnaliser la façon dont Ajax Load More se comporte sur les sites Web de vos clients. Par exemple, vous pouvez ajouter votre propre CSS personnalisé :

Le plugin comprend également un Shortcode Builder que vous pouvez utiliser pour modifier rapidement les pages et les articles à partir de votre éditeur de contenu ou de vos fichiers de modèle. Une autre fonctionnalité du plugin qui vaut la peine d’être vérifiée est ses modèles de répétiteur:

Vous pouvez créer votre propre modèle de répétiteur et ajuster la façon dont le HTML et le PHP fonctionnent dans le shortcode. Vous pouvez également inclure plusieurs instances du plugin Ajax Load More sur un seul article, une seule page ou un seul modèle.

Bien que le plugin gratuit offre de nombreuses fonctionnalités pour le défilement infini, il existe également une version premium qui débloque l’accès à plus de modèles. Pour en savoir plus, vous pouvez consulter la documentation et la page de support d’Ajax Load More.

Choisissez des thèmes avec le défilement infini intégré

Si vous ne voulez pas ajouter un autre plugin sur les sites de vos clients, ne vous inquiétez pas. Vous pouvez accomplir le même effet en utilisant un thème qui a le scroll infini intégré.

Bien sûr, cette voie n’est pas la plus pratique pour les sites existants. Changer le thème d’un site nécessite souvent un rebranding important. Cela ne vaut pas exactement la peine de se donner du mal juste pour avoir accès à une fonction de défilement infini – surtout si l’on considère que vous pouvez y parvenir en utilisant d’autres méthodes.

Il y a un nombre sain de thèmes WordPress qui incluent cette fonctionnalité. Vous pouvez parcourir le répertoire des thèmes WordPress et rechercher par la fonction de défilement infini :

Bien que le thème lui-même puisse être gratuit, gardez à l’esprit que vous devrez peut-être passer à la version premium pour utiliser le défilement infini. Cependant, il y en a qui offrent la fonctionnalité gratuitement, comme Minimal Dark.

Une fois que vous trouvez un thème que vous aimez et qui inclut la fonctionnalité, téléchargez et installez-le comme vous le feriez pour n’importe quel autre thème. La plupart incluront la fonctionnalité dans le personnalisateur de thème.

Par exemple, avec Minimal Dark, vous pouvez trouver l’option de défilement infini en allant dans Apparence > Personnalisation > Options du thème > Options de pagination:

Si vous voulez des fonctionnalités plus avancées, vous pouvez envisager un thème premium. Theme Forest a une large sélection qui inclut le défilement infini.

Les instructions pour activer et utiliser la fonction de défilement infini dépendront du thème que vous utilisez. Par conséquent, il est préférable de vérifier la documentation du développeur pour obtenir des conseils.

Ajouter manuellement du code à votre site

Une troisième méthode pour mettre en œuvre le défilement infini – et celle qui peut être préférée si vous êtes un développeur expérimenté – est d’ajouter manuellement du code à votre site. Cette option vous donne plus de contrôle et élimine le besoin d’installer un plugin supplémentaire.

Plus, vous pouvez utiliser ce code sur des sites avec des thèmes qui ne viennent pas avec le défilement infini intégré. La première étape consiste à activer la fonctionnalité par le biais du fichier functions.php de votre thème.

Pour ce faire, ajoutez le code suivant au fichier :

Une fois ceci terminé, l’étape suivante consiste à configurer la fonction Render Parameter. C’est la partie du code qui traite du chargement des articles pour le défilement infini dans une boucle.

Pour faire en sorte que les articles soient continuellement chargés, ajoutez la fonction mytheme_infite_scroll_init au fichier functions.php de votre thème comme suit:

function mytheme_infinite_scroll_render(){get_template_part( 'loop' );}

Une fois que vous avez ajouté ces deux extraits, vous devriez être prêt à partir. Toutefois, si cela ne fonctionne pas, vous devrez peut-être modifier le thème du site. Les produits plus anciens et obsolètes peuvent ne pas prendre en charge le défilement infini du tout.

Conclusion

Le défilement infini n’est pas pour tout le monde. Cependant, il y a certains sites Web, tels que les blogs et d’autres publications en ligne à fort contenu, où il peut fournir une meilleure UX et même augmenter l’engagement.

Dans cet article, nous avons discuté de trois méthodes que vous pouvez utiliser pour ajouter le défilement infini aux sites Web de vos clients :

1. Utiliser un plugin de défilement infini.
2. Choisir des thèmes avec le défilement infini intégré.
3. Ajouter manuellement du code à votre site.

.