Anda sedang mengelola situs WordPress dan ingin menambahkan informasi khusus di setiap postingan, misalnya tautan sumber, kutipan singkat, atau tanggal acara. Plugin bisa menjadi solusi cepat, tetapi banyak plugin meta box menambah beban dan kadang terlalu berlebihan untuk kebutuhan sederhana. Anda bisa membuat custom meta box sendiri dengan beberapa baris kode di functions.php. Panduan ini membahas cara membuat custom meta box di WordPress langkah demi langkah, mulai dari pendaftaran meta box, penanganan penyimpanan yang aman, hingga menampilkannya di tema.
Mengapa membuat meta box sendiri?
Meta box adalah kotak tambahan di layar editor postingan atau halaman yang berisi field untuk menyimpan data tambahan. Data ini disimpan sebagai post meta, yaitu pasangan kunci-nilai yang terikat pada ID postingan. Dengan membuat sendiri, Anda mengontrol sepenuhnya field apa yang muncul, di mana ditampilkan, dan bagaimana data disanitasi. Anda juga menghindari ketergantungan pada plugin yang mungkin tidak lagi diperbarui.
Membuat meta box manual cocok jika Anda sudah nyaman mengedit file tema atau plugin. Jika Anda baru mulai belajar WordPress, pahami dulu cara kerja hook WordPress karena meta box memanfaatkan hook seperti add_meta_boxes dan save_post.
Langkah 1: Daftarkan meta box dengan hook add_meta_boxes
Buka file functions.php tema aktif (sebaiknya gunakan child theme agar perubahan tidak hilang saat tema diperbarui). Tambahkan kode berikut untuk mendaftarkan meta box di postingan dan halaman.
function webdeki_register_meta_box() {
add_meta_box(
'webdeki_meta_box',
'Informasi Tambahan',
'webdeki_render_meta_box',
array('post', 'page'),
'normal',
'high'
);
}
add_action('add_meta_boxes', 'webdeki_register_meta_box');Fungsi add_meta_box() menerima beberapa parameter: ID unik, judul yang tampil, fungsi callback untuk merender isi kotak, tipe postingan tempat kotak muncul, konteks (normal, side, advanced), dan prioritas. Setelah hook terdaftar, Anda perlu membuat fungsi webdeki_render_meta_box() untuk menampilkan field.
Langkah 2: Buat tampilan field di dalam meta box
Di dalam callback, ambil nilai yang sudah tersimpan (jika ada) menggunakan get_post_meta(), lalu buat elemen HTML untuk input. Sertakan nonce untuk keamanan.
function webdeki_render_meta_box($post) {
wp_nonce_field('webdeki_save_meta', 'webdeki_meta_nonce');
$sumber = get_post_meta($post->ID, '_webdeki_sumber', true);
$catatan = get_post_meta($post->ID, '_webdeki_catatan', true);
?>
<p>
<label for="webdeki_sumber">URL Sumber</label>
<input type="url" id="webdeki_sumber" name="webdeki_sumber" value="<?php echo esc_attr($sumber); ?>" style="width:100%" />
</p>
<p>
<label for="webdeki_catatan">Catatan Singkat</label>
<textarea id="webdeki_catatan" name="webdeki_catatan" rows="4" style="width:100%"><?php echo esc_textarea($catatan); ?></textarea>
</p>
<?php
}Perhatikan penggunaan esc_attr() dan esc_textarea() untuk mencegah XSS saat menampilkan nilai yang tersimpan. Nonce webdeki_meta_nonce akan diverifikasi saat penyimpanan.
Langkah 3: Simpan data dengan aman
Gunakan hook save_post untuk menyimpan nilai field. Ada beberapa pemeriksaan yang wajib dilakukan: pastikan nonce valid, pastikan pengguna memiliki izin mengedit postingan, dan pastikan ini bukan autosave.
function webdeki_save_meta_box($post_id) {
if (!isset($_POST['webdeki_meta_nonce'])) {
return;
}
if (!wp_verify_nonce($_POST['webdeki_meta_nonce'], 'webdeki_save_meta')) {
return;
}
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return;
}
if (!current_user_can('edit_post', $post_id)) {
return;
}
if (isset($_POST['webdeki_sumber'])) {
$sumber = esc_url_raw($_POST['webdeki_sumber']);
update_post_meta($post_id, '_webdeki_sumber', $sumber);
}
if (isset($_POST['webdeki_catatan'])) {
$catatan = sanitize_textarea_field($_POST['webdeki_catatan']);
update_post_meta($post_id, '_webdeki_catatan', $catatan);
}
}
add_action('save_post', 'webdeki_save_meta_box');Fungsi sanitasi seperti esc_url_raw() dan sanitize_textarea_field() memastikan data yang masuk sesuai tipe yang diharapkan. Jangan pernah menyimpan data mentah dari $_POST tanpa validasi.
Langkah 4: Tampilkan data di front-end
Untuk menampilkan nilai meta di halaman postingan, Anda bisa menggunakan get_post_meta() di dalam template atau melalui filter the_content. Contoh sederhana, tambahkan di single.php child theme:
$sumber = get_post_meta(get_the_ID(), '_webdeki_sumber', true);
if ($sumber) {
echo '<p>Sumber: <a href="' . esc_url($sumber) . '">' . esc_html($sumber) . '</a></p>';
}Jika Anda ingin data muncul otomatis di akhir konten, gunakan filter the_content dengan prioritas tinggi. Pastikan hanya berjalan di halaman tunggal dan tipe postingan yang sesuai.
Praktik keamanan dan pemeliharaan
- Selalu gunakan nonce dan cek kapabilitas pengguna sebelum menyimpan.
- Sanitasi setiap input sesuai tipenya (URL, teks, angka).
- Gunakan nama kunci meta dengan awalan garis bawah (
_) agar tidak muncul di daftar custom field standar. - Simpan kode di plugin khusus atau child theme agar tidak hilang saat tema diperbarui.
Jika situs Anda memiliki banyak field kustom, pertimbangkan untuk memisahkannya ke dalam plugin sendiri. Untuk pengelolaan lanjutan, Anda bisa memanfaatkan WP-CLI guna memperbarui atau mengekspor nilai meta secara massal. Selain itu, pastikan situs Anda rutin menjalani audit keamanan WordPress untuk mendeteksi potensi celah pada kode kustom.
Dalam membangun aplikasi, pemilihan pola arsitektur juga penting. Jika Anda tertarik dengan diskusi seputar pola desain, ada baiknya membaca perbandingan Singleton, Dependency Injection, dan Service Locator di Java yang bisa memberi perspektif berbeda. Untuk pengembangan aplikasi mobile, topik seperti offline mode vs sinkronisasi cloud di aplikasi iOS juga menarik untuk dipelajari.
Ringkasan
Membuat custom meta box di WordPress tanpa plugin memberi Anda kendali penuh atas data tambahan di postingan. Intinya ada pada pendaftaran hook, pembuatan field dengan nonce, penyimpanan yang tervalidasi, dan penampilan yang aman. Dengan mengikuti langkah di atas, Anda bisa menambah field kustom sesuai kebutuhan tanpa membebani situs dengan plugin tambahan.
Pertanyaan yang Sering Diajukan
Apakah meta box bisa ditambahkan ke custom post type?
Bisa. Pada parameter kedua add_meta_box(), ganti array tipe postingan dengan nama custom post type Anda, misalnya array('buku'). Pastikan custom post type tersebut sudah terdaftar.
Bagaimana cara menampilkan meta box hanya untuk pengguna tertentu?
Di dalam fungsi render, Anda bisa memeriksa kapabilitas pengguna dengan current_user_can('manage_options') atau kapabilitas lain. Jika tidak memenuhi, kembalikan fungsi tanpa menampilkan field.
Apakah data meta box hilang jika saya mengganti tema?
Data post meta tersimpan di database, bukan di tema. Namun, kode untuk menampilkan field dan menyimpan data ada di functions.php tema. Jika Anda mengganti tema, kode tersebut tidak aktif. Karena itu, simpan kode di plugin khusus agar tetap berjalan.
