Tabel Daftar Admin WordPress: Perluas Fungsi Edit Cepat

Sejauh ini, dalam rangkaian artikel kami tentang Tabel Admin di WordPress, kami telah melihat berbagai cara untuk menyesuaikan tata letak Tabel Admin WordPress termasuk cara menambahkan kolom baru. Dalam artikel terakhir dalam seri ini, kita akan melihat satu penyesuaian lagi yang mungkin ingin Anda pertimbangkan… memperluas fungsi 'Edit Cepat' yang ditemukan di Tabel Admin.

Mari kita mulai!

Memperluas Bidang Edit Cepat

Sebagai contoh dalam tutorial ini, kami akan menambahkan bidang khusus yang akan menampilkan URL yang akan dijelaskan sebagai 'Sumber' yang akan kami isi dengan url yang menautkan ke beberapa informasi tambahan yang berkaitan dengan artikel kami. Kita akan melihat bagaimana itu dapat ditambahkan di area Edit Cepat pada layar Admin Postingan dan bagaimana cara menyimpan pembaruan yang dibuat pada bidang ini.

Langkah Satu: Tambahkan Bidang Kustom

Kami membahas cara membuat bidang 'Sumber' di artikel kami Memulai Bidang Kustom WordPress. Demi singkatnya, kami tidak akan mengulangi instruksi tersebut di sini. Anda tentu saja dapat membuat Bidang Kustom apa pun yang Anda suka.

Jika Anda tidak terbiasa dengan cara kami menambahkan bidang khusus 'Sumber' atau bidang khusus lainnya, silakan lihat artikel kami tentang ini. Setelah Anda menambahkan bidang khusus yang sesuai, saatnya untuk beralih ke langkah berikutnya.

Langkah Kedua: Tambahkan Kolom Kustom

Kita perlu menambahkan kolom khusus ke Tabel Admin kita. Kami menjelaskan cara melakukan ini secara mendalam di artikel kami Menyesuaikan Tabel Admin WordPress: Memulai. Simak dan ikuti langkah-langkahnya.

Pada akhirnya Anda akan mendapatkan beberapa kode di functions.php tema aktif Anda yang terlihat seperti ini:

 add_filter('manage_posts_columns','add_custom_columns'); function add_custom_columns( $columns ) { $columns['source'] = 'Source'; return $columns; } add_action( 'manage_posts_custom_column','custom_columns_content', 10, 2 ); function custom_columns_content ( $column_id, $post_id ) { switch( $column_id ) { case 'source': echo get_post_field('source', $post_id); break; } }

Sekarang Anda akan melihat kolom baru di tabel Admin Postingan.

Tambahkan Kotak Edit Cepat Kustom

Buka tabel daftar Postingan kami dan klik tautan 'Edit Cepat' di bawah salah satu postingan kami.

Apa yang akan kita lihat di sini adalah semua opsi default yang tersedia yang disediakan WordPress di layar Edit Cepat. Saat ini kami tidak akan melihat bidang 'Sumber' baru kami.

Kami akan menambahkan ini dengan menggunakan kait quick_edit_custom_box yang disediakan WordPress. Tindakan ini mem-parsing semua tindakan default dalam mode 'Edit Cepat' dengan mengeksekusi sekali untuk setiap kolom termasuk kolom khusus.

Ini disusun sebagai berikut: do_action( 'quick_edit_custom_box', $column_name, $post_type, $taxonomy ) . Parameternya adalah $column_name yang merupakan nama kolom yang akan diedit, $post_type yang merupakan slug jenis posting dan $taxonomy untuk nama taksonomi jika perlu.

Dalam file functions.php Anda, tambahkan baris berikut:

 add_action( 'quick_edit_custom_box', 'source_custom_edit_box', 10, 2 ); function source_custom_edit_box( $column_name, $post_type ) { global $post; switch ( $post_type ) { case 'post': if( $column_name === 'source' ): ?> <fieldset class="inline-edit-col-right"> <div class="inline-edit-col"> <label> <span class="title">Source</span> <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span> </label> </div> </fieldset> <?php endif; break; default: break; } }

Harap diingat bahwa kami mendapatkan nilai bidang 'sumber' dalam kode PHP dengan menggemakan $post->source; .

Sekarang, jika Anda menyegarkan halaman dan mengklik 'Edit Cepat' lagi, Anda sekarang akan melihat bidang 'sumber' dengan nilai yang benar.

Langkah Tiga: Simpan Pengeditan Sebaris

Untuk menyimpan input data ke bidang khusus kami, kami akan menggunakan tindakan save_post yang dipicu ketika sebuah posting diperbarui.

Dalam contoh kami di mana kami mengerjakan pengeditan cepat, data untuk kiriman disimpan di $_POST setelah save_post dijalankan.

Bahwa kode yang diperlukan untuk mencapai ini adalah sebagai berikut dan harus dimasukkan ke dalam file functions.php :

 add_action( 'save_post', 'update_source_custom_edit_box' ); function update_source_custom_edit_box() { if( isset( $_POST ) && isset( $_POST['source'] ) ) { update_post_meta($_POST['post_ID'], 'source', $_POST['source']); } return; }

Tidak, ini telah dilakukan, mari kita coba mengubah nilai input bidang menjadi sesuatu yang lain seperti "https://random.url" dan tekan tombol perbarui di kanan bawah.

Anda mencatat nilai di bidang sumber kami diperbarui seperti yang diharapkan. Namun, jika Anda mengklik tombol Edit Cepat lagi dan melihat kembali bidang khusus Anda (dalam kasus kami 'Sumber'), Anda akan melihat bahwa nilainya tidak berubah di kotak edit.

Setiap kali Anda mengubah nilainya, Anda akan selalu melihat perubahan di sel kolom tabel Admin, tetapi input ini tidak akan terlihat di bidang Edit Cepat.

Jadi mengapa hal ini terjadi?

Ingat bahwa kita mendapatkan nilai bidang 'sumber' dengan menggemakan $post->source; . Konten Quick Edit diisi saat pengguna menekan tombol 'edit', yang berarti konten dibuat secara dinamis dan tidak diisi sebelumnya saat layar admin pos dimuat. Kami tidak dapat menampilkan metadata kami dengan benar dengan mengambilnya melalui kode PHP kami karena kami akan selalu melihat nilai yang diisi saat kami memasuki layar Admin, bukan nilai baru.

Sebaliknya, kita harus mengumpulkan nilai-nilai kita dengan menggunakan JavaScript. Jadi sebelum melanjutkan, kita akan masuk ke kode PHP sebelumnya dan menghapus nilai yang digaungkan dengan mengganti baris ini…

 <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span>

… dengan yang ini:

 <span class="input-text-wrap"><input type="text" name="source" value=""></span>

Langkah Empat: Mengambil Nilai Input Menggunakan JS

Pertama, kita harus memasukkan skrip JS kita dengan menambahkan baris ini ke file functions.php Anda:

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('UNIQUE-SCRIPT-NAME', '/PATH-TO-YOUR-JS-FILE', array('jquery','inline-edit-post' )); }

Jadi jika misalnya Anda membuat file extend-quick-edit.js dan meletakkannya di bawah folder tema aktif Anda, maka pada kode di atas Anda harus mengganti 'UNIQUE-SCRIPT-NAME' dengan sesuatu seperti 'extend-quick-edit-script ' dan '/PATH-TO-YOUR-JS-FILE' dengan get_template_directory_uri() . '/extend-quick-edit.js' get_template_directory_uri() . '/extend-quick-edit.js'

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('extend-quick-edit-script', get_template_directory_uri() . '/extend-quick-edit.js', array('jquery','inline-edit-post' )); }

Dalam array('jquery','inline-edit-post' ) kami telah menambahkan jQuery karena skrip kami menggunakan jQuery, dan mendefinisikan bahwa fungsi inline-edit-post asli akan dimodifikasi.

Dalam extend-quick-edit.js konten akan terlihat seperti ini:

 jQuery(document).ready(function($){ var $inline_editor = inlineEditPost.edit; inlineEditPost.edit = function(id){ $inline_editor.apply( this, arguments); var post_id = 0; if( typeof(id) == 'object'){ post_id = parseInt(this.getId(id)); } if(post_id != 0){ $post_modified_col_value = $('#post-' + post_id).find('.source').text(); $('#edit-' + post_id + ' input[name=source]').val($post_modified_col_value); } } });

Mari kita uraikan sedikit apa yang telah kita lakukan di sini.

Pada awalnya, kami mengambil objek inlineEditPost.edit , yang diperkenalkan di file inti WordPress /wp-admin/js/inline-edit-post.js jika Anda ingin melihat lebih jauh ke dalamnya. Jadi kita sekarang memiliki salinan objek dalam variabel $inline_editor .

Setelah itu kita memodifikasi fungsionalitas inlineEditPost.edit dengan menerapkan yang sudah ada di $inline_editor.apply( this, arguments); dan menambahkan fungsionalitas ekstra yang kita inginkan setelahnya.

Jadi, di baris berikutnya dari kode JS kita, apa yang akhirnya akan kita lakukan adalah mengganti nilai bidang input 'Sumber' dari area edit cepat dengan nilai sel kolom 'Sumber'.

Sekarang semua harus bekerja seperti yang diharapkan. Jika Anda menyimpan nilainya dan membuka kembali area edit cepat, input Sumber juga harus diubah.

Asalkan bidang khusus sudah terdaftar bersama dengan kolom khusus, alur kerja kami akan terlihat seperti ini:

Kesimpulan

Menambahkan bidang khusus ke modul Edit Cepat dari tabel Daftar Admin tidaklah mudah. Namun, jika Anda menambahkan bidang yang diperbarui secara berkala, itu jelas dapat menghemat banyak waktu dalam jangka panjang. Seperti biasa, apa yang bisa dicapai di WordPress sangat tidak terbatas. Langsung out-of-the-box memungkinkan kustomisasi yang luas tetapi dengan beberapa pengkodean tambahan tidak banyak yang tidak dapat Anda lakukan!