Apa Itu Widget dan Cara Menggunakannya di WordPress

Apa Itu Widget dan Cara Menggunakannya di WordPress

Pada dasarnya, widget adalah elemen GUI (Graphical User Interface) yang menampilkan informasi atau memberikan cara khusus bagi user untuk berinteraksi dengan sistem operasi atau aplikasi.

Di WordPress, Anda bisa menggunakan widget untuk mengoptimalkan fungsionalitas website melalui sidebar dan footer.

Dalam artikel ini, kami akan membahas berbagai hal seputar widget, seperti pengertian widget dan kegunaannya yang mempermudah navigasi di halaman situs, serta cara menambah widget di WordPress sesuai kebutuhan Anda.

Apa Itu Widget WordPress?

Di smartphone, widget umumnya berupa ikon yang berfungsi sebagai ‘shortcut’ untuk fitur atau fungsi tertentu sebuah aplikasi.

Nah, di WordPress, widget memiliki pengertian yang sama, yaitu elemen yang memiliki satu fungsi khusus: menambahkan konten dan struktur pada sidebar atau footer. Contohnya, widget bisa menampilkan postingan terbaru Anda, kalender, kolom pencarian, dan lainnya.

Berkat salah satu keunggulan WordPress, yaitu kemudahannya dikelola, Anda bisa menggunakan widget WordPress dengan sangat mudah. Tidak perlu menulis kode HTML untuk mengaturnya. Cukup gunakan fitur drag-and-drop untuk meletakkan widget ke suatu area di halaman situs, yang biasanya disebut widget area. Tata letak area ini berbeda-beda tergantung pada tema yang digunakan. Terkadang, widget hanya bisa diletakkan di sidebar, di footer, atau keduanya.

Salah satu keunggulan widget adalah elemen ini memungkinkan Anda menambahkan berbagai fitur canggih di halaman situs. Sebagai contoh, Anda bisa menautkan akun sosial media untuk terhubung dengan para pembaca, meskipun harus menginstal plugin lain secara manual untuk fungsi ini. Tapi jangan khawatir, semuanya akan kami bahas dalam artikel ini.

Sekarang, kami akan terlebih dahulu membahas beberapa widget yang disediakan WordPress.

Widget WordPress Default

Secara default, WordPress menyediakan macam-macam widget untuk blog atau website Anda, di antaranya:

  1. Archive untuk menampilkan postingan bulanan.
  2. Audio memungkinkan Anda menyematkan pemutar audio di halaman tertentu.
  3. Calendar untuk menampilkan tanggal, bulan, dan tahun.
  4. Categories untuk menampilkan daftar atau menu drop-down untuk kategori postingan.
  5. Gallery untuk menampilkan galeri gambar.
  6. Image untuk menampilkan gambar.
  7. Meta untuk menampilkan webmaster login, RSS, dan link WordPress.org.
  8. Navigation Menu untuk menambahkan menu navigasi pada sidebar.
  9. Pages untuk membuat daftar halaman.
  10. Recent Comment untuk menampilkan komentar terbaru di halaman Anda.
  11. Recent Post untuk menampilkan postingan terbaru.
  12. RSS yang merupakan entri untuk RSS atau Atom feed.
  13. Search untuk menampilkan kolom pencarian di situs.
  14. Tag Cloud untuk menampilkan tag pada postingan.
  15. Videos untuk menampilkan video yang disematkan dari penyedia video populer.

Bagaimana Cara Menambah Widget di WordPress?

Setelah membahas apa itu widget beserta opsi canggih yang disediakan WordPress, mari kita lanjutkan ke cara menambahkan widget di WordPress. Untuk melakukannya, ikuti langkah-langkah berikut:

  1. Masuk ke dashboard WordPress.
  2. Klik Appearance, lalu klik Widgets.
    tampilan widgets yang tersedia pada akun WordPress
  3. Seperti yang Anda lihat, di sisi kiri ada beberapa widget yang bisa ditambahkan, dan ada area widget di sisi kanan. Di sini, kami menggunakan tema Radcliff dari Anders Noren yang memungkinkan kami menempatkan widget di footer.
  4. Drag-and-drop widget ke area yang diinginkan. Pada contoh ini, kami menggunakan widget Video, Calendar, Categories, dan Meta. Untuk beberapa widget, seperti video, Anda perlu secara manual mengunggah atau menambahkan link video yang ingin disematkan (embed). Untuk tutorial ini, kami menggunakan video dari YouTube.
    menambahkan link youtube pada widget
  5. Selesai! Tampilannya di website akan terlihat seperti pada screenshot di bawah ini.
    tampilan setelah eksekusi widget video pada footer

Selain itu, ada juga cara menambahkan widget pada blog atau website secara real-time melalui menu Customize. Dengan cara ini, Anda bisa langsung melihat tampilan situs sembari melakukan perubahan. Anda bisa mengaksesnya melalui opsi Appearance pada wp-admin atau Customize pada website dengan login sebagai webmaster.

tampilan kustomisasi menu untuk widget

Salah satu fitur keren dari manajemen widget WordPress adalah Anda bisa menyembunyikan widget untuk sementara. Jadi, jika ada widget yang dirasa tidak diperlukan untuk saat ini tapi akan digunakan lagi nanti, Anda bisa menyeretnya ke panel Inactive Widgets di area wp-admin.

Selain itu, ada panel Inactive Sidebar untuk memuat widget yang tidak digunakan apabila Anda perlu mengganti tema dengan opsi yang area widgetnya berbeda. Anda nantinya bisa mengaktifkan widget tersebut lagi dengan menyeretnya ke area widget pada tema yang baru. Sangat berguna, bukan?

Cara Menambah Widget Baru

Merasa bahwa widget yang disediakan WordPress masih kurang? Tenang, Anda bisa menambahkan widget baru. Kami akan memberikan contoh cara menambahkan widget media sosial yang memungkinkan Anda berkomunikasi dengan para pengunjung dan pembaca setia. Di tutorial ini, kami menggunakan plugin Simple Social Icons.

Buka menu Plugins di dashboard admin WordPress dan klik Add New. Pada kolom pencarian, ketikkan Simple Social Icons, kemudian instal dan aktifkan plugin tersebut.

Plugin Social Icon pada wordpress

Tambahkan widget Simple Social Icons dan masukkan link media sosial Anda. Plugin ini bisa menautkan website Anda ke berbagai channel media sosial populer, seperti Facebook, Twitter, YouTube, LinkedIn, dan lainnya. Tampilannya akan terlihat seperti di bawah ini.

widget media sosial terpampang pada widget area

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.

Di tutorial ini, sebagai contoh, kami akan membuat custom widget sederhana Hello World. Kami akan menuliskan kode ini di dalam file functions.php tema yang baru saja dimuat. Anda bisa melakukannya di berbagai plugin custom.

Pertama, buka text editor apa pun di komputer Anda dan buat class baru untuk mengembangkan WP_Widget class dasar, seperti ini:

class hstnger_widget extends WP_WIdget {

//Insert functions here

}

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:

function __construct() {
parent: :__construct(
// widget ID
'hstngr_widget',
// widget name
__('Hostinger Sample Widget', ' hstngr_widget_domain'),
// widget description
array( 'description' => __( 'Hostinger Widget Tutorial', 'hstnger_widget_domain' ), )
);
}

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

public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
echo $args['before_widget'];
//if title is present
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
//output
echo __( 'Hello, World from Hostinger.com', 'hstnger_widget_domain' );
echo $args['after_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:

public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) )
$title = $instance[ 'title' ];
else
$title = __( 'Default Title', 'hstngr_wdiget_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
}

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.

public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ' ';
return $instance;
}

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:

function hstngr_register_widget() {
register_widget( 'hstngr_wigdet' );
}
add_action( 'widgets_init;, 'hstngr_register_widget' );

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:

function hstngr_register_widget() {
register_widget( 'hstngr_widget; );
}

add_action( 'widgets_init', 'hstngr_register_widget' );

class hstngr_widget extends WP_Widget {

function __construct() {
parent::__construct(
// widget ID
'hstngr_widget',
// widget name
__('Hostinger Sample Widget', ' hstngr_widget_domain'),
// widget description
array( 'description' => __( 'Hostinger Widget Tutorial', 'hstngr_widget_domain' ), )

);
}
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
echo $args['before_widget'];
//if title is present
if ( !empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
//output
echo __( 'Hello, World from Hostinger.com', 'hstngr_widget_domain' );
echo $args[ 'after_widget' ];
}
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) )
$title = $instance[ 'title' ];
else
$title = __( 'Default Title', 'hstngr_widget_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
}
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ' ';
return $instance;
}

}

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

Sampai di sini, Anda sudah tahu tentang apa itu widget dan cara menggunakannya di WordPress untuk mengoptimalkan fungsionalitas website melalui footer dan sidebar. Meskipun terlihat simpel, widget memiliki berbagai fungsi yang tidak boleh diremehkan, salah satunya adalah meningkatkan engagement pembaca di situs Anda.

Sedikit tips dari kami, cermatlah saat memilih dan menambahkan widget ke website Anda. Bagaimanapun, widget hanyalah elemen tambahan. Pertimbangkan beberapa aspek penting seperti user experience, tampilan website, dan keseluruhan manfaat widget jika ingin menambahkannya ke situs Anda. Ingat, hanya karena Anda bisa menambahkan widget, bukan berarti Anda harus menambahkan semuanya tanpa pertimbangan apa pun. Selamat mencoba!

Author
Penulis

Faradilla A.

Faradilla, yang lebih akrab disapa Ninda, adalah Content Marketing Specialist di Hostinger. Ia suka mengikuti tren teknologi, digital marketing, dan belajar bahasa. Melalui tutorial Hostinger ini, Ninda ingin berbagi informasi dan membantu pembaca menyelesaikan masalah yang dialami. Kenali Ninda lebih dekat di LinkedIn.