Lire de longs articles qui s’étendent parfois sur des milliers de mots, peut s’avérer ennuyeux pour certaines personnes, surtout si elles ne sont pas très intéressées par le sujet ; d’où l’intérêt de créer une barre de progression de lecture sur vos articles.
C’est quoi une barre de progression de lecture ?
Une barre de progression est une bande qui s’affiche sur toute la largeur de la fenêtre du navigateur (en haut ou en bas) faite de deux couleurs, et qui permet au lecteur de suivre sa progression de lecture, surtout si l’article en question est très long.
C’est clair, voyons ensemble comment l’ajouter à vos articles.
1. Installer le plugin « Reading progressbar »
Commencez par installer le plugin « Reading progressbar », cliquez ici si vous voulez le découvrir avant de l’installer.
Pour l’installer, c’est très facile, allez dans le menu à Extension>Ajouter ; dans le champs de recherche tapez Reading progressbar ; vérifiez que c’est bien le plugin créé par Jb Audras ; puis installez et activez le.
Vous n’avez pas compris ce que j’ai fait, voici un article qui vous explique comment installer une extension wordpress.
2. Configurer le plugin « Reading progressbar »
Pour accéder aux réglages de notre plugin, allez dans le menu à l’élément Réglages, puis dans le sous-menu qui s’affiche cliquez sur Reading progressbar.
Comme vous voyez, nous avons 7 paramètres à régler :
1- Hauteur de la barre de progression :
A vous de voir quelle hauteur vous convient, moi je l’ai réglé sur 10 px.
2- Couleur de premier plan :
C’est la couleur qui indique la progression de votre lecture ; choisissez plutôt des couleurs qui vont bien avec les couleurs de votre site.
3- Couleur d’arrière plan :
C’est la couleur de l’arrière plan, c.à.d de toute la bande affichée sur toute la largeur de la fenêtre.
4- Position de la barre :
vous avez le choix entre « haut », « bas » et « personnalisée », ça dépend de vos préférences, moi je l’ai mise en bas ; oubliez « personnalisée » si vous ne maitrisez pas le HTML et le CSS.
5- Cibler la classe/id d’un élément HTML fixe pour coller la barre au base de cet élément :
Si vous avez placé votre barre de progression en haut ou en bas, passez ce paramètre et ne le regardez même pas, car ça ne vous concerne pas.
Mais si vous voulez que votre barre de progression soit collée à un élément HTML fixe, indiquez ici sa classe ou son ID ; et n’oubliez pas de choisir « personnalisée » pour le paramètre précédent.
6- Sélectionner les modèles de pages sur lesquels appliquer la barre de progression :
Indiquez les modèles de contenus, ou vous voulez afficher votre barre de progression, pour moi, j’ai sélectionné » Articles seuls / pages et types de contenus personnalisés « , car je ne veux afficher la barre que sur les articles.
7- Sélectionner des types de contenus sur lesquels appliquer la barre de progression :
Sélectionnez aussi les types de contenus sur lesquels vous voulez afficher votre barre, comme je ne veux l’afficher que sur mes articles, j’ai sélectionné « Articles ».
N’oubliez pas bien-sur de cliquer sur le bouton Enregistrer les modifications.
Après avoir configuré vos réglages, rendez-vous sur l’un de vos articles, ce dernier ressemblera un peu à la capture suivante, avec une barre de progression de lecture, dont les couleurs sont bleu et orange pour moi.
Conclusion
Si vous rédigez des articles relativement longs sur votre blog, Reading progressbar, vous aidera à rendre la lecture de vos articles plus agréable, et à prolonger le temps que passent vos visiteurs sur votre site.
Si vous avez aimé cet article, n’hésitez pas à le partagez avec vos amis sur vos réseaux sociaux, et à s’abonner à notre newsletter en entrant votre nom et adresse mail dans le formulaire ci-dessous, pour recevoir tous nos nouveaux article par e-mail.
Crédit photo : Photo utilisé dans la vignette de l’article : École vecteur créé par pikisuperstar – fr.freepik.com
