Cara Membuat Halaman Pengaturan di WordPress

Jika Anda membuat plugin WordPress, Anda mungkin bertanya-tanya bagaimana cara membuat halaman pengaturan untuk itu. Apakah WordPress menawarkan semacam mekanisme "standar" untuk ini? Apakah ada alat atau kerangka kerja baru untuk membuat halaman pengaturan modern? Apakah ide yang baik untuk membuat halaman pengaturan? Nah, hari ini kita akan membicarakan semua ini dan saya akan menjawab pertanyaan Anda.

Keputusan, bukan Pilihan

WordPress adalah platform yang bertujuan untuk mendemokratisasikan web. Pernyataan ini, yang terdengar sangat bagus tetapi pada saat yang sama sangat abstrak, adalah cara untuk mengatakan "kami ingin siapa pun dapat menggunakan WordPress." Dan, percaya atau tidak, halaman pengaturan dapat, dan pada kenyataannya dalam banyak kasus, merupakan penghalang untuk itu. Tidak percaya padaku? Nah, WordPress sendiri mengatakannya:

Saat membuat keputusan, ini adalah pengguna yang kami pertimbangkan terlebih dahulu. Contoh yang bagus dari pertimbangan ini adalah opsi perangkat lunak. Setiap kali Anda memberi pengguna pilihan, Anda meminta mereka untuk membuat keputusan. Ketika pengguna tidak peduli atau memahami opsi ini pada akhirnya menyebabkan frustrasi. Sebagai pengembang, terkadang kami merasa bahwa memberikan opsi untuk semuanya adalah hal yang baik, Anda tidak akan pernah memiliki terlalu banyak pilihan, bukan? Pada akhirnya, pilihan ini akhirnya menjadi pilihan teknis, pilihan yang tidak diminati oleh pengguna akhir rata-rata. Adalah tugas kita sebagai pengembang untuk membuat keputusan desain yang cerdas dan menghindari membebani pilihan teknis pada pengguna akhir kita.

Filosofi WordPress

Jadi sebelum membuat halaman pengaturan, pikirkan baik-baik tentang opsi yang ingin Anda berikan kepada pengguna Anda, mengapa Anda ingin mereka memiliki akses ke opsi tersebut, dan apakah perlu atau berguna untuk melakukannya.

Filter sebagai Alternatif

Bahkan jika saya tahu saya tidak seharusnya menawarkan terlalu banyak opsi kepada pengguna saya, saya harus mengakui bahwa, sebagai pengembang, tidak selalu mudah bagi saya untuk membuat keputusan alih-alih menawarkan opsi. Ada kalanya saya ingin pengguna saya memiliki kemampuan untuk memilih , meskipun saya sadar bahwa opsi yang saya paparkan rumit. Jadi apa yang harus saya lakukan dalam kasus ini? Apakah saya mengikuti rekomendasi WordPress dan membatasi pengguna tingkat lanjut saya?

Untungnya, WordPress menawarkan solusi sempurna untuk dilema ini: filter . Saat Anda mendesain plugin dan ingin pengguna (lanjutan) Anda dapat menyesuaikan perilakunya, jangan buat halaman pengaturan atau semacamnya. Alih-alih, buat plugin Anda dapat disesuaikan melalui mekanisme penyaringan WordPress.

Jika Anda menggunakan filter, sebagian besar pengguna Anda akan menikmati perilaku default (“keputusan,” ingat?), karena mereka akan menggunakan plugin dengan nilai default yang ditetapkan di filter Anda, sementara pengguna tingkat lanjut akan memiliki kemampuan untuk mengubah ini keputusan melalui kait (dan Anda juga memiliki "opsi"). Terbaik dari kedua dunia!

Pengaturan WordPress

Ok, sekarang kita menyadari pentingnya membuat keputusan bagi pengguna kita dan telah melihat bagaimana melewati batasan ini (jika perlu) melalui filter, saatnya untuk melihat bagaimana kita dapat membuat halaman pengaturan di WordPress. Cuz, yup: ada kalanya kita benar-benar perlu memberikan pilihan kepada pengguna kita untuk membuat keputusan sesuai dengan preferensi mereka.

Pengaturan API di WordPress

Pengaturan API telah ditambahkan di WordPress versi 2.7. Ini adalah serangkaian fungsi yang menstandardisasi pembuatan halaman pengaturan, memungkinkan Anda untuk menentukan opsi mana yang tersedia, antarmuka pengguna apa yang akan digunakan untuk mengedit setiap opsi tersebut (pada dasarnya, bidang pada formulir), dan cara memvalidasi, menyimpan , dan mengambil nilainya.

Saya pikir cara terbaik untuk belajar adalah melalui contoh, jadi mari kita buat halaman pengaturan pertama kita menggunakan API pengaturan langkah demi langkah.

Membuat Halaman Pengaturan baru

Hal pertama yang perlu Anda lakukan untuk membuat halaman pengaturan adalah (kejutan, kejutan!) untuk membuat halaman untuk menampilkan pengaturan. Untuk melakukan ini, cukup gunakan fungsi add_options_page selama tindakan admin_menu dan daftarkan halaman:

 function nelio_add_settings_page() { add_options_page( 'Nelio Plugin Settings', 'Nelio', 'manage_options', 'nelio-example-plugin', 'nelio_render_settings_page' ); } add_action( 'admin_menu', 'nelio_add_settings_page' );

Seperti yang Anda lihat, satu-satunya hal yang kami lakukan dengan fungsi ini adalah mendaftarkan halaman baru yang akan muncul di bawah menu Pengaturan WordPress, dengan judulnya, nama di menu, izin yang harus dimiliki pengguna untuk dapat mengaksesnya , dan os aktif. Argumen terakhir, nelio_render_settings_page , adalah nama fungsi yang akan bertanggung jawab untuk merender halaman tersebut:

 <?php function nelio_render_settings_page() { ?> <h2>Nelio Plugin Settings</h2> <form action="options.php" method="post"> <?php settings_fields( 'nelio_example_plugin_settings' ); do_settings_sections( 'nelio_example_plugin' ); ?> <input type="submit" name="submit" class="button button-primary" value="<?php esc_attr_e( 'Save' ); ?>" /> </form> <?php }

Halaman pengaturan itu sendiri relatif mudah dibuat. Kita hanya perlu menambahkan form yang isinya akan dibuat semi-otomatis oleh WordPress. Di satu sisi, kami memanggil fungsi settings_fields , yang pada dasarnya menambahkan nonce dalam formulir untuk membuatnya "aman." Selanjutnya, kami meminta WordPress untuk merender semua pengaturan yang telah kami buat untuk plugin kami menggunakan fungsi do_settings_sections . Dan, akhirnya, kita cukup menambahkan tombol Kirim formulir.

Pengaturan Sebenarnya di Halaman Pengaturan kami

Selanjutnya, kita harus mendaftarkan setiap opsi yang akan menjadi bagian dari halaman pengaturan kita. Untuk melakukan ini, kita akan menggunakan dua fungsi: register_setting , yang memungkinkan kita untuk menunjukkan nama yang akan kita gunakan untuk menyimpan pengaturan dalam database, dan add_settings_field , yang menambahkan setiap opsi individual:

 function nelio_register_settings() { register_setting( 'nelio_example_plugin_settings', 'nelio_example_plugin_settings', 'nelio_validate_example_plugin_settings' ); add_settings_section( 'section_one', 'Section One', 'nelio_section_one_text', 'nelio_example_plugin' ); add_settings_field( 'some_text_field', 'Some Text Field', 'nelio_render_some_text_field', 'nelio_example_plugin', 'section_one' ); add_settings_field( 'another_number_field', 'Another Number Field', 'nelio_render_another_number_field', 'nelio_example_plugin', 'section_one' ); } add_action( 'admin_init', 'nelio_register_settings' );

Cuplikan kode sebelumnya memiliki beberapa hal yang perlu mendapat perhatian khusus. Di satu sisi, perhatikan bahwa fungsi register_setting memiliki argumen ketiganya: nelio_validate_example_plugin_settings . Ini adalah nama fungsi panggilan balik yang akan dipanggil untuk memvalidasi nilai yang telah dipilih pengguna (ingat bahwa Anda harus selalu memvalidasi dan membersihkan bidang formulir Anda). Fungsi ini kira-kira seperti ini:

 function nelio_validate_example_plugin_settings( $input ) { $output['some_text_field'] = sanitize_text_field( $input['some_text_field'] ); $output['another_number_field'] = absint( $input['another_number_field'] ); // ... return $output; }

di mana kami mengambil setiap bidang yang dikirimkan dari $input dan kami membersihkannya menjadi $output sehingga kami tahu dengan pasti bahwa, apa pun yang kami simpan di database, adalah valid dan benar.

Hal kedua yang ingin saya fokuskan adalah fakta bahwa setiap bidang yang kami definisikan juga menyertakan referensi fungsi yang memberi tahu WordPress bagaimana setiap bidang harus dirender. Misalnya, panggilan balik bidang dalam contoh kita mungkin seperti ini:

 function nelio_section_one_text() { echo '<p>This is the first (and only) section in my settings.</p>'; } function nelio_render_some_text_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="text" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[some_text_field]' ), esc_attr( $options['some_text_field'] ) ); } function nelio_render_another_number_field() { $options = get_option( 'nelio_example_plugin_settings' ); printf( '<input type="number" name="%s" value="%s" />', esc_attr( 'nelio_example_plugin_settings[another_number_field]' ), esc_attr( $options['another_number_field'] ) ); }

Intinya, semua panggilan balik ini lakukan adalah mengambil nilai saat ini dari bidang yang seharusnya mereka render (dengan get_option ) dan merender HTML yang akan memungkinkan pengguna untuk menetapkan satu nilai atau yang lain (dalam contoh ini, bidang input dari ketik text atau number ).

Apa hasil akhirnya, Anda bertanya? Ini:

Pikiran Akhir

Seperti yang Anda lihat, membuat halaman pengaturan relatif sederhana. Saya pribadi tidak terlalu menyukai keseluruhan proses, karena cukup berulang dan kita harus menulis berulang-ulang kode boilerplate yang sama… tapi tetap saja mudah.

Untuk lebih menyederhanakan proses ini, ada beberapa pembuat kode online yang dengannya, melalui antarmuka pengguna yang sederhana, Anda dapat menentukan berbagai bidang yang Anda inginkan pada halaman pengaturan Anda. Beberapa contohnya adalah:

• API Pengaturan WP
• Generator Halaman Opsi WordPress

Dan, tentu saja, selalu ada kemungkinan untuk membuat halaman pengaturan menggunakan teknologi seperti React… tetapi ini adalah cerita untuk waktu yang berbeda, bukan begitu?

Gambar unggulan oleh Rima Kruciene di Unsplash.