Menambahkan Bidang Ke Item Menu WordPress – Halaman Pengaturan Plugin

Diterbitkan: 2021-07-08

Saat menggunakan plugin WordPress apa pun, Anda mungkin memperhatikan bahwa pembuatnya telah menyediakan beberapa pengaturan yang dapat Anda gunakan untuk menyesuaikan fungsionalitas plugin. Secara teknis, penulis telah membuat item menu dan halaman pengaturan tempat item menu ini mengarahkan Anda. Pada artikel ini Anda akan melalui langkah-langkah yang harus Anda ikuti untuk melakukan hal yang sama untuk plugin Anda sendiri.

Artikel mengharuskan Anda sudah menerapkan kode yang diberikan dalam contoh di artikel Menambahkan Bidang Ke Item Menu WordPress – Plugin Kustom. Kami akan melanjutkan dari sana dan melihat bagaimana kami dapat membuat plugin kami lebih ramah pengguna dengan menambahkan halaman pengaturannya di area admin sehingga Anda akan mengizinkan pengguna admin untuk mengatur preferensi mereka tentang bagaimana plugin akan beroperasi.

Langkah Awal

Untuk tujuan artikel ini, kami akan membuat menu pengaturan sederhana yang bagus. Seperti yang kita lihat di artikel sebelumnya, dengan menggunakan plugin kami, pengguna admin dapat menambahkan subtitle ke item menu apa pun. Pada langkah selanjutnya, kami akan memberikan opsi agar pengguna dapat memilih jenis elemen HTML yang akan dibungkus dengan bidang subtitle.

Pada titik ini, file PHP utama plugin kami terlihat seperti ini:

 <?php /* Plugin Name: Menu Item Field Creator Description: My custom plugin to create menu item fields */ class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); } public function menu_item_sub( $item_id, $item ) { $menu_item_sub = get_post_meta( $item_id, '_menu_item_sub', true ); ?> <div> <span class="subtitle"><?php _e( 'Subtitle', 'menu-item-sub' ); ?></span><br /> <input type="hidden" class="nav-menu-id" value="<?php echo $item_id; ?>" /> <div class="logged-input-holder"> <input type="text" name="menu_item_sub[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $menu_item_sub ); ?>" /> </div> </div> <?php } public function save_menu_item_sub( $menu_id, $menu_item_db_id ) { if ( isset( $_POST['menu_item_sub'][ $menu_item_db_id ] ) ) { $sanitized_data = sanitize_text_field( $_POST['menu_item_sub'][ $menu_item_db_id ] ); update_post_meta( $menu_item_db_id, '_menu_item_sub', $sanitized_data ); } else { delete_post_meta( $menu_item_db_id, '_menu_item_sub' ); } } public function menu_item_sub_custom_walker( $args ) { if ( class_exists( 'My_Custom_Nav_Walker' ) ) { $args['walker'] = new My_Custom_Nav_Walker(); } else { echo 'DOES NOT EXIST'; } return $args; } } $mycp_menu_item_field_creator = new MyCP_Menu_Item_Field_Creator(); if ( ! class_exists( 'My_Custom_Nav_Walker' ) ) { class My_Custom_Nav_Walker extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth=0, $args=[], $id=0 ) { $menu_item_sub = get_post_meta( $item->ID, '_menu_item_sub', true ); $output .= '<li class="' . implode( ' ', $item->classes ) . '">'; if ( $item->url && $item->url != '#' ) { $output .= '<a href="' . $item->url . '">'; } else { $output .= '<span>'; } $output .= $item->title; if ( $item->url && $item->url != '#' ) { $output .= '</a>'; } else { $output .= '</span>'; } if ( ! empty( $menu_item_sub ) ) { $output .= '<div class="menu-item-sub">' . $menu_item_sub . '</div>'; } } } }

Hal berikutnya yang akan kami lakukan adalah melanjutkan dan membuat item menu untuk halaman pengaturan plugin kami serta contoh sederhana dari apa yang dapat Anda sertakan di halaman pengaturan sebagai konten.

Kita perlu bekerja dengan dua kait WordPress. Pengait admin_menu untuk mendaftarkan item menu admin dan pengait admin_init untuk mendaftarkan opsi plugin nanti ketika kita akan menambahkan halaman pengaturan plugin dengan formulirnya. Tentu saja, kami juga akan memanfaatkan API yang disediakan WordPress dan menggunakan beberapa fungsi bawaan. Mari menyelam lebih dalam.

Buat Item Menu Halaman Opsi

Untuk menambahkan item menu, kita akan menambahkan kait admin_menu yang sesuai di dalam metode __construct() di bawah kait yang saat ini ditambahkan.

 class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); add_action( 'admin_menu', array( $this, 'plugin_settings_menu_page' ) ); } . . .

Kami menggunakan kait admin_menu dan mendefinisikan metode plugin_settings_menu_page() (yang akan kami jelaskan di bawah) untuk menentukan informasi item menu dan halaman pengaturan plugin.

 public function plugin_settings_menu_page() { add_menu_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

Metode ini juga harus diletakkan di dalam Kelas plugin utama. Perhatikan bahwa di dalam metode plugin_settings_menu_page() kami, kami menggunakan fungsi add_menu_page() yang disediakan WordPress. Fungsi ini menerima argumen berikut:

 add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position )

$page_title harus ditentukan dan pada dasarnya ini adalah bagian pertama dari tag judul halaman tempat Anda diarahkan ketika memilih item menu ini.
$menu_title -juga diperlukan- adalah teks yang akan digunakan untuk menu.
$capability adalah kemampuan yang diperlukan agar menu ini dapat ditampilkan oleh pengguna. Dalam kasus kami, kami memilih izin manage_options karena hanya diberikan kepada Pengguna Super dan Administrator. Jika Anda ingin memahami peran atau kemampuan mana yang sesuai dengan kebutuhan Anda, Anda dapat berkonsultasi dengan dokumentasi resmi terkait.
$menu_slug juga diperlukan dan harus unik. Ini adalah nama siput untuk merujuk ke menu ini. Jangan lupa bahwa Anda hanya boleh menggunakan karakter alfanumerik huruf kecil, tanda hubung, dan garis bawah yang kompatibel dengan sanitize_key() .
$icon_url adalah argumen opsional dan merupakan URL yang menautkan ke file ikon yang akan digunakan untuk item menu.
Argumen $function adalah tempat Anda mendefinisikan fungsi callback yang akan membuat konten halaman pengaturan. Dalam kasus kami, ini adalah plugin_settings_page_content() , yang belum memiliki fungsionalitas. Kami menambahkannya ke kode kami menggunakan metode plugin_settings_menu_page() .

 public function plugin_settings_page_content() { $html = "<p>Test content for our custom plugin</p>"; echo $html; }

Pada titik ini Anda akan melihat item menu “Pencipta Bidang Item Menu” dan halaman konten menguji konten dan mengenali URL menu yang Anda tetapkan dalam argumen.

Kami juga ingin mencatat bahwa jika Anda ingin menyertakan opsi plugin Anda di bawah menu Pengaturan bawaan dan bukan sebagai item menu tingkat atas yang terpisah, Anda dapat dengan mudah melakukannya dengan menggunakan fungsi add_options_page() sebagai gantinya. Dalam hal ini Anda harus mengganti ini:

 public function plugin_settings_menu_page() { add_menu_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

dengan ini:

 public function plugin_settings_menu_page() { add_options_page( __( 'Page Title Attribute Text', 'oop-menu-item-sub' ), __( 'Menu Item Field Creator', 'oop-menu-item-sub' ), 'manage_options', 'menu-item-field-creator', array( $this, 'plugin_settings_page_content' ) ); }

Ini akan menghasilkan lokasi menu di sini:

Di bagian berikutnya, kami akan menempatkan beberapa konten sederhana di halaman pengaturan yang dapat digunakan pengguna admin untuk mengatur perilaku plugin.

Tambahkan Fungsionalitas ke Halaman Pengaturan Kami

Apa yang telah kami lakukan sejauh ini adalah menambahkan item menu kami dan menentukan fungsi yang akan menampilkan halaman konten pengaturan. Jika kita menginginkan fungsionalitas di halaman pengaturan kita, kita harus mendaftarkan beberapa bidang dan kemudian menampilkannya di halaman pengaturan plugin. Sebagai contoh, kami akan membuat formulir di mana pengguna dapat menentukan jenis elemen HTML untuk membungkus bidang subtitle.

Hasil

Ganti kode plugin_settings_page_content dengan ini:

 public function plugin_settings_page_content() { ?> <form action="options.php" method="post"> <?php do_settings_sections( 'options_page' ); settings_fields( 'option_group' ); submit_button( __( 'Save Subtitle', 'oop-menu-item-sub' ) ); ?> </form> <?php }

Di baris ini kita menggunakan fungsi do_settings_sections() dan settings_fields() . do_settings_sections() akan mencetak semua bagian pengaturan dan bidang yang terdaftar. Dia settings_fields() akan menampilkan bidang input tersembunyi nonce, action, dan option_page untuk halaman pengaturan.

Sekarang mari kita lanjutkan dan daftarkan pengaturan kita.

Daftarkan Pengaturan Anda

Untuk mendaftarkan bidang yang diperlukan, kita akan menggunakan hook admin_init yang diaktifkan saat layar admin sedang diinisialisasi.

 class MyCP_Menu_Item_Field_Creator { public function __construct() { add_action( 'wp_nav_menu_item_custom_fields', array( $this, 'menu_item_sub' ), 10, 2 ); add_action( 'wp_update_nav_menu_item', array( $this, 'save_menu_item_sub' ), 10, 2 ); add_filter( 'wp_nav_menu_args', array( $this, 'menu_item_sub_custom_walker' ) ); add_action( 'admin_menu', array( $this, 'plugin_settings_menu_page' ) ); add_action( 'admin_init', array( $this, 'plugin_register_settings' ) ); } . . .

Kami akan memasukkan metode plugin_register_settings() di dalam kelas kami seperti ini:

 public function plugin_register_settings() { register_setting( 'option_group', 'option_name' ); add_settings_section( 'section_id', __( 'Settings Page Title', 'oop-menu-item-sub' ), array( $this, 'render_section' ), 'options_page' ); add_settings_field( 'html_element', __( 'Choose HTML Element:', 'oop-menu-item-sub' ), array( $this, 'render_field' ), 'options_page', 'section_id' ); }

Sekarang mari kita mundur dan melihat kembali apa yang telah kita lakukan sejauh ini.

Untuk mendaftarkan pengaturan dan datanya, kami menggunakan fungsi register_setting () yang menurut dokumentasi terstruktur seperti ini:

 register_setting( $option_group, $option_name, $args )

$option_group adalah parameter yang diperlukan dan harus cocok dengan nama grup yang digunakan di settings_fields() .
$option_name juga diperlukan dan merupakan nama opsi yang akan dibersihkan dan disimpan. Ini adalah nilai di bawah kolom option_name di tabel database opsi.
$args tidak diperlukan di sini. Ini adalah larik data opsional yang menjelaskan pengaturan saat didaftarkan. Apa yang dapat Anda tentukan di sini adalah jenis, deskripsi, fungsi sanitize_callback() untuk nilai opsi, opsi “ show_in_rest ” yang menentukan apakah data saat ini harus disertakan dalam REST API dan opsi default tempat Anda dapat menentukan nilai default saat memanggil get_option() .
Kami juga memperkenalkan fungsi add_settings_section() dan add_settings_field() yang akan membantu kami menyelesaikan langkah ini.
Fungsi add_settings_section() digunakan untuk mendaftarkan bagian dengan nama siput tertentu dengan WordPress. Di sini, $id adalah slug-name untuk mengidentifikasi bagian dan digunakan dalam atribut 'id' dari tag.

 add_settings_section( $id, $title, $callback, $page )

$title adalah judul bagian yang diformat yang akan ditampilkan sebagai judul bagian, $callback adalah fungsi yang akan menggemakan konten di bagian atas bagian dan $page adalah nama slug dari halaman yang seharusnya cocok dengan argumen $page dari do_settings_sections() , yang dalam kasus kami adalah "options_page".

Semua parameter di atas diperlukan.

Fungsi add_settings_field () yang disediakan WordPress memungkinkan Anda menambahkan bidang baru ke bagian.

 add_settings_field( $id, $title, $callback, $page, $section, $args )

$id , $title , $callback dan $page digunakan seperti yang dijelaskan sebelumnya. $section adalah nama-slug dari bagian halaman pengaturan untuk menampilkan kotak dan $args digunakan saat mengeluarkan bidang. $section dan $args keduanya opsional.

Untuk tujuan artikel ini, kami tidak akan memperkenalkan fungsi tambahan untuk membersihkan nilai-nilai kami. Namun kami akan mencatat bahwa sangat disarankan agar Anda selalu membersihkan bidang formulir Anda.

Sekarang kita memiliki dua metode publik yang perlu diperkenalkan, render_section() dan render_field() .

Untuk metode render_section() kami hanya akan menampilkan heading untuk bagian kami:

 public function render_section() { ?> <h2><?php _e( 'Section #1', 'oop-menu-item-sub' ); ?></h2> <?php }

Untuk metode render_field() kami akan menampilkan 3 tombol radio dengan pilihan kami untuk elemen HTML:

 public function render_field() { $stored_option = get_option( 'option_name' )['html_element']; ?> <input type="radio" name="option_name[html_element]" value="div" <?php checked( $stored_option, 'div' ); ?> /> div <input type="radio" name="option_name[html_element]" value="p" <?php checked( $stored_option, 'p' ); ?> /> p <input type="radio" name="option_name[html_element]" value="span" <?php checked( $stored_option, 'span' ); ?> /> span <?php }

Ini akan menjadi hasil yang Anda lihat sekarang:

Jika Anda memilih elemen lain, seperti span misalnya, dan menyimpan, itu juga harus berfungsi dengan benar.

Mencerminkan Perubahan Halaman Opsi di Situs Web Anda

Langkah terakhir yang tersisa untuk dijelaskan adalah bagaimana menerapkan elemen HTML yang akan dipilih pengguna admin ke elemen subtitle di bawah item menu di ujung depan situs web.

Langkah ini sangat sederhana karena satu-satunya yang kita butuhkan adalah mengambil bidang yang dipilih dari tabel opsi database dan memodifikasi Kelas “ My_Custom_Nav_Walker ” dalam kode kita. Secara khusus, kita harus mengganti bagian kode tempat kita menambahkan entri menu_item_sub ke variabel $output .

 $output .= '<div class="menu-item-sub">' . $menu_item_sub . '</div>';

Pertama-tama kita akan mendapatkan elemen dengan get_option( 'option_name' )['html_element']; dan simpan dalam variabel $stored_option dan kemudian terapkan ke baris di atas. Kelas terakhir akan terlihat seperti ini:

 if ( ! class_exists( 'My_Custom_Nav_Walker' ) ) { class My_Custom_Nav_Walker extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth=0, $args=[], $id=0 ) { $menu_item_sub = get_post_meta( $item->ID, '_menu_item_sub', true ); $output .= '<li class="' . implode( ' ', $item->classes ) . '">'; if ( $item->url && $item->url != '#' ) { $output .= '<a href="' . $item->url . '">'; } else { $output .= '<span>'; } $output .= $item->title; if ( $item->url && $item->url != '#' ) { $output .= '</a>'; } else { $output .= '</span>'; } $stored_option = get_option( 'option_name' )['html_element']; if ( ! empty( $menu_item_sub ) ) { $output .= '<'. $stored_option .' class="menu-item-sub">' . $menu_item_sub . '</'. $stored_option .'>'; } } } }

Terkadang membantu untuk memvisualisasikan bagaimana fungsi WordPress bekerja saat membangun halaman pengaturan sambil melihat kode plugin kami. Berikut adalah tampilannya dalam contoh kita:

Kesimpulan

Seperti yang mudah-mudahan Anda sadari, WP Settings API adalah alat utama di sini yang memungkinkan kami membuat tulang untuk halaman opsi plugin kami. Selain itu, itu adalah pilihan Anda untuk memutuskan apakah Anda akan menggunakan pendekatan yang lebih Berorientasi Objek dengan Kelas atau menggunakan rute yang lebih sederhana di mana Anda hanya menempelkan fungsi dan kait di file PHP plugin utama.

Mari kita tunjukkan di sini bahwa rute yang kita ikuti untuk merekonstruksi plugin tidak benar-benar OOP tapi pasti bergerak ke arah itu. Dalam rangkaian artikel mendatang tentang OOP, kami akan menggali lebih dalam fitur-fitur lain yang dapat meningkatkan manajemen plugin kami.

Membuat halaman pengaturan untuk plugin khusus kami mungkin sedikit membingungkan, tetapi semoga setelah membaca artikel ini, Anda memahami apa yang diperlukan. Selamat mengkode!