Hoe een voortgangsbalk in uw WordPress-berichten toevoegen

Heb je ooit een voortgangsbalk willen toevoegen aan je WordPress-site? Je kunt het gebruiken om de voortgang te laten zien van een fondsenwervingscampagne, mijlpalen voor een specifiek project waaraan je werkt, enz. Onlangs vroeg een van onze lezers hoe ze een voortgangsbalk kunnen toevoegen in een WordPress-bericht. In dit artikel laten we u zien hoe u een voortgangsbalk kunt toevoegen in uw WordPress-berichten, -pagina's en -widgets.

Video-instructies

Als je de video niet leuk vindt of meer instructies nodig hebt, ga dan door met lezen.

Het eerste wat u hoeft te doen is de Progress Bar-plug-in installeren en activeren. Het werkt uit de doos en er zijn geen instellingen die u kunt configureren.

Bewerk gewoon een bericht of pagina waar u de voortgangsbalk wilt weergeven en voeg de shortcode toe in dit formaat:

[wppb progress = 50]

Dit toont een geanimeerde voortgangsbalk om een ​​voortgang van 50% aan te geven met de standaard blauwe kleur.

Best gemakkelijk, toch??

U kunt ook de shortcode aanpassen om kleuren te wijzigen, tekst aan de voortgangsbalk toe te voegen, valuta weergeven in plaats van percentage en meer. Laten we een paar van deze aanpassingsopties bekijken.

Tekst toevoegen aan de voortgangsbalk

In het bovenstaande voorbeeld kunt u zien dat onze voortgangsbalk niet echt vermeldt waar het over gaat. U kunt dit wijzigen door wat nuttige tekst toe te voegen in de voortgangsbalk met behulp van het tekteigenschrift in de shortcode.

[wppb progress = 75 text = "Voortgang tot nu toe"]

Hierdoor wordt uw tekst bovenaan de voortgangsbalk weergegeven en ziet deze er als volgt uit:

Valuta weergeven in plaats van Percentage in voortgangsbalk

Standaard geeft de voortgangsbalk het voltooiingspercentage weer, maar u kunt dit wijzigen in een valuta als u deze gebruikt voor een fondsenwervende campagne.

Hier ziet u hoe u de shortcode zou gebruiken om de valuta weer te geven en zowel het doelbedrag als het verzamelde bedrag tot nu toe aan te geven.

[wppb progress = "$ 250/1000" text = "$ 250 / $ 1000 Raised"]

Het zal er zo uitzien op uw website:

Als u de tekst buiten de voortgangsbalk wilt weergeven, kunt u de shortcode als volgt wijzigen:

[wppb progress = "$ 250/1000" text = "$ 250 / $ 1000 Raised" location = "after"]

Veranderende kleuren en uiterlijk van de voortgangsbalk

De Progress Bar-plug-in wordt geleverd met een paar kleuren en uiterlijkopties die u kunt gebruiken. De ingebouwde kleuropties zijn blauw, rood, geel, oranje en groen. U kunt echter elke gewenste kleur gebruiken. U kunt een platte of geanimeerde voortgangsbalk toevoegen.

Hier is hoe je de shortcode gebruikt om elke optie te gebruiken:

Oranje voortgangsbalk
[wppb progress = 50 optie = oranje]

Geanimeerde voortgangsbalk candy stripe in rood
[wppb progress = 50 option = "animated-candystripe red"]

Candy strip voortgangsbalk in groene kleur
[wppb progress = 50 option = "candystripe green"]

Een standaard blauwe voortgangsbalk met snoepstreep
[wppb progress = 50 option = candystripe]

Een platte voortgangsbalk in paarse kleur
[wppb progress = 50 option = flat color = purple]

Een voortgangsbalk met platte snoepstrepen in bruin
[wppb progress = 50 option = "platte candystripe" kleur = bruin]

Dit is hoe deze voortgangsbalken eruit zullen zien op uw site:

Voortgangsbalk toevoegen in WordPress Zijbalk Widgets

Eerst moet u shortcodes inschakelen voor tekstwidgets in WordPress. U kunt dit doen door de volgende regel code toe te voegen in het functie.php-bestand van uw thema of in een sitespecifieke plug-in.

 add_filter (widget_text ',' do_shortcode); 

Je kunt nu bezoeken Uiterlijk »Widgets pagina en voeg een tekstwidget toe aan uw zijbalk. Gebruik de shortcode in de voortgangsbalk in de tekstwidget, net zoals u deze in een bericht of pagina zou gebruiken. Hier is een code die we hebben gebruikt op onze demosite:

 [wppb progress = "$ 2500 / $ 4500" option = "animated-candystripe red" fullwidth = true] Opgefokt: $ 2500 Doel: $ 4500 Doneer hier 

Zo zag het er uit op onze testsite:

We hopen dat dit artikel u heeft geholpen om een ​​mooie voortgangsbalk toe te voegen aan uw WordPress-berichten of -pagina's. Misschien wilt u ook onze handleiding over het toevoegen van een PayPal-donatieknop in WordPress bekijken.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.