Custom Widget – WordPress Tut

Custom Widget – WordPress Tut

* August 23, 2010
* 17 comments

Chào các thành viên Izwebz, mình là tanlevis(nickname). Nay mình muốn chia sẻ một chút kiến thức về WP. Bài này mình sẽ nói về cách tự tạo một Widget cho Theme. Cụ thể là mình sẽ làm 1 widget để thể hiện trạng thái nick yahoo đang online hay offline.

custom Widget wordpress

Widget(wg – gọi tắt thế đi nha :D gõ lại làm biếng quá :| ) trong WP luôn được chứa bởi sidebar. Mọi wg luôn được kế thừa từ lớp cha – WP_Widget. Vì vậy muốn có 1 wg mới ta phải tạo 1 class mới kế thừa WP_Widget như sau:

Mở file function.php trong thư mục theme mà bạn đang dung. Thêm vào những dòng code sau:

'Trạng thái nick yahoo.'));
}

Hàm Yahoo_Status ở dòng 614 là 1 constructor của class Yahoo_Status, trong hàm này ta tiến hành khởi tạo những thông số cơ bản cho Yahoo_Status bằng cách gọi ngược lên constructor của cha nó (WP_Widget) với những thông số truyền vào như sau:

$id_base: ‘Yahoo_Status_Widget’ – Id để xác định .
$name: ‘Yahoo Status’ – Tên wg.
$widget_options = array(‘description’ => ‘Trạng thái nick yahoo.’) – Thông tin tóm tắt của wg.

Kế tiếp chúng ta bắt buộc phải overrides 3 phương thức của lớp cha (WP_Widget) để hiển thị, cập nhật được wg của chúng ta.
Để hiển thị được wg lên sidebar trong Admin Panel, ta phải định nghĩa cho wg một bộ khung được quy định sẵn của WP như sau:

function widget( $args, $instance ) {
extract($args);
$title = apply_filters( 'widget_title',
empty($instance['title']) ? '' : $instance['title'],
$instance, $this->id_base);
$text = apply_filters( 'widget_text',
$instance['text'], $instance );
echo $before_widget;
if ( !empty( $title ) ) {
echo $before_title . $title . $after_title; } ?>

• 
  
  
  
  

'', 'text' => '' ) );
$title = strip_tags($instance['title']);
$text = format_to_edit($instance['text']);
?>

name="get_field_name('title'); ?>" type="text"
value="" />

name="<?php echo $this->get_field_name('text'); ?>"><br /> <?php echo $text;?><br />

Tham số cụ thể như sau:
$instance: Những fied có trên wg.
Bài này mình chỉ tạo đơn giản có 3 label, 1 input và 1 textarea, cách gán id và value mình đã minh họa cụ thể trong hình. Có j không hiểu mọi người cứ comment bên dưới nha.

Cuối cùng ta xài lệnh register_widget(‘Yahoo_Status’); ngay bên dưới dấu kết thúc class Yahoo_Status để đăng ký với WP là ta có 1 wg mới, và vào lại Admin Panel để xem widget ta mới tạo.

Tới đây mình vừa hoàn thành 1 wg Yahoo_Status. Đây cũng là bài post đầu tiên của mình cho Izwebz, có gì mọi người đóng góp ý kiến để mình hoàn thiện hơn về những bài post sau. Cảm ơn mọi người đã đọc và chúc mọi người vui vẻ với Widget của mình.
Download file

Download file mẫu functions.php ở đây
Tham gia viết bài cho Izwebz

Đây là bài viết đầu tiên của Tanlevis cho izwebz. Rất cảm ơn sự đóng góp của bạn. Nếu bạn có khả năng, hãy cùng tham gia viết bài để chia sẻ kiến thức với cộng đồng.