Cum să adăugați un bara de progres în mesajele WordPress

Ați dorit vreodată să adăugați un bara de progres în site-ul dvs. WordPress? Puteți să-l utilizați pentru a arăta progresul într-o campanie de strângere de fonduri, la etapele specifice proiectului pe care lucrați etc. Recent, unul dintre cititorii noștri au întrebat cum pot adăuga un bar de progres într-un post WordPress. În acest articol, vă vom arăta cum să adăugați o bară de progres în postările, paginile și widgeturile WordPress.

Tutorial video

Dacă nu vă place videoclipul sau aveți nevoie de mai multe instrucțiuni, continuați să citiți.

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul Progress Bar. Funcționează din cutie și nu există setări pentru configurare.

Trebuie doar să editați o postare sau o pagină în care doriți să afișați bara de progres și să adăugați codul scurt în acest format:

[progres wppb = 50]

Aceasta va afișa o bară de progres animată pentru a indica progresul de 50% folosind culoarea albastră implicită.

Destul de ușor?

De asemenea, puteți personaliza codul scurt pentru a schimba culorile, a adăuga text la bara de progres, a afișa moneda în loc de procent și mai mult. Să aruncăm o privire la unele dintre aceste opțiuni de personalizare.

Adăugarea textului în bara de progres

În exemplul de mai sus, puteți vedea că bara de progres nu menționează de fapt despre ce este vorba. Puteți modifica acest lucru prin adăugarea unui text util în bara de progres folosind atributul text din codul scurt.

[wppb progress = 75 text = "Progrese până acum"]

Acesta va afișa textul pe partea de sus a barei de progres și va arăta astfel:

Se afișează valuta în locul barei procentuale în progres

În mod prestabilit, bara de progres indică procentul de finalizare, dar îl puteți schimba într-o monedă dacă o utilizați pentru o campanie de strângere de fonduri.

Iată cum ați utiliza codul scurt pentru a afișa moneda și pentru a indica atât suma țintă, cât și suma colectată până acum.

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

Acesta va arăta astfel pe site-ul dvs.:

Dacă doriți să afișați textul în afara barei de progres, puteți modifica codul scurt astfel:

[wppb progress = "$ 250/1000" text = "$ 250 / $ 1000 Crescut" locație = "după"]

Modificarea culorilor și a aspectului barei de progres

Progress Bar plugin-ul vine cu câteva culori și opțiuni de aspect pe care le puteți utiliza. Opțiunile de culoare încorporate sunt albastru, roșu, galben, portocaliu și verde. Cu toate acestea, puteți utiliza orice culoare doriți. Puteți adăuga o bară de progres plat sau animată.

Iată cum veți folosi codul scurt pentru a utiliza fiecare opțiune:

Bara de progres Orange
[wppb progres = 50 opțiune = portocaliu]

Bara de progres banda de bomboane animate în roșu
[wppb progress = 50 opțiune = "animated-candystripe red"]

Bara de progres banda banda in culoarea verde
[wppb progress = 50 opțiune = "green candystripe"]

O bară de progres albastră standard cu banda de bomboane
[wppb progres = 50 opțiune = candystripe]

O bară de progres plat cu culoarea purpurie
[wppb progress = 50 opțiune = culoare plată = violet]

O bară de bomboane de bomboane plate de culoare maro
[wppb progress = 50 opțiune = "flat candystripe" culoare = maro]

Astfel vor arăta aceste bare de progres pe site-ul dvs.:

Adăugarea barei de progres în widget-urile din bara laterală WordPress

Mai întâi va trebui să activați codurile scurte pentru widget-urile text în WordPress. Puteți face acest lucru adăugând următoarea linie de cod în fișierul functions.php al temei sau într-un plugin specific site-ului.

 add_filter ( 'widget_text', 'do_shortcode'); 

Acum puteți vizita Aspect »Widgeturi și adăugați un widget text în bara laterală. Utilizați codul scurt al barei de progres din widgetul de text, la fel cum l-ați folosi într-un post sau o pagină. Iată un cod pe care l-am folosit pe site-ul nostru demo:

 [wppb progress = "$ 2500 / $ 4500" opțiune = "animated-candystripe roșu" fullwidth = true] Crescut: $ 2500 Scop: 4500 dolari Donați aici 

Acesta este modul în care a arătat pe site-ul nostru de testare:

Sperăm că acest articol v-a ajutat să adăugați un bar de progres excelent în mesajele sau paginile dvs. WordPress. Ați putea dori, de asemenea, să vedeți ghidul nostru cu privire la modul de a adăuga un PayPal Donate Button în WordPress.

Dacă v-ați plăcut acest articol, vă rugăm să vă abonați la tutorialele video YouTube pentru canalul YouTube pentru WordPress. Ne puteți găsi pe Twitter și pe Facebook.