Vous voulez ajouter une barre de progression de lecture à WordPress ?
Une barre de progression de lecture est un excellent moyen d’améliorer l’expérience utilisateur de votre site en donnant aux lecteurs un indicateur visuel de leur progression dans un article.
Si vous souhaitez en ajouter une à votre site, il existe une tonne d’extensions gratuites ou abordables qui vous aideront à ajouter une barre de progression et à assortir son design au reste de votre site.
Dans cet article, nous avons rassemblé 8 des meilleures options, dont 6 sont entièrement gratuites.
Ci-dessous, nous partagerons les détails de chaque extension, ainsi qu’une introduction rapide au fonctionnement des barres de progression et aux raisons pour lesquelles elles peuvent être bénéfiques pour votre site.
Qu’est-ce qu’une barre de progression de lecture ?
Une barre de progression de lecture fait exactement ce que son nom indique : elle permet aux visiteurs de votre site de voir à quel point ils ont progressé dans le contenu de votre article.
En général, vous collez une barre horizontale en haut ou en bas de la page. Au fur et à mesure que les utilisateurs font défiler l’article, la barre se « remplit » pour indiquer à quel point ils sont proches de la fin du contenu.
Certaines extensions vous donnent également la possibilité de créer une barre de progression verticale à gauche ou à droite du contenu. Dans ces cas, elle ressemble presque à une barre de défilement. Toutefois, la principale différence est que la barre de progression sera basée sur la longueur du contenu réel, alors que la barre de défilement du navigateur est basée sur la longueur totale de la page.
Voici deux exemples réels de la manière typique dont les sites utilisent les barres de progression de lecture..
HubSpot ajoute une barre de progression orange qui apparaît directement sous son en-tête épinglé :
Cependant, vous pouvez expérimenter différents placements de la barre de progression en fonction de votre site.
Pourquoi ajouter une barre de progression de lecture à WordPress ?
À un niveau élevé, une barre de progression de lecture est un moyen d’améliorer la convivialité et l’expérience utilisateur sur votre site, ce qui peut avoir des effets plus directs sur des mesures importantes telles que le temps sur la page et le taux de rebond.
Tout d’abord, parlons de l’expérience utilisateur en général.
La plupart des gens veulent savoir dans quoi ils s’engagent avant de prendre le temps de lire votre article. S’agit-il d’un article de 5 minutes qu’ils peuvent lire entre deux tâches ou d’un long article de 20 minutes qui exigera une grande concentration ?
Une barre de progression donne aux lecteurs une bonne idée de ce qu’ils peuvent attendre de votre article lorsqu’ils commencent à lire. Pour aider à cela, certains sites ajoutent également une estimation du temps de lecture en plus de la barre de progression, ce que plusieurs des extensions ci-dessous prennent en charge.
Une fois que vos visiteurs commencent à lire, la barre de progression peut également les encourager à terminer l’article. Par exemple, si un lecteur voit qu’il a déjà parcouru 80 % du contenu, il sera encouragé à terminer les derniers 20 % car il a déjà parcouru la majeure partie de l’article.
Ces améliorations de l’expérience utilisateur peuvent avoir des effets positifs sur deux indicateurs clés :
- Temps d’attente – en encourageant les lecteurs à terminer un article après en avoir commencé la lecture, vous pouvez augmenter le temps qu’ils passent sur la page.
- Taux de rebond – en augmentant le temps que les visiteurs passent sur votre page, vous augmentez les chances qu’un visiteur continue à s’engager sur votre site (peut-être en lisant un autre article), ce qui peut contribuer à réduire votre taux de rebond.
Si vous combinez les barres de progression avec d’autres tactiques d’amélioration de l’expérience utilisateur, comme une structure de navigation de qualité et une utilisation intelligente de la pagination, vous pouvez créer une expérience vraiment agréable et engageante pour les visiteurs.
8 meilleurs plugins WordPress de barre de progression de lecture
Maintenant, passons aux 8 meilleures extensions WordPress de barre de progression de lecture pour vous aider à ajouter une barre de progression de lecture à votre site.
Bien que vous puissiez trouver des extensions de barre de progression génériques qui vous permettent de créer une barre de progression personnalisée pour n’importe quoi, cet article est spécifiquement axé sur les extensions qui ajoutent des indicateurs de progression de lecture basés sur la longueur du contenu d’une page.
En termes de prix, 6 de ces extensions sont entièrement gratuites, tandis que les 2 extensions restantes sont abordables et ajoutent une certaine flexibilité supplémentaire que vous ne trouverez pas dans la plupart des options gratuites.
Le meilleur de tout, toutes ces extensions devraient fonctionner avec à peu près n’importe quel thème WordPress.
Read Meter
Read Meter est une extension de barre de progression de lecture de Brainstorm Force, la même équipe derrière le populaire thème WordPress Astra (qui a fait notre liste des thèmes WordPress les plus rapides).
L’extension vous permet d’ajouter automatiquement une barre de progression de lecture qui se colle tout en haut ou tout en bas de la page. Vous avez également la possibilité d’afficher le temps de lecture estimé de l’article en même temps que la barre de progression.
Voici tout ce que vous obtiendrez avec Read Meter :
- Placement en haut ou en bas – affichez la barre de progression en haut ou en bas de l’écran d’un utilisateur.
- Ciblage du type de publication – vous pouvez choisir de n’ajouter la progression de la lecture que pour certains types de publication (y compris les types de publication personnalisés). Par exemple, vous pouvez l’afficher sur les articles de blog mais pas sur les pages.
- Temps de lecture – ajoutez automatiquement le temps de lecture estimé à diverses parties de l’article (par exemple, sous le titre) ou placez-le manuellement à l’aide d’un code court.
- Couleurs personnalisables – vous pouvez personnaliser les couleurs et le style de chaque élément pour le faire correspondre à votre site.
Prix : Read Meter est 100 % gratuite.
Reading Progressbar
Avec Read Meter, Reading progressbar est une autre des extensions de barre de progression les plus populaires sur WordPress.org. Contrairement à Read Meter, cependant, cette extension ne vous donne pas la possibilité d’ajouter le temps de lecture estimé – c’est exclusivement pour la barre de progression.
Cependant, elle vous donne une certaine flexibilité de ciblage supplémentaire que Read Meter n’offre pas. Par exemple, vous pouvez cibler votre barre de progression sur des modèles spécifiques en plus du ciblage par type de publication.
Voici tout ce que vous obtiendrez avec Reading Progressbar :
- Positionnement flexible – vous pouvez coller automatiquement votre barre de progression en haut ou en bas de la page. Il existe également une option de positionnement personnalisé qui vous permet de la coller à n’importe quel élément CSS. Par exemple, si vous avez un en-tête épinglé, vous pouvez la coller sous votre menu de navigation d’en-tête au lieu de la placer tout en haut de la page (comme l’exemple HubSpot ci-dessus).
- Design personnalisable – modifiez la hauteur et les couleurs de votre barre de progression pour l’adapter à votre site.
- Options de ciblage – vous pouvez afficher votre barre de progression uniquement sur certains modèles et/ou types de publication.
Prix : Reading progressbar est 100 % gratuite.
Worth the Read
Worth the Read est l’une des extension WordPress de barre de progression les plus personnalisables, ce qui en fait une excellente option si vous trouvez les extensions précédentes trop limitées.
Elle comprend des options de placement et de ciblage uniques que la plupart des autres extensions n’offrent pas, ainsi que d’autres touches uniques. Elle vous donne également la possibilité d’ajouter une estimation du temps de lecture si vous le souhaitez.
Voici tout ce que vous obtiendrez avec Worth the Read :
- Options de positionnement horizontal ou vertical – incluez une barre de progression horizontale en haut ou en bas de l’écran OU une barre de progression verticale à gauche ou à droite de l’écran. L’option verticale est unique car la plupart des autres extensions ne la prennent pas en charge.
- Ciblage du type de publication – n’incluez votre barre de progression de lecture que sur certains types de publication.
- Ciblage des appareils – vous avez la possibilité de désactiver la barre de progression pour les appareils mobiles et les tablettes (ou les ordinateurs de bureau).
- Progression des commentaires – vous avez la possibilité d’inclure les commentaires dans la progression de la lecture, ce qui peut être agréable si vous avez des sections de commentaires actives contenant des informations utiles.
- Support RTL – c’est l’une des rares extensions qui vous permet de passer en RTL, ce qui peut être génial pour les sites en langues RTL.
- Options de style – personnalisez les couleurs, l’épaisseur, l’opacité, etc. Si vous avez activé les commentaires, vous pouvez même utiliser une couleur distincte pour indiquer quand la section des commentaires commence sur la barre de progression.
- Temps de lecture estimé – si vous activez le temps de lecture, vous pouvez personnaliser sa fonctionnalité et le placer automatiquement ou manuellement à l’aide d’un code court.
Prix : Worth the Read est 100% gratuite.
Catch Scroll Progress Bar
Catch Scroll Progress Bar est une autre option légère pour ajouter une barre de progression basique à votre site.
Elle reste assez simple, avec juste les options minimales dont vous avez besoin pour placer et styliser votre barre de progression.
Voici tout ce que vous obtiendrez avec Catch Scroll Progress Bar :
- Position supérieure ou inférieure – collez votre barre de progression en haut ou en bas de la page.
- Ciblage du type de publication – ajoutez votre barre de progression uniquement à certains types de publication.
- Ciblage des modèles – au sein de ces types de publication, ne l’affichez que sur certains modèles. Par exemple, vous pouvez l’ajouter aux articles uniques mais pas à la page d’archives.
- Options de couleur et de style – personnalisez les couleurs, l’opacité et la hauteur de votre barre de progression.
Prix : Catch Scroll Progress Bar est 100 % gratuite.
WP Reading Progress
WP Reading Progress est une autre extension WordPress de barre de progression gratuite qui est disponible sur WordPress.org.
Comme l’extension précédente, elle ne vous donne que les réglages minimaux nécessaires pour personnaliser votre barre de progression de lecture. Mais pour la plupart des gens, c’est tout ce dont vous avez besoin, ce qui en fait une autre option solide.
Voici tout ce que vous obtiendrez avec WP Reading Progress :
- Positionnement flexible – collez automatiquement la barre en haut ou en bas de la page. Vous pouvez également la coller manuellement à n’importe quel sélecteur CSS.
- Ciblage du type de publication – n’incluez une barre de progression que sur certains types de publication. Il y a aussi une option pour activer/désactiver sur les pages d’archives.
- Personnalisation du style – vous pouvez personnaliser la couleur et l’épaisseur de la barre de progression. Cependant, vous ne pouvez choisir qu’une seule couleur et il n’y a pas d’options d’opacité.
Prix : WP Reading Progress est 100 % gratuite.
Reading Time
Reading Time est la première extension de progression de lecture de cette liste qui n’existe qu’en version premium.
Cependant, elle reste assez abordable et offre des mises à jour à vie via la place de marché CodeCanyon d’Envato.
Il y a 2 raisons principales pour lesquelles vous pourriez vouloir considérer Reading Time plutôt que les alternatives gratuites :
- Plus de 8 styles pré-définis – vous disposez de quelques options de style uniques, comme l’utilisation de barres verticales au lieu d’un remplissage plein à l’intérieur de la barre de progression (image ci-dessus).
- Règles de ciblage avancées – au-delà du ciblage des types de publication et des modèles, vous pouvez cibler vos barres de progression par des règles très spécifiques telles que les rôles des utilisateurs, les URL, les appareils, etc.
Vous bénéficiez également de toutes les fonctionnalités « standard » que vous êtes en droit d’attendre d’une extension :
- Positionnement flexible – en plus du placement automatique en haut ou en bas, vous pouvez également utiliser un positionnement personnalisé pour coller votre barre de progression à n’importe quel sélecteur CSS.
- Options de style – au-delà des plus de 8 styles pré-définis, vous disposez également d’options générales pour personnaliser les couleurs et la hauteur de votre barre de progression.
Prix : Reading Time coûte 15 $, ce qui comprend les mises à jour à vie pour un seul site et 6 mois de support.
Reading Position Indicator
Reading Position Indicator est une autre extension légère et gratuite de barre de progression sur WordPress.org.
Elle ne vous offre pas une tonne de réglages, mais une option unique est qu’il vous permet d’utiliser un dégradé personnalisé pour votre barre de progression de lecture (en plus d’une couleur solide).
Voici tout ce que vous obtiendrez avec Reading Position Indicator :
- Position supérieure ou inférieure – il n’y a pas de ciblage par sélecteur CSS mais vous pouvez ajouter un décalage.
- Ciblage du type de publication – ciblez votre barre de progression sur des types de publication spécifiques.
- Options de personnalisation du style – choisissez parmi des styles de couleurs solides ou dégradées. Vous pouvez également régler l’épaisseur de la barre de progression.
Prix : Reading Position Indicator est 100 % gratuite.
ReBar
ReBar est une autre extension WordPress premium de barre de progression de lecture qui est vendue via la place de marché CodeCanyon d’Envato.
Comme avec Reading Time, voici quelques-unes des fonctionnalités uniques qu’il offre et qui pourraient faire en sorte qu’elle vaille la peine de dépenser de l’argent :
- Plus de 8 styles prédéfinis – vous obtenez un certain nombre de styles uniques qui vont au-delà des remplissages de couleur solide, comme le plastique, les dégradés, le style iOS, et plus encore.
- Règles de ciblage avancées – au-delà du ciblage des types de publication, vous pouvez cibler vos barres de progression par des règles très spécifiques telles que les rôles des utilisateurs, les URL, les appareils, et plus encore.
- Prise en charge du défilement infini – ReBar fonctionne toujours avec les mises en page à défilement infini, ce qui en fait une excellente option pour ces sites. Vous pouvez définir la zone de défilement sur la base de sélecteurs CSS et il générera une barre de progression unique pour chaque article dans le défilement infini.
Voici d’autres caractéristiques notables :
- Styles horizontaux et verticaux – placez une barre de progression horizontale en haut ou en bas de la page OU placez une barre de progression verticale à gauche ou à droite de la page.
- Styles personnalisables – en plus des plus 8 styles prédéfinis, vous pouvez également personnaliser les couleurs et la hauteur/largeur de votre barre de progression.
- Prise en charge RTL – vous pouvez inverser la barre de progression pour les langues RTL.
Prix : ReBar coûte 15 $, ce qui comprend les mises à jour à vie pour un seul site et 6 mois de support.
Résumé
Voilà qui résume notre collection des 8 meilleures extensions WordPress de barre de progression de lecture.
Pour les options les plus simples pour ajouter une barre de progression de base, vous pouvez considérer des extensions telles que Read Meter ou Reading progressbar.
D’autre part, si vous voulez le plus de personnalisation gratuitement, vous pouvez commencer avec Worth the Read, car elle comprend un certain nombre d’options et de fonctionnalités uniques que les autres extensions n’offrent pas.
Si vous voulez aller au-delà d’une couleur de remplissage solide pour la barre de progression, vous pourriez également envisager les options premium de CodeCanyon – soit Reading Time ou ReBar. Encore une fois, les détails les plus uniques de ces extensions sont qu’elles sont toutes deux fournies avec plus de 8 styles prédéfinis et des options de ciblage beaucoup plus avancées.
Chaque extension a son propre style et ses propres caractéristiques, cela vaut donc la peine de les explorer toutes pour trouver l’option qui convient à votre site.
La plupart d’entre elles ont des versions gratuites sur WordPress.org, ce qui permet de les tester facilement. Si vous hébergez votre site chez Kinsta, vous pouvez facilement créer un site de staging pour tester en toute sécurité l’apparence de chaque extension sur votre site.
Pour trouver d’autres extensions qui peuvent améliorer votre site, vous pouvez également parcourir notre liste complète des meilleures extensions WordPress.
Laisser un commentaire