Cara Membuat dan Mengelola Meta Boxes dengan Carbon Fields di WordPress

Cara Membuat dan Mengelola Meta Boxes dengan Carbon Fields di WordPress. Carbon Fields adalah plugin WordPress untuk membuat custom fields. Jika Anda pernah mendengar Advanced Custom Fields atau Metabox maka Carbon Fields merupakan alternatif kedua plugin terkenal itu.

Carbon Fields 100% gratis!! Anda bisa menggunakan Carbon Fields jika membutuhkan field-field yang hanya ada di versi ACF atau Metabox Pro yang harganya cukup mahal. Daripada Anda download ACF atau Metabox nulled atau bajakan ada baiknya pakai Carbon Fields. Kita mulai dari pendahuluan pengenalan mengenai Carbon Fields. 

Cara Membuat dan Mengelola Meta Boxes dengan Carbon Fields di WordPress

Pengertian Meta Box

Meta Box adalah fitur pada WordPress yang memungkinkan pengguna menambahkan informasi tambahan atau meta data pada halaman atau posting. Meta data ini dapat berupa teks, gambar, audio, video, atau jenis konten lainnya yang berguna untuk memperkaya konten yang ditampilkan pada halaman atau posting.

Misalnya, Anda ingin menambahkan informasi tentang penulis artikel pada halaman post, seperti foto profil, nama, jabatan, dan bio. Dengan menggunakan Meta Box, Anda dapat dengan mudah menambahkan form input untuk setiap informasi tersebut dan menyimpan data yang diisi oleh pengguna pada database WordPress.

Apa itu Carbon Fields

Carbon Fields adalah plugin WordPress yang memungkinkan pengguna membuat Meta Box dengan mudah dan cepat tanpa harus menulis kode program. Plugin ini menawarkan berbagai jenis custom field atau field khusus, seperti teks, gambar, checkbox, radio button, repeater, nested repeater, dan image gallery.

Dengan Carbon Fields, Anda dapat membuat Meta Box sesuai kebutuhan Anda dan menyesuaikan tampilan Meta Box dengan tema WordPress yang Anda gunakan. Selain itu, plugin ini juga menawarkan berbagai fitur tambahan, seperti validasi data input, pengaturan aksesibilitas, dan integrasi dengan plugin atau tema lainnya.

Cara Membuat dan Mengelola Meta Boxes dengan Carbon Fields di WordPress

Sebelum menggunakan Carbon Fields untuk membuat Meta Box pada WordPress, terdapat beberapa persiapan yang perlu dilakukan, antara lain:

Instalasi Carbon Fields

  1. Pertama-tama, Anda harus menginstal dan mengaktifkan plugin Carbon Fields pada WordPress Anda. Caranya adalah sebagai berikut:
  2. Unduh plugin Carbon Fields dari situs resminya atau melalui halaman Add New Plugin pada dashboard WordPress Anda.
  3. Unggah atau upload plugin tersebut pada WordPress Anda.
  4. Aktifkan plugin Carbon Fields.

Konfigurasi Carbon Fields

Setelah menginstal plugin Carbon Fields, Anda perlu melakukan konfigurasi awal pada plugin tersebut. Beberapa konfigurasi yang dapat dilakukan antara lain:

  1. Konfigurasi Koneksi Database: Carbon Fields membutuhkan koneksi database untuk menyimpan data input dari pengguna. Pastikan database WordPress Anda sudah terkoneksi dengan benar pada file wp-config.php.
  2. Konfigurasi Path dan URL: Tentukan path atau jalur dan URL untuk folder Carbon Fields pada website Anda. Biasanya, path dan URL ini akan digunakan untuk memanggil file CSS dan JS yang dibutuhkan oleh plugin.
  3. Konfigurasi Namespace: Setiap custom field yang dibuat pada Carbon Fields akan memiliki namespace atau ruang lingkup yang berbeda-beda. Anda dapat menentukan namespace pada konfigurasi awal agar tidak terjadi konflik dengan custom field lain pada WordPress Anda.

Dengan melakukan persiapan ini, Anda sudah siap untuk membuat dan mengelola Meta Box pada WordPress dengan menggunakan Carbon Fields. Pada bagian selanjutnya, kita akan membahas cara membuat custom field pada Carbon Fields dengan berbagai jenis field yang tersedia.

Cara Membuat Custom Field pada Carbon Fields

Setelah melakukan persiapan pada bagian sebelumnya, kini saatnya untuk membuat custom field pada Carbon Fields. Berikut ini adalah contoh cara membuat custom field pada Carbon Fields dengan berbagai jenis field yang tersedia:

Contoh Membuat Custom Field Text

Buka file functions.php pada theme WordPress Anda.

Tambahkan kode berikut untuk membuat custom field teks pada Meta Box baru:

Container::make('post_meta', 'Informasi Produk')
    ->where('post_type', '=', 'product')
    ->add_fields(array(
        Field::make('text', 'product_sku', 'SKU Produk')
            ->set_help_text('Masukkan SKU Produk'),
        Field::make('text', 'product_price', 'Harga Produk')
            ->set_help_text('Masukkan Harga Produk')
    ));

Simpan perubahan pada file functions.php dan buka halaman post produk pada WordPress. Anda akan melihat Meta Box baru dengan dua custom field teks yang telah dibuat.

Contoh Membuat Custom Field Image

Untuk membuat custom field gambar pada Carbon Fields, ikuti langkah-langkah berikut:

Buka file functions.php pada theme WordPress Anda.

Tambahkan kode berikut untuk membuat custom field gambar pada Meta Box baru:

Container::make('post_meta', 'Foto Produk')
    ->where('post_type', '=', 'product')
    ->add_fields(array(
        Field::make('image', 'product_image', 'Foto Produk')
            ->set_value_type('url')
            ->set_help_text('Pilih Foto Produk')
    ));

Simpan perubahan pada file functions.php dan buka halaman post produk pada WordPress. Anda akan melihat Meta Box baru dengan custom field gambar yang telah dibuat.

Contoh Membuat Custom Field Checkbox

Untuk membuat custom field checkbox pada Carbon Fields, ikuti langkah-langkah berikut:

Buka file functions.php pada theme WordPress Anda.

Tambahkan kode berikut untuk membuat custom field checkbox pada Meta Box baru:

Container::make('post_meta', 'Kategori Produk')
    ->where('post_type', '=', 'product')
    ->add_fields(array(
        Field::make('checkbox', 'product_category', 'Kategori Produk')
            ->set_options(array(
                'Buku' => 'Buku',
                'Elektronik' => 'Elektronik',
                'Fashion' => 'Fashion'
            ))
            ->set_help_text('Pilih Kategori Produk')
    ));

Simpan perubahan pada file functions.php dan buka halaman post produk pada WordPress. Anda akan melihat Meta Box baru dengan custom field checkbox yang telah dibuat.

Contoh Membuat Custom Field Radio Button

Untuk membuat custom field radio button pada Carbon Fields, ikuti langkah-langkah berikut:

Buka file functions.php pada theme WordPress Anda.

Tambahkan kode berikut untuk membuat custom field radio button pada Meta Box baru:

Container::make('post_meta', 'Status Produk')
    ->where('post_type', '=', 'product')
    ->add_fields(array(
        Field::make('radio', 'product_status', 'Status Produk')
            ->set_options(array(
			        'Tersedia' => 'Tersedia',
					'Tidak Tersedia' => 'Tidak Tersedia'
    ))
    ->set_help_text('Pilih Status Produk')
));

Simpan perubahan pada file functions.php dan buka halaman post produk pada WordPress. Anda akan melihat Meta Box baru dengan custom field radio button yang telah dibuat.

– Simpan perubahan pada file functions.php dan buka halaman post produk pada WordPress. Anda akan melihat Meta Box baru dengan custom field radio button yang telah dibuat.

Contoh Membuat Custom Field Repeater

Untuk membuat custom field repeater pada Carbon Fields, ikuti langkah-langkah berikut:

Buka file functions.php pada theme WordPress Anda.

Tambahkan kode berikut untuk membuat custom field repeater pada Meta Box baru:

Container::make('post_meta', 'Deskripsi Produk')
->where('post_type', '=', 'product')
->add_fields(array(
Field::make('text', 'description_title', 'Judul Deskripsi')
->set_help_text('Masukkan Judul Deskripsi'),
Field::make('textarea', 'description_content', 'Isi Deskripsi')
->set_help_text('Masukkan Isi Deskripsi')
))
->add_fields(array(
Field::make('text', 'specification_title', 'Judul Spesifikasi')
->set_help_text('Masukkan Judul Spesifikasi'),
Field::make('textarea', 'specification_content', 'Isi Spesifikasi')
->set_help_text('Masukkan Isi Spesifikasi')
))
->add_fields(array(
Field::make('text', 'review_title', 'Judul Ulasan')
->set_help_text('Masukkan Judul Ulasan'),
Field::make('textarea', 'review_content', 'Isi Ulasan')
->set_help_text('Masukkan Isi Ulasan')
))
->add_fields(array(
Field::make('text', 'video_title', 'Judul Video')
->set_help_text('Masukkan Judul Video'),
Field::make('text', 'video_url', 'URL Video')
->set_help_text('Masukkan URL Video')
))
->add_fields(array(
Field::make('text', 'other_title', 'Judul Lainnya')
->set_help_text('Masukkan Judul Lainnya'),
Field::make('textarea', 'other_content', 'Isi Lainnya')
->set_help_text('Masukkan Isi Lainnya')
))
->add_fields(array(
Field::make('text', 'custom_title', 'Judul Custom')
->set_help_text('Masukkan Judul Custom'),
Field::make('textarea', 'custom_content', 'Isi Custom')
->set_help_text('Masukkan Isi Custom')
))
->add_fields(array(
Field::make('text', 'related_title', 'Judul Terkait')
->set_help_text('Masukkan Judul Terkait'),
Field::make('textarea', 'related_content', 'Isi Terkait')
->set_help_text('Masukkan Isi Terkait')
));

Simpan perubahan pada file functions.php dan buka halaman post produk pada WordPress. Anda akan melihat Meta Box baru dengan custom field repeater yang telah dibuat.

Contoh Membuat Custom Field Nested Repeater

Untuk membuat custom field nested repeater pada Carbon Fields, ikuti langkah-langkah berikut:

– Buka file functions.php pada theme WordPress Anda.

– Tambahkan kode berikut untuk membuat custom field nested repeater pada Meta Box baru:

Container::make('post_meta', 'Variasi Produk')
->where('post_type', '=', 'product')
->add_fields(array(
Field::make('text', 'variation_name', 'Nama Variasi')
->set_help_text('Masukkan Nama Variasi'),
Field::make('text', 'variation_price', 'Harga Variasi')
->set_help_text('Masukkan Harga Variasi')
))
->add_fields(array(
Field::make('complex', 'variation_customization', 'Customization')
->add_fields(array(
Field::make('text', 'customization_name', 'Nama Customization')
->set_help_text('Masukkan Nama Customization'),
Field::make('text', 'customization_price', 'Harga Customization')
->set_help_text('Masukkan Harga Customization')
))
->set_help_text('Tambahkan Customization')
));

– Simpan perubahan pada file functions.php dan buka halaman post produk pada WordPress. Anda akan melihat Meta Box baru dengan custom field nested repeater yang telah dibuat.

Contoh Membuat Custom Field Image Gallery

Untuk membuat custom field image gallery pada Carbon Fields, ikuti langkah-langkah berikut:

– Buka file functions.php pada theme WordPress Anda.

– Tambahkan kode berikut untuk membuat custom field image gallery pada Meta Box baru:

Container::make('post_meta', 'Galeri Produk')
->where('post_type', '=', 'product')
->add_fields(array(
Field::make('complex', 'product_gallery', 'Galeri Produk')
->add_fields(array(
Field::make('image', 'product_image', 'Foto Produk')
->set_value_type('url')
->set_help_text('Pilih Foto Produk')
))
->set_help_text('Tambahkan Foto Produk')
));

– Simpan perubahan pada file functions.php dan buka halaman post produk pada WordPress. Anda akan melihat Meta Box baru dengan custom field image gallery yang telah dibuat.

Dengan demikian, Anda telah berhasil membuat custom field pada Carbon Fields dengan berbagai jenis field yang tersedia. Selanjutnya, pada bagian berikutnya, kita akan membahas cara mengelola custom field pada Carbon Fields.

Cara Mengelola Custom Field pada Carbon Fields

Setelah membuat custom field pada Carbon Fields, Anda juga perlu mengelolanya pada halaman atau posting WordPress Anda. Berikut ini adalah cara mengelola custom field pada Carbon Fields:

Menambahkan Custom Field pada Halaman atau Posting

Untuk menambahkan custom field pada halaman atau posting WordPress, ikuti langkah-langkah berikut:

  1. Buka halaman atau posting yang ingin Anda tambahkan custom field pada WordPress.
  2. Gulir ke bawah hingga Anda menemukan bagian Meta Box yang berisi custom field pada halaman atau posting tersebut.
  3. Isi custom field sesuai dengan yang Anda inginkan.
  4. Klik tombol “Publish” atau “Update” untuk menyimpan perubahan.

Mengedit Custom Field pada Halaman atau Posting

  1. Jika Anda ingin mengedit custom field pada halaman atau posting WordPress, ikuti langkah-langkah berikut:
  2. Buka halaman atau posting yang ingin Anda edit custom field pada WordPress.
  3. Gulir ke bawah hingga Anda menemukan bagian Meta Box yang berisi custom field pada halaman atau posting tersebut.
  4. Edit custom field sesuai dengan yang Anda inginkan.
  5. Klik tombol “Publish” atau “Update” untuk menyimpan perubahan.

Menghapus Custom Field pada Halaman atau Posting, Jika Anda ingin menghapus custom field pada halaman atau posting WordPress, ikuti langkah-langkah berikut:

  1. Buka halaman atau posting yang ingin Anda hapus custom field pada WordPress.
  2. Gulir ke bawah hingga Anda menemukan bagian Meta Box yang berisi custom field pada halaman atau posting tersebut.
  3. Klik tombol “Remove” atau “Delete” pada custom field yang ingin Anda hapus.
  4. Klik tombol “Publish” atau “Update” untuk menyimpan perubahan.

Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah mengelola custom field pada halaman atau posting WordPress yang telah Anda buat menggunakan Carbon Fields. Jangan lupa untuk selalu menyimpan perubahan setelah melakukan penambahan, pengeditan, atau penghapusan custom field.

Kesimpulan

Dalam artikel ini, kita telah membahas tentang Cara Membuat dan Mengelola Meta Boxes dengan Carbon Fields di WordPress. Meta Box adalah bagian penting dalam pembuatan website karena dapat membantu Anda menambahkan custom field yang tidak tersedia pada halaman atau posting WordPress bawaan. Dengan menggunakan Carbon Fields, Anda dapat dengan mudah membuat dan mengelola Meta Box dengan berbagai jenis custom field yang tersedia.

Pada bagian Persiapan, kita telah membahas tentang cara menginstal dan mengkonfigurasi Carbon Fields pada WordPress. Pada bagian Cara Membuat Custom Field pada Carbon Fields, kita telah membahas tentang cara membuat custom field pada Carbon Fields dengan berbagai jenis field yang tersedia, seperti teks, gambar, checkbox, radio button, repeater, nested repeater, dan image gallery. Pada bagian Cara Mengelola Custom Field pada Carbon Fields, kita telah membahas tentang cara mengelola custom field pada halaman atau posting WordPress, seperti menambahkan, mengedit, dan menghapus custom field.

Dalam kesimpulan, kita dapat menyimpulkan bahwa Carbon Fields adalah plugin yang sangat berguna dalam pembuatan website WordPress karena dapat membantu kita membuat dan mengelola Meta Box dengan mudah. Dengan menggunakan custom field yang telah dibuat menggunakan Carbon Fields, kita dapat meningkatkan fleksibilitas dan kustomisasi website WordPress yang telah dibuat. Oleh karena itu, jika Anda ingin membuat website WordPress yang lebih kustomisabel dan fleksibel, Anda dapat menggunakan Carbon Fields sebagai salah satu plugin yang Anda gunakan.

Call