Apparence & Affichage
Toutes les options de cette page sont disponibles dans la version Gratuite. Les utilisateurs Pro héritent de tout cela et ajoutent des fonctionnalités supplémentaires (voir la section Fonctionnalités Pro dans la barre latérale).
Accéder aux réglages
Tous les réglages se trouvent dans le menu Barre de progression dans la barre latérale de votre admin WordPress (menu de premier niveau, pas sous Réglages). Les options d'apparence sont regroupées dans l'onglet Style.
Apparence de la barre
Contrôle l'aspect visuel de la barre de progression.
| Option | Valeurs | Défaut |
|---|---|---|
| Couleur de la barre | N'importe quelle couleur | #1D9E75 |
| Hauteur | 2 – 20 px | 4 px |
| Position | haut / bas / personnalisé | haut |
| Sélecteur CSS personnalisé | N'importe quel sélecteur CSS | — |
| Fond de piste | N'importe quelle couleur (optionnel) | — |
| Opacité | 10 – 100 % | 100 % |
| Z-index | 1 – 99 999 | 9999 |
| Décalage header sticky | auto ou 0 – 500 px | auto |
Le Sélecteur CSS personnalisé vous permet d'ancrer la barre à n'importe quel élément de la page — utile si vous souhaitez la placer juste sous un header personnalisé plutôt qu'en bordure de la fenêtre.
Le Décalage header sticky empêche la barre de disparaître derrière les headers fixes. La valeur auto par défaut détecte automatiquement la hauteur du header. Si la détection se comporte mal sur votre thème, définissez une valeur fixe en pixels.
Contrôle de l'affichage
Contrôle où la barre apparaît sur votre site.
| Option | Valeurs | Défaut |
|---|---|---|
| Activer sur les articles | Activé / Désactivé | Activé |
| Activer sur les pages | Activé / Désactivé | Désactivé |
| Masquer sur l'accueil | Activé / Désactivé | Activé |
| Visibilité appareil | Tous / Bureau uniquement / Mobile uniquement / Masquer mobile | Tous |
Source de progression
ReadNinja peut calculer la progression de lecture de deux façons différentes.
- Contenu uniquement — la barre commence à se remplir quand le lecteur entre dans le corps de l'article et se termine au dernier paragraphe. ReadNinja détecte automatiquement les conteneurs courants comme
.entry-content,.post-contentetarticle. - Page entière — la barre reflète le défilement global de la page (du haut de la fenêtre jusqu'au bas du document).