Nếu trong bài viết trước, tôi có chia sẻ với các bạn cách tạo một vùng để kéo thả widget vào trên giao diện, thì bài viết này tôi sẽ chia sẻ cách tạo một đơn vị widget.

Để cho các bạn rõ ràng hơn, tôi ví dụ bằng hình ảnh như sau:

Vùng Widget và đơn vị Widget trong WordPress

Các bạn để ý là các vùng cho kéo thả Widget bao gồm: Sidebar, Quảng cáo đỉnh trang … còn các đơn vị Widget sẽ được kéo và thả vào trong vùng hỗ trợ như các bạn thấy trên hình ảnh trên.

Vậy để tránh lẫn lộn, các bạn lưu ý là bài viết này là thông tin làm thế nào để tạo một đơn vị Widget “mẫu” nhé.

Các bạn thả Class sau vào file functions.php của gói giao diện đang active:

// Creating the widget 
class wpb_widget extends WP_Widget {

function __construct() {
parent::__construct(
// Base ID of your widget
'wpb_widget', 

// Widget name will appear in UI
__('WPBeginner Widget', 'wpb_widget_domain'), 

// Widget description
array( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), ) 
);
}

// Creating widget front-end
// This is where the action happens
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];

// This is where you run the code and display the output
echo __( 'Hello, World!', 'wpb_widget_domain' );
echo $args['after_widget'];
}
		
// Widget Backend 
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'New title', 'wpb_widget_domain' );
}
// Widget admin form
?>
<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 
}
	
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
} // Class wpb_widget ends here

// Register and load the widget
function wpb_load_widget() {
	register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

Code trên tôi lấy của WP Beginner cho nó lẹ 😀

Thì trong admin, ta sẽ bắt gặp một đơn vị widget mới tinh tươm như sau:

Các bạn lưu ý trong Class trên, các hàm chúng ta cần chú ý là:

+ form: Chỉ dùng để hiển thị, và nếu bạn muốn lấy giá trị đã có sẵn để hiển thị thì dùng biến $instance ( array) nhé, các bạn có thể var_dump chúng ra để tìm hiểu thêm cho nó rành.

+ Update: Hàm này chuyên lấy các giá trị trong hàm form để cập nhật lên cơ sở dữ liệu, nếu hàm này mà làm lỗi thì lưu Widget không nổi, các bạn chỉ cần chú ý tới biến $new_instance mà thôi, đây sẽ là nơi chứa các giá trị của form để đưa lên !

+ widget: Là hàm quản lý hiển thị cho Widget, các bạn chỉ cần chú ý tới biến $args mà thôi !

Cách tốt nhất là dùng class mẫu bên trên sau đó Paste nó vào file functions.php rồi biến nó theo nhu cầu của chúng ta, tôi cũng vừa làm được cái Widget quản lý hiển thị trên trang chủ để cho trang chủ của khách được năng động hơn và tùy biến thích thế nào cũng được hết:

Tùy vào sức sáng tạo của bạn mà Widget của WordPress sẽ trở thành vũ khí lợi hại của gói giao diện, đơn giản là bạn có thể cho khách hàng tùy biến từ Sidebar, hiển thị trang chủ cho tới bất cứ thứ gì các bạn tưởng tượng ra …

Chúc các bạn thành công !