Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Halaman Template Dinamis di WordPress, Bagian 2

by
Read Time:12 minsLanguages:
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

Indonesian (Bahasa Indonesia) translation by Imam Firmansyah (you can also view the original English article)

Pada bagian 1 dari seri tutorial ini saya memperkenalkan konsep dasar halaman template dinamis dan membuat halaman template standar sebagai dasar untuk pekerjaan anda nantinya. Untuk mengimplementasi halaman template kita mengunakan WordPress Child-Theme berdasarkan pada tema Twenty-Seventeen sebagi tema induknya.

Dalam tutorial ini, anda akan mempelajari hal yang lebih spesifik tentang halaman template dinamis dan bagaimana anda dapat menggunakannya pada proyek WordPress anda sendiri.

Saya juga akan menunjukkan kepada anda langkah demi langkah bagaimana mengembangkan halaman template dari tutorial pertama dan mengubahnya menjadi halaman template pertama anda yang bekerja secara dinamis!

Halaman Template Dinamis: Pendekatan yang Lebih Fleksibel

Jadi bagaimana kita bisa membuat halaman template yang lebih fleksibel, dan mengapa ini berguna?

Misalnya, Anda memiliki template halaman portofolio yang menampilkan galeri dari Item portofolio individu. Setiap item akan memiliki ukuran yang tetap, dan berapa banyak yang hanya bisa masuk ke setiap baris.

Tentu saja, kita bisa menambahkan halaman template lain untuk menampilkan portofolio dengan ukuran yang berbeda. Tapi bagaimana jika kita ingin menunjukkan portofolio dengan ukuran kecil, sedang, atau besar? Untuk itu, kita memerlukan tiga halaman template terpisah, dengan masing-masing memiliki ukuran yang berbeda pada setiap item portofolio.

Ini bisa langsung dibuat lebih fleksibel dengan menambahkan pengaturan drop-down untuk memilih ukuran portfolio (yaitu yang berukuran kecil, sedang, atau besar). Ini akan lebih nyaman bagi pengguna karena kotak halaman template akan mengurangi kekacauan dengan pilihan yang tidak perlu.

Akan lebih masuk akal juga bagi pengembang web, untuk memelihara satu halaman template dari pada memiliki tiga! Ini mengikuti prinsip pengembangan perangkat lunak Don't Repeat Yourself (DRY).

Haruskah Semua Halaman Template dibuat Menjadi Dinamis?

Perlu dicatat bahwa tidak semua halaman template tentu akan mendapatkan manfaat saat dibuat menjadi dinamis. Jika Anda memiliki halaman template yang melakukan satu hal, dan hanya satu hal saja, maka tidak masalah. Itu akan menjadi tidak masuk akal jika menambahkan pengaturan khusus, dan logika ekstra, ke halaman template dalam kasus ini.

Tapi, seperti yang akan anda lihat di akhir tutorial ini, banyak halaman template akan sangat bermanfaat ketika menjadi lebih fleksibel.

Contoh lain yang berguna untuk halaman template dinamis adalah form kontak. Ada banyak pengaturan khusus yang dapat ditambahkan untuk membuat halaman template ini sangat fleksibel.

Sebagai contoh, daripada memunculkan kumpulan bidang pada form yang bersifat tetap, pengaturan halaman template dapat ditambahkan untuk memungkinkan anda menghilangkan bidang tertentu. Atau mungkin bidang Captcha dapat ditampilkan secara opsional untuk mencegah pengiriman formulir yang bersifat spam? Ada begitu banyak cara untuk menyesuaikan form kontak.

Saya akan membuat template halaman form dinamis pada bagian 3 dari seri tutorial ini. Tapi pertama mari kita mulai dengan membuat halaman template dinamis untuk pengunaan secara umum.

Halaman Template Dinamis Pertama Kita

Untuk memulai, kami akan membuat dasar halaman template dinamis untuk menunjukkan bagaimana semua bagian komponen sesuai. Pengaturan khusus akan ditambahkan ke halaman editor yang akan digunakan nantinya untuk mengatur hasil keluaran pada halaman template.

Pengaturan khusus halaman template yang akan kita tambahkan sebentar lagi adalah:

  • Text-box
  • Text-area
  • Check-box
  • Radio-Button
  • Drop-down Select-box

Idealnya, pengaturan harus ditambahkan langsung di bawah kotak drop-down halaman template untuk membuatnya jelas bahwa itu berhubungan dengan halaman template.

Namun, WordPress tidak menyediakan hooks untuk ini, jadi (untuk saat ini) anda harus melakukan dengan menambahkan pengaturan khusus halaman template ke meta box khusus yang terpisah. Pada bagian ketiga dari rangkaian tutorial ini, saya akan menunjukkan cara mengatasi masalah ini.

Hooks sangat penting untuk proses pengembangan WordPress. Mereka memungkinkan pengembang untuk memperluas basis kode tanpa harus melakuakn perubahan pada file inti, yang umumnya dianggap sebagai hal yang buruk. Ini karena kode khusus apapun akan dihapus setiap kali proses pembaharuan WordPress dilakukan (yang bisa terjadi secara teratur).

Untuk menampilkan meta-box kita pada layar halaman editor, tambahkan load-post.php dan load-post-new.php lakukan proses hooks ke child-theme yang kita buat pada bagian 1 dengan method init().

Kita akan menggunakan dua WordPress hooks untuk memastikan meta-box ditampilkan pada halaman editor, apakah anda sedang membuat halaman baru atau mengedit dokumen yang sudah ada. Ada juga hooks save_post yang menangani penyimpanan data meta-post, yang akan saya bahas nanti.

Tambahkan empat method-class berikut untuk membuat, menampilkan, dan menyimpan data pada meta box.

Saya tidak akan membahas terlalu banyak detail di sini tentang meta-box pada WordPress, karena itu bisa menjadi keseluruhan tutorial tersendiri, namun perhatikan hal-hal berikut tentang kode yang saya tambahkan di atas:

  • Mendaftarkan meta-box dengan method-class page_template_meta_box() dan add_page_template_meta_box() pada WordPress
  • Pada add_page_template_meta_box(), parameter 'page' menentukan bahwa meta-box ini hanya akan ditampilkan pada editor post berjenis 'page' yang ada di halaman WordPress admin.
  • class-method display_page_template_meta_box() akan memunculkan meta-box dan membuat pengaturan form menjadi lebih aman dengan penomoran yang hanya digunakan sekali (nonce).

Jika semuanya berjalan dengan baik, seharusnya anda sekarang memiliki meta-box yang ditampilkan pada halaman editor, seperti yang ditunjukkan di bawah ini.

A new page meta boxA new page meta boxA new page meta box

Untuk saat ini masih kosong, jadi mari kita tambahkan beberapa pengaturan.

Menambahkan Pengaturan Khusus

Jika Anda ingat di atas, kita akan menambahkan text-box, text-area, check-box, radio-button, dan select-box pada pengaturan meta-box. Mulailah dengan menambahkan kode berikut ke method display_page_template_meta_box() di bawah fungsi nonce.

Ini akan mengambil nilai saat ini (current-value) dari pengaturan meta-box kita dan menyimpannya dalam local-variabel. Sekarang tambahkan HTML berikut langsung setelahnya, untuk menampilkan pengaturan meta-box.

Setiap pengaturan yang berada didalam tag paragraf, dan nilai saat ini (current-value) akan diperbaharui melalui variabel lokal yang telah kita buat sebelumnya. Ini memastikan bahwa pengaturan meta-box selalu menampilkan pengaturan yang benar.

Namun, ini tidak akan terjadi kecuali kita menyimpan data pengaturan meta-box saat ini ke database WordPress.

Sedikit lebih awal, saya mendaftarkan hook untuk mengeksekusi class-method setiap kali halaman editor diperbarui. Mari tambahkan method tersebut ke class child-theme kita saat ini.

class-method save_page_template_meta() menangani penyimpanan data pengaturan meta-box. Ini hanya menyimpan data meta-box jika nonce telah diverifikasi, pengguna saat ini dapat mengedit posting-an, dan saat ini kita berada di layar editor halaman admin.

Jika kondisi tersebut terpenuhi, maka kita mengambil data untuk setiap pengaturan yang disimpan dalam variabel-global $_POST. Variabel ini diatur setiap kali form melakukan proses submit.

Akhirnya, data pengaturan meta-box disimpan ke database WordPress sebagai meta-data untuk halaman ini.

Dengan ditambahkannya pengaturan khusus halaman template, meta-box kita akan terlihat seperti ini.

Adding controls to the meta boxAdding controls to the meta boxAdding controls to the meta box

Masukkan beberapa teks untuk text-box dan text-area, dan buat pilihan untuk check-box, radio-button, dan select-box. Tekan update untuk menyimpan perubahan anda, dan saat halaman editor memuat ulang (reload), pengaturan meta-box anda harusnya menunjukkan data yang baru saja anda masukkan.

Populating the meta boxPopulating the meta boxPopulating the meta box

Source-code yang lengkap untuk function.php child-theme ditampilkan di bawah ini.

Bagian terakhir dari teka-teki ini adalah dengan menggunakan data pengaturan meta-box di halaman template pada bagian depan (front-end). Buka file test-page-template.php yang telah kita buat pada bagian 1 dan ganti isinya dengan kode ini yang telah diperbarui.

Pastikan 'Test Page Template' adalah halaman template yang dipilih saat ini dan lihat tampilan halaman pada bagian depan (front-end).

Viewing the output of the meta boxViewing the output of the meta boxViewing the output of the meta box

Seperti yang dapat Anda lihat, saat ini halaman template menyertakan nilai yang ditetapkan oleh pengaturan meta-box pada halaman editor. Ini adalah inti dari keseluruhan tutorial seperti contoh dasar yang telah kita buat dan berbagai contoh halaman template dinamis yang telah bekerja sepenuhnya yang dapat anda gunakan pada proyek WordPress anda sendiri.

Kesimpulan

Dalam tutorial ini, kita membahas bagaimana membangun halaman template dinamis agar dapat berfungsi. Meskipun pada saat ini, fungsi tersebut belum berguna untuk halaman template dasar kita.

Di bagian ketiga dan terakhir dari rangkaian tutorial ini, saya akan menunjukkan kepada anda bagaimana membangun berbagai halaman template dinamis, dari awal sampai akhir, yang dapat anda gunakan (dan kembangkan) pada proyek WordPress anda sendiri.

Jika ada pertanyaan, tolong tinggalkan saya pesan di kolom komentar di bawah ini. Saya ingin mendengar apa yang anda pikirkan pada tutorial ini.

Advertisement
Did you find this post useful?
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.