Ovaj članak će pružiti postupak za dodavanje trake napretka u WordPress koristeći sljedeći pregled:
- Što je traka napretka u WP-u?
- Kako dodati trake napretka na WordPress web stranice pomoću koda?
- Kako dodati trake napretka na WordPress web stranice pomoću dodataka?
Što je traka napretka u WordPressu?
Traka napretka prikazuje napredak nečega u postocima pomoću vodoravne trake. To je grafički prikaz nekih podataka koji može pružiti informaciju korisniku samo jednim pogledom. Korištenje traka napretka u vašim WordPress postovima za predstavljanje podataka ili statistike može pomoći u poboljšanju privlačnosti web stranice i angažmana korisnika.
Kako dodati trake napretka na WordPress web stranice pomoću koda?
Za dodavanje trake napretka u WordPress bez dodatka, korisnik će morati koristiti prilagođeni HTML i CSS u objavi. Da biste to učinili, slijedite dolje navedene korake:
Korak 1: Prijavite se na nadzornu ploču
Otvorite preglednik i idite na ' http://localhost/<Website-Name>/wp-login.php ' veza. Unesite administratorske vjerodajnice i pritisnite ' Prijaviti se ' dugme:
Korak 2: Napravite novu objavu
Ići ' Postovi > Dodaj novi ” iz bočnog izbornika administratorske nadzorne ploče:
Korak 3: Dodajte prilagođeni HTML kôd
U objavi navedite naslov i dodatni sadržaj. Zatim kliknite na ' + ' i potražite ' Prilagođeni HTML ' blok:
U dodani HTML blok zalijepite donji kod. Promijeni ' širina ' unutar ' ” za željeni postotak trake napretka. Slično, promijenite ' progresija-tekst ' prema tome:
< div razreda = 'prilagođena traka napretka' >< raspon stil = 'širina: 80%' >< / raspon >
< div razreda = 'progresija-tekst' > 80% < / div >
< / div >
Nakon toga pritisnite ' Objaviti ” za prijenos objave na web mjesto:
Korak 4: Dodajte prilagođeni CSS
Nakon što je objava objavljena, kliknite na ' Pogledaj post ' dugme:
U pregledu kliknite na ' Prilagodite ” za dodavanje stila za traku napretka:
Na lijevoj strani ekrana pojavit će se izbornik uređivača. Ovdje se pomaknite prema dolje i kliknite na ' Dodatni CSS ” odjeljak:
Zalijepite sljedeći CSS kod u okvir da biste stilizirali traku napretka:
.prilagođena traka napretka {pozadina- boja : #1a1a1a;
visina : 30 px;
ispuna: 5px;
širina : 500 px;
margina: 5px 0 ;
rubni radijus: 5px;
okvir-sjena: 0 1px 5px #000 umetak, 0 1px 0 # 444 ;
}
.prilagođena traka napretka raspon {
pozadina- boja : #0000FF;
prikaz: inline-block;
plovak: lijevo;
visina : 100 %;
rubni radijus: 3px;
okvir-sjena: 0 1px 0 rgba ( 255 , 255 , 255 , .5 ) umetak;
tranzicija: širina .4s lagano uvlačenje;
}
.progresija- tekst {
tekst- uskladiti : desno;
boja : bijela;
margina: 0px;
}
Korak 5: Objavite objavu
Na kraju kliknite na ' Objaviti ” objavite da biste spremili ove promjene:
Nakon ponovnog učitavanja stranice, korisnik može vidjeti da se traka napretka može vidjeti u objavi:
Kako dodati trake napretka na WordPress web stranice pomoću dodataka?
Ova demonstracija koristit će dodatak 'Ultimate Blocks' za dodavanje trake napretka na WordPress web mjesto. Da biste učinili isto, slijedite dolje navedene korake.
Korak 1: Dodajte novi dodatak
Nakon što se korisnik prijavi na nadzornu ploču, idite na ' Dodaci > Dodaj novi ” na bočnoj traci izbornika:
Korak 2: Instalirajte dodatak Ultimate Blocks
Potražite Ultimate Blocks i pritisnite ' Unesi ' ključ. Zatim kliknite dolje označeno ' Sada instalirati ' dugme:
Korak 3: Aktivirajte Ultimate Blocks
Nakon što je dodatak instaliran, kliknite na ' Aktivirati ” za korištenje trake napretka u WordPressu:
Korak 4: Napravite novu objavu
Da biste dodali traku napretka u WordPress post, idite na ' Postovi > Dodaj novi ” opcija s bočnog izbornika:
Korak 5: Dodajte blok trake napretka
Navedite naslov i sadržaj objave. Zatim pritisnite ' + ” za dodavanje novog bloka. U izborniku potražite ' Traka za napredak ” i odaberite blok:
Korak 6: Postavite postotak za traku
Za postavljanje postotka za traku napretka, upotrijebite plavi klizač ili unesite postotak u označeni okvir ispod:
Korak 7: Objavite objavu
Nakon što je objava dovršena, kliknite na ' Objaviti ” za prijenos objave na web mjesto:
Korak 8: Pregledajte objavu
Nakon objave objave, kliknite na gumb “View Post” kako biste vidjeli pregled objave na web stranici:
U donjem rezultatu može se vidjeti da je traka napretka dodana u objavu:
To je sve o dodavanju trake napretka u WordPress.
Zaključak
Da biste dodali traku napretka na WordPress web mjesto, idite na ' Dodaci > Dodaj novi ” iz bočnog izbornika. Potražite i instalirajte ' Ultimativni blokovi ' uključiti. Nakon instalacije, aktivirajte ga. Zatim idite na ' Postovi > Dodaj novi ” i navedite naslov i sadržaj objave. Zatim kliknite na ' + ' i potražite ' Traka za napredak ' blok. Postavite postotak napretka pomoću klizača ili unosom broja. Ovaj je članak ilustrirao postupak dodavanja trake napretka u WordPress sa i bez dodatka.