- \n
- Login ke admin area WordPress Anda.<\/li>\n\n\n\n
- Pastikan plugin Classic Widgets<\/a> telah diinstal dan diaktifkan.<\/li>\n\n\n\n
- Temukan dan klik Appearance<\/strong> (Tampilan) <\/strong>di sidebar kiri.<\/li>\n\n\n\n
- Pilih Widget<\/strong>.<\/li>\n<\/ol>
\n![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/08\/bagian-widgets-wordpress.png\/public\")
<\/figure><\/div>Anda akan melihat Available Widgets<\/strong> (Widget yang Tersedia) <\/strong>di sisi kiri layar. Ini adalah widget yang bisa Anda tambahkan ke website secara langsung.<\/p>
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.<\/p>
Apabila menggunakan block theme<\/strong>, Anda bisa menemukan widget di bagian editor website, halaman, atau postingan. Cukup perluas area block inserter<\/strong> atau tombol +<\/strong> di sudut kiri atas layar dan scroll ke bawah untuk melihat widget yang tersedia.<\/p>
\n![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/08\/bagian-widget-block-editor.png\/public\")
<\/figure><\/div>Cara Menambahkan Widget di WordPress<\/h2>
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<\/a>.<\/p>
Kami akan membahas kedua opsi tersebut di bagian ini.<\/p>
Menambahkan Widget Bawaan ke Website<\/h3>
Apabila Anda menggunakan classic theme<\/strong>, ikuti langkah-langkah berikut ini untuk menambahkan salah satu widget yang sudah terinstal ke website WordPress Anda:<\/p>
- \n
- Dari panel admin WordPress, buka Appearance<\/strong> (Tampilan) → Widget<\/strong>.<\/li>\n\n\n\n
- Pilih satu opsi dari Available Widgets<\/strong> (Widget yang Tersedia) dan seret ke area yang diinginkan di sisi kanan. Sebagai contoh, kami akan menambahkan widget Recent Posts<\/strong> ke Bagian Footer<\/strong>.<\/li>\n\n\n\n
- Sesuaikan widget dengan memasukkan Title<\/strong> (Judul) dan menentukan Number of posts to show<\/strong> untuk jumlah postingan yang akan ditampilkan. Anda juga bisa menampilkan tanggal posting.<\/li>\n\n\n\n
- Setelah selesai, klik Save<\/strong> (Simpan).<\/li>\n<\/ol>
\n![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/08\/opsi-penyesuaian-widget-recent-posts.png\/public\")
<\/figure><\/div>Kira-kira seperti inilah tampilan widget yang sudah ditambahkan ke website.<\/p>
\n![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/08\/hasil-widget-recent-posts-classic-theme.png\/public\")
<\/figure><\/div>Apabila Anda menggunakan block theme<\/strong>, ikuti langkah-langkah berikut ini untuk menambahkan salah satu widget yang sudah terinstal ke website WordPress Anda:<\/p>
- \n
- Dari panel admin WordPress, buka Appearance<\/strong> (Tampilan) → Editor<\/strong>.<\/li>\n\n\n\n
- Di pratinjau website, pilih area widget pilihan Anda. Untuk contoh ini, kami akan memilih Footer<\/strong>.<\/li>\n\n\n\n
- Klik tombol +<\/strong> dan scroll ke bawah hingga Anda menemukan kategori Widget<\/strong>. Sebagai contoh, kami akan memilih widget Latest Posts<\/strong>.<\/li>\n\n\n\n
- Widget akan muncul di area pratinjau. Anda bisa menyesuaikan perataannya dan menentukan apakah link akan ditampilkan dalam daftar atau kisi.<\/li>\n\n\n\n
- Setelah selesai, klik Save<\/strong> (Simpan).<\/li>\n<\/ol>
\n![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/08\/opsi-widget-block-editor.png\/public\")
<\/figure><\/div>Seperti inilah tampilan widget di website kami.<\/p>
\n![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/08\/widget-recent-posts-block-theme.png\/public\")
<\/figure><\/div>Menambahkan Widget ke Website dengan Plugin<\/h3>
Anda juga bisa menambahkan widget ke website dengan menginstal plugin pihak ketiga yang menyediakannya.<\/p>
Sebagai contoh, kami akan menggunakan plugin RaraTheme Companion<\/a>, yang menambahkan 23 widget untuk membantu menyesuaikan tema WordPress lebih lanjut. Namun, perlu diketahui bahwa beberapa plugin widget ini hanya kompatibel dengan classic theme.<\/p>
Ikuti langkah-langkah berikut ini:<\/p>
- \n
- Pastikan RaraTheme Companion<\/strong> sudah diinstal dan diaktifkan. <\/li>\n\n\n\n
- Buka Appearance<\/strong> (Tampilan) → Widget<\/strong>. Anda akan melihat lebih banyak pilihan di bawah Available Widgets<\/strong> (Widget yang Tersedia).<\/li>\n<\/ol>
\n![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/08\/raratheme-widget.png\/public\")
<\/figure><\/div>- \n
- Pilih widget yang ingin Anda tambahkan lalu seret ke area widget yang diinginkan. Sebagai contoh, kami akan menambahkan widget Author Bio<\/strong> ke Footer<\/strong>.<\/li>\n\n\n\n
- Mulai sesuaikan widget. Anda bisa menambahkan judul, nama penulis, foto, dan banyak lagi.<\/li>\n<\/ol>
\n![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/08\/widget-bio-author-raratheme.png\/public\")
<\/figure><\/div>- \n
- Klik Save<\/strong> (Simpan) setelah Anda selesai.<\/li>\n<\/ol>
Selesai! Anda pun sudah berhasil menambahkan widget dari plugin ke website Anda.<\/p>
Cara Mengatur Widget WordPress dengan CSS<\/h2>
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.<\/p>
Apabila menginginkan cara yang lebih teknis serta lebih suka menggunakan HTML dan CSS, Anda bisa menambahkan CSS kustom ke WordPress<\/a>. Berikut caranya:<\/p>
- \n
- Di Editor, pilih widget yang ingin Anda tambahkan CSS khusus.<\/li>\n\n\n\n
- Di sidebar kanan, alihkan ke tab Block<\/strong> dan scroll ke bawah hingga Anda menemukan Advanced<\/strong> (Tingkat Lanjut).<\/li>\n<\/ol>\n
![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/08\/bagian-advanced-block-editor.png\/public\")
<\/figure><\/div>- \n
- Tentukan nama CSS class di bagian ADDITIONAL CSS CLASS(ES)<\/strong> (CSS TAMBAHAN) dan klik Update<\/strong> (Perbarui). Anda akan menggunakan class khusus ini untuk menentukan CSS baru bagi widget Anda.<\/li>\n\n\n\n
- Kembali ke panel admin dan buka Appearance<\/strong> (Tampilan) → Customize<\/strong> (Sesuaikan) → Additional CSS<\/strong> (CSS Tambahan).<\/li>\n\n\n\n
- Akan muncul kotak teks untuk menambahkan gaya CSS. Contohnya, kami akan menunjukkan cara menambahkan warna latar belakang untuk widget. Perhatikan bahwa widget<\/strong> dalam CSS di bawah ini menandakan class kustom yang tadi sudah kami tetapkan.<\/li>\n<\/ol>
\n![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/08\/additional-css-di-theme-customizer.png\/public\")
<\/figure><\/div>- \n
- Setelah Anda selesai, klik Save<\/strong> (Simpan).<\/li>\n<\/ol>
Setelah ini, CSS tambahan pun akan diterapkan ke widget Anda.<\/p>
Cara Membuat Widget Baru di WordPress<\/h2>
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.<\/p>
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.<\/p>
1. Buat File Plugin Widget<\/h3>
Pertama, buat direktori baru bernama my-custom-widget<\/strong>. Di dalam direktori ini, buat file baru bernama my-custom-widget.php<\/strong>. File ini akan diisi dengan kode untuk widget Anda.<\/p>
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.<\/p>
<?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!');<\/pre>Selanjutnya, kami akan membuat class My_Custom_Widget<\/strong>. Class ini mendefinisikan widget WordPress kustom yang melengkapi class WP_Widget<\/strong>. Berikut adalah fungsi-fungsi penting widget ini:<\/p>
- \n
- __construct()<\/strong> – menginisialisasi widget WordPress dengan identifier unik, nama, dan deskripsi.<\/li>\n\n\n\n
- widget()<\/strong> – menampilkan konten widget di front-end, termasuk judul kalau Anda mengaturnya dalam pengaturan widget. Kode ini diikuti dengan pesan default “Hello, World!”.<\/li>\n\n\n\n
- form()<\/strong> – menghasilkan formulir pengaturan widget di area admin tempat pengguna bisa mengatur judul khusus untuk widget miliknya.<\/li>\n\n\n\n
- update()<\/strong> – menyimpan pengaturan widget ke database.<\/li>\n<\/ul>
Fungsi __construct() <\/strong>dan widget() <\/strong>wajib digunakan untuk mendefinisikan plugin widget.<\/p>
Meskipun secara teknis fungsi form()<\/strong> dan update()<\/strong> bisa dilewatkan kalau widget Anda tidak memiliki opsi apa pun, sebaiknya Anda tetap menyertakan keduanya meskipun dikosongkan.<\/p>
Sekarang, silakan salin dan tempel kode berikut ini ke file PHP yang sama.<\/p>
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;
}
}<\/pre>Terakhir, tambahkan kode berikut ini ke file Anda. Kode ini berfungsi untuk mendaftarkan widget. Setelah itu, file plugin ini pun sudah selesai.<\/p>
\/\/ Register the widget
function register_my_custom_widget() {
register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'register_my_custom_widget');<\/pre>2. Buat Arsip dan Upload ke WordPress<\/h3>
Setelah file PHP plugin Anda siap, buat arsip ZIP dari direktori my-custom-widget<\/strong>.<\/p>
Selanjutnya, buka dashboard WordPress dan buka Plugins<\/strong> → Add New Plugin<\/strong> (Tambahkan Plugin Baru). <\/strong>Upload file ZIP dan tunggu sampai plugin terinstal.<\/p>
Terakhir, buka Plugins<\/strong> → Installed Plugins<\/strong> (Plugin Terpasang), scroll ke bawah hingga Anda melihat My Custom Widget<\/strong> di area widget, lalu klik Activate<\/strong> (Aktifkan).<\/p>
3. Tambahkan Widget ke Sidebar WordPress<\/h3>
Untuk menambahkan widget kustom Anda ke sidebar, buka Appearance<\/strong> → Widget<\/strong>.<\/p>
Selanjutnya, pilih sidebar tempat Anda ingin meletakkan widget. Klik ikon + <\/strong>lalu cari My Custom Widget<\/strong> di kolom pencarian. Saat widget muncul, klik widget tersebut.<\/p>
\n![\"tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/08\/my-custom-widget-di-block-editor.png\/public\")
<\/figure><\/div>Anda kemudian bisa mengatur judul widget dan visibilitas yang diinginkan.<\/p>
Terakhir, klik Update<\/strong> (Perbarui) di bagian kanan atas layar. Selesai! Widget baru sudah terinstal dan bisa ditambahkan di website WordPress Anda.<\/p>
10 Contoh Widget Populer di WordPress<\/h2>
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.<\/p>
Latest Posts<\/h3>
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.<\/p>
Categories List<\/h3>
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.<\/p>
Tag Cloud<\/h3>
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.<\/p>
Social Icons<\/h3>
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.<\/p>
Custom HTML<\/h3>
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.<\/p>
Archives<\/h3>
Widget arsip bisa digunakan untuk menampilkan arsip tanggal postingan Anda. Fitur ini menyediakan fitur bagi pengunjung untuk menemukan konten lama di website Anda.<\/p>
Jetpack Search<\/h3>
Jetpack Search<\/a> menggunakan Elasticsearch, yang merupakan mesin pencari canggih. Widget ini menyertakan beberapa fitur praktis, seperti pengindeksan otomatis dari semua postingan dan halaman publik.<\/p>
FAQ by RaraTheme Companion<\/h3>
Widget pihak ketiga yang disediakan oleh RaraTheme Companion<\/a> 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.<\/p>
WPForms<\/h3>
Widget WPForms<\/a> adalah opsi pihak ketiga yang berfungsi untuk menambahkan formulir kontak, survei, formulir pembayaran, atau formulir pendaftaran dengan mudah ke sidebar atau area widget lainnya.<\/p>
WP Go Maps<\/h3>
- widget()<\/strong> – menampilkan konten widget di front-end, termasuk judul kalau Anda mengaturnya dalam pengaturan widget. Kode ini diikuti dengan pesan default “Hello, World!”.<\/li>\n\n\n\n
- __construct()<\/strong> – menginisialisasi widget WordPress dengan identifier unik, nama, dan deskripsi.<\/li>\n\n\n\n
- Kembali ke panel admin dan buka Appearance<\/strong> (Tampilan) → Customize<\/strong> (Sesuaikan) → Additional CSS<\/strong> (CSS Tambahan).<\/li>\n\n\n\n
- Tentukan nama CSS class di bagian ADDITIONAL CSS CLASS(ES)<\/strong> (CSS TAMBAHAN) dan klik Update<\/strong> (Perbarui). Anda akan menggunakan class khusus ini untuk menentukan CSS baru bagi widget Anda.<\/li>\n\n\n\n
- Mulai sesuaikan widget. Anda bisa menambahkan judul, nama penulis, foto, dan banyak lagi.<\/li>\n<\/ol>
- Buka Appearance<\/strong> (Tampilan) → Widget<\/strong>. Anda akan melihat lebih banyak pilihan di bawah Available Widgets<\/strong> (Widget yang Tersedia).<\/li>\n<\/ol>
- Di pratinjau website, pilih area widget pilihan Anda. Untuk contoh ini, kami akan memilih Footer<\/strong>.<\/li>\n\n\n\n
- Pilih satu opsi dari Available Widgets<\/strong> (Widget yang Tersedia) dan seret ke area yang diinginkan di sisi kanan. Sebagai contoh, kami akan menambahkan widget Recent Posts<\/strong> ke Bagian Footer<\/strong>.<\/li>\n\n\n\n
- Temukan dan klik Appearance<\/strong> (Tampilan) <\/strong>di sidebar kiri.<\/li>\n\n\n\n
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/public\")
<\/a><\/figure><\/div>