Cara Membuat Widget WordPress Kustom

Apakah Anda ingin membuat widget WordPress kustom Anda sendiri? Widget memungkinkan Anda untuk menambahkan item tanpa konten di bilah sisi atau area siap widget di situs Anda.

Anda dapat menggunakan widget untuk menambahkan spanduk, pengumuman, formulir berlangganan 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 sedang mempelajari pengembangan dan pengkodean WordPress.

Apa itu widget WordPress?

Widget WordPress berisi cuplikan kode yang dapat Anda tambahkan ke barra di sisi situs web atau area siap widget Anda.

Anggap saja sebagai modul yang dapat Anda gunakan untuk menambahkan elemen berbeda menggunakan antarmuka seret dan lepas yang sederhana.

Secara default, WordPress hadir dengan seperangkat widget standar yang dapat Anda gunakan dengan tema WordPress apa pun. Lihat panduan pemula kami tentang cara menambahkan dan menggunakan widget di WordPress.

WordPress juga memungkinkan pengembang untuk membuat widget khusus mereka sendiri.

Banyak tema dan plugin WordPress premium hadir dengan widget khusus Anda sendiri yang dapat Anda tambahkan ke bilah sisi.

Misalnya, Anda dapat menambahkan formulir kontak, formulir masuk khusus, atau galeri foto ke bilah sisi Anda tanpa memasukkan kode apa pun.

Dengan itu, mari kita lihat cara mudah membuat widget WordPress kustom Anda sendiri.

Video tutorial

Daftar ke WPBeginner

Jika Anda menyukai instruksi tertulis, teruslah membaca.

Buat Widget Kustom di WordPress

Jika Anda mempelajari pengkodean WordPress, Anda akan memerlukan lingkungan pengembangan lokal. Anda dapat menginstal WordPress di komputer Anda (Mac atau ) Windows).

Ada beberapa cara untuk menambahkan kode widget WordPress kustom Anda.

Idealnya, Anda dapat membuat plugin khusus situs dan menempelkan kode widget Anda ke dalamnya.

Anda juga dapat menempelkan kode di file .php tema Anda. Namun, itu hanya akan tersedia ketika tema tertentu diaktifkan.

Alat lain yang dapat Anda gunakan adalah plugin Cuplikan Kode yang memungkinkan Anda menambahkan kode khusus dengan mudah ke situs WordPress Anda.

Dalam tutorial ini, kita akan membuat widget sederhana yang hanya menyapa pengunjung. Tujuannya di sini adalah untuk membiasakan diri dengan kelas widget WordPress.

Mari kita mulai.

Membuat Widget Dasar WordPress

WordPress hadir dengan kelas Widget WordPress bawaan. Setiap widget WordPress baru memperluas kelas widget WordPress.

Ada 18 metode yang disebutkan dalam panduan pengembang WordPress yang dapat digunakan dengan kelas WP Widget.

Namun, untuk tujuan tutorial ini, kami akan fokus pada metode berikut.

• __construct(): ini adalah bagian dimana kita membuat id widget, judul dan deskripsi.
• widget: di sinilah kita mendefinisikan hasil yang dihasilkan oleh widget.
• form: Bagian kode ini adalah tempat kita membuat formulir dengan opsi widget untuk backend.
• update: ini adalah bagian di mana kita menyimpan opsi widget di database.

Mari kita pelajari kode berikut di mana kita menggunakan keempat metode ini di kelas WP_Widget.

// Creating the widget 
 class wpb_widget extends WP_Widget {
 
 // The construct part  
 function __construct() {
 
 }
  
 // Creating widget front-end
 public function widget( $args, $instance ) {
 
 }
          
 // Creating widget Backend 
 public function form( $instance ) {
 
 }
      
 // Updating widget replacing old instances with new
 public function update( $new_instance, $old_instance ) {
 
 }
 
 // Class wpb_widget ends here
 } 
 
 

Bagian terakhir dari kode ini adalah tempat kita akan mendaftarkan widget dan memuatnya ke WordPress.

function wpb_load_widget() {
     register_widget( 'wpb_widget' );
 }
 add_action( 'widgets_init', 'wpb_load_widget' );
 

Sekarang mari gabungkan semua ini bersama-sama untuk membuat widget WordPress dasar.

Anda dapat menyalin dan menempelkan kode berikut ke dalam plugin kustom atau file .php tema Anda.

 
  
 // Buat widget kelas wpb_widget yang memperluas WP_Widget { function __construct() { parent:: __construction ( // ID dasar widget Anda
 'wpb_widget'// Nama widget akan muncul di UI __ ('Widget Pemula WP', 'wpb_widget_domain'), // Deskripsi widget array ('keterangan' => __ ('Contoh Widget Berdasarkan Tutorial WPBeginner', 'wpb_widget_domain'),) );  } // Buat widget di depan widget fungsi publik ($args, $instance) { $title = application_filters ('widget_judul'$ contoh ('judul'));  // sebelum dan sesudah argumen widget yang didefinisikan oleh echo $args ('sebelum_widget');  if (!empty($title)) echo $args('sebelum_judul').  $tajuk.  $args ('after_title');  // Di sinilah Anda menjalankan kode dan menampilkan output echo __ ('Halo dunia!', 'wpb_widget_domain');  gema $args ('after_widget');  } // Widget final form fungsi publik ($ instance) { if (isset ($ instance ('judul'))) { $judul = $contoh ('judul');  } else { $judul = __ ('Judul baru', 'wpb_widget_domain');  } // widget formulir admin ?>
 
  
Setelah menambahkan kode, Anda harus memasukkan Penampilan »Widget Halaman.  Anda akan melihat Widget WPBeginner baru dalam daftar widget yang tersedia.  Anda harus drag dan drop widget ini di sidebar. 
 
 
Widget ini hanya memiliki satu bidang formulir untuk diisi, Anda dapat menambahkan teks Anda dan klik tombol simpan untuk menyimpan perubahan Anda. 
 
Anda sekarang dapat mengunjungi situs web mereka untuk melihatnya beraksi. 
 
 
Sekarang pelajari kodenya lagi. 
 
Pertama kita mendaftar "wpb_widget" dan memuat widget khusus kita.  Kemudian kita mendefinisikan apa yang dilakukan widget dan bagaimana menampilkan backend widget.  
 
Terakhir, kami mendefinisikan cara menangani perubahan yang dibuat pada ekstensi. 
 
Sekarang ada beberapa hal yang mungkin ingin Anda tanyakan.  Misalnya, wpb copy_domain untuk apa?
 
WordPress menggunakan gettext untuk menangani terjemahan dan pelokalan.  wpb_domain dan __e ini memberi tahu gettext untuk membuat string tersedia untuk diterjemahkan.  Lihat bagaimana Anda dapat menemukan tema WordPress siap terjemahan. 
 
Jika Anda membuat widget khusus untuk tema Anda, Anda dapat mengganti wpb's_domain dengan domain teks tema Anda. 
 
Kami harap artikel ini membantu Anda mempelajari cara membuat widget WordPress kustom dengan mudah.  Anda juga dapat melihat daftar widget WordPress yang paling berguna untuk situs web Anda. 
 
Jika Anda menyukai artikel ini, berlangganan saluran kami YouTube untuk menonton video tutorial WordPress.  Anda juga dapat menemukan kami di Twitter dan Facebook.