Panduan Utama untuk Membangun Plugin WordPress

Diterbitkan: 2022-03-11

Plugin adalah bagian penting dari situs WordPress yang membutuhkan fungsionalitas khusus.

Meskipun repositori WordPress resmi memiliki lebih dari 45.000 plugin untuk Anda pilih, banyak dari plugin ini yang meleset dari sasaran.

Hanya karena sebuah plugin ada di dalam repositori tidak berarti plugin itu tidak akan menghalangi kinerjanya atau membahayakan keamanannya.

Jadi apa yang bisa Anda lakukan? Nah, Anda bisa membangunnya sendiri.

Panduan Utama untuk Membangun Plugin WordPress

Membangun plugin WordPress yang hebat dimulai dengan perencanaan yang matang.

Baik Anda membangunnya dari awal, atau berdasarkan boilerplate, mengikuti praktik terbaik yang terdokumentasi dengan baik sangat penting.

Dalam tutorial ini, Anda akan belajar cara membuat plugin WordPress sederhana dengan cara yang benar.

Jika Anda ingin meninjau kode sumber terakhir saat Anda membaca, Anda dapat menemukannya di sini.

Mulailah dengan sebuah rencana.

Pertama, mari kita daftar fitur-fitur yang akan dimiliki plugin kita dan menguraikan dengan tepat apa yang perlu dilakukan.

Plugin yang kami buat akan memungkinkan pengunjung situs menyimpan konten untuk dibaca nanti.

Untuk pengguna terdaftar, kami akan menyimpan daftar dalam database, dan untuk pengguna anonim, kami akan menyimpan daftar menggunakan cookie.

Di bawah ini adalah garis besar fitur dan fungsionalitas yang akan disediakan oleh plugin kami.

Layar Pengaturan

  • Kemampuan admin untuk menambahkan tombol “Simpan Item” di akhir konten.
  • Kemampuan untuk memilih jenis posting di mana kita ingin tombol ini ditambahkan.
  • Tawarkan opsi kepada pengguna untuk memutuskan apakah mereka ingin menggunakan gaya standar kami atau tidak
  • Berikan opsi untuk mengaktifkan fungsionalitas hanya untuk pengguna yang masuk.
  • Berikan opsi untuk mengubah pesan yang muncul di bagian plugin yang menghadap pengunjung.

Menyimpan Konten

  • Jika pengguna masuk, simpan konten ke bidang pengguna khusus
  • Jika pengguna tidak masuk, simpan konten ke cookie

Pesan

Pesan di bawah ini akan muncul di layar sebagai tanggapan atas interaksi pengunjung dengan plugin atau sebagai label pada item yang dapat ditindaklanjuti:

  • “Simpan barang.”
  • “Batalkan penyimpanan item.”
  • "Diselamatkan. Lihat item yang disimpan.”
  • "Anda tidak memiliki item yang disimpan."

Layar Tersimpan

Di sinilah pengunjung melihat daftar posting yang mereka simpan.

  • Tampilkan daftar item yang disimpan
  • Buat halaman Tersimpan saat aktivasi plugin
  • Hapus halaman Tersimpan saat menonaktifkan plugin

Kode pendek

Dengan kode pendek, halaman Tersimpan dapat dirender di mana pun itu ditambahkan.

Gunakan pelat ketel.

Ini adalah boilerplate terbaik yang saya temukan. Ini terstruktur dengan baik, berorientasi objek, dan efisien. Ini mengikuti setiap praktik terbaik. Dan itu cepat dan ringan.

Anda dapat menggunakan halaman ini untuk menghasilkan basis kode plugin berdasarkan Boilerplate Plugin WordPress ini:

Papan ketel Wordpress

Anda harus mendapatkan file .zip .

Ekstrak, dan letakkan di folder instalasi WordPress Anda: wp-content/plugins/ .

Jika Anda membuka Dasbor WordPress Anda, dan pergi ke plugin, Anda akan melihat bahwa plugin Anda terdaftar di sana. Jangan aktifkan dulu.

Menangani aktivasi dan deaktivasi.

Penting bagi plugin kami untuk menangani aktivasi dan penonaktifan dengan benar.

Saat plugin kami diaktifkan, kami akan membuat halaman bernama "Tersimpan," yang akan menyimpan item yang disimpan pengguna di dalamnya.

Saat membuat halaman itu, kami akan menambahkan kode pendek untuk item yang kami simpan ke dalam konten halaman itu.

Pada akhirnya, kita akan menyimpan halaman; dapatkan ID-nya; dan menyimpannya di database, sehingga kami dapat mengaksesnya nanti saat plugin dinonaktifkan.

Saat plugin kami dinonaktifkan, kami akan mendapatkan ID halaman "Tersimpan" dari database, dan kemudian menghapus halaman "Tersimpan", menghapus jejak plugin itu sendiri.

Kita bisa melakukan semua ini di include/class-toptal-save-activator.php dan include/class-toptal-save-deactivator.php .

Mari kita mulai dengan proses aktivasi:

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Activator { /** * On activation create a page and remember it. * * Create a page named "Saved", add a shortcode that will show the saved items * and remember page id in our database. * * @since 1.0.0 */ public static function activate() { // Saved Page Arguments $saved_page_args = array( 'post_title' => __( 'Saved', 'toptal-save' ), 'post_content' => '[toptal-saved]', 'post_status' => 'publish', 'post_type' => 'page' ); // Insert the page and get its id. $saved_page_id = wp_insert_post( $saved_page_args ); // Save page id to the database. add_option( 'toptal_save_saved_page_id', $saved_page_id ); } }

Fungsi activate() dipanggil saat plugin diaktifkan.

Itu membuat halaman baru menggunakan fungsi wp_insert_post() dan menyimpan ID halaman ke database menggunakan add_option() .

Sekarang, mari kita lanjutkan dengan penonaktifan plugin.

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Deactivator { /** * On deactivation delete the "Saved" page. * * Get the "Saved" page id, check if it exists and delete the page that has that id. * * @since 1.0.0 */ public static function deactivate() { // Get Saved page id. $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Check if the saved page id exists. if ( $saved_page_id ) { // Delete saved page. wp_delete_post( $saved_page_id, true ); // Delete saved page id record in the database. delete_option( 'toptal_save_saved_page_id' ); } } }

Fungsi deactivate() , yang dipanggil saat plugin dinonaktifkan, mengambil halaman menggunakan fungsi get_option() , menghapus halaman yang sesuai dari database menggunakan wp_delete_post() , dan menghapus ID yang disimpan dari tabel opsi menggunakan delete_option() .

Jika kita mengaktifkan plugin kita, dan pergi ke halaman, kita akan melihat halaman yang disebut "Disimpan" dengan kode pendek di dalamnya.

Aktivasi modul Wordpress

Jika kami menonaktifkan plugin, halaman itu akan dihapus.

Karena kami menggunakan true sebagai argumen dalam metode wp_delete_post() kami, halaman ini tidak akan dibuang ke tempat sampah, melainkan akan dihapus sepenuhnya.

Buat halaman pengaturan plugin.

Kita dapat membuat halaman pengaturan kita di dalam file admin/class-toptal-save-admin.php , dan hal pertama yang perlu kita lakukan dalam file itu adalah menghapus atau mengomentari panggilan ke wp_enqueue_style() di dalam fungsi enqueue_styles() dan panggil ke wp_enqueue_script() di dalam fungsi enqueue_scripts() jika kita tidak akan menambahkan CSS/JS ke layar admin.

Namun, jika kita akan menambahkan beberapa gaya, maka, saya sarankan agar kita memuat file-file itu hanya di halaman pengaturan plugin kita, bukan di semua halaman admin WordPress. Kita dapat melakukannya dengan menempatkan kode berikut tepat di atas baris yang akan kita komentari:

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-admin.css', array(), $this->version, 'all' );
 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-admin.js', array( 'jquery' ), $this->version, false );

Jika Anda bertanya-tanya dari mana saya mendapatkan 'tools_page_toptal-save' .

Nah, inilah masalahnya, saya tahu bahwa saya akan membuat halaman pengaturan dengan slug toptal-save, dan saya juga tahu saya akan menambahkannya ke layar Tools ( tools.php ). Jadi, menggabungkan keduanya, kita dapat mengatakan bahwa nilai variabel $hook akan menjadi 'tools_page_toptal-save' - gabungan dari dua nilai.

Jika kami tidak berada di halaman pengaturan plugin, kami menggunakan return untuk segera menghentikan eksekusi fungsi tempat kami berada.

Karena saya tidak akan menambahkan gaya kustom apa pun ke layar admin saya – karena saya ingin layar plugin saya terlihat seperti layar WordPress asli – saya tidak akan menambahkan kode itu.

Sekarang, kita dapat melanjutkan dengan membuat halaman pengaturan kita.

Kita akan mulai dengan menambahkan metode sederhana ke kelas Toptal_Save_Admin yang akan memanggil fungsi add_submenu_page() .

 /** * Register the settings page for the admin area. * * @since 1.0.0 */ public function register_settings_page() { // Create our settings page as a submenu page. add_submenu_page( 'tools.php', // parent slug __( 'Toptal Save', 'toptal-save' ), // page title __( 'Toptal Save', 'toptal-save' ), // menu title 'manage_options', // capability 'toptal-save', // menu_slug array( $this, 'display_settings_page' ) // callable function ); }

Itu cukup banyak argumen yang kami berikan ke fungsi add_submenu_page() . Berikut adalah arti dari masing-masing dari mereka.

  • Parent slug: Nama slug untuk menu induk (atau nama file halaman admin WordPress standar). Anda dapat melihat daftar lengkap siput induk di sini.

  • Judul halaman: Teks yang akan ditampilkan dalam tag judul halaman saat menu dipilih.

  • Judul menu: Teks yang akan digunakan untuk judul menu.

  • Capability: Kemampuan yang dibutuhkan oleh pengguna agar menu ini dapat ditampilkan kepada mereka. Kami telah menggunakan "manage_options" yang memungkinkan akses ke opsi Panel Administrasi. Anda dapat membaca lebih lanjut tentang Peran dan Kemampuan di sini.

  • Menu slug: Nama slug untuk merujuk ke menu ini.

  • Fungsi yang dapat dipanggil : Fungsi yang akan dipanggil untuk menampilkan konten halaman ini. Karena kita telah mendefinisikan nama fungsi yang dapat dipanggil, kita perlu membuatnya, tetapi sebelum melakukannya, kita menggunakan $this untuk mereferensikan instance kelas dari dalam dirinya sendiri. Inilah yang dikatakan dokumentasi PHP tentangnya:

Variabel semu $this tersedia ketika metode dipanggil dari dalam konteks objek. $this adalah referensi ke objek pemanggil (biasanya objek yang menjadi milik metode, tetapi mungkin objek lain, jika metode dipanggil secara statis dari konteks objek sekunder).

Selanjutnya, kita akan menambahkan metode lain ke kelas:

 /** * Display the settings page content for the page we have created. * * @since 1.0.0 */ public function display_settings_page() { require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/partials/toptal-save-admin-display.php'; }

Fungsi yang dapat dipanggil ini termasuk template kita yang akan menampilkan halaman pengaturan kita. Anda dapat melihat bahwa kami mereferensikan file yang terletak di admin/partials bernama toptal-save-admin-display.php .

Sekarang, jika Anda pergi ke Tools, Anda tidak akan melihat layar itu. Mengapa? Karena kami belum mengaitkan metode register_admin_page() kami ke kait admin_menu .

Kita dapat melakukannya dengan membuka file include/class-toptal-save.php dan menambahkan potongan kode ini di dalam metode define_admin_hooks() , tepat di bawah di mana $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); bagian adalah.

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

Jangan khawatir tentang panggilan ke add_action() karena itu adalah sesuatu yang akan kita bahas nanti.

Untuk saat ini, cukup buka halaman Alat, dan Anda akan dapat melihat halaman Simpan Toptal. Jika kami membukanya, itu berfungsi, tetapi kami melihat layar kosong karena tidak ada apa-apa di dalamnya.

Halaman alat Wordpress

Kami membuat beberapa kemajuan, tapi hei, kami perlu menampilkan beberapa pengaturan di sini, jadi mari kita lakukan itu.

Kami akan mulai membuat bidang, dan itu adalah sesuatu yang akan kami lakukan dengan bantuan API Pengaturan WordPress.

Jika Anda tidak terbiasa dengannya, ini memungkinkan kami untuk membuat bidang formulir yang dapat kami gunakan untuk menyimpan data kami.

 /** * Register the settings for our settings page. * * @since 1.0.0 */ public function register_settings() { // Here we are going to register our setting. register_setting( $this->plugin_name . '-settings', $this->plugin_name . '-settings', array( $this, 'sandbox_register_setting' ) ); // Here we are going to add a section for our setting. add_settings_section( $this->plugin_name . '-settings-section', __( 'Settings', 'toptal-save' ), array( $this, 'sandbox_add_settings_section' ), $this->plugin_name . '-settings' ); // Here we are going to add fields to our section. add_settings_field( 'post-types', __( 'Post Types', 'toptal-save' ), array( $this, 'sandbox_add_settings_field_multiple_checkbox' ), $this->plugin_name . '-settings', $this->plugin_name . '-settings-section', array( 'label_for' => 'post-types', 'description' => __( 'Save button will be added only to the checked post types.', 'toptal-save' ) ) ); // ... }

Di dalam fungsi register_settings() kita dapat menambahkan dan mengonfigurasi semua bidang. Anda dapat menemukan implementasi lengkap dari fungsi tersebut di sini. Kami telah menggunakan yang berikut ini dalam fungsi yang ditunjukkan di atas:

  • register_setting() : Mendaftarkan pengaturan dan panggilan balik sanitasinya.
  • add_settings_section() : Menambahkan bagian baru ke halaman pengaturan.
  • add_settings_field() : Menambahkan bidang baru ke bagian halaman pengaturan.

Setiap kali kami menggunakan salah satu dari tiga fungsi tersebut, panggilan balik sanitasi disediakan. Ini memungkinkan data untuk dibersihkan dan, jika itu adalah bidang, untuk menampilkan elemen HTML yang sesuai (kotak centang, radio, input, dll).

Selain itu, kami telah meneruskan larik data ke callback tersebut, seperti label_for, description, atau default jika diperlukan.

Sekarang, kita dapat membuat callback sanitasi tersebut. Anda dapat menemukan kode untuk panggilan balik tersebut di sini.

Ini semua baik-baik saja, namun, kita perlu menghubungkan bidang ke admin_init hook dan kemudian menunjukkannya.

Kami akan menggunakan add_action yang merupakan pengait yang inti WordPress dimulai pada titik tertentu selama eksekusi, atau ketika peristiwa tertentu terjadi. admin_init dipicu sebelum pengait lainnya ketika pengguna mengakses area admin.

Pertama, kita perlu menambahkan tindakan dalam file include/class-toptal-save.php .

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); // Hook our settings page $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); // Hook our settings $this->loader->add_action( 'admin_init', $plugin_admin, 'register_settings' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

Selanjutnya, di admin/partials/topal-save-admin-display.php , kita perlu memberikan tampilan untuk area admin plugin kita:

 <?php /** * Provide a admin area view for the plugin * * This file is used to markup the admin-facing aspects of the plugin. * * @link https://www.toptal.com/resume/ratko-solaja * @since 1.0.0 * * @package Toptal_Save * @subpackage Toptal_Save/admin/partials */ ?> <!-- This file should primarily consist of HTML with a little bit of PHP. --> <div> <form method="post" action="options.php"> <?php settings_fields( 'toptal-save-settings' ); do_settings_sections( 'toptal-save-settings' ); submit_button(); ?> </form> </div>

Fungsi settings_fields() digunakan untuk menampilkan bidang nonce, action, dan option_page untuk halaman pengaturan.

Ini diikuti oleh do_settings_sections() yang mencetak semua bagian pengaturan yang ditambahkan ke halaman pengaturan tertentu.

Terakhir, tombol kirim ditambahkan menggunakan teks yang disediakan dan kelas yang sesuai menggunakan fungsi submit_button() .

Sekarang, jika kita melihat halaman kita, akan terlihat seperti ini:

Contoh lengkap halaman Wordpress

Ini semua yang harus kita lakukan di area admin kita. Mari kita mulai mengerjakan bagian publik dari plugin kita.

Buat fungsionalitas plugin.

Inilah bagian yang menarik. Kita perlu membuat beberapa fungsi untuk memisahkan fungsionalitas kita:

  • Fungsi yang akan menampilkan tombol "Simpan Item". Ini perlu memeriksa apakah pengguna saat ini telah menyimpan item itu atau tidak, tergantung pada itu, kami akan menampilkan teks dan warna yang berbeda.
  • Fungsi yang akan menyimpan/membatalkan penyimpanan item (AJAX).
  • Sebuah fungsi yang akan menampilkan semua item yang disimpan.
  • Sebuah fungsi yang akan menghasilkan shortcode kita.

Jadi mari kita mulai dengan menunjukkan tombolnya. Kami akan melakukan semua ini di public/class-toptal-save-public.php .

Saat melakukan ini, kita perlu membuat beberapa fungsi pembantu tambahan untuk menangani hal-hal tertentu seperti:

  • Membuat nama cookie unik untuk situs web
  • Membuat kue
  • Mendapatkan nilai kue
  • Mendapatkan status keanggotaan dari pengaturan

Kode untuk fungsi pembantu ini dapat ditemukan di sini.

Fungsi get_unique_cookie_name() akan membantu kami menghasilkan nama cookie unik dari URL situs web, nama situs web, dan akhiran yang ditentukan khusus kami. Ini agar nama cookie yang dihasilkan tidak akan bentrok saat digunakan di beberapa situs WordPress di bawah domain yang sama.

Fungsi toptal_set_cookie() dan toptal_get_cookie() akan membuat dan mendapatkan nilai cookie kita masing-masing.

Fungsi get_user_status() akan mendapatkan status kotak centang keanggotaan kami di pengaturan (mengembalikan 1 saat dicentang, 0 jika tidak).

Sekarang, bagian yang menarik, membuat fungsi yang akan bertanggung jawab untuk menampilkan tombol simpan. Implementasi untuk fungsi show_save_button() kami dapat ditemukan di sini. Dan kami telah menggunakan beberapa fungsi baru dari API WordPress di sini:

  • get_queried_object_id() : Mengambil ID dari objek yang ditanyakan saat ini.
  • is_user_logged_in() : Memeriksa apakah pengunjung saat ini adalah pengguna yang masuk.
  • get_user_meta() : Mengambil bidang metadata pengguna untuk pengguna.
  • wp_create_nonce() : Membuat token kriptografi yang terkait dengan tindakan, pengguna, sesi pengguna, dan jendela waktu tertentu.

Sekarang, mari kita buat sebuah fungsi yang akan menambahkan tombol kita ke akhir konten. Di sini, kami memiliki dua persyaratan utama.

  1. Pastikan bahwa tombol tersebut hanya ditampilkan pada jenis kiriman yang sedang/dipilih dalam pengaturan.
  2. Pastikan kotak centang untuk menambahkan tombol dicentang.
 /** * Append the button to the end of the content. * * @since 1.0.0 */ public function append_the_button( $content ) { // Get our item ID $item_id = get_queried_object_id(); // Get current item post type $current_post_type = get_post_type( $item_id ); // Get our saved page ID, so we can make sure that this button isn't being shown there $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Set default values for options that we are going to call below $post_types = array(); $override = 0; // Get our options $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['post-types'] ) ) { $post_types = $options['post-types']; } if ( ! empty( $options['toggle-content-override'] ) ) { $override = $options['toggle-content-override']; } // Let's check if all conditions are ok if ( $override == 1 && ! empty( $post_types ) && ! is_page( $saved_page_id ) && in_array( $current_post_type, $post_types ) ) { // Append the button $custom_content = ''; ob_start(); echo $this->show_save_button(); $custom_content .= ob_get_contents(); ob_end_clean(); $content = $content . $custom_content; } return $content; }

Sekarang, kita perlu menghubungkan fungsi ini ke hook the_content .

Mengapa? Karena the_content digunakan untuk memfilter konten postingan setelah diambil dari database dan sebelum dicetak ke layar.

Dengan ini, kami dapat menambahkan tombol simpan kami di mana saja di konten. Kita bisa melakukannya di include/class-toptal-save.php di metode define_public_hooks() , seperti ini:

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

Sekarang, jika masuk ke pengaturan plugin, dan periksa posting dan halaman, serta tambahkan tombol, kita akan melihat di setiap posting blog bahwa tombol tersebut ditampilkan.

Layar pengaturan plugin Wordpress

Dari sini, kita harus melanjutkan dan menata tombol itu.

Kita bisa melakukannya di public/css/toptal-save-public.css . Temukan file CSS yang diperbarui di sini.

Sekarang, mari kita buat fungsi yang benar-benar akan menyimpan item.

Kami akan melakukan ini di kelas publik kami, dan, kami akan melakukannya dengan AJAX. Kodenya ada di sini.

Mari kita kaitkan fungsi ini ke WordPress AJAX.

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

Anda dapat membaca lebih lanjut tentang AJAX di plugin di sini.

Sebelum kita menyelesaikan bagian ini, kita perlu melakukan dua hal lagi.

  1. Lokalkan skrip.
  2. Buat panggilan AJAX kami di public/js/toptal-save-public.js

Lokalisasi skrip akan dilakukan melalui fungsi wp_localize_script() di dalam file public/class-toptal-save-public.php kita.

Selain itu, saat kami melakukannya, kami juga akan memastikan untuk menerapkan menampilkan file CSS dan JS tergantung pada status kotak centang "gunakan gaya kami".

 /** * Register the stylesheets for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_styles() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['toggle-css-override'] ) && $options['toggle-css-override'] == 1 ) { wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-public.css', array(), $this->version, 'all' ); } } /** * Register the JavaScript for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_scripts() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-public.js', array( 'jquery' ), $this->version, false ); // Get our options $options = get_option( $this->plugin_name . '-settings' ); // Get our text $item_save_text = $options['text-save']; $item_unsave_text = $options['text-unsave']; $item_saved_text = $options['text-saved']; $item_no_saved = $options['text-no-saved']; $saved_page_id = get_option( 'toptal_save_saved_page_id' ); $saved_page_url = get_permalink( $saved_page_id ); wp_localize_script( $this->plugin_name, 'toptal_save_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'item_save_text' => $item_save_text, 'item_unsave_text' => $item_unsave_text, 'item_saved_text' => $item_saved_text, 'item_no_saved' => $item_no_saved, 'saved_page_url' => $saved_page_url ) ); }

Sekarang, kita dapat melanjutkan dengan panggilan AJAX kita.

Skrip front-end kami akan mencari elemen dengan kelas "toptal-save-button."

Penangan klik akan didaftarkan ke semua elemen yang cocok, yang akan melakukan panggilan API dan memperbarui UI yang sesuai.

Anda dapat menemukan kode di sini dan CSS yang diperlukan di sini.

Saya juga telah menambahkan fungsi yang akan menangani notifikasi saat item ditambahkan.

Inilah cara kerjanya.

Demo plugin Wordpress selesai

Selanjutnya, kita perlu membuat kode pendek untuk dimasukkan pengguna di mana pun mereka mau.

Kita bisa melakukannya di public/class-toptal-save-public.php :

 /** * Create Shortcode for Users to add the button. * * @since 1.0.0 */ public function register_save_unsave_shortcode() { return $this->show_save_button(); }

Kita juga perlu mendaftarkannya, karena fungsi itu sendiri tidak akan melakukan apa-apa.

Dalam include/class-toptal-save.php tambahkan kode ini setelah baris di mana kita menambahkan tombol kita.

 // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' );

Sekarang, ini tidak akan berhasil karena kita belum memuat metode add_shortcode() di dalam kelas loader kita.

Berikut adalah kode lengkap dari file include/class-toptal-save-loader.php .

Saya telah menambahkan variabel baru yang dilindungi bernama shortcodes , kemudian dalam metode konstruktor kelas, saya telah mengubahnya menjadi sebuah array.

Pada baris 104, saya telah menambahkan fungsi yang akan bertanggung jawab untuk pembuatan kode pendek kami; Anda dapat melihat bahwa itu hampir sama dengan fungsi di atasnya ( add_filter() ), kecuali saya mengubah “filter” menjadi “shortcode” dan “filters” menjadi “shortcodes.”

Juga, dalam metode run() , saya telah menambahkan foreach lain yang akan melalui array kode pendek kami, dan mendaftarkannya ke WordPress.

Itu mudah.

Ingat, pada awalnya, kami menggunakan kode pendek [toptal-saved] , jadi mari buat metode yang akan menampilkan semua item yang disimpan.

Temukan kode lengkap untuk metode ini di sini.

Sekarang, seperti biasa, kita perlu mendaftarkan kode pendek di include/class-toptal-save.php :

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' ); $this->loader->add_shortcode( 'toptal-saved', $plugin_public, 'register_saved_shortcode' ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

Kami memiliki dua hal lagi yang harus dilakukan di sini.

  1. Gaya halaman item tersimpan kami.
  2. Pastikan bahwa ketika pengguna menghapus item yang disimpan, item tersebut menghilang dari halaman item yang disimpan.

Untuk tugas pertama, Anda dapat menemukan kode CSS yang diperlukan di sini.

Untuk yang kedua, ini melibatkan sedikit skrip front-end.

Kode JavaScript lengkap untuk itu dapat ditemukan di sini.

Seperti yang akan Anda lihat di baris 52, saya mencari div dengan kelas “toptal-saved-item.”

Kemudian, pada baris 70-75, kami memeriksa apakah div induk tersebut memiliki item kelas atas-tersimpan.

Jika ya, kami menyembunyikan item kami dengan fadeOut dan kemudian, setelah animasi selesai, kami menghapus item sepenuhnya dari layar.

Sekarang, mari kita beralih ke bagian yang lebih sulit – membuatnya menjadi modular.

Jadikan plugin modular.

Definisi dasar dari plugin modular adalah:

Extensible, atau kode modular, adalah kode yang dapat dimodifikasi, berinteraksi dengan, ditambahkan, atau dimanipulasi - semua tanpa pernah memodifikasi basis kode inti.

Sekarang, ketika datang ke plugin ini, saya akan memastikan bahwa pengguna dapat mengubah HTML di dalam item yang disimpan di halaman item yang disimpan.

Jadi, kita perlu membuat beberapa perubahan pada metode register_saved_shortcode() kita:

  • Ubah html_to_return menjadi inner_html_to_return mana pun kami ingin pengguna dapat mengubah HTML. Pastikan bahwa deklarasi pertama variabel inner_html_to_return kita memiliki “=” tanpa titik sebelumnya.
  • Gunakan metode apply_filters() untuk mendaftarkan filter kita.

Dengan dua perubahan ini, Anda harus berakhir dengan sesuatu seperti ini.

Sekarang, jika pengguna ingin berinteraksi dengan kode kita, mereka dapat menambahkan sesuatu seperti ini di dalam file functions.php mereka:

 <?php add_filter( 'toptal_saved_item_html', 'change_toptal_saved_item_html'); function change_toptal_saved_item_html( $inner_html_to_return ) { // Some custom code return $inner_html_to_return; }

Menghasilkan file terjemahan.

Terjemahan sangat penting karena memungkinkan anggota komunitas WordPress dan poliglot menerjemahkan plugin Anda, membuatnya dapat diakses oleh situs non-Inggris.

Karena itu, mari selami beberapa detail teknis tentang bagaimana WordPress menangani terjemahan.

WordPress menggunakan kerangka kerja lokalisasi gettext GNU untuk terjemahan. Dalam kerangka ini, ada tiga jenis file:

  • Template Objek Portabel (POT)
  • Benda Portabel (PO)
  • Objek Mesin (MO)

Masing-masing file ini mewakili satu langkah dalam proses penerjemahan.

Untuk menghasilkan file POT, kita memerlukan program yang akan mencari melalui kode WordPress, dan mendapatkan semua teks yang diteruskan ke fungsi terjemahan kita, seperti __e() dan _e() . Anda dapat membaca lebih lanjut tentang fungsi terjemahan di sini.

Di sini kami menerjemahkan teks dari file POT, menyimpan bahasa Inggris dan terjemahan kami dalam file PO, dan kami mengonversi file PO menjadi file MO.

Melakukan ini secara manual akan memakan banyak waktu karena Anda harus menulis beberapa baris kode untuk setiap file yang dapat diterjemahkan yang Anda miliki di plugin Anda. Untungnya, ada cara yang lebih baik, menggunakan plugin kecil yang berguna bernama Loco Translate.

Setelah Anda menginstal dan mengaktifkannya, buka Loco Translate > Plugins > Toptal Save.

Dari sana, klik Edit template, lalu Sinkronkan dan Simpan. Ini akan mengedit file toptal-save.pot kami di dalam folder bahasa kami.

Sekarang, plugin tersedia untuk diterjemahkan.

Bangun plugin WordPress Anda sekarang.

Kami telah membuat plugin yang agak sederhana di artikel ini, tetapi dalam prosesnya, kami mengikuti praktik dan standar yang memungkinkan kami untuk memelihara dan memperluas plugin ini dengan mudah.

Kami telah menggunakan fungsionalitas WordPress dengan cara yang tidak akan menghambat kinerja platform secara keseluruhan.

Baik itu plugin sederhana atau rumit, apakah Anda seorang pengembang individu atau perusahaan pengembangan WordPress, merencanakan dan mengikuti praktik terbaik adalah kunci untuk membangun plugin yang kuat.