Ibibigay ng artikulong ito ang pamamaraan para sa pagdaragdag ng progress bar sa WordPress gamit ang sumusunod na balangkas:
- Ano ang isang Progress Bar sa WP?
- Paano Magdagdag ng Mga Progress Bar sa Mga Website ng WordPress Gamit ang Code?
- Paano Magdagdag ng Mga Progress Bar sa Mga Website ng WordPress Gamit ang Mga Plugin?
Ano ang isang Progress Bar sa WordPress?
Ipinapakita ng progress bar ang progreso ng isang bagay sa porsyento gamit ang horizontal bar. Ito ay isang graphical na representasyon ng ilang data na maaaring magbigay ng impormasyon sa user sa pamamagitan lamang ng isang sulyap. Ang paggamit ng mga progress bar sa iyong mga post sa WordPress upang kumatawan sa data o mga istatistika ay maaaring makatulong na mapabuti ang apela ng website at ang pakikipag-ugnayan ng mga user.
Paano Magdagdag ng Mga Progress Bar sa Mga Website ng WordPress Gamit ang Code?
Upang magdagdag ng progress bar sa WordPress nang walang plugin, kakailanganing gamitin ng user ang custom na HTML at CSS sa isang post. Upang gawin iyon, sundin ang mga hakbang na ibinigay sa ibaba:
Hakbang 1: Mag-log In sa Dashboard
Buksan ang browser at pumunta sa ' http://localhost/<Website-Name>/wp-login.php ” link. Ibigay ang mga kredensyal ng admin at pindutin ang ' Mag log in 'button:
Hakbang 2: Gumawa ng Bagong Post
Pumunta sa ' Mga Post > Magdagdag ng Bago ” mula sa side menu ng admin dashboard:
Hakbang 3: Magdagdag ng Custom na HTML Code
Sa post, ibigay ang pamagat at karagdagang nilalaman. Pagkatapos, i-click ang ' + ” icon, at hanapin ang “ Custom na HTML ” block:
Sa idinagdag na HTML block, i-paste ang ibinigay na code sa ibaba. Baguhin ang ' lapad ' sa loob ng ' ” na mga tag para sa nais na porsyento ng progress bar. Katulad nito, baguhin ang ' progression-text ” ayon:
< div klase = 'custom-progress-bar' >< span istilo = 'lapad: 80%' >< / span >
< div klase = 'text ng pag-unlad' > 80% < / div >
< / div >
Pagkatapos nito, pindutin ang ' I-publish ” button upang i-upload ang post sa website:
Hakbang 4: Magdagdag ng Custom na CSS
Kapag nai-publish na ang post, i-click ang “ Tingnan ang Post 'button:
Sa preview, i-click ang “ I-customize ” button upang idagdag ang estilo para sa progress bar:
May lalabas na menu ng editor sa kaliwang bahagi ng screen. Dito, mag-scroll pababa at mag-click sa “ Karagdagang CSS ” seksyon:
I-paste ang sumusunod na CSS code sa kahon upang i-istilo ang progress bar:
.custom-progress-bar {background- kulay : #1a1a1a;
taas : 30px;
padding: 5px;
lapad : 500px;
margin: 5px 0 ;
hangganan-radius: 5px;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 # 444 ;
}
.custom-progress-bar span {
background- kulay : #0000FF;
display: inline-block;
lumutang pakaliwa;
taas : 100 %;
hangganan-radius: 3px;
box-shadow: 0 1px 0 rgba ( 255 , 255 , 255 , .5 ) inset;
paglipat: lapad .4s ease-in-out;
}
.pag-unlad- text {
text- ihanay : tama;
kulay : puti;
margin: 0px;
}
Hakbang 5: I-publish ang Post
Sa wakas, mag-click sa ' I-publish ” post para i-save ang mga pagbabagong ito:
Sa muling pag-load ng page, makikita ng user na makikita ang progress bar sa post:
Paano Magdagdag ng Mga Progress Bar sa Mga Website ng WordPress Gamit ang Mga Plugin?
Gagamitin ng demonstration na ito ang plugin na “Ultimate Blocks” para magdagdag ng progress bar sa isang WordPress website. Upang gawin ang parehong, sundin ang mga hakbang na ibinigay sa ibaba.
Hakbang 1: Magdagdag ng Bagong Plugin
Sa sandaling naka-log in ang user sa dashboard, pumunta sa “ Mga Plugin > Magdagdag ng Bago ” na opsyon mula sa side menu bar:
Hakbang 2: I-install ang Ultimate Blocks Plugin
Hanapin ang Ultimate Blocks at pindutin ang “ Pumasok ” susi. Pagkatapos, i-click ang nakaturo sa ibaba ' I-install Ngayon 'button:
Hakbang 3: I-activate ang Ultimate Blocks
Kapag na-install na ang plugin, mag-click sa “ I-activate ” button para magamit ang progress bar sa WordPress:
Hakbang 4: Gumawa ng Bagong Post
Upang magdagdag ng progress bar sa isang WordPress post, pumunta sa “ Mga Post > Magdagdag ng Bago ” na opsyon mula sa side menu:
Hakbang 5: Idagdag ang Progress Bar Block
Magbigay ng pamagat at nilalaman sa post. Susunod, pindutin ang ' + ” icon para magdagdag ng bagong block. Sa menu, hanapin ang ' Progress bar ” at piliin ang bloke:
Hakbang 6: Itakda ang Porsiyento Para sa Bar
Upang magtakda ng porsyento para sa progress bar, gamitin ang asul na slider o ilagay ang porsyento sa kahon sa ibaba-highlight:
Hakbang 7: I-publish ang Post
Matapos makumpleto ang post, i-click ang ' I-publish ” button upang i-upload ang post sa website:
Hakbang 8: Tingnan ang Post
Pagkatapos i-publish ang post, mag-click sa button na “View Post” para makita ang preview ng post sa website:
Makikita sa output sa ibaba na idinagdag ang progress bar sa post:
Iyon ay tungkol sa pagdaragdag ng progress bar sa WordPress.
Konklusyon
Upang magdagdag ng progress bar sa isang WordPress website, pumunta sa “ Mga Plugin > Magdagdag ng Bago ” opsyon mula sa side menu. Hanapin at i-install ang ' Ultimate Blocks ' isaksak. Pagkatapos ng pag-install, i-activate ito. Pagkatapos, pumunta sa ' Mga Post > Magdagdag ng Bago ” at ibigay ang pamagat at nilalaman ng post. Susunod, mag-click sa ' + ” icon at hanapin ang “ Progress bar ” block. Itakda ang porsyento ng pag-unlad gamit ang slider o sa pamamagitan ng paglalagay ng numero. Inilarawan ng artikulong ito ang pamamaraan para sa pagdaragdag ng progress bar sa WordPress na mayroon at walang plugin.