Kotak Meta WordPress – Panduan Singkat

Kotak Meta WordPress adalah kotak yang dapat diseret yang ditampilkan di layar pengeditan Anda dan digunakan untuk menangani data tambahan seperti istilah Taksonomi. Dalam artikel ini kita akan melihat kotak meta WordPress dan melihat bagaimana kita dapat membuat meta box kita sendiri, mencari tahu bagaimana cara menyimpan perubahan yang kita buat dan bagaimana kita dapat menampilkan konten mereka di front end website kita.

Mari kita mulai!

Bidang Kustom, kotak Meta, dan Metadata

Ada banyak kebingungan di luar sana tentang perbedaan antara ketiga istilah ini. Mari kita lihat ketiganya untuk mendapatkan pemahaman yang lebih baik tentang apa itu dan bagaimana cara kerjanya.

Metadata

Meta data postingan adalah informasi tambahan tentang postingan yang disimpan dalam tabel database postmeta.

Setiap pasangan kunci/nilai dianggap sebagai 'bidang pos'. Tidak ada batasan berapa banyak entri meta yang dapat dimiliki tabel ini.

Bidang Kustom

Ada bidang yang telah ditentukan sebelumnya oleh WordPress seperti gambar fitur yang secara teknis merupakan bidang khusus. Lainnya dapat ditambahkan dengan plugin atau kode khusus dan ditentukan oleh pengguna admin. Anda dapat mengetahui lebih lanjut tentang bidang khusus dengan membaca artikel kami 'Memulai Bidang Khusus WordPress'.

Metabox

Saat Anda membuka posting WordPress untuk mengeditnya, Anda akan melihat halaman dipecah menjadi beberapa bagian (banyak di antaranya terletak di sidebar di sisi kanan).

Semua bagian ini secara teknis 'kotak meta'. Jadi, editor posting utama, wadah untuk memilih kategori, menerbitkan posting, menambahkan tag, menambahkan gambar unggulan adalah semua kotak meta yang berisi elemen HTML yang berinteraksi dengan metadata posting. Bergantung pada bagaimana metadata ditangani oleh situs web, kotak-kotak ini akan muncul di berbagai lokasi di layar Anda.

Sebagai contoh lebih lanjut, mari kita lihat kotak meta Gambar Unggulan. Ini biasanya ditemukan di bilah sisi kanan layar admin kiriman. Di sana, Anda dapat dengan mudah mengubah gambar. Ketika Anda melakukan ini, Anda sebenarnya memperbarui _thumbnail_id dari metadata kiriman itu.

Kotak meta bidang khusus, seperti 'sumber' (yang kami tambahkan dalam tutorial kami tentang Bidang Khusus), biasanya dapat ditemukan di bawah editor pos utama.

Membuat Kotak Meta untuk Jenis Posting Kustom kami

Sekarang kami memiliki gagasan yang lebih jelas tentang apa sebenarnya kotak meta itu, kami dapat melanjutkan dan membangun kotak meta khusus kami sendiri untuk situs web kami. Tutorial ini mengikuti tutorial kami tentang Jenis Posting Kustom ... jika Anda ingin mengikuti langkah demi langkah maka Anda harus melihat artikel itu dan membuat jenis posting kustom yang disebut 'resep' dan kemudian menyiapkan beberapa 'resep ' uji posting dengan gambar unggulan yang dipilih.

Dalam tutorial ini kita akan memperluas jenis posting kustom kita dengan menambahkan kotak meta baru yang akan digunakan untuk menentukan apakah resepnya vegan atau tidak dengan mencentang kotak.

Langkah 1 – Daftarkan Kotak Meta

Untuk menambahkan kotak meta dalam jenis posting kustom kami, kami menggunakan fungsi add_meta_box yang disediakan oleh WordPress. Berikut adalah struktur fungsi dengan argumen yang akan kita gunakan:

 add_meta_box( $id, $title, $callback, $screen, $context )

Untuk id unik kita akan menggunakan is_vegan dan untuk judul kotak meta string Is Vegan .

Fungsi panggilan balik untuk menampilkan konten kotak adalah display_vegan_meta_box . Atribut $screen mengacu pada layar admin di mana kotak meta akan ditampilkan. Dalam kasus kami, ini adalah area edit posting resep, jadi itu akan menjadi nama jenis posting unik yang seperti yang disebutkan sebelumnya adalah recipes . Parameter $context bervariasi menurut layar admin.

Konteks layar edit Posting yang akan kita gunakan di sini termasuk normal, samping, dan lanjutan sebagai nilai konteks yang tersedia. Kami akan menggunakan nilai samping untuk menampilkan kotak meta di bilah sisi halaman edit posting.

Jadi, secara ringkas, dengan menggunakan parameter yang ditentukan di atas kode yang harus kita tambahkan di my-custom-post-type.php akan terlihat seperti ini:

 function my_metabox() { add_meta_box( 'is_vegan', 'Is Vegan', 'display_vegan_meta_box', 'recipes', 'side' ); } add_action( 'admin_init', 'my_metabox' );

Seperti yang akan Anda lihat, kami menggunakan hook admin_init yang dipicu sebelum hook lain ketika pengguna mengakses area admin.

Sekarang, jika Anda mengunjungi halaman edit posting resep, Anda akan melihat kotak di bilah sisi. Tentu saja, konten saat ini kosong.

Langkah selanjutnya adalah mengisi kotak dengan konten yang diinginkan.

Langkah 2 – Tampilkan Konten Dasar Kotak Meta

Kami akan menjaga isi kotak ini tetap sederhana. Yang kita butuhkan hanyalah deskripsi dan kotak centang. Seperti yang disebutkan, konten dikembalikan dalam fungsi display_vegan_meta_box .

Silakan lanjutkan dan tambahkan potongan kode di bawah ini di bawah fungsi my_metabox :

 function display_vegan_meta_box( $recipe ) { ?> <span class="title">Vegan recipe?</span> <span class="content"> <label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" /> </label> </span> <?php }

Apa yang kami lakukan dalam fungsi ini adalah menampilkan kotak centang HTML yang untuk saat ini tidak dicentang. Setelah kami memperkenalkan fungsi simpan, kami akan kembali ke bagian kode ini untuk membuat beberapa perubahan lagi sehingga ketika halaman edit posting dimuat, kotak centang akan mengambil status kotak centang yang disimpan.

Langkah 3 – Simpan Nilai Meta Box ke Database

Untuk menyimpan nilai field input metabox, kita menggunakan action hook save_post yang disediakan WordPress seperti ini:

 function update_vegan_box( $post_id ) { if( !current_user_can( 'edit_post' ) ) return; if ( 'recipes' == get_post_type() ) { if ( isset( $_POST['vegan_checkbox'] ) && $_POST['vegan_checkbox'] != '' ) { update_post_meta( $post_id, 'is_vegan', $_POST['vegan_checkbox'] ); }else { update_post_meta( $post_id, 'is_vegan', "no" ); } } } add_action( 'save_post', 'update_vegan_box' );

Di dalam fungsi update_vegan_bo x dengan argumen $post_id kami menyertakan beberapa kondisi. Pertama-tama kami ingin memeriksa apakah pengguna memiliki izin untuk mengedit kiriman dan juga memastikan bahwa kami sedang mengedit jenis kiriman recipes .

Jadi, jika posting termasuk dalam tipe recipes , kami memeriksa nilai kotak centang. Ingat bahwa secara default, ketika checkbox dicentang, nilai database yang disimpan adalah 'yes' dan jika tidak maka nilainya NULL. Kami mengubah ini sedikit sehingga nilai 'tidak' disimpan saat kami menyimpan pos dengan kotak meta vegan tidak dicentang.

Di sini kita menggunakan fungsi update_post_meta WordPress update_post_meta( $post_id, $meta_key, $meta_value, $prev_value = '' )

Dalam argumennya, kami mendefinisikan id posting, kunci meta, nilai meta. Fungsi dapat menerima satu argumen lagi, $prev_value
jika kami ingin memeriksa nilai sebelumnya sebelum memperbarui dan hanya jika itu sama, lanjutkan dan perbarui.

Langkah 4 – Sempurnakan Kode Konten Kotak Meta

Sekarang mari kembali ke fungsi sebelumnya yang menampilkan konten kotak meta dan menambahkan beberapa baris kode lagi yang mengambil data terkait dari database.

 function display_vegan_meta_box( $recipe ) { $is_value = esc_html( get_post_meta( $recipe->ID, 'is_vegan', true ) ); $checked; if ( $is_value == "yes" ) { $checked = "checked"; } else if ( $is_value == "no" ) { $checked = ""; } else { $checked="";} ?> <span class="title">Vegan recipe?</span> <span class="content"><label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" <?php echo $checked; ?> /> </label></span> <?php }

Jadi, pertama, kita mengambil nilai meta is_vegan dan kemudian jika sesuai, nilai yang checked akan diteruskan ke variabel $checked dan akan di-echo dalam output HTML.

Dan itu saja. Kami sekarang memiliki kotak meta yang berfungsi yang dapat digunakan untuk menentukan apakah resep di pos kustom kami adalah vegan atau tidak.

Kesimpulan

Kotak meta menawarkan peningkatan tingkat kontrol dan fleksibilitas dalam posting dan dapat dimanfaatkan dalam berbagai cara. Apa yang sangat bagus tentang mereka adalah bahwa mereka dipisahkan dari sisa konten posting sementara pada saat yang sama berada di layar admin yang sama yang membuat pengelolaannya jauh lebih mudah daripada jika mereka berada di tempat lain di Admin WordPress.

Seperti kebanyakan pengkodean WordPress, perlu beberapa saat untuk membiasakan diri menggunakan kotak meta. Semoga informasi di atas cukup untuk membantu Anda memulai. Selamat mengkode!