Walaupun ada banyak sekali plugin (termasuk
widget) yang tersedia untuk WordPress, kadang-kadang kita membutuhkan suatu
widget yang spesifik untuk kebutuhan website kita. Untuk memenuhi kebutuhan
semacam ini mau tidak mau kita harus membuat widget sendiri.
Dalam artikel ini saya akan mengajarkan
bagaimana membuat sebuah widget sederhana yang digunakan untuk memasang online
status dari Yahoo Messenger (YM). Kita bisa membuatnya sebagai suatu plugin
yang terpisah dari theme tapi kali ini saya akan membuatnya spesifik untuk suatu
theme. Jadi widget ini akan tersedia jika theme ybs. digunakan. Karena widget
ini terikat pada suatu theme maka saya cukup membuatnya di dalam file
functions.php.
Data-data yang
diperlukan yang berkaitan dengan online status dari YM adalah ID dari YM ybs.
dan nomor icon yang digunakan untuk menentukan jenis gambar status YM.
Jadi dalam pembuatan
widget ini saya akan menyimpan data YM ID dan no. icon ditambah title
/ judul widget ybs. Mari kita mulai.
Pertama-tama kita
membuat sebuah class yang merupakan turunan dari WP_Widget. Katakanlah nama
dari class ini adalah tw_YM_Widget.
|
1
|
class tw_YM_Widget extends WP_Widget {
|
|
|
2
|
...
|
|
|
3
|
...
|
|
|
4
|
}
|
|
Ada 4 bagian penting dalam class ini, yaitu :
1. Class Constructor
Bagian ini digunakan untuk memberi nama widget berikut dengan deskripsinya. Contoh :
Bagian ini digunakan untuk memberi nama widget berikut dengan deskripsinya. Contoh :
|
1
|
function tw_YM_Widget() {
|
|
|
2
|
$widget_ops = array(
|
|
|
3
|
'classname'=> 'tw-ym',
|
|
|
4
|
'description'=> 'YM Status
Widget'
|
|
|
5
|
);
|
|
|
6
|
$this->WP_Widget('tw-ym-widget', 'YM
Online Status', $widget_ops);
|
|
|
7
|
}
|
2. Method form
Bagian ini digunakan untuk membuat form dimana kita akan mengisi data-data tersebut. Contoh :
Bagian ini digunakan untuk membuat form dimana kita akan mengisi data-data tersebut. Contoh :
|
01
|
function form($instance) {
|
|
|
02
|
$default = array(
|
|
|
03
|
'title'=> '',
|
|
04
|
'ym_id'=> '',
|
|
05
|
'ym_icon_no'=> 3
|
|
|
06
|
);
|
|
|
07
|
|
|
|
08
|
$instance = wp_parse_args( (array)$instance,$default );
|
|
|
09
|
$title = $instance['title'];
|
|
10
|
$ym_id = $instance['ym_id'];
|
|
11
|
$ym_icon_no = $instance['ym_icon_no']; ?>
|
|
|
12
|
|
|
|
13
|
<p>
|
|
|
14
|
<label for="<?php
echo $this->get_field_id('title'); ?>">Title :</label>
|
|
|
15
|
<input type="text" class="widefat"
|
|
|
16
|
id="<?php echo
$this->get_field_id('title'); ?>"
|
|
|
17
|
name="<?php
echo $this->get_field_name('title'); ?>"
|
|
|
18
|
value="<?php
echo $title; ?>" />
|
|
|
19
|
</p>
|
|
|
20
|
|
|
|
21
|
<p>
|
|
|
22
|
<label for="<?php
echo $this->get_field_id('ym_id'); ?>">Yahoo ID :</label>
|
|
|
23
|
<input
type="text" class="widefat"
|
|
|
24
|
id="<?php
echo $this->get_field_id('ym_id'); ?>"
|
|
|
25
|
name="<?php
echo $this->get_field_name('ym_id'); ?>"
|
|
|
26
|
value="<?php
echo $ym_id; ?>" />
|
|
|
27
|
</p>
|
|
|
28
|
|
|
|
29
|
<p>
|
|
|
30
|
<label for="<?php
echo $this->get_field_id('ym_icon_no'); ?>">YM Icon
no:</label>
|
|
|
31
|
<input type="text" size="10"
|
|
|
32
|
id="<?php echo
$this->get_field_id('ym_icon_no'); ?>"
|
|
|
33
|
name="<?php
echo $this->get_field_name('ym_icon_no'); ?>"
|
|
|
34
|
value="<?php
echo $ym_icon_no; ?>" />
|
|
|
35
|
<div class="description">
|
|
|
36
|
Contoh pengisian : 12
<br />
|
|
|
37
|
</div>
|
|
|
38
|
</p>
|
|
|
39
|
<?php }
|
3. Method update
Bagian ini digunakan untuk menyimpan data-data yang diisikan melalui form di atas.
Bagian ini digunakan untuk menyimpan data-data yang diisikan melalui form di atas.
|
01
|
function update($new_instance, $old_instance) {
|
|
|
02
|
$instance = $old_instance;
|
|
|
03
|
$instance['title']
=strip_tags($new_instance['title']);
|
|
04
|
$instance['ym_id']
=strip_tags($new_instance['ym_id']);
|
|
05
|
if( is_numeric($new_instance['ym_icon_no'])
) {
|
|
|
06
|
if( $new_instance['ym_icon_no']
< 0 )
|
|
|
07
|
$instance['ym_icon_no']
= 3;
|
|
|
08
|
else
|
|
|
09
|
$instance['ym_icon_no']
=$new_instance['ym_icon_no'];
|
|
|
10
|
} else {
|
|
|
11
|
$instance['ym_icon_no'] = 3;
|
|
|
12
|
}
|
|
|
13
|
|
|
|
14
|
return $instance;
|
|
|
15
|
}
|
4. Method widget
Bagian yang terakhir ini digunakan untuk menampilkan widget pada halaman website. Kodenya adalah sbb :
Bagian yang terakhir ini digunakan untuk menampilkan widget pada halaman website. Kodenya adalah sbb :
|
01
|
function widget($args, $instance) {
|
|
|
02
|
extract( $args );
|
|
|
03
|
|
|
|
04
|
$title = apply_filters('ym_widget_title',$instance['title']);
|
|
|
05
|
$ym_id = $instance['ym_id'];
|
|
|
06
|
$ym_icon_no = $instance['ym_icon_no'];
|
|
|
07
|
|
|
|
08
|
echo $before_widget;
|
|
|
09
|
if( !empty($instance['title']) )
|
|
|
10
|
echo $before_title . $title .$after_title; ?>
|
|
|
11
|
<a href="msgr:sendim?<?php echo
$ym_id; ?>">
|
|
|
12
|
<img src="http://opi.yahoo.com/online?u=<?php echo
$ym_id; ?>&m=g&t=<?php echo $ym_icon_no; ?>
border=0">
|
|
|
13
|
</a>
|
|
|
14
|
|
|
|
15
|
<?php
|
|
|
16
|
echo $after_widget;
|
|
|
17
|
|
|
|
18
|
}
|
|
Setelah class untuk
widget selesai, langkah terakhir adalah mendaftarkan class tsb. dengan
menggunakan fungsiregister_widget melalui hook widgets_init,
seperti terlihat pada kode berikut ini :
|
1
|
function tw_custom_widget() {
|
|
|
2
|
register_widget('jrl_YM_Widget');
|
|
|
3
|
}
|
|
|
4
|
add_action('widgets_init','tw_custom_widget');
|
|
Ok, pembuatan widget
telah selesai
Tidak ada komentar:
Posting Komentar