WordPress

Cara Menambahkan Widget di WordPress

Pengenalan

Tahukah Anda jika Anda dapat membuat custom widget sendiri di WordPress? Selain ada banyak widget tambahan yang didesain bersamaan dengan beberapa tema dan plugin, WordPress juga memberi pilihan untuk mengodekan custom widget secara manual bagi semua user. Melalui tutorial WordPress ini, Anda akan mempelajari cara menjalankan widget dasar (basic widget) di WordPress. Jika hal ini terdengar sulit, maka kami berani jamin karena yang Anda perlukan hanyalah pengetahuan dasar tentang WordPress dan PHP. Setelah itu, Anda dapat mengetahui cara menambahkan widget di WordPress.

Yang Anda Butuhkan

Sebelum memulai tutorial ini, Anda membutuhkan:

  • Akses ke dashboard admin WordPress
  • Text editor apa pun

Tentang Widget WordPress

Widget WordPress dibuat untuk memudahkan Anda menambahkan item ke situs melalui software antarmuka drag-and-drop yang sederhana. Berbeda dari CMS lainnya, WordPress memiliki banyak widget. Widget standard ini memberikan kegunaan dasar dan sesuai dengan semua tema WordPress. Namun, widget yang terlihat sederhana terkadang susah untuk dijalankan. Dalam hal ini, pilihan terbaiknya adalah melakukan scourge pada plugin yang menawarkan fungsionalitas yang Anda inginkan. Selagi Anda mencari plugin untuk fungsi tertentu, ada beberapa kasus yang bahkan plugin pihak ketiga tidak dapat memenuhi kebutuhan Anda. Di sinilah custom widget menawarkan kelebihannya. Custom widget harus dibuat dari langkah paling awal. Hal ini membuat user memiliki kontrol penuh untuk melakukan cara menambahkan widget di WordPress.

Yang Perlu Diperhatikan Sebelum Membuat Custom Widget

Sebelum memulai membuat custom widget, ada beberapa hal penting yang harus dipertimbangkan. Pertama-tama, Anda bisa memilih opsi pengodean pada widget di plugin custom. Langkah ini akan mengaktifkan widget agar dapat dijalankan dengan situs apa pun yang menggunakan plugin tersebut. Atau, Anda dapat dengan mudah menambahkan widget ke file functions.php dari tema tertentu, yang mana hanya bisa dijalankan dengan tema tersebut. Kedua, Anda dapat menambahkan widget di situs yang sudah online, atau di jaringan lokal. Sangat kami sarankan untuk menjalankan widget di jaringan lokal terlebih dulu (baca tutorial tentang cara menjalankan WordPress di Docker). Setelah yakin widget dapat dijalankan, Anda bisa dengan mudah melakukan port widget ke situs Anda.

Cara Kerja Custom Widget: Widgets API

WordPress memiliki Widgets API di mana Anda dapat melakukan pengodean pada custom widget. Untuk membuat custom widget apa pun, sebaiknya gunakan WP_Widget class standard dari API. Class basis ini menawarkan sekitar 20 fungsi yang bisa Anda gunakan. Setidaknya dibutuhkan minimal 4 fungsi agar widget apa pun dapat dijalankan. Keempat fungsi tersebut adalah:

  • _construct() – fungsi constructor
  • widget() – memuat output widget
  • form() – menentukan pengaturan widget di dashboad WordPress
  • update() – memperbarui pengaturan widget

Tentu saja, ada banyak fungsi atau metode lain yang menyediakan fungsionalitas tambahan. Kunjungi halaman ini jika ingin mengetahui tentang class WP_Widget selengkapnya.

Cara Membuat Widget di WordPress

PENTING: Sebaiknya backup penuh situs WordPress Anda (klik di sini untuk membaca tutorialnya) sebelum lanjut ke langkah atau proses selanjutnya. Selain itu, gunakan child theme WordPress.

Sebelumnya sudah kami jelaskan tentang custom widget WordPress. Sekarang saatnya untuk memulai cara membuat widget di WordPress. Di tutorial ini, sebagai contoh, kami akan membuat custom widget sederhana Hello Word. Ikutilah caranya agar Anda mahir dan dapat membuat widget yang lebih kompleks.

Satu hal lagi: kami akan menuliskan kode ini di dalam file functions.php dari tema yang baru saja di-load. Anda dapat melakukannya di berbagai plugin custom.

Buka text editor apa pun di komputer Anda dan buat class baru yang memperluas WP_Widget class basis, seperti ini:

Sekarang, kami akan mulai menjalankan 4 fungsi seperti yang disebutkan di atas, satu per satu. Fungsi pertama dalam daftar adalah fungsi constructor yang akan kami gunakan untuk menentukan ID, nama widget yang muncul di UI dan deskripsi:

Setelah itu, buat tampilan widget. Misalnya, tampilan front-end widget yang akan dilakukan melalui fungsi widget():

Kita telah membuat output widget yang menampilkan ‘Hello World!’ dan juga judul widget seperti yang telah ditentukan oleh user.

Dengan menggunakan fungsi form(), kami akan memprogramkan back-end widget:

Custom widget telah selesai dibuat atau di-setup. Jika user memasukkan judul, maka judul tersebut akan dimasukkan ke dalam form HTML yang telah kita buat. Sebaliknya, nama judul akan diatur sebagai Default Title. Beginilah tampilan widget yang akan muncul di admin area WordPress.

Hal lain yang tak kalah pentingnya adalah jalankan fungsi update untuk me-refresh widget setiap kali pengaturan diubah.

Fungsi ini akan mengambil judul dari instance yang baru saja dibuat, menghapus tag HTML/PHP manapun, dan mengirimkan judul ke instance serta mengembalikannya.

Satu hal lagi yang perlu dilakukan: gunakan fungsi tambahan untuk menyimpan (register) widget dengan WordPress:

Perlu diingat bahwa baris perintah di atas harus diletakkan di luar fungsi hstngr_widget.

Kita telah membuat fungsi baru, yaitu hstngr_register_widget()-yang menyimpan widget menggunakan ID widget-yang tersimpan di fungsi the_construct. Kemudian, kami menghubungkan fungsi ini menggunakan widgets_init, yang akan meload widget ini ke dalam WordPress melalui metode atau fungsi add_action yang sudah terpasang. Kode terakhir custom widget WordPress akan terlihat seperti ini:

Anda bisa menggunakan File Manager, aplikasi FTP, atau WordPress Editor untuk menambahkan kode ini ke file tema functions.php. Tambahkan kode untuk mengaktifkan file tema function.php dan klik tombol Update File untuk menyimpan perubahan.

Menambahkan widget core ke function.php

Buka area admin WordPress, dan arahkan kursor ke bagian Appearance -> Widgets. Anda akan melihat widget bernama Hostinger Sample Widget di daftar Available Widgets.

Cara menambahkan widget di wordpress - Custom Widget WordPress

Drag widget tersebut dan drop ke menu Sidebar di sebelah kanan halaman. Kini Anda dapat mengatur judul widget. Simpan perubahan, dan buka situs Anda. Akan muncul custom widget dengan judul seperti yang sudah Anda tentukan. Ketikkan kata-kata ‘Hello World!’ di dalamnya.

Selamat! Anda sekarang berhasil membuat custom widget WordPress. Lihat tampilan widget Anda.

Custom Widget WordPress sudah aktif

Kesimpulan

Membuat custom widget WordPress dari yang paling dasar sama seperti ketika Anda mendaki gunung yang tinggi. Akan tetapi, kenyataannya, membuat custom WordPress bisa dilakukan bahkan oleh siapa pun yang masih di tingkat dasar HTML dan PHP. Di tutorial ini, Anda telah mengetahui cara menambahkan widget di WordPress dengan langkah yang sangat sederhana. Setelah ini, Anda pasti akan bisa membuat widget yang fungsional. Silakan membaca tutorial WordPress kami yang lain.

Gabung bersama ratusan ribu pelanggan di seluruh dunia

dan dapatkan tutorial baru langsung di email Anda

Please wait...

Abone olduğunuz için teşekkürler!

Dapatkan harga hemat!

Web Hosting Gratis Domain mulai dari

Rp.10.275
/bln