{"id":7452,"date":"2019-01-20T18:17:27","date_gmt":"2019-01-20T18:17:27","guid":{"rendered":"https:\/\/blog.hostinger.io\/co-id-tutorial\/?p=7452"},"modified":"2025-01-08T15:43:19","modified_gmt":"2025-01-08T08:43:19","slug":"custom-field-wordpress","status":"publish","type":"post","link":"\/id\/tutorial\/custom-field-wordpress","title":{"rendered":"Cara menambahkan custom field di WordPress (dengan 2 metode)"},"content":{"rendered":"

Setiap halaman dan post WordPres memiliki metadatanya masing-masing yang di dalamnya terdapat berbagai informasi penting, seperti judul dan deskripsi. Metadata ini ditambahkan ke platform secara otomatis dengan menggunakan field khusus. Metadata bisa Anda buat sendiri dengan menambahkan custom field WordPress terlebih dulu.<\/p>

Ada dua cara untuk membuat metadata sendiri, yakni:<\/p>

    \n
  1. Dengan menginstall plugin khusus custom field WordPress.<\/li>\n\n\n\n
  2. Menambahkan custom field di WordPress dengan cara manual, lalu mengedit tema agar field tersebut dapat ditampilkan.<\/li>\n<\/ol>

    Setelah membaca artikel ini, Anda diharapkan tahu dan paham apa saja yang dibutuhkan untuk membuat dan menampilkan custom field baru di website WordPress.<\/p>

    \n\n\n\n\n\n\n\n\n<\/p>

    Apa Itu Custom Field WordPress?<\/strong><\/h2>

    Field adalah sebuah elemen di halaman web atau aplikasi yang di dalamnya bisa Anda masukkan berbagai informasi. Tampilannya seperti pada contoh box di bawah ini:<\/p>

    \n
    \"Custom<\/figure><\/div>

    Ada beragam bentuk dan ukuran field. Misalnya, ada yang berbentuk list box dan ada juga yang berupa check box. Bahkan Anda bisa mengatur field khusus penanggalan dan field yang hanya menerima input dari teks tertentu, misalnya angka.<\/p>

    Umumnya, informasi yang ditambahkan ke field meliputi berbagai hal. Sering kali, input digunakan sebagai ‘metadata’, istilah untuk data yang merujuk ke data lainnya.<\/p>

    Contohnya, judul postingan WordPress menggambarkan isi konten secara umum. Judul inilah yang secara teknis masuk dalam kategori metadata:<\/p>

    \n
    \"Judul<\/figure><\/div>

    Post tags, meta description<\/a>, dan page categories adalah tiga contoh tipe metadata. Ada satu kesamaan yang dimiliki oleh ketiga tipe metadata ini, yakni semuanya dapat ditambahkan ke konten melalui field yang disediakan oleh WordPress (atau plugin tertentu).<\/p>

    Meskipun WordPress menyediakan field yang dapat digunakan secara otomatis, terkadang Anda ingin membuat metadata sendiri yang tidak ada di platform CMS ini. Di sinilah Anda membutuhkan custom field WordPress. Dengan field ini, Anda dapat memasukkan data dan menambahkannya ke konten.<\/p>

    Dengan penggunaan tool yang tepat dan mengetahui langkah-langkah pemasangannya, Anda dapat membuat custom field apa saja di WordPress. Salah satu contoh custom field yang sering kami gunakan adalah sistem peringkat berdasarkan bintang:<\/p>

    \n
    \"Custom<\/figure><\/div>

    Setelah custom field peringkat ini berhasil ditambahkan, Anda dapat menetapkan skor untuk postingan atau bahkan meminta visitor Anda untuk menuliskan feedback mereka di kolom komentar (penambahan kolom komentar ke konten ada cara tersendiri).<\/p>

    Terkadang orang-orang masih bingung membedakan custom post type<\/a> dan custom field WordPress. Custom post type WordPress merupakan jenis konten yang sudah diformat secara khusus, misalnya postingan review atau halaman produk. Biasanya, orang-orang menambahkan custom fields WordPress ke custom post type. Namun, kedua fitur ini dapat digunakan secara terpisah.<\/p>

    \n
    \"\"<\/a><\/figure><\/div>

    Cara Membuat Custom Field di WordPress dan Menambahkannya ke Post dan Page (dengan 2 Metode)<\/strong><\/h2>

    Seperti kebanyakan fitur WordPress lainnya, custom fields dapat ditambahkan ke post dan page WordPress dengan cara manual atau menginstall plugin khusus. Cara yang akan kita bahas terlebih dulu adalah dengan menggunakan plugin.<\/p>

    1. Dengan Menggunakan Plugin Khusus Custom Field WordPress<\/strong><\/h3>

    Ada beberapa plugin khusus yang bisa Anda gunakan untuk membuat custom field di WordPress dengan cepat. Salah satu plugin yang menurut kami menawarkan segala keunggulannya adalah Advance Custom Field<\/a>:<\/p>

    \n
    \"Plugin<\/figure><\/div>

    Mengapa kami merekomendasikan plugin ini? Salah satu alasannya adalah karena kemudahannya. Selain itu, plugin ini juga menawarkan banyak custom field WordPress yang siap digunakan dan ditambahkan ke website hanya dalam hitungan menit saja.<\/p>

    Untuk menginstall dan mengaktifkan plugin Advance Custom Field, masuk ke dashboard, lalu buka tab Plugins > Add New<\/strong>. Setelah tab terbuka, ketikkan Advanced Custom Fields<\/em> di bar atau kolom pencarian:<\/p>

    \n
    \"Install<\/figure><\/div>

    Klik pilihan Install Now<\/strong> yang berada tepat di samping nama plugin. Tunggu selama beberapa menit sampai tulisan berubah ke Activate<\/strong>. Lalu klik tulisan tersebut.<\/p>

    Setelah plugin berhasil diinstall dan diaktifkan, tab Custom Fields<\/strong> baru akan muncul di dashboard. Klik tab ini jika Anda ingin melihat daftar custom field WordPress. Pastikan daftar tersebut kosong:<\/p>

    \n
    \"Custom<\/figure><\/div>

    Klik pilihan Add New<\/strong> yang ada di bagian atas. Plugin akan membuat grup yang di dalamnya dapat memuat sejumlah custom field WordPress:<\/p>

    \n
    \"Setup<\/figure><\/div>

    Setelah itu, klik pilihan Add Field. <\/strong>Buat label, atau yang juga dapat diasumsikan sebagai nama, untuk field baru Anda. Tentukan pula tipe field yang hendak Anda setup.<\/p>

    Sebagai contoh, kami akan membuat field Email<\/strong>:<\/p>

    \n
    \"Field<\/figure><\/div>

    Buat beberapa instruksi agar user lain di website Anda tahu apa yang harus mereka lakukan terhadap field baru tersebut. Meskipun tidak begitu penting, langkah ini bisa Anda gunakan sebagai latihan membuat field:<\/p>

    \n
    \"Instruksi<\/figure><\/div>

    Anda pun bisa menetapkan apakah field yang dibuat bersifat wajib (required<\/em>) atau tidak. Apabila bersifat wajib, maka beri pernyataan agar user harus mengisi field tersebut terlebih dulu supaya mereka dapat menyimpan halaman atau post yang diinginkan:<\/p>

    \n
    \"Value<\/figure><\/div>

    Plugin Advance Custom Field memiliki pengaturan tingkat lanjut<\/a>. Namun, untuk saat ini, kami tidak akan membahasnya. Tutup atau close editor dan field baru akan muncul di daftar grup:<\/p>

    \n
    \"Grup<\/figure><\/div>

    Setelah itu, tentukan kapan dan di mana grup custom fields muncul. Gunakan pengaturan Location<\/strong> untuk mengonfigurasikan jadwal dan tempat. Untuk mengatur opsi display, klik opsi berlabel Show this field group if<\/strong>.<\/p>

    Pada gambar di bawah ini, bisa dilihat jika kami telah mengofigurasi custom field untuk ditampilkan di regular post:<\/p>

    \n
    \"Show<\/figure><\/div>

    Jika mau, dengan menggunakan opsi Add rule group<\/strong>, Anda bisa menambahkan lebih dari satu location<\/em> untuk menampilkan custom field WordPress yang baru.<\/p>

    Masih ada pengaturan terakhir yang harus Anda lakukan, yaitu mengonfigurasikan di mana field akan muncul di halaman editor WordPress. Secara default, field tersebut akan muncul tepat di bawah text editor (selanjutnya akan di bahas lebih lengkap). Simpan custom field baru dengan mengklik Publish<\/strong>.<\/p>

    Field sudah siap digunakan. Buka post mana saja agar Anda bisa mengakses editor WordPress. Field yang baru akan muncul tepat di bawah editor:<\/p>

    \n
    \"Custom<\/figure><\/div>

    Plugin Advance Custom  Field digunakan hanya untuk membuat field, dan bukan menampilkannya di website. Secara default, field hanya muncul di dashboard, sedangkan WordPress akan menyimpan value-nya di dalam database.<\/p>

    Apabila ingin menampilkan metadata yang Anda buat dengan custom field WordPress ke front end situs, maka file tema harus diedit terlebih dulu. Selanjutnya, akan kami bahas secara mendalam pada subbab di bawah ini.<\/p>

    2. Menambahkan Custom Field di WordPress Secara Manual, Lalu Mengedit Tema Agar Field Tersebut Dapat Ditampilkan<\/strong><\/h3>

    Sebenarnya, menambahkan custom field di WordPress dengan cara manual lebih mudah daripada yang Anda pikirkan. Hanya saja, bagian tersulitnya terletak pada konfigurasi tema. Konfigurasi ini bertujuan untuk menamplkan metadata yang Anda buat dengan field ini.<\/p>

    Agar field muncul di salah satu halaman atau postingan yang dikehendaki, maka bukalah editor WordPress terlebih dulu.  Cari dan klik tab Screen Options<\/strong> yang ada di bagian atas layar. Setelah tab terbuka, pilih field WordPress yang akan ditampilkan secara default:<\/p>

    \n
    \"Membuat<\/figure><\/div>

    Pilih opsi Custom Fields<\/strong>. Box Custom Fields<\/strong> akan terlihat di bagian bawah layar, seperti pada contoh gambar berikut ini:<\/p>

    \n
    \"Custom<\/figure><\/div>

    Untuk membuat custom field baru, klik link Enter new<\/strong> dan beri nama untuk field tersebut. Kemudian, tambahkan corresponding value<\/em> pada kolom di sebelah kanan:<\/p>

    \n
    \"Contoh<\/figure><\/div>

    Setelah memasukkan kedua value tersebut, klik Add Custom Field<\/strong> untuk menyimpan perubahan yang dilakukan serta memungkinkan Anda untuk membuat custom field WordPress baru lainnya (jika memang diperlukan).<\/p>

    Sama seperti pada saat menggunakan plugin untuk membuat custom field, metadata yang ditambahkan dengan cara manual juga akan tersimpan bersamaan dengan ketika Anda menyimpan postingan. Hanya saja, ketika seseorang membaca konten yang ter-publish<\/em> di front<\/em> end <\/em>situs, metadata tersebut tidak akan terlihat. Agar user bisa mengetahui keberadaan metadata tersebut, Anda harus mengirimkan<\/em> informasi ini pada tema: “Hey, I want you to pull up the email <\/strong>custom field and display its contents in this location”.<\/p>

    Pertama-tama, edit fungsi WordPress yang disebut ‘loop’. Loop ini memberitahukan WordPress mengenai data yang harus diambil dan ditampilkan pada saat seseorang melihat sebagian konten situs Anda. Biasanya, informasi ini meliputi judul dan konten post atau halaman serta metadata lain yang terkait.<\/p>

    Ada beragam kode loop, dan umumnya tergantung pada halaman yang dikelola dan tema yang digunakan. Berikut tampilan loop WordPress default yang ditulis dengan menggunakan bahasa pemrograman PHP:<\/p>

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>\n<?php endwhile; else: ?>\n<?php endif; ?><\/pre>
    Contoh lain dari loop yang hanya mengalami sedikit perubahan, diambil dari tema Divi<\/a>:<\/p>
    <?php\nif ( et_builder_is_product_tour_enabled() ):\nwhile ( have_posts() ): the_post(); ?>\n<article id=\"post-<?php the_ID(); ?>\" <?php post_class(); ?>>\n<div class=\"entry-content\">\n<?php\nthe_content();\n?>\n<\/div> <!-- .entry-content -->\n<\/article> <!-- .et_pb_post -->\n<?php endwhile;\nelse:\n?>\n<\/pre>
    Dari dua contoh di atas, kode loop seolah memberitahukan WordPress untuk mengambil postingan dari arsip situs dan menampilkannya di halaman tertentu. Pada contoh kedua, bisa Anda lihat ada tema spesifik yang ditambahkan – dan kami akan melakukan hal yang sama.<\/p>
    Untuk mengedit loop tema, pastikan Anda punya akses langsung ke file situs. Biasanya akses tersebut didapatkan dengan menggunakan File Transfer Protocol (FTP). Jika belum buat FTP client, kami merekomendasikan agar Anda menggunakan FileZilla<\/a>.<\/p>
    Setelah terhubung via FTP<\/a>, buka direktori public_html\/wp-content\/themes<\/strong>. Di dalam direktori tersebut, cari folder yang menyimpan semua data atau informasi terkait tema yang aktif saat ini:<\/p>
    \n
    \"Folder<\/figure><\/div>
    Buka folder tersebut, dan cari file single.php<\/strong>. Selain memuat perintah yang menentukan tampilan setiap postingan, file ini juga memiliki loopnya sendiri. Untuk mengedit loopnya, klik kanan pada file dan pilih View\/Edit<\/strong> yang akan mengarahkan Anda ke default text editor.<\/p>
    Cari loop dalam file tersebut. Jika masih bingung, lihat kembali dua contoh yang telah kami berikan. Setelah loop berhasil ditemukan, lihat baris terakhir kode, yang biasanya ditandai dengan line ini:<\/p>
    <?php endwhile; else: ?>\n<?php endif; ?><\/pre>
    Masukkan beberapa line kode untuk memanggil <\/em>metadata. Berikut contoh singkatnya:<\/p>
    <div class=\"author-email\">\n    <p>You can get in touch with this author at: <?php echo get_post_meta($post->ID, 'email', true); ?> <\/p>\n<\/div><\/pre>
    Kami menambahkan blurb<\/em> pendek yang akan ditampilkan di postingan, tepat sebelum alamat email yang dibuat dengan menggunakan custom field. Hasilnya akan seperti teks string<\/em> di bawah ini:
    You can get in touch with this author at: johndoe@gmail.com<\/p><\/div>
    Pada contoh ini, Anda bisa paste<\/em> kode baru di akhir loop. Dengan begini, teks string tersebut muncul di akhir artikel, sebelum kolom komentar. Di sisi lain, Anda bisa menambahkan kode di berbagai lokasi, berdasarkan tempat di mana Anda ingin memunculkan metadata tersebut.<\/p>
    Jika saat ini tema yang Anda gunakan adalah Dhivi, maka berikut tampilan dari loop yang sudah diperbarui:<\/p>
    <?php\nif ( et_builder_is_product_tour_enabled() ):\nwhile ( have_posts() ): the_post(); ?>\n<article id=\"post-<?php the_ID(); ?>\" <?php post_class(); ?>>\n<div class=\"entry-content\">\n<?php\nthe_content();\n?>\n<\/div> <!-- .entry-content -->\n<\/article> <!-- .et_pb_post -->\n                    <div class=\"author-email\">\n                  <p>You can get in touch with this author at: <?php echo get_post_meta($post->ID, 'email', true); ?> <\/p>\n<\/div>\n<?php endwhile; else: ?>\n<?php endif; ?><\/pre>
    Simpan perubahan yang dilakukan terhadap file single.php<\/strong>, lalu upload kembali via FTP.<\/p>
    Contoh di atas merupakan contoh sederhana yang bisa Anda lakukan sendiri dengan menggunakan custom field WordPress dan loop WordPress. Untuk membuat field tingkat lanjut, setidaknya Anda harus menguasai pengetahuan dasar tentang PHP<\/a>, atau mengeksplorasi file tema sampai Anda paham.<\/p>
    Saran kami, untuk menampilkan custom field, gunakanlah child theme<\/a>. Dengan tema ini, Anda bebas melakukan apa saja tanpa khawatir munculnya error atau kesalahan.<\/p>
    Kesimpulan<\/strong><\/h2>
    Dengan custom field WordPress, Anda dapat menambahkan metadata apa pun ke postingan dan halaman. Misalnya, Anda dapat menambahkan custom field yang menampilkan sistem peringkat atau rating ke masing-masing post, check box, atau bahkan peta (maps). Proses menambahkan custom field di WordPress pun mudah. Anda bisa menginstall plugin, misalnya Advanced Custom Field<\/a>, atau membuat custom field di WordPress secara manual, lalu mengedit file tema untuk menampilkan informasi terbaru tersebut.<\/p>
    Apakah ada pertanyaan mengenai cara membuat custom field di WordPress? Silakan tuliskan pertanyaan Anda pada kolom komentar di bawah ini!<\/p>\n","protected":false},"excerpt":{"rendered":"
    Setiap halaman dan post WordPres memiliki metadatanya masing-masing yang di dalamnya terdapat berbagai informasi penting, seperti judul dan deskripsi. Metadata ini ditambahkan ke platform secara otomatis dengan menggunakan field khusus. Metadata bisa Anda buat sendiri dengan menambahkan custom field WordPress terlebih dulu. Ada dua cara untuk membuat metadata sendiri, yakni: Setelah membaca artikel ini, Anda […]<\/p>\n
    Read More…<\/a><\/p>\n","protected":false},"author":55,"featured_media":7470,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Custom Field WordPress: Cara Membuat & Menambahkannya ke Konten","rank_math_description":"Buat custom field WordPress dan tambahkan metadata apa saja yang diinginkan ke konten. Install plugin atau gunakan cara manual.","rank_math_focus_keyword":"custom field wordpress, advance custom field, membuat custom field di wordpress, menambahkan custom field di wordpress","footnotes":""},"categories":[4859],"tags":[8172,8173,8170,8171,8015,8086,8179,8059,8175,8176,8174,7876,8177,7874,8178,7932,7718,7982,8149,4860],"class_list":["post-7452","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-advanced-custom-field","tag-advanced-custom-fields","tag-custom-field","tag-custom-field-di-wordpress","tag-domain-gratis","tag-hosting-gratis","tag-hosting-indonesia-terbaik","tag-hosting-terbaik","tag-membuat-custom-field-di-wordpress","tag-membuat-metadata-sendiri","tag-menambahkan-custom-field-di-wordpress","tag-meta-description","tag-meta-tags","tag-meta-title","tag-metadata","tag-nama-domain","tag-plugin-wordpress","tag-web-hosting-indonesia","tag-web-hosting-terbaik","tag-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-custom-fields","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/campos-personalizados-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/campos-personalizados-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/custom-field-wordpress","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/wordpress-custom-fields","default":0},{"locale":"pl-PL","link":"https:\/\/www.hostinger.com\/pl\/tutoriale\/niestandardowe-pola-w-wordpress\/","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/wordpress-custom-fields\/","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-custom-fields","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/campos-personalizados-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/campos-personalizados-wordpress","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/campos-personalizados-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/campos-personalizados-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-custom-fields","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/7452","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/users\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/comments?post=7452"}],"version-history":[{"count":4,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/7452\/revisions"}],"predecessor-version":[{"id":29034,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/7452\/revisions\/29034"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media\/7470"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media?parent=7452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/categories?post=7452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/tags?post=7452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}