Cara Menambahkan Widget di Website WordPress

Apa itu Widget? Dan bagaimana cara menambahkan widget di website WordPress? Mau tahu jawabannya? Simak artikel ini sampai selesai agar bisa menambahkan sendiri widget di website Anda.

Menambahkan Widget di Website

Widget Website

Bagi yang sudah lama memakai WordPress (WP), istilah ini mungkin sudah tidak asing lagi. Tapi, bagi para pengguna WP pemula istilah ini mungkin terdengar asing.

Widget merupakan item yang ditambahkan ke sidebar halaman WP. Namun widget juga terkadang ditambah di footer dan header.

Lalu apa yang membedakan widget dari plugin? Plugin dan widget memang sedikit banyak saling berkaitan sehingga terkadang mengakibatkan kebingungan. Berikut beberapa perbedaan widget dan plugin :

Plugin

Plugin yaitu sebuah kode software yang memiliki fungsi tertentu sehingga memungkinkan menjalankan suatu program dengan fitur tambahan. Ada yang :

  • menampilkan fiturnya di halaman WP, seperti plugin profil media sosial;
  • tak menampilkan fiturnya di halaman WP, seperti plugin akismet.

Widget

Widget yaitu fitur tambahan yang muncul di halaman WP, misalnya :

  • widget kalender,
  • archives,
  • widget galeri,
  • dan sebagainya.

Cara Menambahkan Widget di Website

Ada dua cara menambahkan widget di website WP, yaitu secara manual atau otomatis. Berikut adalah penjelasannya :

a. Secara Otomatis

Tidak semua thema WP memberikan dukungan untuk menambahkan widget di website secara otomatis. Untuk mengetahuinya Anda bica langsung cek. Caranya :

  • masuk dasbor WP;
  • klik Tampilan (Appearance) >> Widget.

Bila ditemukan sub menu widget, artinya thema WP yang Anda pakai memberikan dukungan untuk menambahkan widget secara otomatis. Tapi, jika tak ditemukan, artinya thema WP yang Anda pakai tak mendukung penambahan widget secara otomatis.

Setelah itu, yang harus dilakukan yaitu :

  • memilih widget apa saja yang mau Anda tampilkan di halaman WordPress;
  • klik salah satu widget;
  • pilih Add to Sidebar;
  • klik Manage with Live Preview untuk melihat perubahan secara live.

b. Secara Manual / Kustom

Bila Anda memakai thema WP yang tak mendukung penambahan widget secara otomatis, terpaksa Anda harus membuat widget secara kustom.

Untuk membuat / menambahkan widget di website secara kustom memang sedikit lebih rumit dibanding menambahkan widget secara otomatis.

Yang Anda perlukan untuk membuat widget WordPress secara kustom yakni :

  • akses ke dasbor WordPress, dan
  • text editor (seperti Notepad++, sublime text, atau software semacamnya).

Sebelum membuat widget WordPress ada beberapa hal yang harus Anda perhatikan :

  • pembuatan widget bisa dilakukan pada plugin kustom,
  • lalu, Anda juga bisa menambahkan kode widget kustom ke dalam file php dari thema yang dipakai.

Anda bisa membuat widget pada website yang sudah online ataupun website yang berada di komputer lokal. Kami menyarankan untuk Anda sebaiknya membuat widget kustom pada komputer lokal lebih dulu, misalnya pada XAMPP.

Cara ini syaratnya adalah menginstal WordPress di XAMPP lebih dulu. Kemudian membuat dan menambahkan widget di website WordPress secara kustom dan mengunggahnya ke hosting.

Penting :

Bila Anda punya rencana untuk membuat widget kustom pada website yang sudah online, silakan lakukan backup lebih dulu.

Baca Juga : Cara Install WordPress di XAMPP

Cara Kerja Widget Kustom

WordPress sudah menyediakan Widgets API untuk mempermudah Anda membuat dan menambahkan widget di website secara kustom. Untuk membuat widget kustom, Anda bisa memakai class WP Widget. Class ini punya 20 fungsi yang bisa Anda pakai.

Agar widget bisa berfungsi, berikut 4 function untuk persyaratan minimal yang perlu Anda penuhi sebelum custom widget :

  • _construct() : function constructor;
  • widget() : output dari widget;
  • form() : menentukan pengaturan widget pada dasbor;
  • update() : update pengaturan widget.

Untuk membuat widget di WordPress kustom ikuti langkah-langkah ini :

1. Letakkan Kode pada File functions.php

Silakan buka text editor di komputer Anda lalu buat class baru.

class baru_widget extends WP_Widget {
//
Masukkan function di sini
}

2. Implementasi 4 Fungsi

Selanjutnya implementasikan 4 fungsi yang telah disebutkan sebelumnya satu per satu ke dalam class. Implementasi untuk menambahkan widget di website yang pertama yaitu method constructor.

Fungsi ini dipakai untuk menentukan ID, nama dari widget, serta deskripsi.

function __construct() {
parent::__construct(
// ID widget
‘baru_widget’,
// nama widget
__(‘Contoh Widget Baru’, ‘ baru_widget_domain’),
// deskripsi widget
array( ‘description’ => __( ‘Tutorial Widget Baru’, ‘baru_widget_domain’ ), )
);
}

3. Atur Tampilan Widget

Berikutnya untuk menambahkan widget di website secara manual yaitu mengatur tampilan widget lewat function widget().

public function widget( $args, $instance ) {
$title = apply_filters( ‘widget_title’, $instance[‘title’] );
echo $args[‘before_widget’];
//jika ada judul
if ( ! empty( $title ) )
echo $args[‘before_title’] . $title . $args[‘after_title’];
//output
echo __( ‘Halo, Selamat Datang di Blog Kami’, baru_widget_domain’ );
echo $args[‘after_widget’];
}

Pada langkah ini output dari widget sudah dikonfigurasi. Sehingga akan menampilkan tulisan ‘Halo, Selamat Datang di Blog Kami’. Dan menampilkan title yang dibuat oleh user saat menambahkan widget.

4. Atur Back-End

Selanjutnya untuk menambahkan widget di website secara manual yaitu mengatur back-end dari widget dengan memakai method form() :

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

Bila user membuat judul pada widget. Lalu judul tersebut akan dimasukkan ke dalam form HTML yang dibuat pada kode di atas. Bila judul tak Anda masukkan di sana, secara otomatis sistem akan memakai judul bawaan yakni Default Title.

5. Pasang Function Update

Selanjutnya yaitu memasang function update yang berfungsi untuk memperbarui widget tiap ada perubahan pada pengaturan (setting).

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

Script tersebut akan menampilkan judul yang Anda buat.

6. Daftarkan Widget di WordPress

Selanjutnya yaitu memakai fungsi tambahan untuk mendaftarkan atau menambahkan widget di website WordPress. Letakkan kode di bawah ini pada bagian luar dari class baru_widget atau pada bagian atasnya.

function baru_register_widget() {
register_widget( baru_widget’ );
}
add_action( ‘widgets_init’, ‘baru_register_widget’ );

Fungsi baru tersebut akan mendaftarkan widget dengan memakai ID widget, di fungsi the_construct(). Lalu widget_init akan dipakai untuk memuat widget tersebut ke dalam WordPress via method add_action().

Selanjutnya Anda cukup meletakkan susunan script di bawah pada bagian akhir kode dari file functions.php :

function baru_register_widget() {
register_widget( baru_widget’ );
}

add_action( ‘widgets_init’, ‘baru_register_widget’ );

class baru_widget extends WP_Widget {

function __construct() {
parent::__construct(
// ID widget
‘baru_widget’,
// nama widget
__(‘Contoh Widget Baru’, ‘baru_widget_domain’),
// deskripsi widget
array( ‘description’ => __( ‘Tutorial Widget Baru’, ‘baru_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 __( ‘Halo, Selamat Datang di Blog Kami, ‘baru_widget_domain’ );
echo $args[‘after_widget’];
}

public function form( $instance ) {
if ( isset( $instance[ ‘title’ ] ) )
$title = $instance[ ‘title’ ];
else
$title = __( ‘Default Title’, ‘baru_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 menambahkan kode tersebut via FTP client atau editor WordPress lewat bagian functions.php dari template aktif yang Anda pakai.

7. Tes Widget WordPress yang Sudah Dibuat

Untuk menambahkan widget di website, silakan pilih menu Tampilan (Appearance) >> Widgets. Anda akan melihat widget kustom yang sudah Anda buat. Anda tinggal melakukan drag and drop pada lokasi yang Anda mau, misalkan sidebar.

Demikian informasi terkait dengan cara menambahkan widget di website, semoga postingan kali ini bermanfaat buat sahabat semua. Kami berharap artikel tutorial WordPress ini dishare biar semakin banyak yang mendapatkan manfaat.

Leave a Reply

Memperbaiki Permalink Website
Cara Memperbaiki Permalink Website yang Rusak
Reset Website WordPress
Cara Reset Website WordPress dengan Mudah
Membuat Custom Login
Cara Membuat Custom Login di Website WordPress
Cara Setting Robots TXT di Website
Bahasa Pemrograman CMS cPanel Domain Hosting Web Siap
Fitur di cPanel Hosting
Fitur di cPanel Hosting Website
Domain Tingkat Atas
Jenis Domain Tingkat Atas Terbaik yang Ada Sekarang
Keunggulan Domain Berbayar
Keunggulan Domain Berbayar bagi Bisnis yang Perlu Diketahui

Dasar SEO

Pengenalan SEO Riset Keyword

Optimasi Lanjutan

Copywriting Error Website Tips SEO

Teknik SEO

SEO Off Page SEO OnPage SEO Teknikal

Tools SEO

Tools Google Tools Riset KK Tools SEO Lain
Bisnis Jualan Link PPC Program Afiliasi Publisher Sumber Lain
Mendapatkan Uang dari Website
Cara Mendapatkan Uang dari Website yang Kita Punya
Jualan Online via Website
Jualan Online via Website yang Mudah Dilakukan
Platform SeedBacklink
Platform Seedbacklink Solusi Promosi Website dan Income Online
Membersihkan Cache
Cara Membersihkan Cache pada Website
Menggunakan Editor Gutenberg
Cara Menggunakan Editor Gutenberg Lengkap di WordPress
Plugin WordPress
Cara Instal Plugin WordPress yang Bisa Dilakukan
Cara Instal dan Ganti Theme Website
Cara Instal dan Ganti Theme Website