Selles artiklis kirjeldatakse WordPressi edenemisriba lisamise protseduuri, kasutades järgmist ülevaadet:
- Mis on WP edenemisriba?
- Kuidas koodi abil WordPressi veebisaitidele edenemisribasid lisada?
- Kuidas lisada WordPressi veebisaitidele edenemisribasid pistikprogrammide abil?
Mis on WordPressi edenemisriba?
Edenemisriba näitab horisontaalse riba abil millegi edenemist protsentides. See on teatud andmete graafiline esitus, mis võib anda kasutajale teavet vaid ühe pilguga. Edenemisribade kasutamine WordPressi postitustes andmete või statistika esitamiseks võib aidata parandada veebisaidi atraktiivsust ja kasutajate seotust.
Kuidas koodi abil WordPressi veebisaitidele edenemisribasid lisada?
Edenemisriba lisamiseks WordPressile ilma pistikprogrammita peab kasutaja postituses kasutama kohandatud HTML-i ja CSS-i. Selleks järgige alltoodud samme.
1. samm: logige armatuurlauale sisse
Avage brauser ja minge jaotisse ' http://localhost/<Website-Name>/wp-login.php ' link. Sisestage administraatori mandaadid ja klõpsake nuppu ' Logi sisse ” nupp:
2. samm: looge uus postitus
Minema ' Postitused > Lisa uus ” administraatori armatuurlaua külgmenüüst:
3. samm: lisage kohandatud HTML-kood
Sisestage postituse pealkiri ja täiendav sisu. Seejärel klõpsake nuppu ' + ikooni ja otsige üles Kohandatud HTML ” plokk:
Lisatud HTML-i plokki kleepige alltoodud kood. Muuda ' laius ' sees ' ” sildid edenemisriba soovitud protsendi jaoks. Samamoodi muutke ' edasiminek-tekst ” vastavalt:
< div klass = 'kohandatud edenemisriba' >< ulatus stiilis = 'laius: 80%' >< / ulatus >
< div klass = 'edenemine-tekst' > 80% < / div >
< / div >
Pärast seda vajutage nuppu ' Avalda ” nuppu postituse veebisaidile üleslaadimiseks:
4. samm: lisage kohandatud CSS
Kui postitus on avaldatud, klõpsake nuppu ' Vaata postitust ” nupp:
Eelvaates klõpsake nuppu ' Kohanda ” nuppu edenemisriba stiili lisamiseks:
Ekraani vasakus servas ilmub redaktori menüü. Siin kerige alla ja klõpsake ' Täiendav CSS ” jaotis:
Edenemisriba stiilimiseks kleepige kasti järgmine CSS-kood:
.custom-progress-bar {taust- värvi : #1a1a1a;
kõrgus : 30 pikslit;
polster: 5px;
laius : 500 pikslit;
veeris: 5 pikslit 0 ;
piiri raadius: 5 pikslit;
kasti vari: 0 1px 5px #000 sisestus, 0 1px 0 # 444 ;
}
.custom-progress-bar ulatus {
taust- värvi : #0000FF;
ekraan: inline-block;
ujuk: vasak;
kõrgus : 100 %;
piiri raadius: 3px;
kasti vari: 0 1px 0 rgba ( 255 , 255 , 255 , .5 ) sisend;
üleminek: laius .4s lihtne sisse-välja;
}
.edenemine- tekst {
tekst- joondada : õige;
värvi : valge;
veeris: 0px;
}
5. samm: avaldage postitus
Lõpuks klõpsake nuppu ' Avalda ” postitus nende muudatuste salvestamiseks:
Lehe uuesti laadimisel näeb kasutaja, et postituses on näha edenemisriba:
Kuidas lisada WordPressi veebisaitidele edenemisribasid pistikprogrammide abil?
See esitlus kasutab WordPressi veebisaidile edenemisriba lisamiseks pistikprogrammi Ultimate Blocks. Sama tegemiseks järgige alltoodud samme.
1. samm: lisage uus pistikprogramm
Kui kasutaja on armatuurlauale sisse loginud, minge jaotisse ' Pluginad > Lisa uus ” valik külgmisel menüüribal:
2. samm: installige Ultimate Blocksi pistikprogramm
Otsige üles Ultimate Blocks ja klõpsake nuppu ' Sisenema ' võti. Seejärel klõpsake alloleval nupul ' Installeeri nüüd ” nupp:
3. samm: aktiveerige Ultimate Blocks
Kui pistikprogramm on installitud, klõpsake nuppu ' Aktiveerige ” nuppu, et kasutada WordPressis edenemisriba:
4. samm: looge uus postitus
Edenemisriba lisamiseks WordPressi postitusele minge jaotisse ' Postitused > Lisa uus ” valik külgmenüüst:
5. samm: lisage edenemisriba plokk
Lisage postitusele pealkiri ja sisu. Järgmisena vajutage nuppu ' + ” ikooni uue ploki lisamiseks. Otsige menüüst ' Edenemisriba ” ja valige plokk:
6. samm: määrake riba jaoks protsent
Edenemisriba protsendi määramiseks kasutage sinist liugurit või sisestage protsent allolevasse esiletõstukasti:
7. samm: avaldage postitus
Kui postitus on lõpetatud, klõpsake nuppu ' Avalda ” nuppu postituse veebisaidile üleslaadimiseks:
8. samm: vaadake postitust
Pärast postituse avaldamist klõpsake nuppu 'Kuva postitus', et näha veebisaidil postituse eelvaadet:
Allolevast väljundist on näha, et postitusele on lisatud edenemisriba:
See kõik puudutab WordPressi edenemisriba lisamist.
Järeldus
Edenemisriba lisamiseks WordPressi veebisaidile minge jaotisse ' Pluginad > Lisa uus ” valik külgmenüüst. Otsige ja installige ' Ülimad plokid ' sisse panema. Pärast installimist aktiveerige see. Seejärel minge jaotisse ' Postitused > Lisa uus ” ning sisesta postituse pealkiri ja sisu. Järgmisena klõpsake nuppu ' + ikooni ja otsige ' Edenemisriba ” plokk. Määrake edenemise protsent, kasutades liugurit või sisestades numbri. See artikkel on illustreerinud WordPressi edenemisriba lisamise protseduuri pistikprogrammiga ja ilma.