Cara Membuat Plugin Widget Untuk WordPress

WordPress adalah Sistem Manajemen Konten yang luar biasa dengan banyak fitur hebat seperti widget. Dalam tutorial ini, saya akan menjelaskan kepada Anda cara membuat widget Anda sendiri dalam sebuah plugin kecil. Posting ini akan membahas beberapa poin tambahan yang perlu Anda pahami sebelum membuat widget itu sendiri. Kita mulai!


Langkah 1: Buat Plugin Widget Anda

Saya baru-baru ini membuat sebuah plugin yang disebut “Bundel Widgets Freelancer”, dan beberapa orang bertanya kepada saya bagaimana membuat plugin semacam itu, jadi saya memutuskan untuk menulis posting ini. Langkah pertama adalah pembuatan plugin. Dan seperti yang akan Anda lihat, itu bukan bagian tersulit. Plugin adalah kode tambahan yang ditambahkan ke WordPress setelah Anda mengaktifkannya. WordPress membuat perulangan melalui folder untuk mengambil semua plugin yang tersedia dan mendaftarkannya di back office. Untuk membuat plugin, Anda memerlukan editor seperti Coda (Mac), atau Dreamweaver (PC & Mac). Saya sarankan Anda untuk membuat plugin di instalasi lokal WordPress, membuatnya di server langsung dapat menyebabkan beberapa masalah jika Anda membuat kesalahan. Jadi tolong, tunggu untuk menguji plugin kami sebelum menempatkannya di hosting Anda.

Buka sekarang folder wp-content / plugins. Di sinilah Anda akan menambahkan plugin Anda. Buat direktori baru dan sebut “widget-plugin” (sebenarnya, nama ini bisa apa saja yang Anda inginkan). Meskipun plugin kami hanya memiliki satu file tunggal, selalu lebih baik menggunakan folder untuk setiap plugin. Di direktori Anda, buat file baru yang disebut “widget-plugin.php” (nama ini dapat diubah juga), dan buka. Kami sekarang akan menambahkan baris kode pertama kami. Definisi plugin di WordPress mengikuti beberapa aturan yang dapat Anda baca di sini di kodeks. Beginilah cara WordPress mendefinisikan sebuah plugin:

Jadi, kita harus memodifikasi kode ini agar sesuai dengan kebutuhan kita:

Simpan file Anda. Dengan hanya menambahkan kode ke file widget-plugin.php kami, kami telah membuat plugin! Ya, untuk saat ini plugin tidak melakukan apa-apa, tetapi WordPress mengenalinya. Untuk memastikannya, buka administrasi Anda, dan buka menu "Plugins". Jika plugin Anda muncul di daftar plugins Anda baik, jika tidak pastikan Anda mengikuti instruksi saya dan coba lagi. Anda sekarang dapat mengaktifkan plugin.

Langkah 2: Buat Widget

Kami sekarang akan membuat widget itu sendiri. Widget ini akan menjadi kelas PHP yang memperpanjang kelas inti WordPress WP_Widget. Pada dasarnya, widget kami akan ditentukan dengan cara ini:

// Kelas widget
class My_Custom_Widget extends WP_Widget {

// Konstruktor utama
fungsi publik __construct () {
/ * ... * /
}

// Bentuk widget (untuk backend)
formulir fungsi publik ($ instance) {
/ * ... * /
}

// Perbarui pengaturan widget
pembaruan fungsi publik ($ new_instance, $ old_instance) {
/ * ... * /
}

// Tampilkan widget
widget fungsi publik ($ args, $ instance) {
/ * ... * /
}

}

// Daftarkan widget
function my_register_custom_widget () {
register_widget ('My_Custom_Widget');
}
add_action ('widgets_init', 'my_register_custom_widget');

Kode ini memberikan WordPress semua informasi yang dibutuhkan sistem untuk dapat menggunakan widget:

  1. Itu konstruktor, untuk memulai widget
  2. Itu bentuk () fungsi untuk membuat formulir widget di administrasi
  3. Itu fungsi pembaruan (), untuk menyimpan data widget selama edisi
  4. Dan itu fungsi widget () untuk menampilkan konten widget di front-end

1 - Konstruktor

Konstruktor adalah bagian dari kode yang mendefinisikan nama widget dan argumen utama, di bawah ini adalah contoh dari apa yang tampak seperti.

// Konstruktor utama
fungsi publik __construct () {
parent :: __ construct (
'my_custom_widget',
__ ('Widget Kustom Saya', 'text_domain'),
Himpunan(
'custom_selective_refresh' => true,
)
);
}

Harap tidak menggunakan __ () di sekitar nama widget, fungsi ini digunakan oleh WordPress untuk terjemahan. Saya sangat menyarankan Anda untuk selalu menggunakan fungsi-fungsi ini, untuk membuat tema Anda sepenuhnya diterjemahkan. Dan penggunaan parameter ‘customize_selective_refresh’ memungkinkan widget disegarkan Penampilan> Kustomisasi saat mengedit widget, alih-alih menyegarkan seluruh halaman, widget hanya di-refresh saat melakukan perubahan.

2 - Fungsi form ()

Fungsi ini adalah yang membuat pengaturan bentuk widget di area admin WordPress (baik di bawah Appearance> Widgets atau Appearance> Customize> Widgets). Di sinilah Anda akan memasukkan data Anda untuk ditampilkan di situs web. Jadi saya akan menjelaskan bagaimana Anda bisa menambahkan bidang teks, area teks, pilih kotak dan kotak centang ke pengaturan bentuk widget Anda.

// Bentuk widget (untuk backend)
formulir fungsi publik ($ instance) {

// Tetapkan default widget
$ defaults = array (
'title' => '',
'text' => '',
'textarea' => '',
'checkbox' => '',
'pilih' => '',
);

// Parsing pengaturan saat ini dengan default
ekstrak (wp_parse_args ((array) $ instance, $ defaults)); ?>


/>

Kode ini hanya menambahkan 5 bidang ke widget (Judul, teks, textarea, pilih dan kotak centang). Jadi pertama-tama Anda menentukan default untuk widget Anda, maka fungsi selanjutnya mem-parsing pengaturan saat ini yang ditentukan / disimpan untuk widget Anda dengan default (jadi setiap pengaturan yang tidak ada akan kembali ke default, seperti ketika Anda pertama kali menambahkan widget ke bilah sisi Anda). Dan yang terakhir adalah html untuk setiap bidang. Perhatikan penggunaan esc_attr () saat menambahkan bidang formulir, ini dilakukan karena alasan keamanan. Setiap kali Anda menggemakan variabel yang ditentukan pengguna di situs Anda, Anda harus memastikan itu pertama kali disanitasi.

3 - Fungsi pembaruan ()

Fungsi pembaruan () sangat sederhana. Karena pengembang inti WordPress menambahkan API widget yang sangat kuat, kami hanya perlu menambahkan kode ini untuk memperbarui setiap bidang:

// Perbarui pengaturan widget
pembaruan fungsi publik ($ new_instance, $ old_instance) {
$ instance = $ old_instance;
$ instance ['title'] = isset ($ new_instance ['title'])? wp_strip_all_tags ($ new_instance ['title']): '';
$ instance ['text'] = isset ($ new_instance ['text'])? wp_strip_all_tags ($ new_instance ['text']): '';
$ instance ['textarea'] = isset ($ new_instance ['textarea'])? wp_kses_post ($ new_instance ['textarea']): '';
$ instance ['checkbox'] = isset ($ new_instance ['checkbox'])? 1: salah;
$ instance ['select'] = isset ($ new_instance ['select'])? wp_strip_all_tags ($ new_instance ['select']): '';
return $ instance;
}

Seperti yang Anda lihat, yang harus kita lakukan adalah memeriksa setiap pengaturan dan jika tidak kosong simpan ke dalam basis data. Perhatikan penggunaan fungsi wp_strip_all_tags () dan wp_kses_post (), ini digunakan untuk membersihkan data sebelum ditambahkan ke basis data. Setiap kali Anda menyisipkan APA PUN yang dikirimkan pengguna ke dalam basis data, Anda perlu memastikannya tidak memiliki kode jahat. Fungsi pertama wp_strip_all_tags menghapus semuanya kecuali teks dasar sehingga Anda dapat menggunakannya untuk bidang mana pun di mana nilai akhir adalah string dan fungsi kedua wp_kses_post () adalah fungsi yang sama yang digunakan untuk konten posting dan menghapus semua tag selain html dasar seperti tautan , bentang, div, gambar, dll.

4 - Fungsi widget ()

Fungsi widget () adalah fungsi yang akan menampilkan konten di situs web. Inilah yang akan dilihat pengunjung Anda. Fungsi ini dapat dikustomisasi untuk menyertakan kelas-kelas CSS, dan tag khusus agar sesuai dengan tampilan tema Anda. Berikut ini kodenya (harap bukan bahwa kode ini dapat dimodifikasi dengan mudah agar sesuai dengan kebutuhan Anda):

// Tampilkan widget
widget fungsi publik ($ args, $ instance) {

ekstrak ($ ​​args);

// Periksa opsi widget
$ title = isset ($ instance ['title'])? apply_filters ('widget_title', $ instance ['title']): '';
$ text = isset ($ instance ['text'])? $ instance ['text']: '';
$ textarea = isset ($ instance ['textarea'])? $ instance ['textarea']: '';
$ select = isset ($ instance ['select'])? $ instance ['select']: '';
$ checkbox =! kosong ($ instance ['kotak centang'])? $ instance ['checkbox']: false;

// WordPress core before_widget hook (selalu termasuk)
echo $ before_widget;

// Tampilkan widget
gaung
'; // Tampilkan judul widget jika ditentukan if ($ title) { echo $ before_title. $ title. $ after_title; } // Tampilkan bidang teks if ($ text) { gaung

' $ text. '

'; } // Tampilkan bidang teks if ($ textarea) { gaung

' $ textarea. '

'; } // Tampilkan bidang pilih if ($ select) { gaung

' $ pilih. '

'; } // Tampilkan sesuatu jika kotak centang benar if ($ checkbox) { gaung

Sesuatu yang luar biasa

'; } gaung
'; // kait inti after_widget WordPress (selalu termasuk) echo $ after_widget; }

Kode ini tidak rumit, yang harus Anda ingat adalah untuk memeriksa apakah suatu variabel ditetapkan, jika Anda tidak dan jika Anda ingin mencetaknya, Anda akan mendapatkan pesan kesalahan.

Kode Plugin Widget Lengkap

Sekarang jika Anda telah mengikuti dengan benar plugin Anda sekarang harus berfungsi penuh dan Anda dapat menyesuaikannya sesuai dengan kebutuhan Anda. Jika Anda belum mengikuti panduan ini atau ingin memeriksa ulang kodenya, Anda dapat mengunjungi halaman Github untuk melihat kode lengkap.

Lihat Kode Lengkap tentang Github

Kesimpulan

Kami melihat bahwa membuat widget di dalam plugin sangat menarik, sekarang Anda harus tahu cara membuat plugin sederhana yang berisi widget dengan jenis bidang berbeda dan Anda belajar cara sedikit lebih jauh menggunakan teknik-teknik canggih untuk menyesuaikan widget. Selamat, Anda melakukan pekerjaan luar biasa!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map