Vous connaissez ce sentiment lorsque vous lisez un long article en ligne et que vous n'avez aucune idée de la longueur restante ? C'est le problème que les barres de progression de lecture résolvent pour vos visiteurs WordPress.
Ces indicateurs visuels simples montrent aux lecteurs exactement quelle partie d'un article ils ont terminée, ce qui peut les encourager à continuer à lire et à rester sur votre page. Cela fait appel à la même satisfaction que vous obtenez en accomplissant quelque chose avec un point final clair.
Maintenant, nous n'utilisons pas réellement de barres de progression ici chez WPBeginner car nos tutoriels sont conçus pour être scannables. La plupart des gens sautent directement à la section dont ils ont besoin plutôt que de lire du début à la fin.
Mais si vous publiez des articles de blog plus longs, des guides approfondis ou des articles détaillés, une barre de progression de lecture peut vraiment aider à maintenir l'engagement des utilisateurs.
Dans ce guide, nous vous montrerons trois façons différentes d'en ajouter une à votre site WordPress, que vous souhaitiez une solution de plugin simple ou quelque chose de plus personnalisé.
Réponse rapide : Les moyens les plus rapides d'ajouter une barre de progression de lecture dans WordPress ?
Si vous êtes pressé, voici un aperçu rapide des trois méthodes et quand chacune d'elles est la plus pertinente :
- Utiliser un constructeur de thème (Idéal pour un contrôle total du thème) : Idéal si vous refaites le design de votre site ou si vous souhaitez que la barre de progression soit parfaitement intégrée à votre thème.
- Utiliser un plugin gratuit (Idéal pour les débutants et une configuration rapide) : Parfait si vous souhaitez simplement une barre de progression de lecture simple et légère sans changer de thème.
- Ajouter du code personnalisé (Idéal pour ceux qui ne préfèrent pas de plugin supplémentaire) : Excellent si vous préférez une approche propre, sans plugin. Ajoutez-le au fichier de votre thème ou utilisez un plugin d'extraits de code comme WPCode.
Quand ajouter une barre de progression de lecture à vos articles de blog WordPress
Pour les articles de blog plus longs, l'ajout d'une barre de progression de lecture peut être un outil précieux pour encourager les visiteurs à rester sur votre site WordPress.
Cependant, ils ne sont pas nécessaires pour tous les sites. D'après notre expérience, nous avons constaté que les barres de progression de lecture fonctionnent mieux dans ces situations spécifiques :
- Articles longs : Si vous publiez des guides ou des histoires détaillés, une barre de progression encourage les utilisateurs à continuer à faire défiler jusqu'à la fin.
- Contenu linéaire : Ils sont parfaits pour le contenu qui doit être lu du début à la fin plutôt que parcouru.
- Conception interactive : Un indicateur de lecture ajoute une touche d'interactivité. Cela donne à l'expérience utilisateur l'impression d'un voyage avec une destination claire.
Dans cette optique, voyons comment ajouter facilement une barre de progression de lecture à vos articles WordPress. Vous pouvez utiliser les liens rapides ci-dessous pour passer à votre méthode préférée :
- Method 1: Design a Custom Theme With Reading Progress Indicators
- Méthode 2 : Ajouter une barre de progression de lecture avec un plugin gratuit
- Méthode 3 : Ajouter une barre de progression de lecture avec du code
- Conseils bonus pour maintenir l'engagement de vos lecteurs de blog WordPress
Remarque : Vous souhaitez ajouter une barre de progression générique à la place ? Nous vous recommandons d'utiliser SeedProd et son bloc de barre de progression intégré.
Pour plus d'informations sur l'utilisation de SeedProd, consultez notre guide sur comment créer un thème WordPress personnalisé.
Méthode 1 : Concevoir un thème personnalisé avec des indicateurs de progression de lecture
Une façon d'ajouter une barre de progression de lecture dans les articles WordPress est d'utiliser un constructeur de thème avec une fonctionnalité de barre de progression. De cette façon, la conception de la barre de progression s'intégrera parfaitement au reste de votre thème, la rendant plus agréable à regarder.
Gardez à l'esprit que cette méthode impliquera de changer votre thème, nous ne la recommandons donc pas si vous êtes déjà satisfait de votre thème et que vous ne cherchez pas à le changer de sitôt. Si tel est le cas, vous devriez plutôt opter pour la méthode 2 (plugin) ou la méthode 3 (code).
Pour cette méthode, nous utiliserons le Thrive Theme Builder. En plus d'avoir une barre de progression de lecture, le Thrive Theme Builder propose des dizaines de modèles de thèmes à diverses fins, des blogs aux sites Web d'entreprise.
Le meilleur de tout, c'est que le constructeur par glisser-déposer est facile à utiliser, ce qui le rend idéal pour les débutants complets.
Vous pouvez en savoir plus sur la plateforme dans notre avis sur Thrive Themes.
Un inconvénient de Thrive Themes est qu'il n'y a pas de version gratuite. Cela dit, vous pouvez utiliser notre code promo Thrive Themes pour obtenir jusqu'à 50 % de réduction sur votre premier achat.
Étape 1 : 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 Web de Thrive Themes.
Ensuite, téléchargez et installez le plugin Thrive Product Manager. Pour plus d'informations, consultez notre guide pour débutants sur comment installer un plugin WordPress.
Une fois le plugin activé, cliquez sur Product Manager dans votre zone d'administration WordPress.
Ensuite, cliquez sur le bouton « Se connecter à mon compte » pour connecter votre site Web WordPress à votre compte Thrive Themes.
Après cela, vous devriez maintenant voir une liste de tous les produits Thrive Themes disponibles dans votre compte.
Ici, sélectionnez « Thrive Architect » et cochez la case « Installer le produit ».
Ce plugin de constructeur de pages fonctionne avec le constructeur de thèmes, c'est pourquoi nous devons l'activer.
Ensuite, faites défiler jusqu'à la section « Thrive Theme Builder » et cochez la case « Installer le thème ».
Maintenant, cliquez simplement sur « Installer les produits sélectionnés ».
Sur la page suivante, vous verrez que Thrive Product Manager installe et active le Thrive Theme Builder.
Une fois le processus terminé, cliquez sur « Accéder au tableau de bord du Theme Builder ».
Maintenant, sélectionnez un thème WordPress.
Si vous n'êtes pas sûr du choix, cliquez simplement sur le bouton « Aperçu » pour voir à quoi ressemble le thème. Ensuite, cliquez sur « Choisir » une fois que vous avez pris votre décision.
Vous devriez maintenant arriver à l'assistant du Theme Builder.
Cet assistant de configuration vous guidera dans le téléchargement de votre propre logo, le choix des couleurs de marque à ajouter à votre thème, et la configuration des différentes structures et modèles de votre thème.
Terminez l'assistant de configuration avant de passer à l'étape suivante.
Étape 2 : Ajouter une barre de progression de lecture à votre modèle d'article unique
Une fois votre thème configuré, ajoutons maintenant une barre de progression de lecture à votre modèle de thème. Comme nous voulons seulement afficher la barre de mesure de lecture dans les articles WordPress, nous devrons simplement modifier le modèle d'article unique.
Pour ce faire, basculez vers l'onglet « Modèles » dans le Thrive Theme Builder. Ensuite, trouvez le modèle « Article 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 modifier 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 modifier le style du modèle.
Pour ajouter la barre de mesure de lecture, faites défiler la barre latérale gauche et trouvez le paramètre « Indicateur de progression de lecture ». Cliquez simplement sur le commutateur pour l'activer.
Après avoir ajouté la barre de progression, il devrait maintenant y avoir plus de paramètres à modifier.
Tout d'abord, vous pouvez choisir d'ajouter la barre de progression sous l'en-tête ou en haut de la fenêtre d'affichage (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 défini sur fixe, ce que nous vous montrerons comment faire plus tard.
Ensuite, vous pouvez changer la couleur de la barre de progression. Cliquez simplement sur le sélecteur de couleur pour le faire.
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. Ou, vous pouvez cliquer sur « Dissocier de la couleur du thème » pour choisir une couleur entièrement différente qui ne fait pas partie de votre thème.
Si vous choisissez l'option « Dissocier de la couleur du thème », vous pouvez également ajuster l'opacité de la couleur.
De cette façon, vous pouvez ajuster l'opacité de la barre de progression par rapport à son arrière-plan. Cela dit, il est préférable de rendre la couleur de la barre de progression pas trop vive au point de distraire les utilisateurs de la lecture.
Une fois que la couleur vous convient, cliquez simplement sur « Appliquer ».
Enfin, vous pouvez ajuster la hauteur de la barre de progression.
Le constructeur de thème vous permet de redimensionner la barre jusqu'à 10 pixels. Cela garantit que la barre de progression n'a pas l'air trop grande. Dans cet esprit, nous vous recommandons de choisir une taille comprise entre 5 et 10 afin que la barre de progression soit clairement visible.
Lorsque vous êtes satisfait de l'apparence de la barre, cliquez simplement sur « Enregistrer le travail » pour conserver vos modifications.
Étape 3 : Rendez votre en-tête fixe (facultatif)
Si vous choisissez d'afficher votre barre de progression de lecture sous l'en-tête, vous devrez suivre cette étape. Sinon, vous pouvez la sauter.
Tout d'abord, faites défiler la barre latérale gauche et cliquez sur « En-tête ».
Un ensemble différent de paramètres pour personnaliser l'en-tête devrait maintenant apparaître sur la barre latérale.
Faites défiler vers le bas jusqu'à la section En-tête et cliquez sur « Modifier ».
Maintenant, ouvrez l'onglet Comportement de défilement.
Ensuite, vous devez sélectionner « Fixe ». Selon votre thème, vous devrez peut-être également modifier la distance par rapport au haut de l'écran à 1 px afin que la barre de progression apparaisse.
Vous pouvez laisser le reste des paramètres tels quels et cliquer sur « Terminé » en bas.
Étape 4 : Ajouter 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 un article du début à la fin. Cela aide les utilisateurs à voir combien de temps il faudra pour lire un article, leur permettant de choisir le contenu qui correspond à leur temps disponible.
Tout d'abord, cliquez sur le bloc responsable de l'affichage de vos métadonnées d'article.
C'est 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 balises, etc.
Ensuite, cliquez sur l'icône « Texte dynamique » dans la barre d'outils.
Ici, vous devez sélectionner « Contenu » dans le premier menu déroulant et « Temps de lecture restant (en minutes) » dans le second.
Après cela, cliquez sur « Insérer ».
Vous devriez maintenant voir un nouveau texte indiquant « 0 minutes restantes » dans les métadonnées de la publication. Vous pouvez ajuster ce texte à votre guise.
Dans notre cas, nous avons décidé de supprimer le mot « restantes ».
Lorsque vous avez terminé, n'oubliez pas de cliquer sur « Enregistrer les modifications ».
Étape 5 : Prévisualisez vos indicateurs de progression de lecture
Maintenant que vous avez configuré les paramètres de votre barre de progression, vous pouvez visiter votre article de blog pour voir la barre en action.
Si vous souhaitez faire une prévisualisation au lieu de voir la barre en direct sur votre site, vous pouvez simplement cliquer sur le bouton « Aperçu » en bas. Thrive Theme Builder vous permet de prévisualiser votre site Web sur ordinateur, tablette et mobile.
N'hésitez pas à apporter autant de modifications que nécessaire.
Voici à quoi ressemble notre barre de progression de lecture :
Méthode 2 : Ajouter une barre de progression de lecture avec un plugin gratuit
Si vous souhaitez simplement ajouter une barre de progression de lecture simple à vos articles WordPress gratuitement, vous pouvez utiliser le plugin Catch Scroll Progress Bar.
Ce plugin de barre de progression de lecture affichera automatiquement un indicateur de lecture sur vos pages et articles, et vous pourrez facilement le personnaliser selon vos préférences.
Tout d'abord, installez le plugin dans votre espace d'administration WordPress. Pour plus d'informations, lisez notre guide pour débutants sur comment installer un plugin WordPress.
Une fois cela fait, allez dans Catch Scroll Progress Bar sur votre tableau de bord WordPress. Vous verrez maintenant des paramètres de barre de progression à configurer.
Avec ce plugin, vous pouvez changer la position de la barre de progression du haut vers le bas. Cela dit, vous pouvez simplement la laisser telle quelle si vous préférez la position normale en haut.
Une autre chose que vous pouvez personnaliser est la couleur d'arrière-plan et la couleur de premier plan.
La couleur d'arrière-plan est la couleur de la barre vide avant le défilement. Pendant ce temps, la couleur de premier plan remplit la barre pour montrer la progression à mesure que le lecteur fait défiler la page.
Ensuite, il y a 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.
Ensuite, vous pouvez ajuster la hauteur et le rayon des bords 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 peut sembler trop grande.
Le rayon des bords contrôle à quel point les coins de votre barre de progression sont arrondis. Si vous n'aimez pas l'aspect, vous pouvez simplement entrer '0'.
Ce plugin vous permet également de décider dans quels modèles afficher la barre de progression : sur votre page d'accueil, votre page de blog, vos archives et catégories, et/ou vos articles ou pages uniques.
Généralement, vous n'avez besoin d'ajouter une barre de progression de lecture que sur vos articles de blog WordPress. Dans ce cas, nous avons seulement choisi « Page/article unique » dans les paramètres de condition du modèle.
Nous avons également coché l'option 'Articles' dans 'Sélectionner le type d'article 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 à cocher les conditions qui conviennent le mieux à votre site web.
Une fois que vous êtes satisfait des paramètres de votre barre de progression, cliquez sur 'Enregistrer les modifications'.
Maintenant, si vous prévoyez votre article de blog sur mobile ou sur ordinateur, vous devriez voir une barre de progression.
Méthode 3 : Ajouter une barre de progression de lecture avec du code
Vous pouvez également utiliser du 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 ne recommandons pas de le faire car la moindre erreur peut casser votre site.
Au lieu de cela, nous recommandons d'utiliser le plugin WPCode. C'est le moyen le plus simple et le plus sûr d'ajouter du code personnalisé dans WordPress sans avoir à modifier les fichiers principaux de WordPress.
Nous avons testé WPCode en profondeur et l'avons trouvé être une solution fiable et conviviale pour les débutants.
Il est livré avec une bibliothèque intégrée d'extraits de code prêts à l'emploi que vous pouvez ajouter à votre site en quelques clics, y compris un pour une barre de progression de lecture. Vous pouvez consulter notre avis complet sur WPCode pour en savoir plus sur ses fonctionnalités et pourquoi nous le recommandons.
Pour commencer, vous devez installer et activer le plugin gratuit WPCode. Si vous avez besoin d'aide, consultez notre tutoriel sur comment installer un plugin WordPress.
Une fois le plugin activé, accédez à Fragments de code » Bibliothèque depuis le tableau de bord WordPress.
De là, recherchez la « Barre de progression de défilement » dans la bibliothèque, placez votre souris dessus et cliquez sur le bouton « Utiliser l'extrait ».
WPCode ajoutera alors automatiquement le code pour vous.
Le plugin choisira également automatiquement la bonne méthode « Insertion automatique » pour vous en arrière-plan.
Après cela, il vous suffit de basculer l'interrupteur de Inactif à Actif.
Ensuite, cliquez sur le bouton « Mettre à jour ».
Vous pouvez maintenant afficher un article de blog sur votre site Web.
Une simple barre de progression devrait maintenant apparaître, comme ceci :
Conseils bonus pour maintenir l'engagement de vos lecteurs de blog WordPress
Vous voulez transformer des visiteurs occasionnels en lecteurs fidèles ? Nous avons ce qu'il vous faut !
Découvrez ces tutoriels WordPress d'experts remplis de conseils pour captiver votre public :
- Stylez chaque article WordPress différemment pour rendre votre contenu visuellement attrayant.
- Créez des séparateurs de forme personnalisés pour diviser votre texte et guider les lecteurs à travers votre contenu.
- Ajoutez des emojis pour exprimer votre personnalité et une touche de fantaisie à votre blog.
- Mettez en surbrillance les nouveaux articles pour les visiteurs récurrents et incitez-les à revenir.
- Mettez en surbrillance le texte de vos articles WordPress et soulignez les points clés pour vos lecteurs.
- Ajoutez des notes de bas de page simples et élégantes à vos articles de blog pour présenter vos recherches.
- Impressionnez vos visiteurs en affichant des témoignages rotatifs sur votre site WordPress.
- Ajoutez un redimensionneur de police à votre site WordPress pour garantir que votre contenu soit accessible à tous.
Nous espérons que cet article vous a aidé à ajouter des barres de progression de lecture dans WordPress. Vous pourriez également consulter notre guide complet sur comment modifier un site WordPress et notre sélection d'experts des meilleures alternatives à Canva pour les graphiques de conception de sites web.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Dennis Muthomi
Merci pour cet excellent guide sur les barres de progression de lecture ! Je les ai ajoutées récemment à plusieurs sites clients, et elles fonctionnent très bien – surtout pour les sites avec beaucoup de contenu long.
Une chose que j'ajouterais est d'essayer d'utiliser différentes hauteurs pour le mobile et le bureau. Je choisis 2-3px pour le mobile et 4-5px pour le bureau. Cela permet de garder tout propre tout en s'assurant que les utilisateurs peuvent toujours repérer facilement la barre de progression.
Pour des configurations rapides, j'ai obtenu d'excellents résultats avec le plugin Catch Scroll Progress. Cependant, lorsque j'ai besoin de plus de contrôle sur les détails, j'utilise généralement Thrive Builder – c'est parfait pour les projets personnalisés.
Jiří Vaněk
Pour les sites web où les articles sont plus longs que, par exemple, 1000 mots, c'est vraiment utile pour que l'utilisateur sache quelle partie du contenu il est déjà en train de lire et combien il en reste. Je suppose que cela peut aussi très bien réduire le taux de rebond et aider à « forcer » les gens à lire l'article jusqu'à la fin.
Vikash Pareek
Comment ajouter une barre de progression de lecture dans les articles WordPress sans plugin, car plus de plugins affectent la vitesse de la page, les plugins ne peuvent pas être installés pour chaque tâche.
Support WPBeginner
Les plugins et le code affectent votre site WordPress de la même manière. Un code de mauvaise qualité ou un plugin de mauvaise qualité affecterait la vitesse de votre site de la même manière. Nous vous recommandons de consulter notre article ci-dessous qui approfondit le nombre de plugins qu'un site devrait avoir.
https://wpbeginner.com/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/
Admin
Durga Thiyagarajan
Je cherchais ça ! Merci beaucoup et ça a fonctionné. Est-ce que cela affectera la vitesse de la page ?
Support WPBeginner
Pour savoir comment les plugins affectent la vitesse des pages, vous voudrez consulter notre article ci-dessous :
https://www.wpbeginner.com/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/
Admin
AmiF
Salut, merci de partager ce plugin génial, dans le sens horizontal, comment le faire remplir de droite à gauche ? Quelle partie dois-je changer pour le rendre « rtl » ? S’il vous plaît, aidez-moi…
Abhijeet
Le plugin « worth the read » a changé ses paramètres… Veuillez mettre à jour cet article
Jonathan Nabais
Bonjour,
Ça marche sur mon site mais c'est invisible parce que c'est sous l'arrière-plan.
Comment le rendre visible sur la page et pas sous la page ?
Nirmal Kumar
Merci de partager ce plugin génial. Ça a fonctionné. Santé !
Stanley
Ça a marché, très génial.
Merci
K T Bowes
Fonctionne sur mes pages mais pas sur mes articles de blog – ce qui est là où je le voulais vraiment. Ça a l'air bien sur mes pages cependant.
Tony Abbott
J'ai suivi toutes les étapes mais mes articles n'affichent pas la barre de progression. De plus, l'article indique que ce plugin ne prend pas en charge les pages, mais l'écran du plugin vous offre la possibilité d'utiliser le plugin sur les articles et les pages.
J'ai reçu ce tutoriel par e-mail de votre part le 09/06/16, donc je suppose que vous auriez dû vérifier la validité de l'article avant de l'envoyer.
Tim Coe
Ça n'a pas marché pour moi. La case d'activation a été remplacée par des cases d'articles et de pages, mais après l'avoir essayé 3 fois, j'abandonne.
Marcus
C'est plutôt sympa. J'ai un site qui fonctionne principalement via un type de publication personnalisé, je chercherai donc une autre ressource pour cela car beaucoup de mes articles sont longs à lire !
Merci de partager !