Apakah Anda ingin membuat widget khusus di WordPress? Widget memungkinkan Anda untuk menambahkan elemen non-konten ke sidebar atau area siap-widget dari situs web Anda.
Anda dapat menggunakan widget untuk menambahkan spanduk, iklan, formulir pendaftaran buletin, dan elemen lainnya ke situs web Anda.
Pada artikel ini, kami akan menunjukkan cara membuat widget WordPress khusus, langkah demi langkah.
catatan: Tutorial ini untuk pengguna WordPress DIY yang mempelajari pengembangan dan pengkodean WordPress.
Apa itu Widget WordPress?
Widget WordPress berisi potongan kode yang dapat Anda tambahkan ke sidebar situs web Anda atau area yang siap dengan widget.
Anggap mereka sebagai modul yang dapat Anda gunakan untuk menambahkan elemen yang berbeda dengan menggunakan antarmuka drag and drop sederhana.
Secara default, WordPress dilengkapi dengan seperangkat widget standar yang dapat Anda gunakan dengan tema WordPress apa pun. Lihat panduan pemula kami di cara menambah dan menggunakan widget di WordPress.
WordPress juga memungkinkan pengembang untuk membuat widget khusus mereka sendiri.
Banyak tema dan plugin WordPress premium yang dilengkapi dengan widget khusus mereka sendiri yang dapat Anda tambahkan ke sidebar Anda.
Misalnya, Anda dapat menambahkan formulir kontak, Sebuah formulir login khusus, atau a Galeri foto ke bilah sisi tanpa menulis kode apa pun.
Karena itu, mari kita lihat cara mudah membuat widget khusus Anda sendiri di WordPress.
Video tutorial
Berlangganan WPBeginner
Jika Anda lebih suka instruksi tertulis, maka silakan lanjutkan membaca.
Membuat Widget Khusus di WordPress
Jika Anda belajar coding WordPress, maka Anda akan membutuhkan lingkungan pengembangan lokal. Kamu bisa instal WordPress di komputer Anda (Mac atau Windows).
Ada beberapa cara untuk menambahkan kode widget khusus di WordPress.
Idealnya, Anda bisa buat plugin khusus situs dan rekatkan kode widget Anda di sana.
Anda juga dapat menempelkan kode di tema Anda file functions.php. Namun, itu hanya akan tersedia ketika tema tertentu aktif.
Alat lain yang dapat Anda gunakan adalah Cuplikan Kode plugin yang memungkinkan Anda untuk dengan mudah tambahkan kode khusus ke situs web WordPress Anda.
Dalam tutorial ini, kita akan membuat widget sederhana yang hanya menyambut pengunjung. Tujuannya di sini adalah untuk membiasakan diri dengan kelas widget WordPress.
Mari kita mulai.
Membuat Widget WordPress Dasar
WordPress hadir dengan kelas Widget WordPress bawaan. Setiap widget WordPress baru memperluas kelas widget WordPress.
Ada 18 metode yang disebutkan dalam buku pegangan pengembang WordPress yang dapat digunakan dengan Kelas WP Widget.
Namun, demi tutorial ini, kami akan fokus pada metode berikut.
__construct (): Ini adalah bagian di mana kami membuat ID widget, judul, dan deskripsi. widget: Di sinilah kita mendefinisikan output yang dihasilkan oleh widget. form: Bagian kode ini adalah tempat kita membuat form dengan opsi widget untuk backend. pembaruan: Ini adalah bagian di mana kami menyimpan opsi widget dalam database.
Mari kita pelajari kode berikut di mana kita telah menggunakan empat metode ini di dalam kelas WP_Widget.
// Membuat widget
class wpb_widget extends WP_Widget {
// Bagian konstruk
function __construct () {
}
// Membuat widget front-end
widget fungsi publik ($ args, $ instance) {
}
// Membuat widget Backend
formulir fungsi publik ($ instance) {
}
// Memperbarui widget menggantikan instance lama dengan yang baru
pembaruan fungsi publik ($ new_instance, $ old_instance) {
}
// Kelas wpb_widget berakhir di sini
}
Bagian terakhir dari kode adalah di mana kita akan mendaftarkan widget dan memuatnya di WordPress.
function wpb_load_widget () {
register_widget ('wpb_widget');
}
add_action ('widgets_init', 'wpb_load_widget');
Sekarang mari kita menggabungkan semua ini untuk membuat widget WordPress dasar.
Anda dapat menyalin dan menempelkan kode berikut di plugin kustom atau file functions.php tema Anda.
// Membuat widget
class wpb_widget extends WP_Widget {
function __construct () {
parent :: __ construct (
// ID Basis widget Anda
'wpb_widget',
// Nama widget akan muncul di UI
__ ('Widget WPBeginner', 'wpb_widget_domain'),
// Deskripsi widget
array ('description' => __ ('Contoh widget berdasarkan WPBeginner Tutorial', 'wpb_widget_domain'),)
);
}
// Membuat widget front-end
widget fungsi publik ($ args, $ instance) {
$ title = apply_filters ('widget_title', $ instance[‘title’] );
// sebelum dan sesudah argumen widget ditentukan oleh tema
echo $ args[‘before_widget’];
if (! empty ($ title))
echo $ args[‘before_title’] . $ title. $ args[‘after_title’];
// Di sinilah Anda menjalankan kode dan menampilkan output
echo __ ('Halo, Dunia!', 'wpb_widget_domain');
echo $ args[‘after_widget’];
}
// Widget Backend
formulir fungsi publik ($ instance) {
if (isset ($ instance[ ‘title’ ] )) {
$ title = $ instance[ ‘title’ ];
}
lain {
$ title = __ ('Judul baru', 'wpb_widget_domain');
}
// formulir admin Widget
?>
<label untuk = "get_field_id ('title'); ?> ">
<input class = "widefat" id = "get_field_id ('title'); ?> "name ="get_field_name ('title'); ?> "type =" text "value =""/>
<? php
}
// Memperbarui widget menggantikan instance lama dengan yang baru
pembaruan fungsi publik ($ new_instance, $ old_instance) {
$ instance = array ();
$ instance[‘title’] = (! kosong ($ new_instance[‘title’] ))? strip_tags ($ new_instance[‘title’] ): '';
return $ instance;
}
// Kelas wpb_widget berakhir di sini
}
// Daftarkan dan muat widget
function wpb_load_widget () {
register_widget ('wpb_widget');
}
add_action ('widgets_init', 'wpb_load_widget');
Setelah menambahkan kode, Anda harus menuju Penampilan »Widget halaman. Anda akan melihat Widget WPBeginner baru dalam daftar widget yang tersedia. Anda harus menarik dan melepas widget ini ke bilah sisi.
Widget ini hanya memiliki satu bidang isian untuk diisi, Anda dapat menambahkan teks Anda dan klik tombol Simpan untuk menyimpan perubahan Anda.
Sekarang Anda dapat mengunjungi situs web Anda untuk melihatnya beraksi.
Sekarang mari kita pelajari kodenya lagi.
Pertama kami mendaftarkan ‘wpb_widget’ dan memuat widget khusus kami. Setelah itu kami menentukan apa yang widget lakukan, dan cara menampilkan widget back-end.
Terakhir, kami menetapkan cara menangani perubahan yang dilakukan pada widget.
Sekarang ada beberapa hal yang mungkin ingin Anda tanyakan. Misalnya, apa tujuan wpb_text_domain?
WordPress menggunakan gettext untuk menangani terjemahan dan lokalisasi. Wpb_text_domain ini dan __e memberitahu gettext untuk membuat string tersedia untuk terjemahan. Lihat bagaimana Anda dapat menemukan tema WordPress siap terjemahan.
Jika Anda membuat widget khusus untuk tema Anda, maka Anda dapat mengganti wpb_text_domain dengan domain teks tema Anda.
Kami harap artikel ini membantu Anda mempelajari cara mudah membuat widget WordPress khusus. Anda mungkin juga ingin melihat daftar widget WordPress paling berguna untuk situs Anda.
Jika Anda menyukai artikel ini, silakan berlangganan artikel kami Saluran Youtube untuk tutorial video WordPress. Anda juga dapat menemukan kami di Indonesia dan Facebook.
.
