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.
<?php add_action( 'load-post.php', array( $this, 'page_template_meta_box' ) ); add_action( 'load-post-new.php', array( $this, 'page_template_meta_box' ) ); add_action( 'save_post', 'save_page_template_meta', 10, 2 ); }
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.
/* Add meta box hook. */
public function page_template_meta_box() {
add_action( 'add_meta_boxes', array( $this, 'add_page_template_meta_box' ) );
}
/* Register meta box. */
public function add_page_template_meta_box() {
add_meta_box(
'page-template-meta-box',
esc_html__( 'Page Template Meta Box', 'twenty-seventeen-child' ),
array( $this, 'display_page_template_meta_box' ),
'page',
'side',
'default'
);
}
/* Render meta box on the page editor. */
public function display_page_template_meta_box($object) {
wp_nonce_field( basename( __FILE__ ), 'page_template_meta_box_nonce' );
}
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()atadd_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.
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.
<?php $text = get_post_meta( $object->ID, 'page_template_text', true ); $textarea = get_post_meta( $object->ID, 'page_template_textarea', true ); $checkbox = get_post_meta( $object->ID, 'page_template_chk', true ); $radio = get_post_meta( $object->ID, 'page_template_radio', true ); $select = get_post_meta( $object->ID, 'page_template_select', true );
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.
?> <div> <p> <label for="page-template-text"><?php _e( "Text Control", 'twenty-seventeen-child' ); ?></label><br> <input class="widefat" type="text" name="page-template-text" id="page-template-text" value="<?php echo esc_attr( $text ); ?>" /> </p> <p> <label for="page-template-textarea"><?php _e( "Textarea Control", 'twenty-seventeen-child' ); ?></label><br> <textarea rows="5" class="widefat" name="page-template-textarea" id="page-template-textarea"><?php echo esc_attr( $textarea ); ?></textarea> </p> <p> <input type="checkbox" name="page-template-chk" id="page-template-chk" value="1" <?php checked($checkbox, true); ?> /> <label for="page-template-chk"><?php _e( "Checkbox Control", 'twenty-seventeen-child' ); ?></label><br> </p> <p> <label for="page-template-align"><?php _e( "Radio Button Control", 'twenty-seventeen-child' ); ?></label><br> <input type="radio" name="page-template-align" id="rdo-left" value="left" <?php checked( $radio, 'left' ); ?> ><label for="rdo-left"><?php _e( 'Left', 'twenty-seventeen-child' ); ?></label><br> <input type="radio" name="page-template-align" id="rdo-right" value="right" <?php checked( $radio, 'right' ); ?> ><label for="rdo-right"><?php _e( 'Right', 'twenty-seventeen-child' ); ?></label><br> <input type="radio" name="page-template-align" id="rdo-center" value="center" <?php checked( $radio, 'center' ); ?> ><label for="rdo-center"><?php _e( 'Center', 'twenty-seventeen-child' ); ?></label><br> </p> <p> <label for="page-template-select">Dropdown</label> <select name="page-template-select" class="widefat"> <option value='one' <?php selected( 'one', $select ); ?>><?php _e( 'One', 'twenty-seventeen-child' ); ?></option> <option value='two' <?php selected( 'two', $select ); ?>><?php _e( 'Two', 'twenty-seventeen-child' ); ?></option> <option value='three' <?php selected( 'three', $select ); ?>><?php _e( 'Three', 'twenty-seventeen-child' ); ?></option> <option value='four' <?php selected( 'four', $select ); ?>><?php _e( 'Four', 'twenty-seventeen-child' ); ?></option> </select> </p> </div><?php
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.
<?php
/* Save meta box data. */
public function save_page_template_meta( $post_id, $post ) {
if ( ! ( isset( $_POST[ 'page_template_meta_box_nonce' ] ) && wp_verify_nonce( $_POST[ 'page_template_meta_box_nonce' ], basename( __FILE__ ) ) ) ) {
return $post_id;
}
if ( ! current_user_can( 'edit_post', $post_id ) ) {
return $post_id;
}
if( 'page' != $post->post_type ) {
return $post_id;
}
$page_template_text_value = isset( $_POST[ 'page-template-text' ] ) ? $_POST[ 'page-template-text' ] : '';
update_post_meta( $post_id, 'page_template_text', $page_template_text_value );
$page_template_textarea_value = isset( $_POST[ 'page-template-textarea' ] ) ? $_POST[ 'page-template-textarea' ] : '';
update_post_meta( $post_id, 'page_template_textarea', $page_template_textarea_value );
$page_template_chk_value = isset( $_POST[ 'page-template-chk' ] ) ? $_POST[ 'page-template-chk' ] : '';
update_post_meta( $post_id, 'page_template_chk', $page_template_chk_value );
$page_template_radio_value = isset( $_POST[ 'page-template-align' ] ) ? $_POST[ 'page-template-align' ] : '';
update_post_meta( $post_id, 'page_template_radio', $page_template_radio_value );
$page_template_select_value = isset( $_POST[ 'page-template-select' ]) ? $_POST[ 'page-template-select' ] : '';
update_post_meta( $post_id, 'page_template_select', $page_template_select_value );
}
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.
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.
Ang buong pinagmulan ng code para sa batang tema functions.php na file ay ipinapakita sa ibaba.
<?php
/**
* Twenty Seventeen child theme class.
*
* DPT = D[ynamic] P[age] T[emplates].
*/
class DPT_Twenty_Seventeen_Child {
/**
* Register hooks.
*/
public function init() {
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_parent_theme_styles' ) );
add_action( 'load-post.php', array( $this, 'page_template_meta_box' ) );
add_action( 'load-post-new.php', array( $this, 'page_template_meta_box' ) );
add_action( 'save_post', array( $this, 'save_page_template_meta' ), 10, 2 );
}
/* Enqueue parent theme styles. */
public function enqueue_parent_theme_styles() {
wp_enqueue_style( 'twenty-seventeen-css', get_template_directory_uri() . '/style.css' );
}
/* Add meta box hook. */
public function page_template_meta_box() {
add_action( 'add_meta_boxes', array( $this, 'add_page_template_meta_box' ) );
}
/* Register meta box. */
public function add_page_template_meta_box() {
add_meta_box(
'page-template-meta-box',
esc_html__( 'Page Template Meta Box', 'twenty-seventeen-child' ),
array( $this, 'display_page_template_meta_box' ),
'page',
'side',
'default'
);
}
/* Render meta box on the page editor. */
public function display_page_template_meta_box( $object ) {
wp_nonce_field( basename( __FILE__ ), 'page_template_meta_box_nonce' );
$text = get_post_meta( $object->ID, 'page_template_text', true );
$textarea = get_post_meta( $object->ID, 'page_template_textarea', true );
$checkbox = get_post_meta( $object->ID, 'page_template_chk', true );
$radio = get_post_meta( $object->ID, 'page_template_radio', true );
$select = get_post_meta( $object->ID, 'page_template_select', true );
?>
<div>
<p>
<label for="page-template-text"><?php _e( "Text Control", 'twenty-seventeen-child' ); ?></label><br>
<input class="widefat" type="text" name="page-template-text" id="page-template-text" value="<?php echo esc_attr( $text ); ?>" />
</p>
<p>
<label for="page-template-textarea"><?php _e( "Textarea Control", 'twenty-seventeen-child' ); ?></label><br>
<textarea rows="5" class="widefat" name="page-template-textarea" id="page-template-textarea"><?php echo esc_attr( $textarea ); ?></textarea>
</p>
<p>
<input type="checkbox" name="page-template-chk" id="page-template-chk" value="1" <?php checked($checkbox, true); ?> /> <label for="page-template-chk"><?php _e( "Checkbox Control", 'twenty-seventeen-child' ); ?></label><br>
</p>
<p>
<label for="page-template-align"><?php _e( "Radio Button Control", 'twenty-seventeen-child' ); ?></label><br>
<input type="radio" name="page-template-align" id="rdo-left" value="left" <?php checked( $radio, 'left' ); ?> ><label for="rdo-left"><?php _e( 'Left', 'twenty-seventeen-child' ); ?></label><br>
<input type="radio" name="page-template-align" id="rdo-right" value="right" <?php checked( $radio, 'right' ); ?> ><label for="rdo-right"><?php _e( 'Right', 'twenty-seventeen-child' ); ?></label><br>
<input type="radio" name="page-template-align" id="rdo-center" value="center" <?php checked( $radio, 'center' ); ?> ><label for="rdo-center"><?php _e( 'Center', 'twenty-seventeen-child' ); ?></label><br>
</p>
<p>
<label for="page-template-select">Dropdown</label>
<select name="page-template-select" class="widefat">
<option value='one' <?php selected( 'one', $select ); ?>><?php _e( 'One', 'twenty-seventeen-child' ); ?></option>
<option value='two' <?php selected( 'two', $select ); ?>><?php _e( 'Two', 'twenty-seventeen-child' ); ?></option>
<option value='three' <?php selected( 'three', $select ); ?>><?php _e( 'Three', 'twenty-seventeen-child' ); ?></option>
<option value='four' <?php selected( 'four', $select ); ?>><?php _e( 'Four', 'twenty-seventeen-child' ); ?></option>
</select>
</p>
</div><?php
}
/* Save meta box data. */
public function save_page_template_meta( $post_id, $post ) {
if ( ! ( isset( $_POST[ 'page_template_meta_box_nonce' ] ) && wp_verify_nonce( $_POST[ 'page_template_meta_box_nonce' ], basename( __FILE__ ) ) ) ) {
return $post_id;
}
if ( ! current_user_can( 'edit_post', $post_id ) ) {
return $post_id;
}
if( 'page' != $post->post_type ) {
return $post_id;
}
$page_template_text_value = isset( $_POST[ 'page-template-text' ] ) ? $_POST[ 'page-template-text' ] : '';
update_post_meta( $post_id, 'page_template_text', $page_template_text_value );
$page_template_textarea_value = isset( $_POST[ 'page-template-textarea' ] ) ? $_POST[ 'page-template-textarea' ] : '';
update_post_meta( $post_id, 'page_template_textarea', $page_template_textarea_value );
$page_template_chk_value = isset( $_POST[ 'page-template-chk' ] ) ? $_POST[ 'page-template-chk' ] : '';
update_post_meta( $post_id, 'page_template_chk', $page_template_chk_value );
$page_template_radio_value = isset( $_POST[ 'page-template-align' ] ) ? $_POST[ 'page-template-align' ] : '';
update_post_meta( $post_id, 'page_template_radio', $page_template_radio_value );
$page_template_select_value = isset( $_POST[ 'page-template-select' ]) ? $_POST[ 'page-template-select' ] : '';
update_post_meta( $post_id, 'page_template_select', $page_template_select_value );
}
}
$ts_child_theme = new DPT_Twenty_Seventeen_Child();
$ts_child_theme->init();
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.
<?php
/**
* Template Name: Test Page Template
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
*/
get_header(); ?>
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
while ( have_posts() ) : the_post();
$text = get_post_meta( get_the_ID(), 'page_template_text', true );
$textarea = get_post_meta( get_the_ID(), 'page_template_textarea', true );
$checkbox = get_post_meta( get_the_ID(), 'page_template_chk', true );
$radio = get_post_meta( get_the_ID(), 'page_template_radio', true );
$select = get_post_meta( get_the_ID(), 'page_template_select', true );
echo "<p>Text Box: " . $text . "</p>";
echo "<p>Text Area: " . $textarea . "</p>";
echo "<p>Checkbox: " . $checkbox . "</p>";
echo "<p>Radio Buttons: " . $radio . "</p>";
echo "<p>Dropdown: " . $select . "</p>";
echo "<h2>Sitemap</h2>";
echo "<ul>" . wp_list_pages( array( 'title_li' => '' ) ) . "</ul>";
endwhile; // End of the loop.
?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
<?php get_footer();
Siguraduhing ang 'Test Page Template' ay ang kasalukuyang piniling pahinang template at tingnan ang pahina sa harapan ng huli.
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.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
