Advertisement
  1. Code
  2. WordPress
Code

Mga Dinamikang Pahinang Template sa WordPress, Bahagi 2

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Dynamic Page Templates in WordPress.
Dynamic Page Templates in WordPress, Part 1
Dynamic Page Templates in WordPress, Part 3

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Sa unang bahagi ng serye ng tutoryal na ito ipinakilala ko ang batayang konsepto ng dinamikang pahinang mga template at lumikha ng pamantayang pahinang template bilang pundasyon ng mga gagawin sa hinaharap. Ang WordPress na bata ang tema na batay sa Twenty Seventeen na magulang na tema ay ginamit upang isakatuparan ang pahinang template. 

Sa tutoryal na ito, matutunan ninyo ang mas tiyak na mga detalye tungkol sa dinamikang pahinang mga template at kung paano ninyo magagamit ang mga ito sa inyong sariling WordPress na mga proyekto. 

Ipapakita ko din sa inyo ang hakbang-hakbang na paraan kung paano palawigin ang pahinang template mula sa unang tutoryal at gawin ito bilang inyong pinakaunang gumaganang dinamikang pahinang template! 

Dinamikang pahinang mga template: Mas Sumusunod na Paraan 

Kaya paano nating gagaming mas sumusunod ang mga pahinang template, at bakit nga ba ito magiging kapaki-pakinabang?  

Sabihin natin na mayroon kayong portpolyo na pahinang template na naglalabas ng galerya ng mga indibiduwal na bagay sa portpolyo. Ang bawat bagay ay magiging permanente ang sukat, at madami ang magkakasya sa bawat hilera.  

Maaari siyempre tayong magdagdag ng ibang pahinang template upang magpakita ng mga portpolyo sa iba’t ibang mga sukat. Ngunit paano kung gusto nating ipakita ang maliit, katamtaman, o kaya malalaking mga portpolyo?  Para dito, kakailanganin nating ng tatlong magkakahiwalay na mga pahinang template, na mayroon ang bawat isang magkakaibang sukat para sa mga bagay sa portpolyo. 

Ito ay mas magagawa kaagad na sumusunod sa pamamagitan ng pagdadagdag ng drop-down na control upang piliin ang sukat ng portpolyo (halimbawa: Maliit, Katamtaman, o Malaki). Ito ay mas madali sa gumagamit dahil ang kahon ng pahinang template ay mas hindi makalat na may mga hindi kailangang pagpipilian.  

Ito ay mas nagbibigay ng mas kahulugan maging sa nagdedevelop din, na mayroon lamang isang pahinang template na pananatilihin sa halip na tatlo! Ito ay sumusunod sa Don't Repeat Yourself (DRY) na prinsipyo ng pagdedevelop ng software.

Lahat ng Pahinang Template ba Dapat ay Dinamika? 

Mahalagang itala na hindi bawat pahinang template ay maaaring makinabang sa pagiging dinamiko. Kung mayroon kayong pahinang template na gumagawa ng isang bagay, at nag-iisang bagay lamang, kung gayon ito ay ayos lamang. Hindi magkakaroon ng kabuluhan na magdagdag ng pasadyang mga control, at dagdag na lohika, sa pahinang template sa ganitong pangyayari. 

Ngunit, katulad ng makikita mo sa katapusan ng tutoryal na ito, madaming mga pahinang template ang lubhang makikinabang sa pagiging mas sumusunod nito. 

Isa pang kapaki-pakinabang na halimbawa ng dinamikang template ay ang contact form, Madaming mga pasadyang control na maaaring idagdag upang gawing lubhang sumusunod ang pahinang template na ito.  

Halimbawa, sa halip na permanenteng pangkat ng mga form field ang inilalabas, ang mga kontrol ng pahinang template ay maaaring idagdag upang payagang matanggal ninyo ang ibang mga field.   O kaya maaaring opsyonal na ipakita ang Captcha na field upang maiwasan ang mga pagpapasa ng spam na form?  Napakaraming paraan upang i-customize ang contact form. 

Lilikha ako ng ng dinamikong form na pahinang template sa ikatlong bahagi ng serye ng tutoryal na ito. Ngunit una muna simulan nating lumikha ng pangkalahatang layunin na dinamikong pahinang template. 

Ang Ating Unang Dinamikang Pahinang Template 

Sa pagsisimula, lilikha tayo ng batayang dinamikang pahinang template upang ipakita kung paanong ang lahat ng bahagi nito ay nagtutugma. Ang mga pasadyang control ay idadagdag sa editor ng pahina na gagamitin sa susunod upang i-kontrol ang inilalabas ng pahinang template.

Ang pasadyang mga kontrol ng pahinang template na idadagdag natin mayamaya ay ang: 

  • Text box
  • Textarea
  • Check box
  • Radio buttons
  • Drop-down select box

Sa isip, ang mga kontrol dapat ay direktang idadagdag sa ilalim ng kahon ng drop-dwon upang gawin malinaw na ito ay konektado sa pahinang template.  

Gayunman, ang WordPress ay hindi nagbibigay ng kahit anong mga hook para dito, kaya kailangan ninyong gawin (sa ngayon) sa pagdadagdag ng mga pasadyang control ng pahinang template sa nakahiwalay na pasadyang meta na kahon. Sa ikatlong bahagi ng serye ng tutoryal na ito, ipapakita ko sa inyo kung paano ang paikutin ang ganitong problema. 

Ang mga hook ay pundamental sa pagbuo ng WordPress. Pinapayagan nila ang mga nagdedevelop na palawigin ang code base nang hindi kailangan ng pag-eedit sa kaibuturan ng mga file, na karaniwan ng itinuturing na masamang ideya.  Ito ay dahil sa ang kahit na anong pasadyang code ay mawawala tuwing gagawin ang pag-uupdate ng WordPress (na maaaring mangyari na halos palagi). 

Upang ipakita ang ating meta na kahon sa screen ng editor ng pahina, idagdag ang load-post.php at load-post-new.php na mga hook sa batang tema init() na paraan na nilikha natin sa bahagi 1. 

Gumamit tayo ng dalawang mga hook ng WordPress upang siguraduhing ang meta na kahon ay magpapakita sa editor na pahina, kahit lumilikha ka ng bagong pahina o nag-eedit ng umiiral ng pahina. Mayroon ding save_post na hook na naghahawak sa pagsesave ng paskil sa meta data, na tatalakayin ko mayamaya. 

Idagdag ang sumusunod na apat na klase ng paraan ng paglikha, pagpapakita, at pagsesave ng data para sa meta na kahon. 

Hindi na ako pupunta sa sobrang detalye dito tungkol sa mga meta na kahon sa WordPress, sapagkat ito ay isang buong tutoryal na sa sarili nito,  ngunit itala ang mga sumusunod na puntos tungkol sa code na idinagdag ko sa itaas: 

  • Ang page_template_meta_box() at add_page_template_meta_box() na klase ng mga paraan ay nagrerehistro ng meta na kahon sa WordPress.
  • Sa add_page_template_meta_box(), ang parametro ng 'page' ay tumutukoy na ang meta na kahon na ito ay ipapakita lamang sa 'page' ng editor ng post type sa WordPress admin.
  • Ang display_page_template_meta_box() na klase ng paraan ay maggagawad sa meta na kahon at magseset up ng nabanggit na pangyayari upang gawing sigurado ang mga kontrol ng form. 

Kung ang lahat ay maayos, mayroon ka na dapat ngayong meta na kahon na ipinapakita sa editor na pahina, katulad ng ipinapakita sa ibaba. 

A new page meta box

Medyo wala pa itong laman sa ngayon, bagaman, kaya dagdagan natin ng ilang mga kontrol. 

Pagdadagdag ng mga Pasadyang Kontrol 

Kung matatandaan ninyo mula sa itaas, magdadagdag tayo ng text box, text area, checkbox, radio button, at pipili ng mga kontrol na kahon sa meta na kahon. Simulan sa pamamagitan ng pagdadagdag ng sumusunod na code sa display_page_template_meta_box() method sa ilalim ng nabanggit na pangyayari na tungkulin.

Ito ay nagbabalik sa kasalukuyang halaga ng ating meta na kahon na nagkokontrol at nagtatago nito sa lokal na mga variable. Ngayon idagdag ang sumusunod na HTML direkta pagkatapos, upang gawaran ang mga kontrol ng meta na kahon. 

Ang bawat kontrol ay nakapaloob sa tag ng talata, at ang kasalukuyang halaga nito ay inaupdate sa pamamagitan ng lokal na variable na ginawa natin kanina. Ito ay nagsisigurado na ang mga kontrol ng meta na kahon ay palaging nagpapakita ng tamang mga setting.

Gayunpaman, hindi ito mangyayari maliban na lamang kung isesave natin ang kasalukuyang kontrol na data ng meta na kahon sa database ng WordPress.

Kani-kanina, nagrehistro ako ng hook upang isakatuparan ang klase ng paraan sa lahat ng pagkakataon na ang editor na pahina ay inia-update. Idagdag natin ngayon ang ganitong paraan sa ating klase ng batang tema.   

Ang save_page_template_meta() na klase ng paraan ay nangangasiwa ng pagsesave ng kontrol na data ng meta na kahon. Ito ay nagsesave lamang ng data ng meta na kahon kung ang nabanggit na pangyayari ay nakumpirma, ang kasalukuyang mga gumagamit ay maaaring makapag-edit ng mga paskil, at tayo ay nasa screen ng admin ng editor na pahina. 

Kapag ang mga kondisyon ay naisagawa, saka natin kukuhanin ang data para sa bawat kontrol na nakatago sa  global $_POST na variable. Ang variable na ito ay naseset tuwing ang form ay ipinapasa. 

Ang pinakahuli, ang kontrol na data ng meta na kahon ay isinesave sa database ng WordPress bilang meta na data para sa kasalukuyang pahina.

Sa pamamagitan ng pasadyang kontrol ng pahinang template na idinagdag, ang ating meta na kahon dapat ay ganito ang hitsura.

Adding controls to the meta box

Magpasok ng ilang text para sa text box at textarea, at gumawa ng mga pagpipilian para check box, radio button, at select box. Pindutin ang update upang i-save ang inyong mga pagbabago, kapag nagreload ang inyong editor na pahina, ang kontrol ng inyong meta na kahon ay dapat magpakita ng data na inyong ipinasok. 

Populating the meta box

Ang buong pinagmulan ng code para sa batang tema functions.php na file ay ipinapakita sa ibaba. 

Ang huling bahagi ng palaisipan ay ang paggamit ng kontrol na data ng meta na kahon sa ating pahinang template sa harapan ng huli. Bukas ang test-page-template.php na file na nilikha natin sa unang bahagi at palitan ang nilalaman ng naka-update na code na ito. 

Siguraduhing ang 'Test Page Template' ay ang kasalukuyang piniling pahinang template at tingnan ang pahina sa harapan ng huli.

Viewing the output of the meta box

Katulad ng nakikita ninyo, ang pahinang template ngayon ay may kasamang mga halaga na isinet sa mga control sa meta na kahon sa editor na pahina. Ito ang kaibuturan ng natitirang bahagi ng tutoryal dahil gagawa tayi sa batayang halimbawang ito at lilikha tayo ng iba’t ibang mga halimbawa ng buong gumaganang mga dinamikang pahinang template na maaari ninyong gamitin sa inyong sariling mga proyekto sa WordPress.

Konklusyon

Sa tutoryal na ito, tinalakay natin kung paano gumawa ng gumaganang dinamikang pahinang template. Sa sandaling ito, kahit na ito ay gumagana, ang ating batayang pahinang template ay hindi pa masyadong kapaki-pakinabang. 

Sa ikatlo at huling bahagi ng serye ng tutoryal na ito, ipapakita ko sa inyo kung paano gumawa ng iba’t ibang mga dinamikang pahinang template, mula sa simula hanggang matapos, na maaari ninyong gamitin (at palawigin pagkatapos) sa inyong sariling mga proyekto sa WordPresss.

Kung mayroon kayong mga katanungan, pakiiwanan ng mensahe sa mga komento sa ibaba. Ikatutuwa kong marinig ang inyong mga iniisip sa tutoryal. 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.