Apa Itu Widget dan Cara Menggunakannya di WordPress

Secara umum, widget adalah elemen GUI (Graphical User Interface) yang menampilkan informasi atau memberikan cara khusus bagi user untuk berinteraksi dengan sistem operasi atau aplikasi. Widget bisa ditemukan di komputer, HP, hingga platform pembuatan website seperti WordPress.

Di WordPress, widget merupakan objek PHP yang bisa membantu Anda menambahkan konten atau fitur ke website Anda dengan mudah tanpa harus menulis kode. Misalnya, widget bisa digunakan untuk menampilkan postingan terkini, atau menambahkan formulir kontak.

Nah, di artikel ini, kami akan membahas berbagai hal seputar widget di WordPress, termasuk cara menambahkan widget di WordPress dan membuatnya dari awal. Yuk, simak selengkapnya di bawah ini!

Di Mana Letak Widget di WordPress?

Apabila Anda menggunakan classic theme, ikuti langkah-langkah berikut ini untuk mengakses area widget di WordPress:

1. Login ke admin area WordPress Anda.
2. Pastikan plugin Classic Widgets telah diinstal dan diaktifkan.
3. Temukan dan klik Appearance (Tampilan) di sidebar kiri.
4. Pilih Widget.

Anda akan melihat Available Widgets (Widget yang Tersedia) di sisi kiri layar. Ini adalah widget yang bisa Anda tambahkan ke website secara langsung.

Di sisi kanan, Anda akan melihat area widget atau sidebar, yang biasanya mencakup sidebar, footer, dan header. Area widget yang tersedia akan bergantung pada tema WordPress klasik yang Anda pilih.

Apabila menggunakan block theme, Anda bisa menemukan widget di bagian editor website, halaman, atau postingan. Cukup perluas area block inserter atau tombol + di sudut kiri atas layar dan scroll ke bawah untuk melihat widget yang tersedia.

Cara Menambahkan Widget di WordPress

Ada banyak sekali widget siap pakai yang bisa Anda tambahkan ke website WordPress. Beberapa di antaranya sudah terintegrasi tanpa masalah di WordPress, dan yang lainnya bisa Anda dapatkan dengan menginstal plugin.

Kami akan membahas kedua opsi tersebut di bagian ini.

Menambahkan Widget Bawaan ke Website

Apabila Anda menggunakan classic theme, ikuti langkah-langkah berikut ini untuk menambahkan salah satu widget yang sudah terinstal ke website WordPress Anda:

1. Dari panel admin WordPress, buka Appearance (Tampilan) → Widget.
2. Pilih satu opsi dari Available Widgets (Widget yang Tersedia) dan seret ke area yang diinginkan di sisi kanan. Sebagai contoh, kami akan menambahkan widget Recent Posts ke Bagian Footer.
3. Sesuaikan widget dengan memasukkan Title (Judul) dan menentukan Number of posts to show untuk jumlah postingan yang akan ditampilkan. Anda juga bisa menampilkan tanggal posting.
4. Setelah selesai, klik Save (Simpan).

Kira-kira seperti inilah tampilan widget yang sudah ditambahkan ke website.

Apabila Anda menggunakan block theme, ikuti langkah-langkah berikut ini untuk menambahkan salah satu widget yang sudah terinstal ke website WordPress Anda:

1. Dari panel admin WordPress, buka Appearance (Tampilan) → Editor.
2. Di pratinjau website, pilih area widget pilihan Anda. Untuk contoh ini, kami akan memilih Footer.
3. Klik tombol + dan scroll ke bawah hingga Anda menemukan kategori Widget. Sebagai contoh, kami akan memilih widget Latest Posts.
4. Widget akan muncul di area pratinjau. Anda bisa menyesuaikan perataannya dan menentukan apakah link akan ditampilkan dalam daftar atau kisi.
5. Setelah selesai, klik Save (Simpan).

Seperti inilah tampilan widget di website kami.

Menambahkan Widget ke Website dengan Plugin

Anda juga bisa menambahkan widget ke website dengan menginstal plugin pihak ketiga yang menyediakannya.

Sebagai contoh, kami akan menggunakan plugin RaraTheme Companion, yang menambahkan 23 widget untuk membantu menyesuaikan tema WordPress lebih lanjut. Namun, perlu diketahui bahwa beberapa plugin widget ini hanya kompatibel dengan classic theme.

Ikuti langkah-langkah berikut ini:

1. Pastikan RaraTheme Companion sudah diinstal dan diaktifkan. 
2. Buka Appearance (Tampilan) → Widget. Anda akan melihat lebih banyak pilihan di bawah Available Widgets (Widget yang Tersedia).

3. Pilih widget yang ingin Anda tambahkan lalu seret ke area widget yang diinginkan. Sebagai contoh, kami akan menambahkan widget Author Bio ke Footer.
4. Mulai sesuaikan widget. Anda bisa menambahkan judul, nama penulis, foto, dan banyak lagi.

5. Klik Save (Simpan) setelah Anda selesai.

Selesai! Anda pun sudah berhasil menambahkan widget dari plugin ke website Anda.

Cara Mengatur Widget WordPress dengan CSS

Tergantung pada tema yang digunakan, Anda bisa menyesuaikan widget melalui dashboard WordPress atau Site Editor (Editor Situs). Namun, tingkat penyesuaiannya mungkin terbatas bagi beberapa pengguna.

Apabila menginginkan cara yang lebih teknis serta lebih suka menggunakan HTML dan CSS, Anda bisa menambahkan CSS kustom ke WordPress. Berikut caranya:

1. Di Editor, pilih widget yang ingin Anda tambahkan CSS khusus.
2. Di sidebar kanan, alihkan ke tab Block dan scroll ke bawah hingga Anda menemukan Advanced (Tingkat Lanjut).

3. Tentukan nama CSS class di bagian ADDITIONAL CSS CLASS(ES) (CSS TAMBAHAN) dan klik Update (Perbarui). Anda akan menggunakan class khusus ini untuk menentukan CSS baru bagi widget Anda.
4. Kembali ke panel admin dan buka Appearance (Tampilan) → Customize (Sesuaikan) → Additional CSS (CSS Tambahan).
5. Akan muncul kotak teks untuk menambahkan gaya CSS. Contohnya, kami akan menunjukkan cara menambahkan warna latar belakang untuk widget. Perhatikan bahwa widget dalam CSS di bawah ini menandakan class kustom yang tadi sudah kami tetapkan.

6. Setelah Anda selesai, klik Save (Simpan).

Setelah ini, CSS tambahan pun akan diterapkan ke widget Anda.

Cara Membuat Widget Baru di WordPress

Meskipun ada banyak widget siap pakai yang sudah disertakan di WordPress maupun dari plugin pihak ketiga, Anda mungkin perlu membuat widget kustom baru untuk kebutuhan yang sangat spesifik.

Nah, berikutnya kami akan menjelaskan cara membuat widget di WordPress. Untuk membantu Anda mengikuti langkah-langkahnya, kami akan membuat widget sederhana untuk menambahkan blok konten ke sidebar atau area widget website Anda.

1. Buat File Plugin Widget

Pertama, buat direktori baru bernama my-custom-widget. Di dalam direktori ini, buat file baru bernama my-custom-widget.php. File ini akan diisi dengan kode untuk widget Anda.

Sekarang, buka file tersebut di editor teks lalu salin dan tempel kode di bawah ini. Kode ini akan membuat header yang menyediakan metadata plugin. Metadata ini mencakup nama plugin, deskripsi, versi, dan pembuatnya. Kode ini juga memiliki prosedur keamanan yang mencegah kodenya dieksekusi di luar website WordPress.

<?php

/*

Plugin Name: My Custom Widget

Description: A simple custom widget example.

Version: 1.0

Author: Your-Name-here

*/

// Ensure this file is being included by WordPress.

defined('ABSPATH') or die('No script kiddies please!');

Selanjutnya, kami akan membuat class My_Custom_Widget. Class ini mendefinisikan widget WordPress kustom yang melengkapi class WP_Widget. Berikut adalah fungsi-fungsi penting widget ini:

• __construct() – menginisialisasi widget WordPress dengan identifier unik, nama, dan deskripsi.
• widget() – menampilkan konten widget di front-end, termasuk judul kalau Anda mengaturnya dalam pengaturan widget. Kode ini diikuti dengan pesan default “Hello, World!”.
• form() – menghasilkan formulir pengaturan widget di area admin tempat pengguna bisa mengatur judul khusus untuk widget miliknya.
• update() – menyimpan pengaturan widget ke database.

Fungsi __construct() dan widget() wajib digunakan untuk mendefinisikan plugin widget.

Meskipun secara teknis fungsi form() dan update() bisa dilewatkan kalau widget Anda tidak memiliki opsi apa pun, sebaiknya Anda tetap menyertakan keduanya meskipun dikosongkan.

Sekarang, silakan salin dan tempel kode berikut ini ke file PHP yang sama.

class My_Custom_Widget extends WP_Widget {

// Constructor

function __construct() {

     parent::__construct(

         'my_custom_widget', // Base ID

         __('My Custom Widget', 'text_domain'), // Name

         array('description' => __('A Custom Widget', 'text_domain'),) // Args

     );

}

// The widget() method to display the widget content on the front-end

public function widget($args, $instance) {

     echo $args['before_widget'];

     if (!empty($instance['title'])) {

         echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];

     }

     echo __('Hello, World!', 'text_domain');

     echo $args['after_widget'];

}

// The form() method to create the widget settings form in the admin area

public function form($instance) {

     $title = !empty($instance['title']) ? $instance['title'] : __('New title', 'text_domain');

     ?>

     <p>

     <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>

     <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>">

     </p>

     <?php

}

// The update() method to save the widget settings

public function update($new_instance, $old_instance) {

     $instance = array();

     $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';

     return $instance;

}

}

Terakhir, tambahkan kode berikut ini ke file Anda. Kode ini berfungsi untuk mendaftarkan widget. Setelah itu, file plugin ini pun sudah selesai.

// Register the widget

function register_my_custom_widget() {

register_widget('My_Custom_Widget');

}

add_action('widgets_init', 'register_my_custom_widget');

2. Buat Arsip dan Upload ke WordPress

Setelah file PHP plugin Anda siap, buat arsip ZIP dari direktori my-custom-widget.

Selanjutnya, buka dashboard WordPress dan buka Plugins → Add New Plugin (Tambahkan Plugin Baru). Upload file ZIP dan tunggu sampai plugin terinstal.

Terakhir, buka Plugins → Installed Plugins (Plugin Terpasang), scroll ke bawah hingga Anda melihat My Custom Widget di area widget, lalu klik Activate (Aktifkan).

3. Tambahkan Widget ke Sidebar WordPress

Untuk menambahkan widget kustom Anda ke sidebar, buka Appearance → Widget.

Selanjutnya, pilih sidebar tempat Anda ingin meletakkan widget. Klik ikon + lalu cari My Custom Widget di kolom pencarian. Saat widget muncul, klik widget tersebut.

Anda kemudian bisa mengatur judul widget dan visibilitas yang diinginkan.

Terakhir, klik Update (Perbarui) di bagian kanan atas layar. Selesai! Widget baru sudah terinstal dan bisa ditambahkan di website WordPress Anda.

10 Contoh Widget Populer di WordPress

WordPress meyediakan ratusan widget bawaan dan pihak ketiga. Di bagian ini, kami akan membahas sepuluh pilihan populer yang bisa menambahkan fitur-fitur berguna ke website Anda dan meningkatkan pengalaman penggunanya.

Latest Posts

Widget ini menyoroti postingan blog terbaru Anda sehingga pengunjung akan selalu melihat informasi terkini tentang konten Anda, yang bisa mendorong mereka untuk melihat-lihat konten website Anda lebih jauh.

Categories List

Widget Categories List atau daftar kategori adalah opsi bawaan lainnya yang mencantumkan semua kategori di blog Anda. Widget ini membantu pengunjung menemukan dengan cepat konten yang paling menarik bagi mereka.

Tag Cloud

Widget Tag Cloud menampilkan tag yang paling sering Anda gunakan dalam format cloud, memudahkan pengunjung melihat topik yang sering Anda tulis. Semakin sering Anda menggunakan tag, semakin besar ukuran fontnya hingga menjadi lebih terlihat.

Social Icons

Widget ini menampilkan ikon yang ditautkan ke profil media sosial Anda, memudahkan pengunjung untuk terhubung dengan Anda di platform lain. Anda bisa menyesuaikan warna, ukuran, dan perataan ikon agar sesuai dengan tema WordPress Anda.

Custom HTML

Dengan widget bawaan ini, Anda bisa menambahkan kode HTML ke area widget, yang cocok bagi developer dan pengguna teknis yang ingin menambahkan fungsi khusus atau elemen desain ke websitenya.

Archives

Widget arsip bisa digunakan untuk menampilkan arsip tanggal postingan Anda. Fitur ini menyediakan fitur bagi pengunjung untuk menemukan konten lama di website Anda.

Jetpack Search

Jetpack Search menggunakan Elasticsearch, yang merupakan mesin pencari canggih. Widget ini menyertakan beberapa fitur praktis, seperti pengindeksan otomatis dari semua postingan dan halaman publik.

FAQ by RaraTheme Companion

Widget pihak ketiga yang disediakan oleh RaraTheme Companion ini berfungsi untuk menambahkan bagian FAQ ke website. Anda bisa menentukan pertanyaan dan jawaban secara langsung dari widget formulir, serta menyesuaikan visibilitas dan aspek-aspek lainnya.

WPForms

Widget WPForms adalah opsi pihak ketiga yang berfungsi untuk menambahkan formulir kontak, survei, formulir pembayaran, atau formulir pendaftaran dengan mudah ke sidebar atau area widget lainnya.

WP Go Maps

Widget WP Go Maps disertakan dengan plugin peta yang populer. Widget ini menyediakan akses mudah bagi pengunjung website ke lokasi tertentu di Google Maps.

Anda bisa menyesuaikan tampilan peta, mengatur lokasi default, menambahkan beberapa pin, membuat penanda menggunakan teks dan gambar, dan masih banyak lagi.

Tips Mengelola Widget di WordPress

Widget bisa dimanfaatkan untuk menambahkan berbagai fitur dan fungsi ke website Anda. Namun, setiap fitur yang ditambahkan bisa memperlambat loading halaman, tingkat responsive, dan mungkin mengganggu visual website Anda.

Hal-hal tersebut mungkin tidak masalah kalau dampaknya tidak signifikan. Misalnya, widget media sosial mungkin hanya memperlambat website satu milidetik, yang tentunya tidak begitu terasa. Namun, semakin banyak widget yang ditambahkan, performa website Anda mungkin terus melambat.

Meskipun tidak ada batasan tetap untuk jumlah widget yang bisa ditambahkan, sebaiknya hanya gunakan widget yang benar-benar Anda butuhkan agar performa dan pengalaman pengguna website Anda tetap optimal. Biasanya, lima widget sudah cukup untuk sebagian besar website.

Perlu diperhatikan juga bahwa ada faktor-faktor lainnya yang memengaruhi performa website, termasuk web hosting yang digunakan. Kalau hosting Anda lambat, semua upaya optimasi yang dilakukan akan percuma.

Jadi, pilihlah provider hosting terbaik yang menyediakan fitur-fitur khusus, misalnya paket managed WordPress hosting dari Hostinger sudah diakui oleh WordPress.org sendiri. Paket ini menyertakan fitur optimasi untuk memastikan website Anda selalu dalam performa terbaiknya.

Berikut beberapa tips terbaik untuk menjaga website Anda tetap terkelola dan mudah diakses saat menggunakan widget.

• Kelola widget dengan baik – gunakan beberapa area widget dan usahakan agar widget Anda tertata secara logis. Misalnya, gunakan sidebar untuk navigasi, lalu footer untuk informasi tambahan.
• Lihat pratinjau perubahan yang dilakukan – sebelum memublikasikan widget di website, gunakan opsi live preview untuk memastikan widget Anda sudah ditampilkan dan berfungsi seperti yang diharapkan.
• Update plugin secara rutin – widget adalah kelas plugin khusus di lingkungan WordPress. Anda harus selalu memperbarui plugin untuk memastikan kompatibilitas dan keamanan widget Anda. 

Kesimpulan

Widget WordPress berguna untuk menyesuaikan tata letak dan fungsi website Anda. Mulai dari menampilkan postingan blog terbaru, ikon media sosial, testimoni, hingga mengintegrasikan formulir kontak, Anda bisa menggunakan dengan widget.

Di artikel ini, Anda sudah mempelajari berbagai hal tentang widget WordPress, termasuk cara menggunakan widget di WordPress dan mengaturnya. Kami juga menjelaskan beberapa widget WordPress yang paling populer, termasuk widget bawaan WordPress serta opsi pihak ketiga seperti RaraTheme Companion dan Jetpack Search.

Apabila memiliki pemahaman coding, Anda juga bisa mencoba membuat widget sendiri. Untuk membuatnya, Anda hanya perlu memiliki pengetahuan CSS dasar lalu mengikuti tutorial di artikel ini.

Semoga artikel ini berhasil membantu Anda bereksperimen dengan widget serta meningkatkan dan mengoptimalkan website Anda dengan widget, ya. Apabila masih memiliki pertanyaan, sampaikan lewat komentar yuk!

Tanya Jawab (FAQ) Apa Itu Widget WordPress