Aquest article proporcionarà el procediment per afegir una barra de progrés a WordPress mitjançant l'esquema següent:
- Què és una barra de progrés a WP?
- Com afegir barres de progrés als llocs web de WordPress amb codi?
- Com afegir barres de progrés als llocs web de WordPress mitjançant connectors?
Què és una barra de progrés a WordPress?
Una barra de progrés mostra el progrés d'alguna cosa en percentatge mitjançant una barra horitzontal. És una representació gràfica d'algunes dades que poden proporcionar informació a l'usuari d'una sola ullada. L'ús de barres de progrés a les vostres publicacions de WordPress per representar dades o estadístiques pot ajudar a millorar l'atractiu del lloc web i la implicació dels usuaris.
Com afegir barres de progrés als llocs web de WordPress amb codi?
Per afegir una barra de progrés a WordPress sense un complement, l'usuari haurà d'utilitzar l'HTML i el CSS personalitzats en una publicació. Per fer-ho, seguiu els passos que s'indiquen a continuació:
Pas 1: inicieu sessió al tauler
Obriu el navegador i aneu a ' http://localhost/<Website-Name>/wp-login.php ' enllaç. Proporcioneu les credencials d'administrador i premeu ' Iniciar Sessió botó ”:
Pas 2: creeu una publicació nova
Anar a ' Publicacions > Afegeix noves ” al menú lateral del tauler d'administració:
Pas 3: afegiu codi HTML personalitzat
A la publicació, proporcioneu el títol i contingut addicional. A continuació, feu clic a ' + icona i cerqueu la icona “ HTML personalitzat ' bloc:
Al bloc HTML afegit, enganxeu el codi proporcionat a continuació. Canvia el ' amplada ' dins del ' ” etiquetes per al percentatge desitjat de la barra de progrés. De la mateixa manera, canvieu el ' progressió-text ' d'acord amb:
< div classe = 'barra de progrés personalitzada' >< span estil = 'amplada: 80%' >< / span >
< div classe = 'text de progressió' > 80% < / div >
< / div >
Després d'això, premeu ' Publicar ” per pujar la publicació al lloc web:
Pas 4: afegiu CSS personalitzat
Un cop publicada la publicació, feu clic a ' Veure publicació botó ”:
A la vista prèvia, feu clic a ' Personalitza ” per afegir l'estil a la barra de progrés:
Apareixerà un menú d'editor al costat esquerre de la pantalla. Aquí, desplaceu-vos cap avall i feu clic a ' CSS addicional ” secció:
Enganxeu el codi CSS següent al quadre per estilitzar la barra de progrés:
.barra de progrés personalitzada {fons- color : #1a1a1a;
alçada : 30 píxels;
farciment: 5px;
amplada : 500 píxels;
marge: 5 píxels 0 ;
radi de la vora: 5px;
caixa-ombra: 0 1px 5px #000 inserit, 0 1px 0 # 444 ;
}
.barra de progrés personalitzada span {
fons- color : #0000FF;
pantalla: bloc en línia;
flotar: esquerra;
alçada : 100 %;
radi de la vora: 3px;
caixa-ombra: 0 1px 0 rgba ( 255 , 255 , 255 , .5 ) inserció;
transició: amplada .4s facilitat d'entrada i sortida;
}
.progressió- text {
text- alinear : dret;
color : blanc;
margin: 0px;
}
Pas 5: publica la publicació
Finalment, feu clic a ' Publicar ” publica per desar aquests canvis:
En tornar a carregar la pàgina, l'usuari pot veure que la barra de progrés es pot veure a la publicació:
Com afegir barres de progrés als llocs web de WordPress mitjançant connectors?
Aquesta demostració utilitzarà el connector 'Ultimate Blocks' per afegir una barra de progrés a un lloc web de WordPress. Per fer el mateix, seguiu els passos que s'indiquen a continuació.
Pas 1: afegiu un connector nou
Un cop l'usuari hagi iniciat sessió al tauler, aneu a la ' Connectors > Afegeix nou ” opció de la barra de menú lateral:
Pas 2: instal·leu el connector Ultimate Blocks
Cerqueu els blocs definitius i premeu ' Entra clau”. A continuació, feu clic a sota apuntat ' Instal · lar ara botó ”:
Pas 3: activa els blocs definitius
Un cop instal·lat el connector, feu clic a ' Activar ” per utilitzar la barra de progrés a WordPress:
Pas 4: creeu una publicació nova
Per afegir una barra de progrés a una publicació de WordPress, aneu a ' Publicacions > Afegeix noves ” opció del menú lateral:
Pas 5: afegiu el bloc de la barra de progrés
Proporcioneu un títol i contingut a la publicació. A continuació, premeu ' + icona per afegir un bloc nou. Al menú, cerqueu ' Barra de progrés ” i seleccioneu el bloc:
Pas 6: establiu el percentatge de la barra
Per establir un percentatge per a la barra de progrés, utilitzeu el control lliscant blau o introduïu el percentatge al quadre de ressaltat següent:
Pas 7: publiqueu la publicació
Un cop finalitzada la publicació, feu clic a ' Publicar ” per pujar la publicació al lloc web:
Pas 8: visualitza la publicació
Després de publicar la publicació, feu clic al botó 'Veure publicació' per veure la vista prèvia de la publicació al lloc web:
A la sortida següent es pot veure que la barra de progrés s'afegeix a la publicació:
Es tracta d'afegir una barra de progrés a WordPress.
Conclusió
Per afegir una barra de progrés a un lloc web de WordPress, aneu a ' Connectors > Afegeix nou ” opció del menú lateral. Cerqueu i instal·leu el ' Blocs definitius ' connectar. Després de la instal·lació, activeu-la. A continuació, aneu a ' Publicacions > Afegeix noves ” i proporcioneu el títol i el contingut de la publicació. A continuació, feu clic a ' + ” i cerqueu “ Barra de progrés ' bloc. Establiu el percentatge de progrés mitjançant el control lliscant o introduint el número. Aquest article ha il·lustrat el procediment per afegir una barra de progrés a WordPress amb i sense el connector.