Panduan Penting untuk Bidang Kustom WordPress
Diterbitkan: 2020-09-19Jika ada satu fitur tentang WordPress yang membedakannya dari sistem manajemen konten (CMS) lain di luar sana, itu adalah kustomisasi. Bidang khusus di WordPress adalah bagian built-in dari CMS yang memungkinkan Anda memperluas tidak hanya meta-data dan informasi yang Anda tampilkan, tetapi juga sepenuhnya mengubah fungsionalitas dan utilitas posting atau halaman. Kami ingin membantu Anda memahami dasar-dasarnya. Kami akan membahas apa itu bidang khusus, mengapa bidang itu berguna, dan memberikan beberapa contoh dunia nyata tentang bagaimana bidang itu digunakan.
Berlangganan Saluran Youtube Kami
Apa itu Bidang Kustom WordPress?
Singkatnya, bidang kustom WordPress memberi Anda cara untuk menambahkan elemen tertentu ke halaman. Ini mungkin jenis gambar atau byline atau bio penulis tertentu, mungkin peringkat atau bahkan sesuatu seperti, seperti yang dikatakan entri Codex pada bidang khusus, suasana hati, sedang membaca, mendengarkan, atau kotak cuaca.
Bidang-bidang ini membentuk apa yang disebut metadata untuk posting Anda (pada dasarnya apa pun yang tidak termasuk dalam konten utama artikel Anda). Secara default, WordPress memiliki meta-box untuk info umum, seperti tag, kategori, tautan permanen, gambar unggulan, dll. Jika Anda ingin menambahkan lebih banyak, Anda akan menggunakan bidang khusus.
Anda bahkan mungkin ingin menambahkan informasi yang harus diisi oleh masing-masing penulis di tim Anda untuk menerbitkan postingan.

Anda dapat membuat bidang wajib yang tidak mengizinkan postingan dipublikasikan hingga kriteria tertentu dicentang. Jadi perlu diingat bahwa bidang khusus ini tidak hanya untuk informasi di front-end. Mereka dapat berguna untuk back-end juga.
Menambahkan Bidang Kustom ke Posting WordPress
Secara default, bidang kustom WordPress dinonaktifkan di editor halaman dan posting. Jika Anda menggunakan Editor Blok, mudah untuk mengaktifkannya. Cukup klik pada Ikon Roda Gigi di sudut kanan atas layar. Pilih Opsi .

Kemudian pilih untuk mengaktifkan Bidang Kustom di dekat bagian bawah layar yang muncul. Anda harus memuat ulang halaman, jadi pastikan untuk menyimpan pekerjaan Anda terlebih dahulu.

Setelah Anda mengaktifkan dan memuat ulang, kotak meta bidang khusus Anda akan muncul di bagian bawah layar. Di bawah bagian editor konten layar.

Sementara bidang kustom WordPress sangat kuat, yang default terbatas pada nilai teks. Dibutuhkan PHP dan pengembangan untuk membuatnya lebih kuat. Untungnya, ada plugin yang berfungsi untuk Anda, dan kami akan memandu Anda melalui cara menjalankannya. Jika yang Anda butuhkan hanyalah bidang teks pada beberapa posting dan tidak menginginkan plugin, silakan lewati di bawah tentang menambahkan bidang kustom WordPress ke ujung depan tema Anda. Itu berlaku untuk bidang default serta yang dihasilkan oleh plugin seperti Bidang Kustom Tingkat Lanjut.
Menggunakan Plugin Bidang Kustom Tingkat Lanjut
Seperti kebanyakan hal di WordPress, Anda memiliki dua opsi implementasi. Anda dapat mengedit file PHP secara manual untuk menambahkan fungsionalitas bidang khusus, atau Anda dapat menggunakan plugin. Dalam hal ini, kami sangat menyarankan untuk menggunakan rute plugin. Namun, jika Anda merasa perlu mengedit PHP dan memasukkan kodenya, Anda dapat melakukannya di Appearance – Theme Editor . Ini adalah halaman WP Codex pada bidang khusus untuk membantu Anda. Ini menautkan ke berbagai tag template dan kait yang Anda perlukan untuk membuatnya berfungsi.
Tetapi sekali lagi, kami sangat menyarankan untuk menggunakan plugin Bidang Kustom Lanjutan daripada mengubah kode. Plugin memungkinkan semua yang Anda inginkan dari bidang khusus (dan kemudian beberapa), jadi kami tidak merasa perlu untuk menemukan kembali roda. Ketika bekerja, itu bekerja. Gunakan.

Setelah ACF diinstal dan diaktifkan, Anda akan melihat entri Bidang Kustom di bilah sisi kiri panel admin WordPress. Muncul dengan tiga opsi: Field Groups , Add New , dan Tools .

Grup Lapangan dapat dianggap sebagai kumpulan. Apa pun yang ingin Anda tampilkan di kotak yang sama, Anda akan memasukkannya ke dalam grup yang sama. Add New akan memungkinkan Anda menambahkan grup baru dan bidang khusus baru. Sementara Alat adalah tempat Anda mengimpor dan mengekspor berbagai set bidang khusus yang ada dari situs WordPress lainnya.

Dasar-dasar ACF
Membuat bidang sendiri cukup mudah. Pindah ke jendela Tambah Baru .

Apa pun yang terjadi, bidang khusus ACF akan disertakan dalam Grup Bidang . Ini hanya berarti bidang tertentu yang terkandung dalam kotak yang sama. Jadi Anda dapat menamainya apa pun yang Anda inginkan agar muncul seperti di editor pos. Setiap kali Anda ingin menambahkan entri individu ke grup, Anda akan mengklik tombol Tambah Bidang . Lakukan ini setiap kali Anda menginginkan bidang yang berbeda di kotak meta yang sama. Aturan Lokasi menentukan di mana dan kapan kotak akan muncul. Dalam contoh ini, karena Post Type Is Equal To Post , itu berarti hanya akan muncul di Posts. Bukan Halaman atau jenis kiriman khusus lainnya.
Selanjutnya, Anda harus benar-benar memilih Pengaturan untuk bidang itu sendiri. Apa yang akan dilakukan dan fungsinya di situs.

Anda pada dasarnya memilih penempatan Anda (di bawah konten posting di editor, sidebar, di atas konten, dll.), serta penempatan untuk teks dan bidang itu sendiri. Area Sembunyikan di Layar adalah yang paling menarik. Bergantung pada bagaimana Anda perlu menggunakan bidang khusus Anda, Anda dapat mengecualikan setiap dan semua kotak meta lainnya dari draf Anda. Pilih kondisi untuk tampilan bidang kustom ini, lalu tentukan kotak lain yang muncul dengannya, jika ada. Banyak kali Anda bahkan tidak akan khawatir tentang hal ini.

Membuat Bidang Kustom dengan ACF
Setelah Anda menamai Grup Bidang Anda, Anda dapat mengklik tombol Tambah Bidang . Anda dapat memiliki sejumlah bidang dalam grup yang sama, tetapi pastikan untuk menjaga semuanya terkait satu sama lain. Anda dapat membuat hampir semua jenis bidang entri yang dapat Anda bayangkan dengan ACF.
Untuk contoh ini, mari kita berpura-pura menjalankan situs WordPress budaya pop yang melihat film dan ingin bidang khusus menampilkan peringkat, untuk mencantumkan apakah film sedang streaming, dan jika demikian, di mana menemukannya.

Ini semua akan berada di bawah Grup Bidang yang sama, tetapi bidang yang berbeda. Seperti yang Anda lihat di atas, Is It Streaming? bidang diatur menjadi tombol radio dengan pemilih ya/tidak yang diperlukan sebelum publikasi. Selain itu, kami ingin bidang bersyarat muncul jika bidang ditandai sebagai Ya. Ini dilakukan hanya dengan menekan Add Field lagi.

Dengan mengaktifkan Logika Bersyarat , Anda hanya perlu memilih bidang mana yang menjadi subjeknya dan berapa nilainya. Dalam hal ini, Apakah Ini Streaming? harus sama dengan Ya.
Di editor pos, entri bidang khusus akan terlihat seperti ini:

Dan saat Anda memublikasikan postingan Anda, metadata yang Anda masukkan akan menjadi bagian dari postingan tersebut. Tapi masih ada satu masalah. Anda tidak dapat melihatnya, begitu pula pengunjung Anda.
Cara Menampilkan Bidang Kustom di Front-End WordPress
Bahkan jika Anda telah melakukan semua ini dengan sempurna, data yang Anda masukkan tidak akan muncul di bagian depan situs Anda tanpa sedikit penyesuaian. Lagi pula, di mana itu akan muncul? Sering kali, tema Anda akan memiliki cara untuk menampilkan data meta dan bidang khusus, tetapi itu berbeda tema demi tema. Periksa opsi tema Anda untuk dokumentasi.
Cara lain untuk menampilkan bidang khusus di ujung depan adalah kode pendek ACF bawaan. Meskipun tidak ada penyesuai atau pembuat yang dibangun ke dalam ACF, Anda dapat menggunakan kode pendek berikut hanya untuk bidang teks .

Tetapi karena terbatas pada bidang teks, mungkin penggunaannya terbatas bagi banyak orang. Anda juga dapat masuk ke PHP dan menggunakan kode ACF, seperti dalam contoh dokumentasinya. Anda juga dapat meningkatkan ke ACF Pro dan mendapatkan akses ke blok Gutenberg bawaan yang menampilkan bidang khusus persis seperti yang Anda gayakan di pembuatnya.
Tetapi seperti yang kami katakan, banyak tema yang dikemas dengan integrasi bidang khusus hari ini, dan kami akan menunjukkan kepada Anda bagaimana hal itu ditangani di Divi.
Cara Menampilkan Bidang Kustom di Front-End Menggunakan Divi
Pertama, ingat bahwa banyak modul Divi dapat merender kode pendek. Sering kali bidang khusus teks Anda yang dibuat di ACF dapat dengan mudah dimasukkan menggunakan kode pendeknya, seperti yang kami sebutkan di atas.
Untuk contoh kita di atas yang menggunakan logika kondisional dan tombol radio, kita akan menggunakan fitur konten dinamis Divi. Ini juga sangat mudah digunakan. Kami akan menunjukkan ini kepada Anda melalui Divi Theme Builder, tetapi Anda dapat menggunakannya secara harfiah di modul apa pun yang mendukungnya di Divi builder biasa. Klik Hitam + dan pilih modul yang Anda inginkan. Untuk ini, ini adalah Modul Teks .

Selanjutnya, temukan bagian modul yang ingin Anda masukkan bidang khusus. Cari ikon Konten Dinamis di sisi kanan tempat mana pun yang mendukung fitur tersebut.

Klik untuk memilih dari menu tarik-turun semua jenis konten dinamis yang tersedia, termasuk semua bidang khusus. Mereka mungkin berada di paling bawah.

Divi memberi Anda opsi untuk menambahkan label sebelum/sesudah pada konten bidang Anda. Kami ingin kami membaca secara alami sebagai bagian dari posting, jadi Apakah film ini tersedia untuk streaming online? akan ditempatkan sebelum nilai saat bidang dirender. Juga, kami menambahkan spasi di akhir untuk memisahkan label kami dari nilai ACF.

Karena Anda hanya dapat memiliki satu konten dinamis per area modul, ulangi proses ini untuk bidang lain. Namun, perhatikan bahwa meskipun bidang khusus bersyarat, modul Divi tidak . Jadi jika Anda menggunakan label sebelum/sesudah pada bidang bersyarat, Anda masih akan melihat label itu. Jika Anda membiarkannya kosong, maka tidak ada nilai yang akan ditampilkan sama sekali.

Selain itu, opsi Aktifkan HTML Mentah akan memungkinkan kode apa pun yang Anda masukkan ke dalam bidang ACF untuk dirender, seperti tautan ke berbagai platform, dll.
Membungkus
Seperti yang Anda lihat, meskipun tampak cukup rumit, bidang kustom WordPress adalah fitur yang tidak memerlukan pengembang untuk memperbaikinya. Cukup instal ACF dan mulailah menyesuaikan cara Anda dan tim Anda memasukkan informasi. Baik itu situs ulasan, pasar e-niaga, atau bahkan hanya blog ramah tempat Anda ingin berbagi apa yang terjadi dalam hidup Anda, kemampuan untuk mengubah dan menyempurnakan metadata posting dan halaman Anda dapat meningkatkan situs web Anda ke tingkat yang baru.
Untuk apa Anda menggunakan bidang kustom WordPress?
Gambar unggulan oleh SurfsUp / shutterstock.com
