skip to Main Content

Comment ajouter une barre de progression sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Avez-vous déjà eu envie d’ajouter une barre de progression sur votre blog WordPress ?

Vous pouvez l’utiliser pour montrer l’évolution d’une campagne de levée de fonds, ou pour un projet spécifique sur lequel vous travaillez.

Récemment, un abonné cherchait à savoir quelle méthode il pouvait utiliser pour ajouter rapidement une barre de progression sur son blog WordPress.

Dans ce tutoriel, je vous montrerai comment ajouter une barre de progression sur votre blog WordPress en tout simplicité.

La première chose à faire est d’installer et d’activer le plugin « Progress Bar » disponible sur WordPress.org, ce plugin fonctionne sans configuration.

progress-bar-plugin

Il vous suffit tout simplement d’ajouter le shortcode sur une page ou un article (et même sur une sidebar) pour voir comment il fonctionne. Le shortcode à ajouter se présente ainsi :

« [wppb progress=50] »

Ceci affichera une barre de progression

comment-ajouter-une-barre-de-progression

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Assez simple n’est-ce pas ?

Vous pouvez également personnaliser ce code en ajoutant des couleurs, des textes sur la barre de progression, afficher une devise au lieu d’un pourcentage, et bien plus. Essayons ensemble de parcourir les différentes possibilités

Comment ajouter un texte sur la barre de progression

Dans le shortcode précédent, nous avons affiché une barre de progression sans aucune mention. Pour modifier cela avec un texte qui peut être indicatif pour les utilisateurs, nous allons ajouter le paramètre « text » au shortcode de cette façon :

« [wppb progress=76 text= »Evolution du travail »] »

Pour ce résultat

evolution-du-travail

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Comment ajouter une devise sur la barre de progression

Par défaut, la barre de progression affiche un pourcentage d’évolution, mais vous pouvez modifier cela par une devise de votre choix, ce qui peut être bien utile si vous souhaitez montrer l’évolution d’une levée de fonds.

« [wppb progress= »50€/400’ text=’50€/400 levés »] »

Pour un résultat similaire à celui-ci

levee-de-fonds

Comment changer la couleur et l’apparence de la barre d’évolution

Ce plugin propose quelques couleurs que vous pouvez utiliser pour personnaliser la barre de progression. Les couleurs définies par défaut sont « rouge », « bleu », « orange » et « vert », cependant, vous pouvez utiliser la couleur que vous souhaitez. Il est également possible d’ajouter des barres de progression animées.

Voici comment vous pouvez utiliser le shortcode pour chaque option :

Barre de progression orange

[wppb progress=50 option=orange]

Barre de progression rouge animée avec des rayures

[wppb progress=50 option= »animated-candystrip red »]

Barre de progression verte avec des rayures

[wppb progress=50 option= »candystrip green »]

Barre de progression plate avec des rayures

[wppb progress=50 option= »flat candystrip » color=brown]

Comment ajouter une barre de progression dans une sidebar

Nous allons utiliser le widget « texte » pour y arriver. Il vous suffit tout simplement d’utiliser le filtre suivant « widget_text » de cette manière :

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

« add_filter(« widget_text », « do_shortcode ») ; »

Ajoutez cette ligne dans le fichier “functions.php” de votre theme. Visitez ensuite l’emplacement « Apparence > Widgets » et ajouter le widget « texte » dans une des zones à widget de votre thème. Vous pourrez même le personnaliser à votre guise, de cette façon :

« [wppb progress= »2500€/4500€ » option= »animated-candystripe red » fullwidth=true] »

Levés : 2500 €
Objectif : 4500 €

<a href= »# »>Faites un don</a> »

Pour un résultat similaire à celui-ci :

meta-widget

C’est tout pour ce tutoriel, j’espère qu’il vous sera d’une grande utilité, n’hésitez pas à le partager avec vos amis où sur vos réseaux sociaux préférés.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
4 Partages
Partagez2
Tweetez
Enregistrer2