7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Plugins

Cara Membuat Kotak Write/Meta WordPress Kustom

Read Time: 11 mins

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Membuat kotak meta adalah bagian penting dari pengembangan tema/plugin WordPress. Ini adalah cara untuk menambahkan editor yang menarik ke layar posting dan menghindari memaksa pengguna untuk mengandalkan field kustom. Jika Anda pernah membuat jenis posting kustom di WordPress, Anda mungkin ingin menambahkan beberapa jenis data tambahan ke dalamnya. Tentu, Anda bisa menggunakan custom field, tapi itu jelek. Memulai dengan kotak meta kustom mudah dilakukan, jadi mari menyelaminya!


Apa itu Meta Kotak Kustom?

Kotak meta (atau tulis) kustom sangat sederhana secara teori. Hal ini memungkinkan Anda untuk menambahkan sepotong data kustom ke posting atau halaman di WordPress.

Bayangkan bahwa Anda sedang mengerjakan sebuah tema untuk klien yang ingin membuat katalog koleksi poster konsernya yang ekstensif. Anda segera mulai mencari fungsi inti WordPress untuk melihat bagaimana Anda bisa mengatur tema: Setiap posting akan mewakili sebuah poster, yang sangat cocok untuk menambahkan gambar, judul dan deskripsi. Kita juga bisa menggunakan sistem kategori dan tag di dalam WordPress untuk mengatur posternya. Tapi bagaimana jika kita ingin menambahkan tipe data meta baru untuk "artis" dari masing-masing poster? Hmph. WordPress tidak memiliki apa pun untuk itu di luar kotak... yang membawa kita ke kotak meta kustom.

Kotak meta (atau tulis) kustom sangat sederhana secara teori. Ini memungkinkan Anda untuk menambahkan potongan data kustom ke posting atau halaman di WordPress - yang lebih baik adalah ia muat di sebagian besar halaman default di dalam WP, sehingga Anda dapat dengan mudah memasukkannya ke dalam Post-Editor agar mudah digunakan oleh tipe non-teknis. Seperti yang saya katakan di intro, Anda dapat menambahkan jenis "meta data" yang sama ke posting Anda menggunakan field kustom untuk posting atau halaman. Tidak ada yang salah dengan pendapat ini, tapi itu tidak terlalu anggun atau mudah-digunakan.

Sebagai gantinya, Anda ingin membuat kotak meta kustom yang berisi field untuk semua data Anda dan menyimpan semua hal itu dengan benar saat posting dipublikasikan. Itulah yang kita bahas di sini. Hal ini dipecah menjadi tiga langkah besar:

  • Menambahkan kotak meta
  • Me-render kotak meta
  • Menyimpan data (cara yang benar - ya, ada yang salah caranya)

Perlu dicatat bahwa banyak informasi ini juga dapat digunakan di dalam API jenis posting kustom (kita akan sampai ke titik itu nanti!), namun demi menjaga hal-hal tetap terfokus hari ini, kita akan menambahkan ini secara langsung ke editor posting default.

Untuk pembaca tingkat lanjut di antara penonton: Ya, jenis posting kustom adalah tujuan kami saat ini, namun penting untuk menyiapkan beberapa dasar terlebih dahulu. Plus, karena Anda dapat menggunakan kotak meta kustom di berbagai tempat, ada baiknya diketahui siapa saja.

Apa pun dalam tutorial ini akan bekerja di file functions.php dari tema. Bagaimanapun, itu bukan tempat yang tepat untuknya. Jika Anda menambahkan data ke sebuah posting, kemungkinan Anda menginginkannya terlepas dari desain front end Anda. Dengan demikian, Anda harus menempatkan kode ini di beberapa tempat yang tidak bergantung pada desain Anda: file plugin.


Langkah 1 Menambahkan Kotak Meta

The Meta Box Title

Judul Kotak MetaMudah, WordPress menyediakan sebuah fungsi untuk menambahkan kotak meta ke layar admin yang diberikan: add_meta_box.

Entri codex dilakukan dengan baik untuk fungsi ini, namun berikut adalah ikhtisar singkatnya. Prototipenya:

$id adalah atribut ID html dari kotak. Ini berguna jika Anda memuat CSS atau Javascript kustom pada halaman edit untuk menangani pilihannya. Jika tidak, itu tidak terlalu penting.

$title ditampilkan di bagian atas kotak meta.

$callback adalah fungsi yang benar-benar me-render kotak meta. Kami akan menjelaskan hal ini di langkah 2.

$page adalah di mana Anda ingin kotak meta ditampilkan. Ini harus berupa string dengan 'post' atau 'page' atau 'some_custom_post_type'.

$context adalah di mana Anda ingin kotak meta ditampilkan. 'normal' meletakkannya di bawah editor posting. 'side' menggerakkan kotak meta untuk mengedit sidebar kanan layar (oleh kategori dan tag, dll.). 'advanced' juga menaruh kotak di kolom yang sama seperti editor post, tapi lebih ke bawah.

$priority memberitahu wordpress dimana untuk menempatkan kotak meta dalam konteksnya. 'high', 'default' atau 'low'​menempatkan kotak lebih dekat ke atas, dalam posisi normal, atau ke arah bawah masing-masing. Karena semua kotak meta mudah digunakan, $priority bukanlah masalah besar.

Akhirnya $callback_args memungkinkan Anda mengirimkan data ke fungsi $callback Anda dalam bentuk array. Kami tidak akan menggunakan ini di sini, tapi bisa bermanfaat untuk mengirimkan beberapa data ke kotak meta. Katakan, jika plugin Anda memiliki beberapa pilihan yang mempengaruhi apa yang ditampilkan di kotak meta. Anda bisa mengirimkan nilai opsi tersebut melalui array $callback_args.

Jadi, panggilan add_meta_box kita akan terlihat seperti ini:

Kita tidak bisa hanya memasukkan ini ke file plugin kita saja. Melakukan hal itu akan mengakibatkan layar putih kematian, dan kesalahan fatal PHP: call to undefined function. Mengapa? Karena kami memanggil fungsi add_meta_box sebelum WordPress dimuat. Jadi kita perlu menggunakan hook WordPress, yang merupakan bagian dari API plugin. Pada dasarnya, fungsi terhubung ke dalam tindakan WordPress atau kait filter tertentu, lalu fungsi tersebut dijalankan saat memuat pengait itu. Dengan membungkus panggilan add_meta_box kita dalam sebuah fungsi, lalu mengaitkan fungsi itu ke dalam kait tindakan add_meta_boxes, kita menghindari kesalahan fatal.

Kode kita untuk menambahkan kotak meta ke layar posting kita akan terlihat seperti ini:


Langkah 2 Me-render Kotak Meta

Kode di atas sudah cukup untuk menambahkan kotak meta, tapi sekarang kita harus me-render dan benar-benar menambahkan field. Ini hanyalah kode formulir HTML yang dicampur dengan sedikit PHP untuk menampilkan data yang tersimpan. Kita tidak perlu menyertakan tag formulir karena WordPress melakukan itu untuk kita.

Ingat string yang kita kirimkan sebagai $callback di add_meta_box? Kita sekarang akan membuat fungsi dengan nama yang sama. Fungsi ini akan mengurus semua tampilan di dalam kotak meta.

Kita akan menambahkan beberapa field ke kotak meta kita: sebuah masukan teks, sebuah menu drop-down, dan kotak centang. Mari kita mulai dengan masukan teks.

Menambahkan Masukan Teks

Tapi bagaimana sebenarnya menampilkan data? Nah, seperti yang akan Anda lihat di langkah 3, kita akan menyimpan data ini di tabel wp_postmeta menggunakan fungsi update_post_meta. Fungsi itu memiliki dua fungsi saudara yang disebut get_post_meta dan get_post_custom, yang mengambil data dari wp_postmeta. get_post_meta hanya mengambil data dari satu kunci, sementara get_post_custom mengambil semua itu. Karena kita hanya benar-benar menggunakan satu field pada saat ini, mari kita gunakan get_post_meta.

Perhatikan juga bahwa fungsi add_meta_box mengirimkan satu variabel ke callback kita: $post, yang merupakan objek posting.

Menambahkan Drop Down

Dengan penambahan field kedua, kita mengubah atau get_post_meta memanggil ke get_post_custom, yang mengembalikan array asosiatif dari semua kunci dan nilai posting. Kita kemudian hanya mengakses field kita melalui nama mereka. Pernyataan ternary menyimpan kode kita dari peringatan PHP (indeks yang tidak terdefinisi dan semacamnya). Kita akan membahas fungsi esc_attr pada langkah ketiga.

Di drop down, kita akan menggunakan salah satu fungsi WordPress yang paling berguna: selected. Ini membandingkan nilai pertama, data yang kita simpan, dengan yang kedua, atribut nilai <option>. Jika mereka sama, fungsi akan meng-echo selected="selected", yang menampilkan nilai pada drop down. Cukup manis, dan ini menghemat kita dari menulis bayak dari mereka atau pernyataan ternary. Anda juga dapat menggunakan fungsi yang selected() dengan tombol radio.

Menambahkan Kotak Centang

Sekali lagi WordPress menyediakan fungsi berguna yang checked(). Ia bekerja seperti yang selected() yang membandingkan nilai pertama (data yang tersimpan) ke yang kedua dan meng-echo checked="checked" jika sama.

wp_nonce_field menambahkan dua field tersembunyi ke kotak meta kita. Salah satunya adalah nonce. Ini adalah string acak dari angka yang valid per pengguna per blog dasar selama 24 jam. Nonce adalah cara untuk memverifikasi niatan, dan mereka memastikan bahwa WordPress tidak melakukan apapun kecuali permintaan yang berasal dari tempat yang sangat spesifik. Dengan kata lain, kita tidak ingin secara tidak sengaja memperbarui data kita dengan cara menjalankan fungsi simpan kita (lihat langkah 3) di lokasi lain selain kait save_post, jadi kita memeriksa untuk memastikan nonce valid sebelum melakukan apapun.

Langkah 3 Menyimpan Data

Aturan nomor satu saat meletakkan sesuatu ke database atau di situs Anda adalah tidak mempercayai pengguna. Bahkan jika pengguna itu adalah Anda.

Untuk menyimpan data kita, kita akan bergantung pada kait WordPress yang lain: save_post. Ini bekerja seperti kait tindakan kita di atas:

Fungsi cd_meta_box_save akan menerima satu argumen, id posting, dan mengurus pembersihan dan penyimpanan semua data kita. Kait save_post berjalan setelah tombol update atau save draft ditekan. Jadi, kita memiliki akses ke semua data $_POST, yang mencakup field meta box kita, dalam fungsi penyimpanan kita. Sebelum kita bisa melakukan apapun, kita harus melakukan tiga hal: memeriksa apakah posting itu otomatis disimpan, memverifikasi nilai nonce yang kita buat tadi, dan memeriksa untuk memastikan pengguna saat ini benar-benar bisa mengedit posting.

Sekarang hal yang menyenangkan: benar-benar menyimpan data kita. Aturan nomor satu saat meletakkan sesuatu ke database atau di situs Anda adalah tidak mempercayai pengguna. Bahkan jika pengguna itu adalah Anda. Untuk itu, sebelum kita menyimpan data apapun, kita ingin memastikan tidak ada yang jahat di sana. Untungnya Wordpress menyediakan banyak fungsi untuk validasi data.

Anda sudah melihat esc_attr() di atas (langkah 2). Yang satu ini mengkodekan ' " dan < > ke entitas HTML. Mengapa menggunakan ini? Jadi pengguna tidak bisa mengetik <script> ke dalam kotak meta Anda. Jika Anda ingin mengizinkan tag HTML tertentu masuk, namun melewati yang lainnya, wp_kses dapat melakukannya. Dibutuhkan dua argumen, yang pertama adalah string yang ingin Anda periksa dan yang kedua adalah array asosiatif dari tag yang diizinkan. WordPress menyediakan lebih banyak alat validasi data, jangan takut menggunakannya.

Kita akan menggunakan fungsi update_post_meta untuk menyimpan data kita yang terbaru. Dibutuhkan tiga argumen: sebuah ID posting, kunci meta, dan nilainya.

Merangkum

Itu saja! Anda seharusnya sudah memiliki kotak meta yang berfungsi penuh. Contoh lain yang mungkin Anda temukan di sekitar loop web melalui sekumpulan field tanpa benar-benar membersihkan data. Ini adalah pendekatan yang salah. Selalu gunakan fungsi validasi data bawaan; berbagai field/nilai mungkin memerlukan validasi data yang berbeda.

Untuk menggunakan field kustom ini di front end situs Anda, gunakan fungsi get_post_meta atau get_post_custom (lihat langkah 2).

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.