Acest articol va oferi procedura pentru adăugarea unei bare de progres în WordPress folosind următorul schiță:
- Ce este o bară de progres în WP?
- Cum să adăugați bare de progres pe site-urile WordPress folosind cod?
- Cum să adăugați bare de progres pe site-urile WordPress folosind pluginuri?
Ce este o bară de progres în WordPress?
O bară de progres arată progresul a ceva în procente folosind o bară orizontală. Este o reprezentare grafică a unor date care pot furniza informații utilizatorului doar dintr-o singură privire. Utilizarea barelor de progres în postările dvs. WordPress pentru a reprezenta date sau statistici poate ajuta la îmbunătățirea atractivității site-ului web și a angajării utilizatorilor.
Cum să adăugați bare de progres pe site-urile WordPress folosind cod?
Pentru a adăuga o bară de progres la WordPress fără un plugin, utilizatorul va trebui să folosească HTML și CSS personalizat într-o postare. Pentru a face acest lucru, urmați pașii furnizați mai jos:
Pasul 1: Conectați-vă la tabloul de bord
Deschideți browserul și accesați „ http://localhost/<Website-Name>/wp-login.php ” link. Furnizați acreditările de administrator și apăsați pe „ Log in butonul ”:
Pasul 2: Creați o postare nouă
Mergi la ' Postări > Adăugați nou ” din meniul lateral al tabloului de bord admin:
Pasul 3: Adăugați cod HTML personalizat
În postare, furnizați titlul și conținutul suplimentar. Apoi, faceți clic pe „ + ” și căutați „ HTML personalizat ' bloc:
În blocul HTML adăugat, inserați codul furnizat mai jos. Schimba ' lăţime ' în interiorul ' ” etichete pentru procentul dorit din bara de progres. În mod similar, schimbați „ progresie-text ” în consecință:
< div clasă = 'bara-de-progres personalizat' >< span stil = 'latime: 80%' >< / span >
< div clasă = 'text-progresie' > 80% < / div >
< / div >
După aceea, apăsați pe „ Publica ” pentru a încărca postarea pe site:
Pasul 4: Adăugați CSS personalizat
Odată ce postarea este publicată, faceți clic pe „ Vezi postarea butonul ”:
În previzualizare, faceți clic pe „ Personalizați ” pentru a adăuga stilul pentru bara de progres:
Un meniu editor va apărea în partea stângă a ecranului. Aici, derulați în jos și faceți clic pe „ CSS suplimentar ' secțiune:
Lipiți următorul cod CSS în casetă pentru a stila bara de progres:
.bara-de-progres personalizată {fundal- culoare : #1a1a1a;
înălţime : 30px;
umplutură: 5px;
lăţime : 500px;
marja: 5px 0 ;
chenar-rază: 5px;
cutie-umbra: 0 1px 5px #000 insert, 0 1px 0 # 444 ;
}
.bara-de-progres personalizată span {
fundal- culoare : #0000FF;
display: inline-block;
plutește la stânga;
înălţime : 100 %;
chenar-rază: 3px;
cutie-umbra: 0 1px 0 rgba ( 255 , 255 , 255 , .5 ) medalion;
tranziție: lăţime .4s ease-in-out;
}
.progresie- text {
text- alinia : dreapta;
culoare : alb;
marjă: 0px;
}
Pasul 5: Publicați postarea
În cele din urmă, faceți clic pe „ Publica ” postați pentru a salva aceste modificări:
La reîncărcarea paginii, utilizatorul poate vedea că bara de progres poate fi văzută în postare:
Cum să adăugați bare de progres pe site-urile WordPress folosind pluginuri?
Această demonstrație va folosi pluginul „Ultimate Blocks” pentru a adăuga o bară de progres la un site web WordPress. Pentru a face același lucru, urmați pașii furnizați mai jos.
Pasul 1: Adăugați un plugin nou
Odată ce utilizatorul este conectat la tabloul de bord, accesați „ Plugin-uri > Adăugați nou ” din bara de meniu laterală:
Pasul 2: Instalați pluginul Ultimate Blocks
Căutați blocurile Ultimate și apăsați pe „ introduce ” cheie. Apoi, faceți clic pe butonul de mai jos indicat „ Instaleaza acum butonul ”:
Pasul 3: Activați Ultimate Blocks
Odată ce pluginul este instalat, faceți clic pe „ Activati ” pentru a utiliza bara de progres în WordPress:
Pasul 4: Creați o postare nouă
Pentru a adăuga o bară de progres la o postare WordPress, accesați „ Postări > Adăugați nou ” din meniul lateral:
Pasul 5: Adăugați blocul barei de progres
Furnizați un titlu și conținut postării. Apoi, apăsați butonul „ + ” pentru a adăuga un bloc nou. În meniu, căutați „ Bara de progres ” și selectați blocul:
Pasul 6: Setați procentul pentru bară
Pentru a seta un procent pentru bara de progres, utilizați glisorul albastru sau introduceți procentul în caseta de evidențiere de mai jos:
Pasul 7: Publicați postarea
După ce postarea este finalizată, faceți clic pe „ Publica ” pentru a încărca postarea pe site:
Pasul 8: Vizualizați postarea
După publicarea postării, faceți clic pe butonul „Vizualizare postare” pentru a vedea previzualizarea postării pe site:
Se poate vedea în rezultatul de mai jos că bara de progres este adăugată la postare:
Asta înseamnă adăugarea unei bare de progres în WordPress.
Concluzie
Pentru a adăuga o bară de progres la un site web WordPress, accesați „ Plugin-uri > Adăugați nou ” din meniul lateral. Căutați și instalați „ Blocuri definitive ' conecteaza. După instalare, activați-l. Apoi, mergeți la „ Postări > Adăugați nou ” și furnizați titlul și conținutul postării. Apoi, faceți clic pe „ + ” și căutați „ Bara de progres ' bloc. Setați procentul de progres folosind glisorul sau introducând numărul. Acest articol a ilustrat procedura pentru adăugarea unei bare de progres în WordPress cu și fără plugin.