Šajā rakstā tiks sniegta procedūra progresa joslas pievienošanai programmā WordPress, izmantojot šādu izklāstu:
- Kas ir progresa josla WP?
- Kā pievienot progresa joslas WordPress vietnēm, izmantojot kodu?
- Kā pievienot progresa joslas WordPress vietnēm, izmantojot spraudņus?
Kas ir progresa josla programmā WordPress?
Progresa josla parāda kaut kā progresu procentos, izmantojot horizontālu joslu. Tas ir dažu datu grafisks attēlojums, kas var sniegt informāciju lietotājam tikai ar vienu skatienu. Progresa joslu izmantošana WordPress ziņās, lai attēlotu datus vai statistiku, var palīdzēt uzlabot vietnes pievilcību un lietotāju iesaisti.
Kā pievienot progresa joslas WordPress vietnēm, izmantojot kodu?
Lai WordPress pievienotu progresa joslu bez spraudņa, lietotājam ziņojumā būs jāizmanto pielāgotais HTML un CSS. Lai to izdarītu, veiciet tālāk norādītās darbības.
1. darbība. Piesakieties informācijas panelī
Atveriet pārlūkprogrammu un dodieties uz ' http://localhost/<Website-Name>/wp-login.php ” saiti. Norādiet administratora akreditācijas datus un noklikšķiniet uz ' Pieslēgties ” poga:
2. darbība. Izveidojiet jaunu ziņu
Iet uz ' Ziņas > Pievienot jaunu ” no administratora informācijas paneļa sānu izvēlnes:
3. darbība. Pievienojiet pielāgotu HTML kodu
Ziņā norādiet nosaukumu un papildu saturu. Pēc tam noklikšķiniet uz ' + ' ikonu un meklējiet ' Pielāgots HTML ' bloķēt:
Pievienotajā HTML blokā ielīmējiet tālāk norādīto kodu. Nomaini ' platums 'iekšpusē' ” tagus vēlamajai progresa joslas procentuālajai daļai. Līdzīgi mainiet “ progresija-teksts ” attiecīgi:
< div klasē = 'pielāgota progresa josla' >< span stils = 'platums: 80%' >< / span >
< div klasē = 'progresēšanas teksts' > 80% < / div >
< / div >
Pēc tam nospiediet ' Publicēt ” pogu, lai augšupielādētu ziņu vietnē:
4. darbība. Pievienojiet pielāgotu CSS
Kad ziņa ir publicēta, noklikšķiniet uz ' Skatīt ziņu ” poga:
Priekšskatījumā noklikšķiniet uz ' Pielāgot ” pogu, lai pievienotu stilu progresa joslai:
Ekrāna kreisajā pusē parādīsies redaktora izvēlne. Šeit ritiniet uz leju un noklikšķiniet uz ' Papildu CSS ” sadaļa:
Ielīmējiet šādu CSS kodu lodziņā, lai veidotu norises joslas stilu:
.custom-progress-bar {fons- krāsa : #1a1a1a;
augstums : 30 pikseļi;
polsterējums: 5 pikseļi;
platums : 500 pikseļi;
piemale: 5 pikseļi 0 ;
apmales rādiuss: 5 pikseļi;
kastes ēna: 0 1px 5px #000 ielaidums, 0 1 pikselis 0 # 444 ;
}
.custom-progress-bar span {
fons- krāsa : #0000FF;
displejs: inline-block;
pludiņš: pa kreisi;
augstums : 100 %;
apmales rādiuss: 3 pikseļi;
kastes ēna: 0 1 pikselis 0 rgba ( 255 , 255 , 255 , .5 ) ielaidums;
pāreja: platums .4s vieglums-in-out;
}
.progression- tekstu {
teksts- izlīdzināt : pa labi;
krāsa : balts;
piemale: 0 pikseļi;
}
5. darbība. Publicējiet ziņu
Visbeidzot noklikšķiniet uz ' Publicēt ”, lai saglabātu šīs izmaiņas:
Pārlādējot lapu, lietotājs var redzēt, ka ziņojumā ir redzama progresa josla:
Kā pievienot progresa joslas WordPress vietnēm, izmantojot spraudņus?
Šajā demonstrācijā tiks izmantots spraudnis “Ultimate Blocks”, lai WordPress vietnei pievienotu progresa joslu. Lai veiktu to pašu, veiciet tālāk norādītās darbības.
1. darbība: pievienojiet jaunu spraudni
Kad lietotājs ir pieteicies informācijas panelī, dodieties uz “ Spraudņi > Pievienot jaunu ” opciju sānu izvēlņu joslā:
2. darbība: instalējiet spraudni Ultimate Blocks
Meklējiet Ultimate Blocks un noklikšķiniet uz ' Ievadiet ” taustiņu. Pēc tam noklikšķiniet uz zemāk norādītā ' Instalēt tagad ” poga:
3. darbība: aktivizējiet Ultimate Blocks
Kad spraudnis ir instalēts, noklikšķiniet uz ' Aktivizēt ”, lai izmantotu progresa joslu programmā WordPress:
4. darbība. Izveidojiet jaunu ziņu
Lai WordPress ziņai pievienotu progresa joslu, dodieties uz “ Ziņas > Pievienot jaunu ” opcija no sānu izvēlnes:
5. darbība: pievienojiet progresa joslas bloku
Norādiet ziņas nosaukumu un saturu. Pēc tam nospiediet ' + ”, lai pievienotu jaunu bloku. Izvēlnē meklējiet ' Progresa josla ” un atlasiet bloku:
6. darbība: iestatiet joslas procentus
Lai iestatītu procentuālo daļu progresa joslai, izmantojiet zilo slīdni vai ievadiet procentuālo vērtību zemāk esošajā iezīmēšanas lodziņā:
7. darbība. Publicējiet ziņu
Kad ziņa ir pabeigta, noklikšķiniet uz ' Publicēt ” pogu, lai augšupielādētu ziņu vietnē:
8. darbība. Skatiet ziņu
Pēc ziņas publicēšanas noklikšķiniet uz pogas “Skatīt ziņu”, lai skatītu ziņas priekšskatījumu vietnē:
Zemāk esošajā izvadā var redzēt, ka ziņai ir pievienota progresa josla:
Tas viss attiecas uz progresa joslas pievienošanu programmā WordPress.
Secinājums
Lai WordPress vietnei pievienotu progresa joslu, dodieties uz “ Spraudņi > Pievienot jaunu ” opciju no sānu izvēlnes. Meklējiet un instalējiet ' Galīgie bloki ' iespraust. Pēc instalēšanas aktivizējiet to. Pēc tam dodieties uz ' Ziņas > Pievienot jaunu ” un norādiet ziņas nosaukumu un saturu. Pēc tam noklikšķiniet uz ' + ' ikonu un meklējiet ' Progresa josla ' bloķēt. Iestatiet progresa procentus, izmantojot slīdni vai ievadot skaitli. Šajā rakstā ir ilustrēta procedūra progresa joslas pievienošanai programmā WordPress ar un bez spraudņa.