Suite à des demandes clients de l’agence, j’ai réalisé et mis à disposition une extension WordPress permettant d’apposer un indicateur de lecture sous la forme d’une barre de progression mise à jour tout au long de la lecture de vos contenus.
Cette extension utilise l’élément HTML <progress> qui peut être appliqué sur tout ou partie de vos contenus : page d’accueil, page de blog, archives de contenus, contenus seuls, types de contenus personnalisés, etc.
Cet élément peut également être placé de différentes manières avec trois options de positionnement : haut, bas ou personnalisé. Dans ce dernier cas, un élément HTML (balise, classe ou identifiant) vous sera demandé afin de positionner la barre de progression en bas de l’élément et de façon absolue. Vous êtes ensuite libre de modifier les styles CSS de la barre si vous le souhaitez mais plusieurs options sont disponibles en back-office : hauteur de la barre, couleur de premier plan, couleur d’arrière-plan, etc.
Plusieurs options sont à venir permettant aux utilisateurs avancés (freelances, agences, etc.) de personnaliser leur barre de progression de façon plus pointue.
L’extension est disponible en téléchargement libre et gratuit ici : https://wordpress.org/plugins/reading-progress-bar/
Cette extension a été réalisée à la base en anglais et traduite en français par mes soins, puis en allemand par Josef Seidl qui s’est gentiment proposé <3 Il est possible de contribuer à sa traduction ici : https://translate.wordpress.org/projects/wp-plugins/reading-progress-bar.
Pour les développeurs qui souhaiteraient proposer des améliorations ou forker le projet, un dépôt Github est dispo ici : https://github.com/audrasjb/reading-progressbar
Tous les contributeurs éventuels seront bien évidemment crédités sur la page de l’extension 🙂
4 réponses sur « Extension WordPress : un indicateur de progression de lecture »
Greetings! Veгy useful adviсe іn thiѕ particular articlе!
It is the little changes that will make the most ѕignificant changes.
Thankѕ a lot for sharіng!
Where this puling demo? I want looking demo website.
Thanks
Hi Hasan,
See the red indicator at the bottom of this post.
You can put it on the top or on the bottom of the website, and if you have a sticky header/footer, you can also place on it using the css class/id of the element 🙂
Cheers,
Jb
Hi there, how do I activate or de-activate the reading progress bar on a specific page/template or post? In the settings I can only activate it for all pages or all templates or all posts. Thanks!