Cara Membuat Custom Fields dengan JetEngine (Crocoblock)
JetEngine dari Crocoblock adalah plugin yang dirancang untuk menambahkan elemen dinamis pada WordPress, seperti Custom Post Type, taxonomy, dan custom fields. Dengan plugin ini, Anda dapat mengelola data produk, layanan, atau portofolio secara terstruktur tanpa harus menulis kode. Selain itu, JetEngine cocok untuk pengguna pemula maupun developer karena antarmukanya yang intuitif dan berbasis form.
Custom fields memungkinkan Anda menyimpan informasi tambahan pada setiap postingan sehingga tampilan konten lebih konsisten dan mudah diatur. Dengan demikian, informasi seperti harga normal dan harga diskon bisa dimasukkan sekali dan dipanggil di template sesuai kebutuhan. Oleh karena itu, penggunaan custom fields sangat membantu dalam pengelolaan toko atau katalog produk.
Sebelum menambahkan field, ada baiknya memahami alur pembuatan: membuat CPT (jika perlu), membuat meta box, lalu menambahkan field di dalamnya. Selanjutnya, setiap field bisa ditampilkan di frontend menggunakan template atau builder yang Anda pakai. Dengan demikian, proses pengisian konten menjadi lebih cepat dan minim kesalahan.
Di bagian berikut, dijelaskan langkah-langkah praktis mulai dari instalasi JetEngine hingga menambahkan dua meta field penting untuk harga.
Install dan Aktifkan Plugin JetEngine
Langkah pertama adalah menyiapkan plugin JetEngine di situs WordPress Anda. Karena JetEngine merupakan produk Crocoblock yang umumnya berlisensi, unduh file plugin dari akun Crocoblock Anda lalu unggah melalui menu Plugins > Add New > Upload Plugin. Setelah itu aktifkan plugin agar menu JetEngine muncul di dashboard WordPress.
Jika tujuan Anda adalah mengelola produk atau data khusus, sebaiknya buat dulu Custom Post Type (CPT). CPT membantu memisahkan konten produk dari post biasa, sehingga manajemen data menjadi lebih rapi. Oleh karena itu, memilih atau membuat CPT yang tepat adalah langkah awal yang penting sebelum menambahkan custom fields.
Untuk membuat CPT, buka JetEngine > Post Types > Add New lalu isi nama, slug, dan label sesuai kebutuhan. Setelah semua pengaturan terisi, klik Save untuk menyimpan perubahan. Selanjutnya Anda sudah memiliki struktur post type khusus yang siap diberi meta box dan field.
- Buka JetEngine > Post Types > Add New.
- Isi nama, slug, label, dan pengaturan lainnya sesuai kebutuhan.
- Klik Save untuk menyimpan Custom Post Type.
Tambahkan Custom Fields
Setelah CPT tersedia, langkah berikutnya adalah membuat meta box yang berisi kumpulan custom fields. Meta box ini berguna untuk mengelompokkan field sehingga tampil rapi pada editor post atau CPT. Selain itu, meta box memudahkan Anda mengatur visibility field berdasarkan post type yang dipilih.
Untuk membuat meta box baru, masuk ke JetEngine > Meta Boxes > Add New dan beri nama yang jelas, misalnya Harga Produk. Pada bagian Post Types pilih CPT atau post yang ingin menerima field tersebut, sehingga field hanya muncul pada konten relevan. Dengan demikian editor tidak akan penuh dengan field yang tidak diperlukan.
Setelah meta box dibuat, tambahkan field satu per satu sesuai kebutuhan. JetEngine menyediakan banyak tipe field; namun untuk harga pilih tipe Number agar input terbatas pada angka. Selanjutnya atur label, name/id, dan opsi tambahan seperti default value atau description jika perlu.
- Masuk ke JetEngine > Meta Boxes > Add New.
- Isi nama meta box, lalu pilih Post Types yang relevan.
- Tambahkan field sesuai kebutuhan dan simpan meta box.
Tambahkan Dua Meta Field
Di dalam meta box, buat dua field utama untuk menangani harga: satu untuk Harga Normal dan satu untuk Harga Diskon. Pembagian ini memudahkan perhitungan dan tampilan harga di frontend serta memudahkan pembaruan data promosi. Selanjutnya nama/ID field harus konsisten, misalnya harga_normal dan harga_diskon, agar mudah dipanggil di template.
Untuk field Harga Normal, atur Label: Harga Normal, Name/ID: harga_normal, dan Type: Number. Dengan demikian data yang masuk akan berbentuk numerik sehingga aman dipakai untuk kalkulasi. Kemudian, untuk Harga Diskon atur Label: Harga Diskon, Name/ID: harga_diskon, dan Type: Number.
Selain pengaturan dasar, Anda dapat menambahkan placeholder atau description singkat pada masing-masing field untuk panduan editor. Setelah semua field ditambahkan, klik tombol Save Meta Box agar perubahan tersimpan. Dengan demikian tiap post pada CPT tersebut otomatis menampilkan field harga di bawah editor.
- Field Harga Normal
Label:Harga Normal
Name/ID:harga_normal
Type:Number - Field Harga Diskon
Label:Harga Diskon
Name/ID:harga_diskon
Type:Number
Cara Membuat Custom Fields dengan Advanced Custom Fields (ACF)
Advanced Custom Fields (ACF) adalah salah satu plugin WordPress paling populer untuk menambahkan field khusus pada postingan, halaman, maupun Custom Post Type. Dengan plugin ini, Anda bisa menambahkan informasi tambahan tanpa perlu menulis kode PHP secara manual. Selain itu, antarmukanya yang sederhana membuat ACF mudah digunakan baik oleh pemula maupun developer.
Custom fields di ACF sangat fleksibel karena mendukung berbagai tipe input seperti text, number, select, repeater, hingga gallery. Oleh karena itu, plugin ini banyak dipakai untuk membangun situs katalog produk, company profile, hingga e-commerce ringan. Dengan demikian, ACF memberikan kendali penuh atas data yang tersimpan di dalam WordPress.
Menambahkan harga normal dan harga diskon pada postingan menggunakan ACF sangatlah praktis. Anda cukup membuat Field Group baru, menambahkan field sesuai kebutuhan, lalu mengatur lokasi agar field hanya tampil pada post atau CPT tertentu. Selanjutnya field tersebut otomatis muncul di bawah editor saat membuat atau mengedit konten.
Berikut adalah langkah-langkah detail untuk menambahkan custom fields menggunakan Advanced Custom Fields.
Install dan Aktifkan Plugin ACF
Langkah awal adalah menginstal plugin Advanced Custom Fields dari direktori WordPress atau mengunggah file plugin jika Anda menggunakan versi Pro. Setelah diinstal, aktifkan plugin sehingga menu ACF muncul di dashboard WordPress. Dengan demikian, Anda siap untuk mulai menambahkan field khusus.
Untuk menambahkan field baru, masuk ke ACF > Field Groups > Add New. Di halaman ini, Anda dapat membuat satu kelompok field yang berisi berbagai custom fields sesuai kebutuhan. Berikan nama field group yang deskriptif, misalnya Harga Produk, agar mudah dikenali di kemudian hari.
Selain itu, field group memungkinkan Anda mengatur lokasi field dengan fleksibel. Misalnya, field hanya muncul pada post biasa, page tertentu, atau Custom Post Type tertentu. Dengan begitu, pengalaman editor tetap rapi dan efisien.
- Buka ACF > Field Groups > Add New.
- Isi nama field group, misalnya:
Harga Produk. - Simpan pengaturan dasar untuk melanjutkan.
Tambahkan Dua Custom Field
Setelah field group dibuat, langkah berikutnya adalah menambahkan field di dalamnya. Untuk kasus harga produk, Anda cukup membuat dua field dengan tipe Number agar input terbatas pada angka. Dengan cara ini, data lebih konsisten dan dapat digunakan untuk perhitungan otomatis jika dibutuhkan.
Field pertama adalah Harga Normal dengan pengaturan: Field Label: Harga Normal, Field Name: harga_normal, dan Field Type: Number. Field ini berfungsi untuk menyimpan harga utama produk sebelum diskon.
Field kedua adalah Harga Diskon dengan pengaturan: Field Label: Harga Diskon, Field Name: harga_diskon, dan Field Type: Number. Field ini berfungsi untuk menyimpan harga promosi yang lebih rendah. Dengan memisahkan field harga normal dan harga diskon, Anda dapat menampilkan kedua nilai tersebut secara fleksibel di frontend.
Selain pengaturan dasar, Anda juga bisa menambahkan instruksi pada kolom Instructions agar editor mengetahui cara mengisi field dengan benar. Setelah selesai menambahkan semua field, jangan lupa klik Publish untuk menyimpan field group.
- Harga Normal
Field Label:Harga Normal
Field Name:harga_normal
Field Type:Number - Harga Diskon
Field Label:Harga Diskon
Field Name:harga_diskon
Field Type:Number
Pada bagian Location, atur agar field group hanya muncul pada post type yang diinginkan. Misalnya, pilih Post Type is equal to Post untuk menampilkan field pada artikel biasa, atau pilih CPT sesuai kebutuhan. Dengan demikian, field tidak akan mengganggu editor di konten lain yang tidak relevan.
Terakhir, setelah field group dipublikasikan, field “Harga Normal” dan “Harga Diskon” otomatis muncul di bawah editor setiap kali Anda membuka post atau CPT yang ditarget. Ini memudahkan Anda untuk memasukkan harga produk secara konsisten dan rapi.
