Thứ Ba, 19 tháng 8, 2014

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

Widget là một công cụ hữu hiệu và thường xuyên được các developer sử dụng để đưa các trình cắm (plugin) của mình vào một site WP. Vậy nên hôm nay mình xin chia sẻ chút ít kiến thức về widget. Hi vong giúp ích được cho mọi người.

Đầu tiên để tất cả mọi custom widget được extend từ class WP_Widget của WP.
Vì vậy mọi việc chúng ta cần làm rất đơn giản chỉ việc tạo nên một class kế thừa class này của WP là về cơ bản chúng ta đã tạo được một widget rồi. Việc còn lại chỉ là custom thêm để widget theo ý của chúng ta nữa mà thôi.

class My_Widget extends WP_Widget {

 /**
  * Đây là hàm khởi tạo cho widget của chúng ta, trong hàm này 
  * chúng ta định nghĩa tên của widget vv. 
  */
 public function __construct() {
  // Code viết vào đây
 }

 /**
  * Đây là hàm dùng mà bạn muốn widget nó hiển thị ra bên ngoài thế nào. 
  * Thường thì chúng ta đặt một shortcode ở đây
  * không thì hàm này viết code html thôi cũng ok.
  * Hàm có 2 tham số, 1 là $args là tham số của widget, 
  * 2 là $instance dùng để lưu giá trị từ database lấy ra
  */
 public function widget( $args, $instance ) {
  // html hoặc shortcode
 }

 /**
  * Đây là hàm xây dựng lên các thành phần của widget trong trang back-end
  */
 public function form( $instance ) {
  // Code here
 }

 /**
  * Lưu giá trị mới vào database
  */
 public function update( $new_instance, $old_instance ) {
  // Quá trình lưu giá trị
 }
}

Mình VD luôn cho đoạn code trên:

class My_Widget extends WP_Widget {

 /**
  * Đây là hàm khởi tạo cho widget của chúng ta, 
  * trong hàm này chúng ta định nghĩa tên của widget vv. 
  */
 public function __construct() {
        parent::__construct(
 'My_Widget', // Đây là id của cái widget đó
 ('My_Widget', 'text_domain'), // Đây là tên của nó
 array( 'description' => __( 'The first widget', 'My widget' ), )
 );
 }

 /**
  * Đây là hàm dùng mà bạn muốn widget nó hiển thị ra bên ngoài thế nào.
  * Thường thì chúng ta đặt một shortcode ở đây        
  * không thì hàm này viết code html thôi cũng ok.
  * Hàm có 2 tham số, 1 là $args là tham số của widget,
  * 2 là $instance dùng để lưu giá trị từ database lấy ra
  */
 public function widget( $args, $instance ) {
        $title = apply_filters( 'widget_title', $instance['title'] );
        echo $args['before_widget'];
 if ( ! empty( $title ) ) {
  echo $args['before_title'] . $title . $args['after_title'];
 }
// Khi cac ban su dung widget no se in dong nay ra ngoai front-end 
 echo __( 'Xin chào các bạn', 'My widget' ); 
        // ở đây các bạn có thể đặt shortcode cũng được
        echo $args['after_widget'];
 }

 /**
  * Đây là hàm xây dựng lên các thành phần của widget trong trang back-end
  */
 public function form( $instance ) {
  if ( isset( $instance[ 'title' ] ) ) {
   $title = $instance[ 'title' ]; // gán giá trị cho biến $title này 
   // để in cái title ra
  }
  else {
   $title = __( 'New title', 'My widget' ); 
  // trường hợp chưa có biến $instance[ 'title' ] 
  //này tức là ban đầu mới vào thì giá trị mặc định là "New title"
  }
  ?>
  <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 
 }

 /**
  * Lưu giá trị mới vào database
  */
 public function update( $new_instance, $old_instance ) {
  // Quá trình lưu giá trị
$instance = array(); // khởi tạo mảng chứa các gía trị sẽ lưu
  $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? 
  strip_tags( $new_instance['title'] ) : '';

  return $instance; 
 }
}// end class

Giai đoạn chuẩn bị cưới đã xong, giờ đi đăng kí kết hôn thôi :D

Chúng ta sẽ sử dụng một hook của WP để register widget chúng ta vừa tạo .(cái này cứ làm nhiều khắc nhớ, chứ mình cũng ko tiện giải thích (: )

+ Đối với PHP 5.3+ ta khai báo như sau:
add_action( 'widgets_init', function(){
register_widget( 'My_Widget' );
});

+ Đối với PHP 5.2+:
add_action('widgets_init',
create_function('', 'return register_widget("My_Widget");')
);

Áp dụng tương tự cho VD trên ta có đoạn code dưới đây:
// register My_Widget widget
function register_my_widget() {
register_widget( 'My_Widget' );
}
add_action( 'widgets_init', 'register_my_widget' );

Thân

Sử dụng AJAX load page confirm trong Mailchimp

Các bạn tham khảo linh dưới đấy nhé
AJAX Mailchimp signup form integration

Chủ Nhật, 17 tháng 8, 2014