Lorsque vous attendez, devant une page ou durant le téléchargement d’un fichier, votre attente est souvent complétée par un élément graphique qui avance au rythme du chargement. Cet élément s’appelle une barre de progression
En plus de l’élément graphique, l’avancement est souvent indiqué à l’aide d’un pourcentage. On retrouve ces barres pendant les transferts de fichiers sur Internet ou lors des copies de fichiers d’un disque à un autre. On peut également les trouver dans les jeux vidéo pendant la phase de chargement nécessaire avant de pouvoir accéder au jeu proprement dit.
Comment ajouter une barre de progression à vos articles
La barre de progression clarifie la période d’attente en un coup d’œil. Ce guide est fait pour les propriétaires de sites qui veulent ajouter une barre de progression dans les articles ou les pages de leur site WordPress. Aucun codage n’est nécessaire.
Méthode 1: Utiliser Responsive Progress Bar
Responsive Progress Bar est un plugin simple d’utilisation, ce qui est idéal pour les utilisateurs qui ne connaissent pas grand chose à la technique. Cela facilite l’ajout d’une barre de progression dans tout article ou page de votre site. Tout ce que vous avez à faire est d’installer ce plugin sur votre site, puis d’insérer le shortcode fourni, partout où vous le souhaitez.
Après l’installation et l’activation du plugin, aucune modification ne sera visible tant que vous n’utilisez pas le shortcode [rprogress] dans l’article ou la page. Notez que, ce shortcode indique que la progression se complète à 100%. La couleur par défaut de votre barre de progression est bleu. Si vous avez besoin d’apporter des changements au statut et à l’apparence de la barre, vous pourrez utiliser certains des attributs listés ci-dessous.
Par exemple, le shortcode [rprogress value= 60] affiche une barre avec une valeur de 60%. Le shortcode [rprogress value= 60 color = « # FF0000 »] affiche une barre rouge, qui devrait s’apparenter à l’exemple ci-dessous.
Méthode 2: Utilisez Progress Bar
Progress Bar est un plugin de barre de progression très populaire, qui permet aux utilisateurs d’afficher la progression d’un projet à l’aide d’un shortcode. Outre les articles et les pages, ce plugin permet également d’ajouter un widget barre de progression dans la barre latérale de votre site.
Ajouter la barre de progression dans un article / une page
Utiliser le shortcode [wppb progress= 60] affichera une barre avec une valeur de 60%. En personnalisant le nombre inclus dans le shortcode, vous afficherez la barre au niveau d’avancement que vous avez besoin d’afficher. Si vous connaissez le codage CSS, vous pouvez modifier le style de la barre avec du code CSS. Cela rendra votre barre unique et attrayante, comme dans l’exemple ci-dessous.
Outre le shortcode mentionné ci-dessus, voici d’autres exemples d’utilisation du plugin pour afficher la barre de progression.
- [wppb progress= « 60/100 »] – La barre est complète à 60%
- [wppb progress= « $ 30 / $ 50 »] – La barre se situe à 30 $ sur 50 $ à atteindre
- [wppb progress= 110] – La barre va au delà des 100%
Ajouter la barre de progression dans la barre latérale
Rendez vous dans le menu Apparence -> Widgets et sélectionnez le widget nommé Progress Bar. Faites glisser et déposez le widget dans la barre latérale, à la position que vous souhaitez.
Une liste de paramètres pour personnaliser le widget Progress Bar est affichée comme ci-dessous.
- Modifier le titre du widget, comme bon vous semble, par exemple « Progression ».
- La zone « Progress » vous permet d’indique le niveau d’avancement.
- Sélectionnez la couleur appropriée pour que votre barre se fonde, ou se démarque dans votre site.
- Entrez une valeur numérique, par exemple 4/5 ou 50%, c’est ce qui sera affiché sur la barre.
- Choisissez si vous souhaitez que votre barre soit rayée comme un bonbon (Candystripe), comme l’exemple ci-dessous.
- Choisissez si le texte de la progression doit se situer à l’intérieur ou l’extérieur de la barre. Le texte personnalisé est facultatif.
- Cliquez sur le bouton « Enregistrer » pour confirmer les réglages.
En suivant ce guide, vous ne devriez plus avoir de soucis pour installer une barre de progression qui ressemble à l’exemple ci-dessous.
En résumé
La première méthode est idéale pour les utilisateurs qui ont juste besoin d’afficher la progression dans une page ou un article et qui préfèrent utiliser un shortcode. La seconde méthode offre plus de possibilités, ce qui permet aux utilisateurs de définir une barre de progression plus personnalisée et la placer en fonction de leurs besoins.
Cet article vous a intéressé? Partagez le, il intéressera probablement d’autres personnes. Merci!
Publié à l'origine le : 20 août 2015 @ 15 h 16 min
