Mengkustomisasi Admin WordPress: Teks Bantuan
Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)
Di Bagian 2 dari tutorial ini, saya menunjukkan kepada Anda cara menambahkan metabox kustom ke dashboard WordPress, yang dapat Anda gunakan untuk menyediakan teks bantuan untuk klien atau pengguna Anda.
Tetapi bagaimana jika Anda ingin memberikan teks bantuan pada layar pengeditan individual? Dalam tutorial ini, saya akan menunjukkan cara melakukannya.
Dalam tutorial ini Anda akan belajar cara:
- Menambahkan metabox ke layar pengeditan untuk teks bantuan
- Menambahkan metabox tambahan di posisi yang berbeda
- Membuat metabox dummy untuk menampilkan teks bantuan di bagian atas layar pengeditan
Saya akan membuat plugin untuk melakukan ini - jika Anda sudah membuat plugin setelah mengikuti Bagian 1 hingga 3 dari seri ini, Anda mungkin lebih suka menambahkan kode dari tutorial ini ke plugin tersebut, memberi Anda satu plugin dengan semua penyesuaian admin Anda.
Apa yang Anda Butuhkan untuk Menyelesaikan Tutorial Ini
Untuk menyelesaikan tutorial ini Anda akan membutuhkan:
- Instalasi WordPress
- Akses ke folder plugin situs Anda untuk menambahkan plugin Anda
- Editor teks untuk membuat plugin Anda
Menyiapkan Plugin
Di awal plugin saya, saya menambahkan baris berikut:
/* Plugin Name: Wptuts+ Customize the Admin Part 4 - Help Text Plugin URI: https://rachelmccollin.co.uk Description: This plugin supports the tutorial in Wptuts+. It adds help text to the WordPress editing screen. Version: 1.0 Author: Rachel McCollin Author URI: http://rachelmccollin.com License: GPLv2 */
1. Menambahkan Metabox Bantuan ke Layar Pengeditan Posting
Untuk menambahkan metabox yang berisi teks bantuan, Anda menggunakan fungsi add_meta_box()
, yang juga akan Anda gunakan jika Anda membuat metabox untuk metadata posting atau di layar pengaturan. Fungsi ini membutuhkan beberapa parameter:
<?php add_meta_box( $id, $title, $callback, $post_type, $context, $priority, $callback_args ); ?>
Parameternya adalah:
-
$id
- ID unik untuk metabox. -
$title
- judul yang akan ditampilkan kepada pengguna. -
$callback
- fungsi callback yang mendefinisikan isi dari metabox. -
$post_type
- jenis posting yang layar pengeditannya akan muncul di metabox. Kosongkan ini untuk menambahkan metabox ke semua jenis layar pengeditan posting, atau tentukan jenis posting mana yang ingin Anda targetkan. -
$context
- di mana di layar pengeditan Anda ingin metabox muncul - 'normal', 'lanjutan' atau 'sisi'. Standarnya adalah 'lanjutan' yang menempatkan metabox di area utama layar. -
$priority
- dalam konteks yang telah Anda tetapkan, prioritas untuk metabox ini ('high'
,'core'
,'default'
atau'low'
). Ini berguna jika Anda menambahkan banyak metabox. -
$callback_args
- argumen untuk dikirimkan ke fungsi callback Anda (opsional)
Jadi, untuk menambahkan metabox ke area utama dari layar pengeditan posting untuk posting saja, saya tambahkan yang berikut ini ke plugin saya:
// Add metabox below editing pane function wptutsplus_metabox_after_title() { add_meta_box( 'after-title-help', 'Using this Screen', 'wptutsplus_after_title_help_metabox_content', 'post', 'advanced', 'high' ); } add_action( 'add_meta_boxes', 'wptutsplus_metabox_after_title' );
Ini menambahkan metabox kosong, yang tidak akan berfungsi karena saya belum menambahkan fungsi callback. Ini adalah sebagai berikut:
// callback function to populate metabox function wptutsplus_after_title_help_metabox_content() { ?> <p>Use this screen to add new articles or edit existing ones. Make sure you click 'Publish' to publish a new article once you've added it, or 'Update' to save any changes.</p> <?php }
Ini sekarang menambahkan metabox ke layar pengeditan posting saya, seperti yang ditunjukkan pada tangkapan layar:



Seperti yang Anda lihat, saya telah menghapus beberapa metabox lain yang biasanya terlihat di layar pengeditan posting (seperti kutipan dan diskusi), tetapi metabox baru saya berada di bawah panel pengeditan dan karenanya tidak terlalu terlihat. Tidak mungkin menggunakan fungsi add_meta_box()
untuk menambahkan metabox di atas panel pengeditan utama tanpa menggunakan solusi jQuery yang menggerakkan panel pengeditan utama ke bawah, dan yang saya pikir berlebihan untuk masalah ini. Jadi, apa alternatif yang saya miliki?
- Pertama, saya dapat menambahkan metabox di atas metabox 'Publish', yang akan lebih jelas bagi pengguna.
- Atau, saya bisa menipu, dan menggunakan kaitan tindakan
edit_form_after_title
untuk menambahkan metabox palsu di atas panel pengeditan.
Saya akan mulai dengan opsi pertama: menambahkan metabox di sebelah kanan di atas metabox 'Publish'.
2. Menambahkan Metabox di Kanan Layar Pengeditan
Untuk menambahkan metabox di kanan atas layar, saya menggunakan fungsi add_meta_box()
dengan cara yang sama seperti sebelumnya, dengan beberapa parameter berubah. Saya juga akan menggunakan fungsi callback yang berbeda untuk mengisi metabox dengan konten yang berbeda.
Di plugin Anda, tambahkan yang berikut:
// Add help text to right of screen in a metabox function wptutsplus_metabox_top_right() { add_meta_box( 'after-title-help', 'Publishing and Saving Changes', 'wptutsplus_top_right_help_metabox_content', 'post', 'side', 'high' ); } // callback function to populate metabox function wptutsplus_top_right_help_metabox_content() { ?> <p>Make sure you click 'Publish' below to publish a new article once you've added it, or 'Update' to save any changes.</p> <?php } add_action( 'add_meta_boxes', 'wptutsplus_metabox_top_right' );
Ini menambahkan metabox kecil dengan instruksi singkat - jika saya menambahkan lebih banyak teks, itu akan memindahkan metabox di bawahnya terlalu jauh di bawah layar. Anda dapat melihat hasilnya di tangkapan layar:



Catatan: Saya mengomentari fungsi untuk metabox di area utama layar sebelum menambahkan metabox baru ini, itulah mengapa Anda tidak dapat melihatnya di tangkapan layar.
3. Menambahkan Metabox 'Palsu' Diatas Panel Pengeditan
Jadi menambahkan metabox kecil di kanan atas layar cukup sederhana - tetapi bagaimana jika saya ingin metabox di kiri atas, di atas panel pengeditan?
Untuk melakukan ini, Anda tidak menggunakan fungsi add_meta_box()
, tetapi gunakan kaitan edit_form_after_title
, yang menyisipkan konten setelah judul posting dan sebelum panel pengeditan. Saya akan melampirkan fungsi ke kaitan untuk menentukan markup yang akan ditambahkan ke layar, dan saya akan menggunakan kelas dalam markup saya untuk meniru tampilan metabox.
Di plugin Anda, tambahkan yang berikut:
function wptutsplus_text_after_title( $post_type ) { ?> <div class="after-title-help postbox"> <h3>Using this screen</h3> <div class="inside"> <p>Use this screen to add new articles or edit existing ones. Make sure you click 'Publish' to publish a new article once you've added it, or 'Update' to save any changes.</p> </div><!-- .inside --> </div><!-- .postbox --> <?php } add_action( 'edit_form_after_title', 'wptutsplus_text_after_title' );
Ini menambahkan beberapa markup ke layar pengeditan yang terlihat sangat mirip dengan metabox, karena saya menyertakan kelas .postbox
dan .inside
:



Namun, ada satu masalah dengan markup ini - itu akan muncul di layar pengeditan untuk setiap jenis posting. Karena saya tidak menggunakan fungsi add_meta_box()
, saya tidak memiliki kemewahan dari parameter $post_type
. Jadi alih-alih menggunakan ini, saya akan melakukan pemeriksaan untuk halaman pengeditan yang kita lakukan sebelum menghasilkan markup.
Saat saya di backend WordPress, saya tidak bisa menggunakan tag kondisional standar yang akan saya gunakan dalam file template untuk memeriksa lokasi saya, tetapi saya bisa menggunakan fungsi get_current_screen()
untuk mengidentifikasi layar pengeditan yang saya gunakan.
Fungsi get_current_screen()
mengembalikan array, yang akan menyertakan jenis posting dari layar saat ini, di antara hal-hal lainnya. Saya dapat menggunakan ini untuk memeriksa apakah jenis posting yang sedang diedit adalah 'post'
.
Di dalam fungsi Anda, di atas konten lainnya, tambahkan yang berikut:
$screen = get_current_screen(); $edit_post_type = $screen->post_type; if ( $edit_post_type != 'post' ) return; ?>
Seluruh fungsi sekarang akan terlihat seperti ini:
// Add fake metabox above editing pane function wptutsplus_text_after_title( $post_type ) { $screen = get_current_screen(); $edit_post_type = $screen->post_type; if ( $edit_post_type != 'post' ) return; ?> <div class="after-title-help postbox"> <h3>Using this screen</h3> <div class="inside"> <p>Use this screen to add new articles or edit existing ones. Make sure you click 'Publish' to publish a new article once you've added it, or 'Update' to save any changes.</p> </div><!-- .inside --> </div><!-- .postbox --> <?php } add_action( 'edit_form_after_title', 'wptutsplus_text_after_title' );
Ini akan memastikan bahwa metabox 'palsu' hanya akan dihasilkan di layar pengeditan Post, dan bukan layar pengeditan untuk jenis posting lainnya. Anda kemudian dapat mengulangi fungsi ini untuk jenis posting yang berbeda (seperti 'page'
dan 'attachment'
, serta jenis posting kustom Anda sendiri), untuk menampilkan teks bantuan yang berbeda bagi mereka.
Ringkasan
Menambahkan teks bantuan ke layar pengeditan individu dapat sangat berguna bagi pengguna yang tidak ingin terus kembali ke dashboard untuk mendapatkan bantuan.
Dalam tutorial ini, Anda telah belajar cara menambahkan metabox untuk teks bantuan pada layar pengeditan, serta cara menggunakan kaitan edit_form_after_title
untuk menambahkan teks bantuan tepat di atas panel pengeditan.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weekly