Avez-vous déjà voulu ajouter une barre de progression dans votre site WordPress ? Vous pouvez l’utiliser pour montrer les progrès d’une campagne de collecte de fonds, les jalons d’un projet spécifique sur lequel vous travaillez, etc. Récemment, l’un de nos lecteurs a demandé comment ajouter une barre de progression dans un article WordPress. Dans cet article, nous allons vous montrer comment ajouter une barre de progression dans vos publications, pages et widgets WordPress.
Didacticiel vidéo
Si vous n’aimez pas la vidéo ou si vous avez besoin de plus d’instructions, continuez à lire.
La première chose à faire est d’installer et d’activer le Barre de progression brancher. Cela fonctionne immédiatement et vous n’avez aucun paramètre à configurer.
Modifiez simplement un article ou une page où vous souhaitez afficher la barre de progression et ajoutez le shortcode dans ce format :
[wppb progress=50]
Cela affichera une barre de progression animée pour indiquer une progression de 50% en utilisant la couleur bleue par défaut.
Assez facile non?
Vous pouvez également personnaliser le shortcode pour changer les couleurs, ajouter du texte à la barre de progression, afficher la devise au lieu du pourcentage, etc. Jetons un coup d’œil à certaines de ces options de personnalisation.
Ajout de texte à la barre de progression
Dans l’exemple ci-dessus, vous pouvez voir que notre barre de progression ne mentionne pas réellement de quoi il s’agit. Vous pouvez changer cela en ajoutant du texte utile dans la barre de progression en utilisant l’attribut text dans le shortcode.
[wppb progress=75 text="Progress so far"]
Cela affichera votre texte en haut de la barre de progression, et il ressemblera à ceci :
Affichage de la devise au lieu du pourcentage dans la barre de progression
Par défaut, la barre de progression affiche le pourcentage d’achèvement, mais vous pouvez le changer en devise si vous l’utilisez pour une campagne de collecte de fonds.
Voici comment vous utiliseriez le shortcode pour afficher la devise et indiquer à la fois le montant cible et le montant collecté jusqu’à présent.
[wppb progress="$250/1000" text="$250/$1000 Raised"]
Cela ressemblera à ceci sur votre site Web :
Si vous souhaitez afficher le texte en dehors de la barre de progression, vous pouvez modifier le shortcode comme ceci :
[wppb progress="$250/1000" text="$250/$1000 Raised" location="after"]
Modification des couleurs et de l’apparence de la barre de progression
Le plugin Progress Bar est livré avec quelques options de couleurs et d’apparence que vous pouvez utiliser. Les options de couleur intégrées sont le bleu, le rouge, le jaune, l’orange et le vert. Cependant, vous pouvez utiliser n’importe quelle couleur que vous voulez. Vous pouvez ajouter une barre de progression plate ou animée.
Voici comment vous utiliserez le shortcode pour utiliser chaque option :
Barre de progression orange
[wppb progress=50 option=orange]
Barre de progression animée de rayures de bonbons en rouge
[wppb progress=50 option="animated-candystripe red"]
Barre de progression Candy Stripe de couleur verte
[wppb progress=50 option="candystripe green"]
Une barre de progression bleue par défaut avec une bande de bonbons
[wppb progress=50 option=candystripe]
Une barre de progression plate de couleur violette
[wppb progress=50 option=flat color=purple]
Une barre de progression plate à rayures en marron
[wppb progress=50 option="flat candystripe" color=brown]
Voici à quoi ressembleront ces barres de progression sur votre site :
Ajout de la barre de progression dans les widgets de la barre latérale WordPress
Vous devez d’abord activer les shortcodes pour les widgets de texte dans WordPress. Vous pouvez le faire en ajoutant la ligne de code suivante dans le fichier functions.php de votre thème ou dans un plugin spécifique au site.
add_filter('widget_text','do_shortcode');
Vous pouvez maintenant visiter Apparence » Widgets page et ajoutez un widget de texte à votre barre latérale. Utilisez le shortcode de la barre de progression dans le widget de texte comme vous l’utiliseriez dans un article ou une page. Voici un code que nous avons utilisé sur notre site de démonstration :
[wppb progress="$2500/$4500" option="animated-candystripe red" fullwidth=true] Raised: $2500 Goal: $4500 <a href="example.com">Donate here</a>
Voici à quoi cela ressemblait sur notre site de test :
Nous espérons que cet article vous a aidé à ajouter une belle barre de progression dans vos articles ou pages WordPress. Vous pouvez également consulter notre guide sur la façon d’ajouter un bouton de don PayPal dans WordPress.
