Cara Menambahkan Custom Meta Boxes di Postingan WordPress

Apakah kamu sedang ingin membuat custom meta box untuk postingan, halaman, dan custom postingan WordPress? Jika iya, sekarang berada di halaman yang tepat.

Meta box biasanya di gunakan untuk menyediakan antarmuka pengguna guna menambahkan bidang khusus (meta data) ke dalam konten.

Pada artikel ini, kami akan sedikit menjelaskan apa itu custom meta box, dan bagaimana kamu dapat menambahkannya di postingan dan custom post website WordPress.

Apa Itu Custom Meta Box di WordPress?

Seperti yang sudah kami katakan di atas, meta box adalah antarmuka pengguna yang di gunakan untuk menambahkan bidang meta data khusus di postingan, halaman, dan jenis postingan khusus lainnya.

WordPress hadir dengan antarmuka yang mudah di gunakan sehingga membantu kamu membuat konten seperti postingan dan halaman, atau custom postingan.

Biasanya, setiap konten yang di buat terdiri dari konten aktual dan meta data. Meta data adalah informasi yang terkait dengan konten tersebut seperti tanggal dan waktu, nama penulis, judul, dan lainnya. Jika ingin, kamu dapat menambahkan meta data sendiri dengan menggunakan custom fields.

Namun, menambahkan meta data menggunakan kolom custom field default tidak terlalu efektif. Maka kamu memerlukan custom meta data yang lebih lengkap.

WordPress memungkinkan pengembang untuk membuat dan menambahkan custom meta data mereka sendiri pada halaman post editor. Cara tersebut banyak di gunakan oleh plugin populer untuk memudahkan pengguna dalam mengatur postingan.

Misalnya, jika menggunakan plugin All in One SEO kamu akan melihat custom meta data judul dan deskripsi seperti berikut ini:

Mari kita lihat bagaimana kamu dapat menambahkan custom meta data di postingan WordPress.

Membuat Custom Meta Boxes di WordPress

Pertama, yang perlu kamu lakukan adalah menginstal dan mengaktifkan plugin Advanced Custom Fields.

Setelah di aktivasi, plugin akan menambahkan item baru bernama “Custom Fields” di menu samping area admin WordPress. Klik menu tersebut untuk membuka halaman custom field.

Disini kamu hanya akan menemukan halaman kosong dan tidak menemukan bidang apa pun. Untuk membuat bidang baru kamu bisa mengklik tombol Add New.

Kemudian akan terbuka halaman “Add New Field Group”.

Pada halaman ini kamu perlu memberi judul untuk bidang grub yang di buat. Judul ini nantinya akan di gunakan sebagai judul meta box.

Setelah selesai kamu bisa menambahkan bidang baru. Cukup klik tombol + Add Field untuk membuat bidang.

Akan muncul formulir pengaturan bidang. Pertama, kamu perlu memberikan nama judul untuk bidang yang di buat. Label ini akan di tampilkan di meta box sebelum bidang.

Setelah itu kamu perlu memilih jenis bidang. Plugin Advanced Custom Field juga memungkinkan kamu memilih dari berbagai opsi. Termasuk teks, textarea, radio button, checkboxes, WYSIWYG editor, gambar, dan banyak lagi.

Selanjutnya, kamu perlu memberikan instruksi. Nantinya petunjuk ini akan memberi tahu pengguna lain apa yang harus di tambahkan ke dalam bidang. Pada bagian “Required” terserah kamu bisa mengaturnya ke Yes atau No.

Di bawahnya kamu akan menemukan opsi lainnya. Kamu perlu memeriksa opsi ini dengan teliti dan menyesuaikannya agar lebih sesuai dengan kebutuhan.

Selanjutnya, klik tombol Close Field untuk menutup bidang.

Jika ingin menambahkan lebih banyak bidang lagi ke metabox, kamu bisa mengklik tombol + Add Field.

Setelah merasa cukup menambahkan bidang, kamu dapat menggulir ke bawah pada bagian “Location”. Dari sini kamu dapat menentukan kapan dan tempat kamu ingin menampilkan metabox.

Advanced Custom Fields hadir dengan beberapa aturan yang telah di tentukan sebelumnya untuk kamu pilih. Misalnya, kamu dapat memilih Post Type, Post Kategori, Taksonomi, Induk Halaman, dan banyak lagi.

Selanjutnya adalah settings metabox.

Pada bagian Active, Style, Position, Label placement, dan Instruction placement kamu bisa membiarkannya default atau mengaturnya tergantung kebutuhan. Tetapi pada Order No, jika kamu memiliki beberapa bidang grup yang di tentukan untuk satu lokasi, maka kamu dapat memilih nomor urut untuk di tampilkan. Jika kamu tidak yakin, biarkan sebagai 0.

Terakhir, kamu akan melihat daftar bidang yang biasanya di tampilkan di layar postingan editor. Jika ingin menyembunyikan bidang tertentu di postingan editor, kamu dapat menentukannya disini. Jika tidak yakin, maka pilihan terbaik adalah tidak memberi tanda centang apa pun.

Setelah selesai mengatur semuanya, sekarang kamu bisa mengklik tombol Publish yang berada di bagian sebelah kanan.

Tergantung pengaturan yang di buat, sekarang kamu bisa mengunjungi halaman post editor atau custom post untuk melihat tampilan dari custom meta box.

Kamu dapat menggunakan custom meta box ini untuk menambahkan meta data ke dalam postingan. Data ini akan disimpan di database WordPress ketika kamu menyimpan atau menerbitkan postingan.

Menampilkan Data Custom Meta Box di Tema WordPress

Sampai sini kami berhasil membuat custom meta box dan menampilkannya di editor postingan. Langkah selanjutnya adalah menampilkan data yang tersimpan ke tema WordPress yang di gunakan.

Pertama, kamu perlu mengedit grup custom field yang sudah di buat sebelumnya. Pada halaman Edit Field Group, kamu akan melihat custom field dan namanya.

Kamu akan memerlukan nama tersebut untuk menampilkannya di website.

Advanced Custom Fields memungkinkan kamu melakukannya dengan dua cara yang berbeda.

Pertama, kamu dapat menggunakan shortcode untuk menampilkan custom field ke dalam postingan.

Atau menampilkannya dengan menambahkan kode langsung ke file tema WordPress.

Kamu harus mengedit file tema tempat ingin menampilkan data dari bidang ini. Misalnya single.php, content.php, page.php, atau yang lainnya.

Sekarang perlu memastikan bahwa kamu menambahkan kode di dalam loop WordPress. Cara termudah yang dapat kamu manfaatkan untuk memasukkan kode ke loop adalah dengan mencari baris dalam kode seperti berikut.

Kamu dapat menempelkan kode setelah baris ini dan sebelum baris yang mengakhiri loop:

Kode custom field akan terlihat seperti ini:

Kode ini akan menampilkan data yang di masukkan ke dalam bidang baris artikel dari custom meta box kami.

Perhatikan bagaimana kami membungkus kode dalam heading dengan class CSS. Ini akan membantu kami memformat dan menata custom field nanti dengan menambahkan custom CSS ke dalam tema.

Berikut adalah contohnya:

Jangan lupa untuk mengganti nama bidang dengan punya kamu sendiri.

Sekarang kamu dapat mengunjungi postingan di mana telah memasukkan data ke custom field untuk melihat custom meta data di tampilkan.

Jika kamu memerlukan bantuan lebih lanjut, jangan ragu untuk mengunjungi halaman dokumentasi plugin Advanced Custom Fields.

Kami harap artikel ini membantu kamu mempelajari cara menambahkan custom meta boxes di postingan WordPress. Mungkin kamu juga ingin melihat artikel kami lainnya tentang cara meningkatkan aksesibilitas website WordPress.

Semoga panduan di atas bermanfaat. Jika kamu memiliki pertanyaan tinggalkan pada kolom komentar di bawah.