Memulai dengan Bidang Kustom WordPress

Bidang Kustom WordPress adalah fitur hebat yang sering diabaikan. Mereka memungkinkan Anda untuk menambahkan 'metadata' ke area halaman atau posting Anda yang diulang di semua halaman atau posting. Ini dapat menghemat banyak waktu jika Anda memiliki situs web tempat Anda ingin mempublikasikan jenis informasi yang sama di banyak halaman.

Misalnya, lihat posting blog biasa di situs WordPress Anda. Kemungkinannya adalah, di suatu tempat di halaman, Anda akan melihat nama penulis dan tanggal yang menunjukkan kapan artikel itu diterbitkan. Ini adalah metadata dan akan muncul di setiap posting di situs web Anda.

Jadi, bagaimana Anda bisa menambahkan metadata Anda sendiri ke posting atau halaman Anda? Mudah… menggunakan bidang kustom WordPress!

Tentu saja Anda dapat menambahkan informasi ini di setiap posting secara manual melalui halaman/editor posting, tetapi ini memakan waktu dan biasanya memerlukan pemformatan yang hati-hati jika Anda ingin memastikan bahwa semua posting terlihat sama. Jika Anda menerbitkan banyak konten, itu bisa melelahkan karena harus melakukan ini setiap kali.

Halaman WordPress dan editor posting menawarkan banyak fungsi dan fleksibilitas langsung dari kotak ketika datang ke konten inti yang muncul di halaman atau posting. Tapi, tahukah Anda bahwa WordPress juga menyediakan cara bagi pengguna untuk menambahkan konten yang berada 'di luar' dari postingan utama atau konten halaman? Pada artikel ini kita akan mempercepat cara menggunakan bidang kustom WordPress yang akan membantu Anda mengatur posting Anda dengan lebih baik dan juga menambahkan informasi yang berguna untuk pembaca Anda dalam format yang tampak hebat.

Mari kita mulai!

Apa itu Bidang dan Metadata Khusus?

Konten seperti posting, halaman, pengguna, komentar, dan jenis posting kustom menyertakan metadata yang disimpan dalam database Anda di bawah tabel postmeta dalam pasangan kunci/nilai.

Informasi yang biasanya Anda lihat di bawah posting atau judul halaman seperti, nama admin, tanggal atau penghitung komentar termasuk dalam metadata posting.

Bidang khusus adalah bidang tambahan tempat Anda dapat menambahkan informasi tambahan untuk kiriman Anda, dan juga merupakan bagian dari metadata kiriman.

Bidang kustom berlaku untuk Halaman, Postingan, atau Jenis Posting Kustom dan juga terdiri dari pasangan kunci/nilai. Kuncinya adalah 'nama' elemen metadata dan nilainya adalah data yang terkait dengan kunci dan mungkin berbeda untuk setiap pos.

Di WordPress, Anda dapat menambahkan bidang khusus dengan menggunakan fitur bidang khusus bawaan atau Anda dapat mengambil langkah lebih jauh dengan menggunakan plugin bidang khusus yang selanjutnya akan meningkatkan kontrol yang tersedia atas bidang khusus. Kami akan melihat kedua opsi di artikel ini.

Tambahkan Bidang Kustom menggunakan Bidang Kustom WordPress

Pengaturan Bidang Kustom WordPress bawaan disembunyikan secara default yang menjelaskan mengapa Anda mungkin tidak menyadari fungsi ini ada. Untuk menggunakannya, pertama-tama kita harus mengaktifkannya.

Jika Anda menggunakan editor WordPress Klasik (bukan Gutenberg), buka posting baru dan menuju ke atas posting ini. Anda akan melihat kotak di sisi kanan yang bertuliskan 'Opsi Layar'. Klik ini dan menu tarik-turun dengan kotak centang di dalamnya akan muncul. Dalam hal ini Anda akan melihat salah satu yang mengatakan 'Bidang Kustom'. Centang ini untuk mengaktifkannya.

Jika Anda menggunakan Gutenberg, klik ikon 'tiga titik' yang muncul di kanan atas kiriman. Sebuah menu akan muncul dan di bagian bawah menu ini akan tertulis 'Options'. Klik ini dan menu popup baru dengan kotak centang akan muncul. Dalam daftar ini Anda akan melihat salah satu yang mengatakan 'Bidang Kustom'. Centang kotak ini dan kemudian tutup menu popup.

Langkah Selanjutnya – Menambahkan Bidang Kustom Anda

Menambahkan bidang khusus Anda sebenarnya cukup mudah. Setelah mengaktifkannya seperti yang dijelaskan di atas, pergilah ke bagian bawah posting Anda dan Anda akan melihat bagian baru yang disebut (Anda dapat menebaknya) 'Bidang Kustom'.

Anda akan melihat dua kotak di bagian Bidang Kustom, 'Nama' dan 'Nilai'. Bidang Nama memiliki beberapa default yang telah diisi sebelumnya yang terkait dengan bidang yang ada yang telah ditambahkan ke situs web WordPress Anda. Dalam kasus kami, kami ingin menambahkan bidang baru kami sendiri. Untuk melakukan ini, klik pada teks 'Masukkan baru' yang terletak di bawah bidang Nama.

Host situs web Anda dengan Pressidium

GARANSI UANG KEMBALI 60 HARI

LIHAT RENCANA KAMI

Dalam contoh ini, kami ingin membuat tautan ke situs web eksternal yang digunakan sebagai sumber artikel yang kami tulis. Kami akan menyebut bidang ini 'Sumber'. Klik pada teks 'Masukkan baru' dan kemudian ketik 'Sumber' diikuti dengan url ke situs web pilihan Anda di bagian Nilai. Ini akan terlihat seperti ini:

Lain kali Anda tidak perlu mengeklik teks 'Masukkan baru' dan ketik 'Sumber' secara manual. Sekarang akan muncul di daftar dropdown nilai.

Jika Anda memiliki akses ke database Anda (misalnya: melalui phpMyAdmin), Anda dapat membuka tabel postmeta, memfilter tabel dengan id posting yang Anda edit dan Anda akan melihat bidang kustom baru dengan nilainya.

Sekarang setelah kami mengonfirmasi bahwa bidang khusus disimpan dengan benar untuk kiriman, mari kita lihat bagaimana kami dapat menampilkannya di ujung depan kiriman kami di mana pengunjung situs web kami dapat melihatnya!

Menampilkan Nilai Bidang Kustom

Untuk menampilkan nilai Bidang Kustom baru kami pada posting kami, kami perlu menambahkan beberapa kode ke file template posting tunggal kami. Biasanya, ini dapat ditemukan di file singular.php yang terletak di folder utama tema. Dalam kasus kami (tema Dua Puluh Dua Puluh) itu terletak di file /wp-content/themes/twentytwenty/template-parts/content.php .

Kami akan menggunakan fungsi get_post_meta inti yang disediakan WordPress untuk mengambil bidang meta kiriman dari database. Struktur fungsinya adalah sebagai berikut:

 get_post_meta( $post_id, $key, $single )

Satu-satunya argumen yang diperlukan adalah $post_id . Argumen $key adalah kunci meta untuk diambil dan argumen $single mendefinisikan apakah nilai tunggal dikembalikan dan tidak berguna jika $key tidak didefinisikan sama sekali.

Jika hanya $post_id yang dideklarasikan, hasilnya akan berupa array dengan semua kunci yang terkait dengan postingan tertentu. Jadi, jika Anda hanya memasukkan get_post_meta( $post_id ) Anda akan mendapatkan sesuatu seperti ini:

 Array ( [field1_key] => Array ( [0] => value1 ) [field2_key] => Array ( [0] => value2 ) [field3_key] => Array ( [0] => value3 ) )

Jika Anda menggunakan get_post_meta( $post_id, 'filed1_key' ) Anda akan mendapatkan sesuatu seperti Array ( [0] => value1 ) dan jika Anda menggunakan get_post_meta( $post_id, 'filed1_key', true ) seperti yang kami lakukan sebelumnya, Anda hanya akan mendapatkan value1 .

Juga, di beberapa posting Anda mungkin tidak ingin menentukan bidang sumber, jadi kami harus menyertakan kode cek untuk melihat apakah bidang itu ada untuk posting.

Jadi, dengan mengingat semua ini, kode yang perlu kita gunakan adalah sebagai berikut:

 $source = get_post_meta( get_the_ID(), 'source', true); if( !empty( $source ) ) { echo '<h3>Source: ' . $source . '<h3>'; } ?>

Kami akan memasukkan kode tepat setelah konten posting sehingga di dalam div HTML dengan kelas “entry-content”, kodenya akan terlihat seperti ini:

 <div class="entry-content"> <?php if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) { the_excerpt(); } else { the_content( __( 'Continue reading', 'twentytwenty' ) ); } $source = get_post_meta( get_the_ID(), 'source', true); if( !empty( $source ) ) { echo '<h3>Source: ' . $source . '<h3>'; } ?> </div><!-- .entry-content -->

Sekarang mari kita lihat apa yang telah kita capai dengan membuka posting baru dan melihat bagaimana konten ini akan muncul di bagian depan.

Kami mengingatkan Anda bahwa jika Anda mengalami kesulitan menemukan file template yang sesuai dengan tampilan posting tunggal Anda, Anda dapat berkonsultasi dengan diagram hierarki template WordPress.

Jelas akan ada beberapa pekerjaan yang harus dilakukan untuk menata keluaran ini. Ini di luar cakupan artikel ini tetapi sesuatu yang akan kami bahas di posting mendatang.

Menambahkan Bidang Kustom menggunakan Plugin

Plugin Bidang Kustom Tingkat Lanjut adalah salah satu plugin terbaik yang tersedia yang memungkinkan Anda dengan cepat menambahkan bidang khusus ke situs web WordPress Anda dan memberikan kontrol lebih lanjut atas data bidang khusus Anda. Menggunakan pembuatnya, Anda dapat dengan mudah membuat bidang khusus yang kemudian dapat ditambahkan ke posting, pengguna, taksonomi, media, komentar, dan bahkan halaman opsi khusus Anda.

Buat Bidang Kustom Anda menggunakan ACF

Setelah menginstal dan mengaktifkan plugin ACF, buka 'Bidang Kustom > Grup Bidang' di mana bidang terdaftar akan ditampilkan.

Tekan tombol 'Tambah Baru' untuk mulai membuat bidang Anda. Ini kemudian dapat juga ditambahkan ke dalam grup.

Ada banyak opsi yang disediakan untuk Anda yang akan meningkatkan perilaku bidang khusus Anda. Terlepas dari konfigurasi dasar yang menyertakan label dan nama bidang, Anda juga dapat menentukan jenis bidang, menentukan apakah bidang diperlukan, mengubah nilai default, teks placeholder, dan tentu saja memilih jenis posting yang akan disertakan. menggunakan argumen logika.

Juga, ada beberapa pengaturan lain yang tersedia yang memungkinkan Anda untuk mengubah tampilan bidang (sangat membantu) dan daftar kotak centang bagi Anda untuk menentukan apa yang harus disembunyikan pada layar edit yang sesuai.

Mengagumkan, bukan?

Juga, di menu Alat ACF Anda dapat mengekspor atau mengimpor grup bidang dalam format JSON untuk mempercepat jika ini telah dibuat di tempat lain.

Contoh yang Dikerjakan menggunakan Bidang Kustom Tingkat Lanjut

Katakanlah kita telah membuat Jenis Postingan Kustom bernama 'Buku' dan kami ingin menambahkan beberapa bidang kustom pada setiap Postingan Buku seperti Genre, Penulis Buku, dan Tahun Diterbitkan. Hal pertama yang harus kita lakukan adalah membuat grup bidang dan bidang yang berisi seperti ini:

Seperti yang Anda lihat, tidak semua bidang menggunakan tipe yang sama.

• Bidang Penulis adalah bidang teks sederhana di mana kita akan mengisi nama lengkap penulis.
• Bidang Genre adalah bidang pilih dan harus menerima beberapa nilai. Sebuah buku dapat dikaitkan dengan lebih dari satu genre.
• Pilihan yang telah ditentukan sebelumnya untuk genre harus dimasukkan ke dalam kotak Pilihan masing-masing di barisnya sendiri.

Bidang sampul harus berupa bidang pilih nilai tunggal dengan pilihan yang telah ditentukan juga.

Sekarang mari kita pergi dan mengedit Posting Buku. Bidang akan tampak dikelompokkan dengan baik di bilah sisi.

Jika Anda ingin mengubah posisi grup bidang, silakan buka pengaturan yang sesuai:

Isi kolom serta beberapa konten uji untuk artikel dan perbarui posting. Pada titik ini jika Anda mengunjungi tampilan depan Posting Buku, Anda akan melihat bahwa masih tidak ada yang ditampilkan mengenai bidang khusus kami.

Tampilkan Bidang Kustom ACF Anda

Anda dapat dengan mudah menampilkan bidang khusus di template tema Anda dengan menggunakan fungsi ramah yang disediakan plugin ACF. Dua di antaranya adalah:

• get_field() – Mengembalikan nilai bidang tertentu.
• the_field() – Menampilkan nilai bidang tertentu.

Ini adalah fungsi yang paling umum digunakan dengan plugin ACF. Jika Anda ingin melihat daftar lengkap fungsi plugin, Anda dapat mengunjungi dokumentasi resmi untuk mengetahui lebih lanjut.

Jadi, untuk menampilkan bidang kustom Anda di templat tampilan posting, Anda perlu menambahkan beberapa kode seperti yang kami lakukan saat menggunakan bidang kustom WordPress default. Namun, kali ini kita akan menggunakan fungsi plugin ACF. Karena kita menggunakan tema Twenty Twenty, kita harus mengedit file content.php di bawah folder dua puluh dua puluh twentytwenty/template-parts/ . Tepat setelah penutupan bagian dalam, kami menambahkan baris berikut:

 <div class="entry-content"> <?php if( get_field( 'author' ) ) { echo '<p><b>Author:</b> ' . get_field( 'author' ) . '<p>'; } if( get_field( 'genre' ) ) { echo '<p><b>Genre:</b> ' . get_field( 'genre' ) . '<p>'; } if( get_field( 'cover' ) ) { echo '<p><b>Cover:</b> ' . get_field( 'cover' ) . '<p>'; } ?> </div>

Di tampilan depan kita sekarang dapat melihat bidang khusus.

Namun bidang genre tidak ditampilkan dengan benar. Itu karena mengandung banyak nilai, oleh karena itu fungsi get_field mengembalikan array. Untuk memperbaikinya, kita harus mengonversi array menjadi serangkaian nilainya. Ini mudah di PHP dengan menggunakan fungsi implode() .

 <div class="entry-content"> <?php if( get_field( 'author' ) ) { echo '<p><b>Author:</b> ' . get_field( 'author' ) . '<p>'; } if( get_field( 'genre' ) ) { echo '<p><b>Genre:</b> ' . implode( ", ", get_field( 'genre' ) ) . '<p>'; } if( get_field( 'cover' ) ) { echo '<p><b>Cover:</b> ' . get_field( 'cover' ) . '<p>'; } ?> </div>

Jika Anda ingin menampilkan beberapa bidang secara selektif tetapi tidak semuanya di pos tertentu, Anda dapat melakukannya dengan menggunakan beberapa kode pendek ACF. Untuk melakukan ini, buka posting Anda dan kemudian tambahkan satu blok kode pendek Gutenberg untuk setiap bidang dan masukkan kode pendek seperti ini:

 [acf field="MY_CUSTOM_FIELD"/]

Ganti MY_CUSTOM_FIELD dengan nama bidang dan itu akan berfungsi dengan baik.

Seperti yang dapat kita lihat, menggunakan plugin Bidang Kustom Tingkat Lanjut memberi kita fleksibilitas luar biasa untuk membuat bidang khusus dan menampilkannya di tempat yang kita inginkan.

Kesimpulan

Fungsi Bidang Kustom di WordPress diandalkan oleh pengembang di seluruh industri untuk memberikan struktur dan keterbacaan yang lebih baik ke situs web mereka. Ini adalah fungsi WordPress menonjol lainnya yang sekali lagi membantu menjelaskan mengapa WordPress begitu populer. Semoga artikel ini memberi Anda informasi yang Anda butuhkan untuk menambahkan bidang kustom Anda sendiri ke situs web Anda. Selamat berkembang!

Lihat juga

Tabel Daftar Admin WordPress: Tambahkan Filter Kustom
Menambahkan Bidang Kustom ke Item Menu WordPress