Comment ajouter une barre de progression de lecture dans les publications WordPress (3 façons faciles)

Ajouter une barre de progression de lecture aux publications WordPress est un excellent moyen d’améliorer l’expérience de votre lecteur.

Les longues publications de blog peuvent parfois sembler intimidantes, et une barre de progression offre un repère visuel qui montre aux lecteurs exactement le chemin parcouru et ce qu’il reste à faire.

Nous avons écrit plus de 3000 publications de blog chez WPBeginner, nous savons donc qu’il est important de garder vos lecteurs engagés. C’est pourquoi nous sommes ici pour partager nos meilleurs conseils pour améliorer votre blog.

Dans cet article, nous allons vous montrer comment ajouter facilement une barre de progression de lecture à vos publications WordPress.

Quand ajouter une barre de progression de lecture à vos publications de blog WordPress

Pour les publications de blog plus longues, l’ajout d’une barre de progression de la lecture peut être un outil précieux pour inciter les gens à rester sur votre site WordPress. Elle permet aux lecteurs de savoir ce qu’ils ont lu et ce qu’il leur reste à lire.

Les lecteurs sont plus enclins à continuer à faire défiler la page s’ils voient qu’ils approchent de la fin de l’article. Une barre de progression peut les inciter à terminer leur lecture.

De plus, la présence d’un compteur de lecture ajoute une touche d’interactivité à votre contenu. Il peut donner l’impression que la lecture est un voyage dont la destination est clairement définie.

Cependant, il est important de tenir compte de votre contenu. Une barre de progression peut s’avérer inutile si vous écrivez principalement des articles courts et faciles à lire. De même, certains lecteurs pourraient la trouver gênante.

Dans cette optique, voyons comment ajouter facilement une barre de progression de lecture à vos publications WordPress. Vous pouvez utiliser les liens rapides ci-dessous pour passer à votre méthode préférée :

Méthode 1 : Créer un thème personnalisé avec des indicateurs de progrès en lecture

Une façon d’ajouter une barre de progression de lecture dans les publications WordPress est d’utiliser un constructeur de thème avec une fonctionnalité de barre de progression. De cette manière, la barre de progression s’intégrera parfaitement au reste de votre thème, ce qui la rendra plus agréable à l’œil.

Gardez à l’esprit que cette méthode implique de modifier votre thème, nous ne la recommandons donc pas si vous êtes déjà satisfait de votre thème et que vous n’envisagez pas de le changer de sitôt. Si c’est le cas, optez plutôt pour la méthode 2.

Pour cette méthode, nous allons utiliser le Thrive Theme Builder. En plus d’avoir une barre de progression de lecture, le Thrive Theme Builder a des dizaines de modèles de thèmes pour différents objectifs, des blogs aux sites d’entreprise.

De plus, le constructeur par glisser-déposer est facile à utiliser, ce qui en fait un outil idéal pour les débutants.

Vous pouvez en savoir plus sur la plateforme dans notre revue Thrive Themes.

L’inconvénient de Thrive Themes est qu’il n’y a pas de version gratuite. Ceci étant dit, vous pouvez utiliser notre code promo Thrive Themes pour obtenir jusqu’à 50% de réduction sur votre premier achat.

Étape par étape : Installer le Thrive Theme Builder

La première étape consiste à configurer le Thrive Theme Builder. Vous pouvez accéder à ce plugin en vous connectant à votre compte sur le site de Thrive Themes.

Ensuite, téléchargez et installez l’extension Thrive Product Manager. En savoir plus, consultez notre guide du débutant sur l’installation d’une extension WordPress.

Une fois l’extension active, cliquez sur Gestionnaire de produits dans votre zone d’administration WordPress.

Ensuite, cliquez sur le bouton  » Se connecter à mon compte  » pour connecter votre site WordPress à votre compte Thrive Themes.

Après cela, vous devriez voir une liste de tous les produits Thrive Themes disponibles dans votre compte.

Ici, allez-y et sélectionnez » Thrive Architect » et cochez la case  » Installer le produit « .

Cette extension de constructeur de pages fonctionne avec le constructeur de thèmes, c’est pourquoi nous devons l’activer.

Ensuite, descendez jusqu’à la section  » Thrive Theme Builder  » et cochez la case  » Installer le thème « .

Il vous suffit ensuite de cliquer sur « Installer les produits sélectionnés ».

Sur la page suivante, vous verrez que Thrive Product Manager est en train d’installer et d’activer le Thrive Theme Builder.

Une fois le processus terminé, cliquez sur « Go to the Theme Builder Dashboard ».

Maintenant, allez-y et choisissez un thème WordPress.

Si vous n’êtes pas sûr de votre choix, il vous suffit de cliquer sur le bouton « Aperçu » pour voir à quoi ressemble le thème. Cliquez ensuite sur « Choisir » une fois que vous avez pris votre décision.

Vous devriez maintenant arriver à l’assistant de création de thème.

Cet assistant de configuration vous guidera pour téléverser votre propre logo, choisir les couleurs de la marque à ajouter à votre thème et configurer les différentes structures et modèles de votre thème.

Allez-y et complétez l’assistant de configuration avant de passer à l’étape suivante.

Étape par étape : ajouter une barre de progression de la lecture à votre modèle de publication unique

Avec votre thème configuré, ajoutons maintenant une barre de progression de lecture à votre modèle de thème. Puisque nous voulons seulement afficher la barre de progression de lecture dans les publications WordPress, il nous suffira d’éditer le modèle de l’article unique.

Pour ce faire, passez à l’onglet  » Templates  » dans le Thrive Theme Builder. Ensuite, trouvez le modèle  » Publication par défaut  » et cliquez sur  » Modifier « .

Vous devriez maintenant être dans le constructeur de thème. Il devrait y avoir une barre latérale gauche pour éditer votre modèle, un aperçu du modèle lui-même, et une petite barre d’outils sur le côté droit pour ajouter d’autres blocs ou changer le style du modèle.

Pour ajouter le compteur de lecture, faites défiler la barre latérale gauche et trouvez le paramètre « Indicateur de progression de la lecture ». Il vous suffit de cliquer sur le commutateur pour l’activer.

D’autres paramètres devraient maintenant vous permettre de modifier l’indicateur de position de lecture.

Tout d’abord, vous pouvez choisir d’ajouter la barre de progression sous l’en-tête ou en haut de la fenêtre (juste au-dessus de l’en-tête). Si vous choisissez la première option, vous devrez vous assurer que l’en-tête est collant, ce que nous ferons plus tard.

Ensuite, vous pouvez modifier la couleur de la barre de progression. Pour ce faire, il vous suffit de cliquer sur le sélecteur de couleurs.

Vous pouvez maintenant choisir l’une des couleurs du thème, qui est le schéma de couleurs prédéfini de votre thème. Vous pouvez également cliquer sur « Découpler de la couleur du thème » pour choisir une couleur totalement différente qui ne fait pas partie de votre thème.

Si vous choisissez l’option « Unlink from theme color », vous pouvez également ajuster l’opacité de la couleur.

Vous pouvez ainsi ajuster l’opacité de la barre de progression par rapport à l’arrière-plan. Cela dit, il est préférable que la couleur de la barre de progression ne soit pas trop vive pour ne pas gêner les utilisateurs dans leur lecture.

Une fois que vous êtes satisfait de la couleur, cliquez sur « Appliquer ».

Enfin, vous pouvez ajuster la hauteur de la barre de progression.

Le constructeur de thèmes vous permet de redimmensionner la barre jusqu’à 10 pixels. Cela permet de s’assurer que la barre de progression n’est pas trop grande. Dans cette optique, nous vous recommandons d’opter pour une taille comprise entre 5 et 10 afin que la barre de progression soit clairement visible.

Lorsque vous êtes satisfait de l’aspect de la barre, il vous suffit de cliquer sur « Enregistrer le travail » pour conserver vos modifications.

Étape par étape : rendre votre en-tête collant (facultatif)

Si vous choisissez d’afficher la barre de progression de la lecture sous l’en-tête, vous devrez suivre cette étape. Sinon, vous pouvez l’ignorer.

Tout d’abord, faites défiler la barre latérale gauche et cliquez sur « En-tête ».

Un ensemble différent de paramètres permettant de personnaliser l’en-tête devrait maintenant apparaître dans la barre latérale.

Allez jusqu’à la section En-tête et cliquez sur « Modifier ».

Ouvrez maintenant l’onglet Comportement de défilement.

Vous devez ensuite sélectionner « Collant ». En fonction de votre thème, vous devrez peut-être également modifier la distance par rapport au haut de l’écran à 1 px pour que la barre de progression apparaisse.

Vous pouvez laisser les autres paramètres tels quels et cliquer sur « Terminé » en bas de page.

Étape par étape : ajout d’un indicateur de temps de lecture (facultatif)

Une autre chose que vous pouvez faire avec Thrive Theme Builder est d’afficher le temps de lecture estimé pour parcourir une publication du début à la fin. Cela aide les utilisateurs à voir combien de temps il leur faudra pour lire un article, ce qui leur permet de choisir un contenu qui correspond au temps dont ils disposent.

Tout d’abord, cliquez sur le bloc chargé d’afficher les métadonnées de votre publication.

Il s’agit de la partie de votre modèle de publication unique qui affiche des informations telles que l’auteur de l’article de blog, les catégories, les identifiants, etc.

Cliquez ensuite sur l’icône« Texte dynamique » dans la barre d’outils.

Vous devez sélectionner « Contenu » dans le premier menu déroulant et « Temps de lecture restant (en minutes) » dans le second.

Cliquez ensuite sur « Insérer ».

Vous devriez maintenant voir un nouveau texte indiquant « 0 minute restante » dans la méta-publication. Vous pouvez aller de l’avant et ajuster ce texte à votre convenance.

Dans notre cas, nous avons décidé de supprimer le mot « restant ».

Lorsque vous avez terminé, n’oubliez pas de cliquer sur « Enregistrer le travail ».

Étape par étape : Prévisualisation des indicateurs de progrès en lecture

Maintenant que vous avez configuré les paramètres de votre barre de progression, vous pouvez visiter votre publication de blog pour voir la barre en action.

Si vous voulez faire un aperçu au lieu de voir la barre en direct sur votre site, alors vous pouvez simplement cliquer sur le bouton  » Aperçu  » en bas. Thrive Theme Builder vous permet de prévisualiser votre site sur ordinateur de bureau, tablette et mobile.

N’hésitez pas à apporter autant de modifications que nécessaire.

Voici à quoi ressemble notre barre de progression de la lecture :

Méthode 2 : Ajouter une barre de progression de la lecture avec une extension gratuite

Si vous souhaitez simplement ajouter une barre de progression de lecture à vos publications WordPress gratuitement, alors vous pouvez utiliser l’extension Catch Scroll Progress Bar.

Cette extension de barre de progression de lecture affichera automatiquement un compteur de lecture sur vos pages et publications, et vous pouvez facilement le personnaliser selon vos préférences.

Tout d’abord, installez l’extension dans votre zone d’administration WordPress. En savoir plus, lisez notre guide du débutant sur l’installation d’une extension WordPress.

Une fois que c’est fait, allez sur Catch Scroll Progress Bar dans votre tableau de bord WordPress. Vous verrez maintenant quelques paramètres de la barre de progression à configurer.

Avec cette extension, vous pouvez modifier la position de la barre de progression du haut vers le bas. Cela dit, vous pouvez la laisser telle quelle si vous préférez la position normale en haut.

Vous pouvez également personnaliser la couleur d’arrière-plan et la couleur de premier plan.

La couleur d’arrière-plan correspond à la couleur par défaut de la barre de progression lorsque le lecteur n’a pas fait défiler la page. La couleur de premier plan est la couleur qui apparaîtra lorsque le lecteur fera défiler la page.

Vient ensuite l’opacité, qui contrôle la transparence des couleurs d’arrière-plan et de premier plan. La plage est comprise entre 0 et 1, 1 étant opaque et 0 étant transparent ou invisible.

N’hésitez pas à jouer avec les chiffres jusqu’à ce que vous trouviez le niveau d’opacité qui vous convient.

Vous pouvez ensuite ajuster la hauteur et le rayon de la bordure de la barre de progression.

Pour la hauteur, nous avons constaté que le meilleur chiffre se situe entre 1 et 8, mais pas plus. Sinon, la barre de progression risque d’être trop grande.

Le rayon de la bordure contrôle l’aspect arrondi des coins de votre barre de progression. Si vous n’aimez pas cet aspect, vous pouvez saisir « 0 ».

Désormais, cette extension vous permet également de décider dans quels modèles afficher la barre de progression : sur votre page d’accueil, la page de votre blog, les archives et les catégories, et/ou les articles ou pages individuels.

Généralement, vous n’avez besoin d’ajouter une barre de progression de lecture que sur les publications de votre blog WordPress. Dans ce cas, nous avons uniquement sélectionné « Single page/post » dans le paramètre « Select the Template Condition to progress bar ».

Nous avons également coché l’option « Publications » dans la section « Sélectionner le type de publication pour appliquer la barre de progression », car nous voulons que la barre apparaisse uniquement dans les articles de blog.

Cela dit, n’hésitez pas à vérifier les conditions qui conviennent le mieux à votre site.

Lorsque vous êtes satisfait des paramètres de la barre de progression, cliquez sur « Enregistrer les modifications ».

Maintenant, si vous prévisualisez votre publication de blog sur mobile ou desktop, vous devriez voir une barre de progression.

Méthode 3 : Ajouter une barre de progression de lecture avec du code

Vous pouvez également utiliser un code personnalisé pour ajouter une barre de progression de lecture à votre site WordPress.

Souvent, les tutoriels vous demanderont d’ajouter du code directement dans le fichier functions.php de votre thème. Mais nous vous déconseillons de le faire, car la moindre erreur peut endommager votre site.

Nous vous recommandons plutôt d’utiliser l’extension WPCode. C’est le moyen le plus simple et le plus sûr d’ajouter du code personnalisé dans WordPress sans avoir besoin de modifier les fichiers principaux de WordPress.

De plus, vous n’avez même pas besoin de savoir coder pour l’utiliser, car il est livré avec une bibliothèque d’extraits de code prêts à l’emploi que vous pouvez ajouter à votre site en quelques clics, dont un pour une barre de progression de la lecture.

Pour commencer, vous devez installer et activer l’extension gratuite WPCode. Si vous avez besoin d’aide, consultez notre tutoriel sur l ‘installation d’une extension WordPress.

Une fois l’extension activée, allez dans Extraits de code  » Bibliothèque depuis le tableau de bord de WordPress.

À partir de là, recherchez la « barre de progression du défilement » dans la bibliothèque, passez la souris dessus et cliquez sur le bouton « Utiliser l’extrait ».

WPCode ajoutera alors automatiquement le code pour vous et sélectionnera la méthode d’insertion appropriée.

Ensuite, il vous suffit de faire basculer le commutateur d’Inactif à Actif. Cliquez ensuite sur le bouton « Mise à jour ».

Désormais, vous pouvez afficher une publication de blog sur votre site, et une simple barre de progression apparaîtra.

Astuces bonus pour maintenir l’intérêt des lecteurs de votre blog WordPress

Vous souhaitez transformer des internautes occasionnels en lecteurs fidèles ? Nous avons ce qu’il vous faut !

Consultez ces tutoriels WordPress d’experts qui regorgent d’astuces pour garder votre public accroché :

• Donnez unstyle différent à chaque publication WordPress afin de rendre votre contenu visuellement attrayant.
• Créez des séparateurs de forme personnalisés pour fragmenter votre texte et guider les lecteurs dans votre contenu.
• Ajoutez des émojis pour embrasser votre personnalité et apporter une touche de fun à votre blog.
• Mettez en avant les nouvelles publications pour les internautes qui reviennent et faites en sorte qu’ils reviennent pour en savoir plus.
• Mettezdu texte en surbrillance dans vos publications WordPress et soulignez les points clés pour vos lecteurs.
• Ajoutez des notes de bas de page simples et élégantes à vos publications de blog pour mettre en valeur vos recherches.
• Impressionnez vos internautes en affichant des témoignages tournants dans votre site WordPress.
• Ajoutez un redimensionneur de polices à votre site WordPress pour vous assurer que votre contenu est accessible à tous.

Nous espérons que cet article vous a aidé à ajouter une barre de progression de lecture dans WordPress. Vous pouvez également consulter notre guide complet sur la façon d’éditer un site WordPress et nos choix d’experts des meilleures alternatives Canva pour les graphiques de conception de site.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.