{"id":3893,"date":"2025-04-16T20:55:10","date_gmt":"2025-04-16T13:55:10","guid":{"rendered":"https:\/\/www.jagowebdesign.com\/website\/?p=3893"},"modified":"2025-04-16T20:55:10","modified_gmt":"2025-04-16T13:55:10","slug":"panduan-menggunakan-acf-advanced-custom-fields-di-wordpress","status":"publish","type":"post","link":"https:\/\/www.jagowebdesign.com\/website\/panduan-menggunakan-acf-advanced-custom-fields-di-wordpress\/","title":{"rendered":"Panduan Menggunakan ACF (Advanced Custom Fields) di WordPress"},"content":{"rendered":"

WordPress adalah platform yang sangat fleksibel dan memungkinkan pengguna untuk membuat berbagai macam jenis konten. Namun, ada kalanya kamu memerlukan lebih dari sekadar konten dasar seperti judul dan isi. Inilah mengapa Advanced Custom Fields (ACF)<\/strong> sangat berguna. ACF WordPress<\/strong> memungkinkan pengguna untuk menambahkan custom field WordPress<\/strong> yang dapat memperkaya dan mempersonalisasi konten di situs mereka dengan lebih mudah.<\/p>\n

Pada artikel ini, kita akan membahas cara menggunakan ACF di WordPress untuk menambahkan dan mengelola custom field serta meningkatkan fungsionalitas situs WordPress kamu.<\/p>\n

\n

Apa Itu ACF (Advanced Custom Fields)?<\/h2>\n

Advanced Custom Fields (ACF)<\/strong> adalah plugin WordPress yang memungkinkan pengguna untuk menambahkan custom fields atau field kustom<\/strong> ke dalam post, halaman, atau jenis konten lainnya. Custom fields ini memungkinkan kamu untuk menyimpan data tambahan yang tidak termasuk dalam konten standar seperti judul atau isi posting.<\/p>\n

Dengan ACF, kamu dapat menambahkan berbagai jenis field seperti teks, gambar, pilihan dropdown, file, dan banyak lagi, yang semuanya dapat ditampilkan di halaman situs kamu. ACF sangat berguna jika kamu ingin menambahkan fitur seperti rating produk, galeri gambar, lokasi peta, atau data lainnya.<\/p>\n

\n

Langkah 1: Menginstal dan Mengaktifkan Plugin ACF<\/h2>\n

Sebelum kamu bisa mulai menggunakan ACF di situs WordPress, kamu perlu menginstal dan mengaktifkan plugin ini terlebih dahulu.<\/p>\n

    \n
  1. \n

    Masuk ke Dashboard WordPress<\/strong>: Akses dasbor admin situs WordPress kamu.<\/p>\n<\/li>\n

  2. \n

    Pergi ke Plugins > Add New<\/strong>: Di menu sebelah kiri, klik Plugins<\/strong> dan pilih Add New<\/strong>.<\/p>\n<\/li>\n

  3. \n

    Cari Advanced Custom Fields<\/strong>: Di kolom pencarian, ketik Advanced Custom Fields<\/strong>.<\/p>\n<\/li>\n

  4. \n

    Instal dan Aktifkan Plugin<\/strong>: Klik Install Now<\/strong> pada plugin ACF dan kemudian aktifkan plugin tersebut.<\/p>\n<\/li>\n<\/ol>\n

    Setelah plugin terinstal dan aktif, kamu akan melihat menu Custom Fields<\/strong> di menu sebelah kiri dashboard WordPress.<\/p>\n

    \n

    Langkah 2: Membuat Group Custom Fields<\/h2>\n

    Setelah plugin ACF diaktifkan, kamu bisa mulai membuat custom field WordPress<\/strong>. Langkah pertama adalah membuat field group<\/strong>, yang merupakan sekumpulan field yang akan kamu gunakan.<\/p>\n

      \n
    1. \n

      Masuk ke Custom Fields > Add New<\/strong>: Klik menu Custom Fields<\/strong> yang baru muncul di sidebar admin, lalu klik Add New<\/strong> untuk membuat field group<\/strong> baru.<\/p>\n<\/li>\n

    2. \n

      Beri Nama Field Group<\/strong>: Beri nama untuk field group yang akan kamu buat, misalnya “Product Details” atau “Event Information”.<\/p>\n<\/li>\n

    3. \n

      Tambah Field<\/strong>: Klik tombol Add Field<\/strong> untuk menambahkan custom field. Kamu akan diminta untuk mengisi beberapa pengaturan dasar untuk field tersebut, seperti:<\/p>\n

        \n
      • \n

        Field Label<\/strong>: Nama label untuk field (misalnya, “Product Price”).<\/p>\n<\/li>\n

      • \n

        Field Name<\/strong>: Nama unik untuk field yang digunakan di template PHP (misalnya, product_price<\/code>).<\/p>\n<\/li>\n

      • \n

        Field Type<\/strong>: Pilih tipe field, seperti teks, angka, gambar, atau pilihan dropdown.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n

      • \n

        Pengaturan Field Lainnya<\/strong>: Setelah menambahkan field pertama, kamu dapat menambahkan lebih banyak field sesuai kebutuhan dan mengatur opsi lain, seperti apakah field tersebut wajib diisi atau apakah ada nilai default.<\/p>\n<\/li>\n

      • \n

        Menentukan Lokasi<\/strong>: Di bagian Location<\/strong>, kamu dapat menentukan di mana field group ini akan muncul. Misalnya, apakah field ini akan ditampilkan di halaman, posting, atau custom post type tertentu.<\/p>\n<\/li>\n

      • \n

        Simpan Field Group<\/strong>: Setelah selesai mengatur field dan lokasinya, klik Publish<\/strong> atau Update<\/strong> untuk menyimpan field group yang telah kamu buat.<\/p>\n<\/li>\n<\/ol>\n

        \n

        Langkah 3: Menambahkan Konten dengan Custom Fields<\/h2>\n

        Sekarang setelah kamu membuat field group, saatnya untuk menambahkan data ke dalam custom field tersebut.<\/p>\n

          \n
        1. \n

          Buat atau Edit Post\/Page<\/strong>: Akses halaman atau posting yang ingin kamu tambahkan custom fields-nya.<\/p>\n<\/li>\n

        2. \n

          Isi Field Custom<\/strong>: Setelah membuka editor, kamu akan melihat area baru untuk mengisi data pada field yang telah kamu buat dengan ACF. Misalnya, jika kamu membuat custom field Product Price<\/strong>, kamu akan melihat input untuk memasukkan harga produk.<\/p>\n<\/li>\n

        3. \n

          Simpan Konten<\/strong>: Setelah mengisi semua field yang diperlukan, klik Update<\/strong> atau Publish<\/strong> untuk menyimpan posting atau halaman dengan data yang baru.<\/p>\n<\/li>\n<\/ol>\n

          \n

          Langkah 4: Menampilkan Custom Fields di Frontend<\/h2>\n

          Setelah kamu menambahkan custom field WordPress<\/strong>, langkah selanjutnya adalah menampilkan data tersebut di frontend situs WordPress kamu. Untuk melakukannya, kamu perlu menambahkan kode PHP di template tema yang sesuai.<\/p>\n

          Misalnya, jika kamu ingin menampilkan harga produk yang telah dimasukkan di custom field, kamu dapat menambahkan kode berikut di file template yang relevan (misalnya single-product.php<\/code>):<\/p>\n

          \n
          php<\/div>\n
          \n
          \n