Membuat Halaman Administrasi WordPress Kustom, Bagian 2

Pada tutorial sebelumnya di serial ini, kita mulai mengerjakan halaman administrasi kustom kita.
Pada akhirnya, tujuan yang akan kita hadapi akan menunjukkan bagaimana kita dapat menggunakan kode kustom kita sendiri dan juga WordPress API untuk membuat halaman yang sedikit lebih fleksibel daripada yang tersedia secara alami melalui salah satu API standar.
Ini bukan untuk mengatakan bahwa kita harus menyingkir atau menghindari API yang disediakan oleh WordPress. Sebenarnya, saya penggemar dalam menggunakan mereka sebanyak mungkin. Tapi ketika sebuah proyek muncul di mana Anda perlu memperkenalkan fungsionalitas tambahan atau menyesuaikan cara melakukan sesuatu, maka pengembangan fungsionalitas tersebut akan diserahkan kepada Anda.
Kedua, kita juga menggunakan prinsip-prinsip seperti prinsip tanggung jawab tunggal untuk menunjukkan bagaimana kita dapat memberi tahu pendekatan terorganisasi dengan baik dan berorientasi objek terhadap kode yang sedang kita tulis.
Sebelum melangkah lebih jauh, mari kita tinjau kembali apa yang telah kita bahas sejauh ini.

Untuk Posting Pertama...

Ingatlah bahwa kami memberikan definisi kerja tentang prinsip tanggung jawab tunggal:

Mengumpulkan hal-hal yang berubah karena alasan yang sama. Pisahkan hal-hal yang berubah karena berbagai alasan.

Dan kami menggunakannya untuk membantu membimbing organisasi dari pembuatan submenu dan halaman submenu kita saat ini.
Kami juga melihat kode untuk plugin versi pertama, membuatnya tersedia untuk diunduh, dan meletakkan dasar bagi pekerjaan yang akan kita lakukan dalam tutorial ini.
Jika Anda belum meninjau tutorial sebelumnya atau setidaknya meninjau kodenya, saya sangat menyarankan untuk melakukannya; jika tidak, Anda mungkin akan bertanya-tanya mengapa kita membuat beberapa keputusan yang sedang kita buat atau mengapa beberapa kode diatur seperti itu.
Dengan itu, mari kita melanjutkan.

Sebelum Kita Mulai

Seperti banyak tutorial saya, saya ingin memastikan bahwa Anda memiliki segalanya bersiap dan berjalan sebelum kita melanjutkan. Untuk tutorial ini, Anda memerlukan yang berikut ini:

• lingkungan pengembangan lokal
• salinan WordPress yang terinstal dan siap untuk digunakan
• salinan plugin kami dari tutorial sebelumnya yang terpasang dan diaktifkan
• IDE dengan plugin yang dimuat dan siap untuk pengeditan tambahan

Jika hal di atas tidak masuk akal, tinjau tutorial sebelumnya atau serial ini untuk cara menyiapkan lingkungan pengembangan lokal.
Sedangkan untuk kode yang akan datang, kita akan berjalan melewatinya selangkah demi selangkah. Saya akan menjelaskan dengan tepat apa yang kita lakukan dan akan memberikan komentar kode dan komentar pada tutorial untuk memastikan Anda memahami semua hal yang terjadi di sepanjang jalan.

Membuat Halaman Administrasi

Saat kita melanjutkan dengan plugin di artikel ini, inilah yang akan kita lakukan:

1. Membuat markup untuk halaman administrasi yang mewarisi gaya asli WordPress.
2. Memperkenalkan opsi dimana pengguna dapat berinteraksi.
3. Sanitasi pilihannya sebelum menyimpannya.
4. Mengambil nilai opsi dan menetapkan nilainya sama dengan nilai pada halaman.

Dalam tutorial ini, kita akan fokus pada dua poin berikutnya. Pada artikel berikutnya, kita akan fokus pada poin tiga dan empat.
Bagi yang akrab dengan Settings API, ini sepertinya berlebihan. Tapi seperti yang akan Anda lihat melalui sisa tutorial ini dan serial ini, ada alasan mengapa kita akan memecahnya menjadi potongan-potongan yang lebih kecil seperti ini.
Dengan itu disusun sebagai rencana tindakan kita, mari kita mulai.

Mark Up Halaman

Saat terakhir kita meninggalkan fungsi khusus ini, kodenya terlihat seperti ini:

01    02 03 04 05 06 07 08 09 10 11 12

<?php                                       class Submenu_Page {                             /**                            * This function renders the contents of the page associated with the Submenu                         * that invokes the render method. In the context of this plugin, this is the                              * Submenu class.                            */                           public function render() {                               echo 'This is the basic submenu page.';                      }                }

Sekarang kita siap untuk benar-benar mulai membuat tata letak halaman. Setiap kali saya mengerjakan plugin untuk klien, saya menyebut ini "views".
Ini tidak dimaksudkan untuk menjadi bingung dengan paradigma model-view-controller. Tapi saya tidak menyebut mereka template baik karena di WordPress, template adalah apa yang digunakan untuk menampilkan isi halaman di front-end.
Jadi itulah views.
Hal pertama yang ingin kita lakukan adalah membuat direktori views di dalam direktori admin plugin kita.

Setelah itu selesai, kita bisa menamai ini sesederhana settings.php atau sesuatu yang lebih deskriptif. Ini benar-benar terserah Anda dan kompleksitas dari apa yang Anda bangun. Karena ini adalah plugin sederhana, saya tetap dengan nama yang sederhana.
Selanjutnya, mari mulai membuat markup dasar yang akan menyediakan unsur pembungkus WordPress standar beserta judul halamannya:

1    2 3 4 5 6 7 8

<div class="wrap">                                        <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>     <form method="post" action="<?php echo esc_html( admin_url( 'admin-post.php' ) ); ?>">                                </form>                              </div><!-- .wrap -->

Perhatikan di sini bahwa judul diturunkan dari fungsi yang menggunakan nilai yang disampaikan ke fungsi add_options_page dari saat kami pertama kali mulai mengerjakan plugin. Selanjutnya, kita juga menggunakan fungsi admin_url untuk menunjukkan di mana kita akan memposting pilihan (yang akan kita bicarakan nanti).
Dan dalam kedua kasus tersebut, kita menggunakan fungsi sanitasi esc_html untuk memastikan tidak ada string berbahaya yang dapat ditampilkan pada halaman.
Ada dua contoh, jika mungkin, menggunakan fungsi API apa pun yang tersedia untuk tujuan yang telah ditentukan. Dengan asumsi semua telah berjalan dengan benar, halaman Anda akan terlihat seperti ini:
Sekarang, untuk menghubungkan ini ke plugin Anda, kita perlu meninjau kembali fungsinya dari atas. Ini berarti fungsi sekarang seharusnya terlihat seperti ini:

1 2 3 4	<?php                          public function render() {     include_once( 'views/settings.php' );   }

Cukup mudah kan? Dengan asumsi semuanya sudah diatur dengan benar, inilah yang seharusnya Anda lihat:

Tidak, itu tidak banyak yang bisa dilihat, tapi kita akan mengubahnya.

Menambahkan Opsi

Pada titik ini, kita siap menambahkan opsi. Untuk keperluan posting ini, kita akan membiarkan pengguna memasukkan sesuatu ke elemen input teks. Ini akan memungkinkan kita untuk melihat bagaimana cara membersihkan informasi dan akhirnya menunjukkannya di front-end.
Untuk melakukan ini, kita perlu mendapatkan bagian penting dari informasi. Yaitu kita perlu tahu atribut nama yang akan kita panggil elemen input. Ini agar kita bisa menyimpannya ke database dengan benar.
Jadi, untuk keperluan contoh ini, katakanlah pesan ini akan digunakan untuk menampilkan tanpa syarat di bagian atas setiap posting. Kita tidak akan sampai ke pokok permasalahan dalam artikel ini, tapi kita akan meninjau kembali artikel berikutnya.
Di tampilan settings.php Anda, tambahkan kode berikut.

01 02 03 04 05 06   07 08 09 10 11 12 13 14 15 16 17 18 19

<div class="wrap">             <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>                           <form method="post" action="<?php echo esc_html( admin_url( 'admin-post.php' ) )    ; ?>">                     <div id="universal-message-container">             <h2>Universal Message</h2>                                             <div class="options">                 <p>                     <label>What message would you like to display above each post?</label>                      <br />                                                  <input type="text" name="acme-message" value="" />                 </p>                                             </div><!-- #universal-message-container -->                     </form>                                                         </div><!-- .wrap -->

Jika Anda melihat halaman pada saat ini, Anda harus melihat dengan tepat apa yang Anda harapkan: label dan sebuah kotak masukan.

Mengamankan Opsinya

Biasanya saya akan menampilkan screenshot di sini, tapi kita belum selesai. Kita perlu mengenalkan dua hal lagi.

1. Sebuah nonce WordPress
2. Tombol submit

Mari kita lakukan sekarang juga. Jika Anda tidak terbiasa dengan nilai nonce, sebaiknya baca artikel ini. Singkatnya begini:

Nonce adalah "nomor yang digunakan satu kali" untuk membantu melindungi URL dan form dari jenis penyalahgunaan tertentu, berbahaya atau sebaliknya.

Di file settings.php kita, mari menambahkan blok kode berikut ini:

1 2 3 4

<?php                                                                 wp_nonce_field( 'acme-settings-save', 'acme-custom-message' );     submit_button();                                               ?>

Akhirnya, versi terakhir kode kita akan terlihat seperti ini:

01 02 03 04 05 06 07 08 09 10 11 12 13 14   15 16 17 18 19 20 21 22 23 24 25

<div class="wrap">     <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>     <form method="post" action="<?php echo esc_html( admin_url( 'admin-post.php' ) ); ?>">         <div id="universal-message-container">                                           <h2>Universal Message</h2>                                                                                                                                                                                                          <div class="options">                                                            <p>                                                                              <label>What message would you like to display above each post?</label>                                                                                   <br />                                                                      <input type="text" name="acme-message" value="" />                        </p>                                                            </div><!-- #universal-message-container -->                                                                                                                                                             <?php                                                       wp_nonce_field( 'acme-settings-save', 'acme-custom-message' );             submit_button();                                                ?>                                                      </form>                                 </div><!-- .wrap -->

Dan versi terakhir dari halaman akan terlihat seperti ini:

Pada titik ini, kita siap untuk menyimpan pilihan. Sekarang untuk melakukan ini, kita perlu memverifikasi beberapa hal:

1. Apakah pengguna memiliki izin untuk menyimpan opsi?
2. Apakah ada nonce yang tidak sah yang disampaikan dari form?

Selanjutnya, kita perlu:

1. Melakukan sanitasi informasi untuk memastikan tidak ada data berbahaya masuk ke database.
2. Kita harus bisa menarik informasi ini dari database dan mengisinya dalam form.

Dan terakhir, kita perlu menampilkannya di front-end dari website.