Ta članek bo navedel postopek za dodajanje vrstice napredka v WordPress z naslednjim orisom:
- Kaj je vrstica napredka v WP?
- Kako dodati vrstice napredka na spletna mesta WordPress s kodo?
- Kako dodati vrstice napredka na spletna mesta WordPress z uporabo vtičnikov?
Kaj je vrstica napredka v WordPressu?
Vrstica napredka prikazuje napredek nečesa v odstotkih z vodoravno vrstico. Gre za grafično predstavitev nekaterih podatkov, ki lahko uporabniku posredujejo informacije že z enim samim pogledom. Uporaba vrstic napredka v vaših objavah WordPress za predstavitev podatkov ali statistike lahko pomaga izboljšati privlačnost spletnega mesta in sodelovanje uporabnikov.
Kako dodati vrstice napredka na spletna mesta WordPress s kodo?
Če želite dodati vrstico napredka v WordPress brez vtičnika, bo moral uporabnik v objavi uporabiti HTML in CSS po meri. Če želite to narediti, sledite spodnjim korakom:
1. korak: Prijavite se na nadzorno ploščo
Odprite brskalnik in pojdite na » http://localhost/<Website-Name>/wp-login.php « povezava. Vnesite skrbniške poverilnice in pritisnite » Vpiši se ” gumb:
2. korak: Ustvarite novo objavo
Pojdi do ' Objave > Dodaj novo « v stranskem meniju skrbniške nadzorne plošče:
3. korak: Dodajte kodo HTML po meri
V objavi navedite naslov in dodatno vsebino. Nato kliknite » + « in poiščite » HTML po meri ” blok:
V dodani blok HTML prilepite spodnjo kodo. Spremenite ' premer ' znotraj ' ” za želeni odstotek vrstice napredka. Podobno spremenite » napredovanje-besedilo ” ustrezno:
< div razred = 'vrstica napredka po meri' >< razpon stil = 'širina: 80%' >< / razpon >
< div razred = 'besedilo napredovanja' > 80 % < / div >
< / div >
Po tem pritisnite ' Objavi ” za nalaganje objave na spletno mesto:
4. korak: Dodajte CSS po meri
Ko je objava objavljena, kliknite » Poglej objavo ” gumb:
V predogledu kliknite » Prilagoditi «, da dodate slog za vrstico napredka:
Na levi strani zaslona se prikaže meni urejevalnika. Tukaj se pomaknite navzdol in kliknite » Dodatni CSS ” razdelek:
V polje prilepite naslednjo kodo CSS, da oblikujete vrstico napredka:
.custom-progress-bar {ozadje- barva : #1a1a1a;
višina : 30 slikovnih pik;
oblazinjenje: 5px;
premer : 500 slikovnih pik;
rob: 5px 0 ;
polmer obrobe: 5px;
box-shadow: 0 1px 5px #000 vložek, 0 1px 0 # 444 ;
}
.custom-progress-bar razpon {
ozadje- barva : #0000FF;
zaslon: inline-block;
lebdi: levo;
višina : 100 %;
polmer obrobe: 3px;
box-shadow: 0 1px 0 rgba ( 255 , 255 , 255 , .5 ) vložek;
prehod: premer .4s Ease-in-out;
}
.napredovanje- besedilo {
besedilo- poravnati : prav;
barva : bela;
rob: 0px;
}
5. korak: Objavite objavo
Na koncu kliknite » Objavi ” objavite, da shranite te spremembe:
Ob ponovnem nalaganju strani lahko uporabnik vidi, da je v objavi prikazana vrstica napredka:
Kako dodati vrstice napredka na spletna mesta WordPress z uporabo vtičnikov?
Ta predstavitev bo uporabila vtičnik »Ultimate Blocks« za dodajanje vrstice napredka na spletno mesto WordPress. Če želite storiti enako, sledite spodnjim korakom.
1. korak: dodajte nov vtičnik
Ko je uporabnik prijavljen na nadzorno ploščo, pojdite na » Vtičniki > Dodaj novo ” v stranski menijski vrstici:
2. korak: Namestite vtičnik Ultimate Blocks
Poiščite Ultimate Blocks in pritisnite » Vnesite ” tipka. Nato kliknite spodaj označeno » Namestiti zdaj ” gumb:
3. korak: Aktivirajte Ultimate Blocks
Ko je vtičnik nameščen, kliknite » Aktiviraj ” za uporabo vrstice napredka v WordPressu:
4. korak: Ustvarite novo objavo
Če želite objavi v WordPressu dodati vrstico napredka, pojdite na » Objave > Dodaj novo ” v stranskem meniju:
5. korak: Dodajte blok vrstice napredka
Vnesite naslov in vsebino objave. Nato pritisnite ' + ” za dodajanje novega bloka. V meniju poiščite » Vrstica napredka « in izberite blok:
6. korak: Nastavite odstotek za vrstico
Če želite nastaviti odstotek za vrstico napredka, uporabite modri drsnik ali vnesite odstotek v spodnje polje:
7. korak: Objavite objavo
Ko je objava končana, kliknite » Objavi ” za nalaganje objave na spletno mesto:
8. korak: Oglejte si objavo
Po objavi objave kliknite na gumb “Ogled objave” za ogled predogleda objave na spletni strani:
V spodnjem izpisu je razvidno, da je vrstica napredka dodana objavi:
To je vse o dodajanju vrstice napredka v WordPress.
Zaključek
Če želite na spletno mesto WordPress dodati vrstico napredka, pojdite na » Vtičniki > Dodaj novo ” v stranskem meniju. Poiščite in namestite » Končni bloki ' vključiti. Po namestitvi ga aktivirajte. Nato pojdite na » Objave > Dodaj novo ” ter navedite naslov in vsebino objave. Nato kliknite » + ' in poiščite ' Vrstica napredka ” blok. Nastavite odstotek napredka z drsnikom ali z vnosom številke. Ta članek je ponazoril postopek za dodajanje vrstice napredka v WordPressu z in brez vtičnika.