Hướng dẫn tạo Widget trong WordPress dễ dàng

Hôm nay mình xin chia sẻ, hướng dẫn tạo Widget trong WordPress một cách dễ dàng cùng các bạn, giúp bạn có thể tự mình tạo Widget cho Theme WordPress bạn đang phát triển.

Vậy Widget là gì ?
Như chúng ta đã biết thì trong các ứng dụng máy tính, hệ điều hành, phần mềm thì Widget là thành phần mềm dẻo về mặt hiển thị thông tin cụ thể nào đó ? Sau quá trình tìm hiểu mình xin chia sẻ đến các bạn để bạn tiếp cận và hình dung về cách tạo Widget trong WordPress một cách dễ dàng nhất có thể.

Widget là một  thành phần code linh hoạt có thể dễ dàng cài đặt và thực thi ở bất kỳ vị trí nào trên một ứng dụng. Bạn có thể hiểu nó cũng tương tự như plugin và extension, hay đúng hơn là PluginExtension thường sẽ hỗ trợ các Widget kèm theo. Bạn có thể hiểu về cơ bản như vậy cho nó suôn sẻ đã ^^.

Widget trong WordPress là gì  ?
Widget trong WordPress là các thành phần hỗ trợ quản trị viên website/ blog dễ dàng quản lý, thay đổi việc thể hiện các thành phần hiển thị trên website/ blog của họ chỉ bằng thao tác KÉO và THẢ (khách hàng yêu quý của tôi hay của bạn thích điều này ^^) vào vị trí nào trên web hỗ trợ Widget, hoặc các slidebar mà không phải can thiệp đến CODE của giao diện. Các Widget chuẩn thường có khả năng hiển thị hoàn toàn tương thích với vị trí nó được đặt.

Tạo Widget trong WordPress như thế nào ?
Trong WordPress thì Widget thường là các khối thành phần độc lập chứa trong thư mục:
wp-includes/default-widgets.php của WordPress, trong này là nơi chứa các Widget mặc định mà WordPress hỗ trợ sẵn.
includes/name-widgets.php của thư mục Theme cụ thể nào có hỗ trợ Widget, theo mình bạn cũng nên đặt tập tin Widget của mình vào thư mục includes trong Theme của bạn. Đối với tên của tập tin bạn có thể đặt sao cho mình tiện quản lý sau này, mình thường đặt theo dạng TenTheme-widgets.php (đó là cách của mình, dĩ nhiên là bạn có thể tạo và chưa Widget của bạn ở đâu trong ứng dụng cũng được nhé !)

Bắt đầu tạo Widget trong WordPress nào !

Bước 1:
Bạn tạo 1 tập tin tên “TenTheme-widgets.php” trong thư mục includes của Theme. (Ví dụ: includes/cukimngoc-widgets.php).
Bước 2:
Để tạo Widget trong WordPress bạn chỉ cần tạo class đúng theo chuẩn quy định được WordPress hỗ trợ như sau:

// Bắt đầu khởi tạo 1 Widget trong WordPress ^^
class CKN_widget extends WP_Widget {
// Hàm này thể hiện các thông tin cơ bản của Widget như ID, Tên Widget, mô tả của Widget.
function __construct() {
parent::__construct(
// ID widget của bạn
'CKN_widget', 
// Tên Widget xuất hiện trong giao diện
__('Widget chào các bạn', 'CKN_widget_ChaoCacBan'), 

// Thông tin mô tả về Widget
array( 'description' => __( 'Đây là Widget đơn giản hiển thị nội dung Chào các bạn đây là bài viết Hướng dẫn tạo Widget trong WordPress!', 'CKN_widget_ChaoCacBan' ), ) 
);
}
// Phần này sẽ viết mã hiển thị dữ liệu trên giao diện (widget front-end)
// function widget() là hàm xử lý thông tin cần hiển thị lên giao diện;
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
$outputHTML='';
// Trước và sau một Widget bạn cần cho phép hiển thị giá trị của các đối số được định nghĩa bởi Theme bất kỳ, nhằm tăng tính tương thích của Theme với Widget của bạn.
$outputHTML .= $args['before_widget'];
if ( ! empty( $title ) )
$outputHTML .= $args['before_title'] . $title . $args['after_title'];

// Từ vị trí này bạn sẽ viết mã xử lý hiển thị dữ liệu của mình.
$outputHTML .='Chào các bạn đây là bài viết Hướng dẫn tạo Widget trong WordPress!';
$outputHTML .= $args['after_widget'];
echo $outputHTML;
}

// Phần xử lý dữ liệu bên dưới giao diện (widget Backend).
// Form điền thông số tùy chỉnh theo chức năng mà Widget bạn cần phát triển. Ở đây mình chỉ cho tùy chỉnh tiêu đề Widget.
public function form( $instance ) {
// Chúng ta kiểm tra biến $instance['title'] có giá trị không ? Nếu có thì gán cho biến $title
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'Tiêu đề mặc định', 'CKN_widget_ChaoCacBan' );
}
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Tiêu đề:' ); ?></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 
}
// Hàm cập nhật giá trị cho Widget, các giá trị cũ $old_instance sẽ được thay thế bằng $new_instance
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
} // Kết thúc lớp định nghĩa CKN_widget
////////////////////////////////////////////////////////
// Tiến hành đăng ký Widget với hệ thống WordPress
function CKN_load_widget() {
	register_widget( 'CKN_widget' );
}
add_action( 'widgets_init', 'CKN_load_widget' );

Về cơ bản bạn đã hoàn tất việc viết mã 1 widget trong WordPress rồi đó. Giờ do mình viết mã trong tập tin cukimngoc-widgets.php nên mình phải thực hiện thêm 1 thao tác nữa là includes nó vào includes/functions.php trong thư mục Theme của mình. Bạn có thể bỏ qua lưu ý này nếu bạn viết mã Widget trực tiếp vào functions.php:

<?php include 'cukimngoc-widgets.php';?>

Bước 3 sử dụng Widget vừa tạo:

Bạn vào phần quản trị WordPress mục Apperance/ Widgets sẽ thấy Widget bạn vừa tạo hiển thị như sau:

Hướng dẫn tạo Widget trong WordPress

Sau khi tạo Widget sẽ hiển thị trong Appearance/ Widgets

Bạn kéo Widget vừa tạo “Widget chào các bạn” vào vị trí mà Theme bạn hỗ trợ Widget, sau đó chỉnh thông tin tiêu đề cho Widget và lưu lại:

Sử dụng Widget

Sau khi kéo Widget vào mục cần hiển thị, ta có thể thiết lập cấu hình cho Widget trong WordPress

Bây giờ bạn ra website/ blog của mình để xem kết quả hiển thị nhé  !

Giao diện hiển thị của Widget trên giao diện website/ blog

Giao diện hiển thị của Widget trên giao diện website/ blog

Như bạn thấy Widget đã hoạt động, vậy là bạn đã có thể tự mình tạo Widget trong WordPress. Còn việc hiển thị gì qua Widget đó là tùy vào yêu cầu của bạn mà viết mã ở public function widget( $args, $instance ) nhé.
Một số Widget thông dụng bạn nên hỗ trợ cho Theme của bạn là:
Widget hiển thị danh sách bài viết mới
Widget hiển thị bình luận mới

Widget hiển thị danh sách bài viết được xem nhiều
Widget hiển thị bài viết được quan tâm nhiều
Widget hiển thị hỗ trợ trực tuyến
Widget đặt mã quảng cáo trong WordPress

Ở đây mình chỉ hiển thị chuỗi “Chào các bạn đây là bài viết hướng dẫn tạo Widget trong WordPress” nhằm giúp bạn có thể dễ dàng hiểu và tiếp cận về cách tạo Widget trong WordPress. Các Widget phát triển đôi khi thường đi chung với Plugin hơn vì những yêu cầu cụ thể riêng đặc trưng của Plugin (Widget hỗ trợ  trực tuyến). Còn đối với Theme thì thường Widget chỉ thực hiện việc hiển thị các dữ liệu WordPress hỗ trợ sẵn (Các Widget hiển thị bài viết, comment…).

Mọi thắc mắc, chia sẻ, góp ý các bạn vui lòng để lại thông tin và mình sẽ trả lời ngay khi có thể nhé ! Chúc các bạn ngày càng thành công trong quá trình tiếp cận, học hỏi WordPress.

 Cù Kim Ngọc

Related Posts

About The Author

16 Comments

  1. Avatar
    Da Phan
    15/10/2015
    • Cù Kim Ngọc
      Cafe Freelancer
      15/10/2015
  2. Avatar
    quoccuong
    10/12/2014
    • Avatar
      quoccuong
      10/12/2014
  3. Avatar
    quoccuong
    10/12/2014
    • Cù Kim Ngọc
      Cù Kim Ngọc
      10/12/2014
      • Avatar
        quoccuong
        10/12/2014
        • Cù Kim Ngọc
          Cù Kim Ngọc
          10/12/2014
      • Avatar
        quoccuong
        11/12/2014
  4. Avatar
    quoccuong
    28/11/2014
    • Cù Kim Ngọc
      Cù Kim Ngọc
      28/11/2014
  5. Avatar
    Tu
    18/07/2014
    • Cù Kim Ngọc
      Cù Kim Ngọc
      29/11/2014
  6. Avatar
    Trung anh em
    25/04/2014
    • Cù Kim Ngọc
      Cù Kim Ngọc
      25/04/2014

Add Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.