Thiết kế widget cho wordpress

Trong bài sử dụng widget trong wordpress chúng ta đã bít cách hiển thị, tùy chọn vị trí … Hôm nay sẽ đến phần nâng cao hơn tí là các viết widget hay thiết kế widget cho wordpress.

Phần này có lẽ sẽ ly kỳ hấp dẫn hơn nhiều so với phần trước vì bạn phải can thiệp đến code nhiều hơn. Đầu tiên bạn phải tìm hiểu đến các khái niệm như: class, kế thừa … vì ta đang sử dụng framework của wordpress nên tất cả đều kế thừa từ đây.

Class là một lớp tập hợp các thuộc tính chung của một nhóm đối tượng nào đó, trong trường hợp này là nhóm widget.

Hôm nay mình sẽ lấy ví dụ về thiết kế widget hiển thị mục catrgories với các bài viết mới nhất của categories đó để demo phần này. Widget cho phép người dụng nhập tiêu đề, chọn danh sách categories, số bài hiển thị… bạn nào mới thiết kế wordpress nên xem bài hiển thị các tin liên quan để làm quen với custom truy vấn trong WordPress.

Tạo class kế thừa widget

Bạn tạo thư mục includes trong theme đang sử dụng tạo file với tên widget-from-categories.php, Thật ra viết trong functions.php cũng được tuy nhiên để dễ dàng quản lý và thông thoáng cho cấu trúc theme wordpress của mình bạn nên tạo nhóm riêng các thành phần như thế.

Mình sẽ giới thiệu khung của widget cần thiết kế hôm nay như sau.

<!--
<?php class bcdonline_fromcategorieswidget extends WP_Widget
{
    function bcdonline_fromcategorieswidget(){

    }

  //Displays the Widget in the front-end 
    function widget($args, $instance){

	}

  //Saves the settings. 
    function update($new_instance, $old_instance){

	}

  //Creates the form for the widget in the back-end. 
    function form($instance){

	}

} // end bcdonline_fromcategorieswidget class

function bcdonline_fromcategorieswidgetInit() {
  register_widget('bcdonline_fromcategorieswidget');
}
add_action('widgets_init', 'bcdonline_fromcategorieswidgetInit');
?>
-->

Giải thích:

  • class bcdonline_fromcategorieswidget extends WP_Widget: Cấu trúc khởi tạo một class, từ khóa class, tên class, extends để kế thừa và kế thừa WP_Widget trong wordpress.
  • bcdonline_fromcategorieswidget(): Hàm để khởi tạo các phương thức mặc định, cần thiết cho widget.
  • widget(): Hàm để hiển thị widget ra ngoài trang chủ, trang public hay front-end.
  • update(): Hàm lưu xuống csdl hay file nội dung trong widget.
  • form(): Qui định cách lấy dữ liệu từ người dùng quản lý, tức giao diện trong admin back-end.
  • bcdonline_fromcategorieswidgetInit(): Đăng ký widget.
  • add_action(): Add hành động vừa đăng ký vào trong wordpress.

Chúng ta có thể hiểu nom ma là thế, bây giờ đi từng bước các công việc nha các bạn. Ak, quên bạn nên include file này vào functions.php để lát k nhớ. Trong file bạn gõ đoạn code sau:

<!--
include(TEMPLATEPATH . '/includes/widget-from-categories.php');
-->

Nhớ viết đúng đường dẫn nha người anh em.

Phương thức widget

Công việc của phần này là viết hàm bcdonline_fromcategorieswidget() sẽ hiển thị control cho người dung kéo thả vào trong khung vị trí hiển thị widget.

<!--
function bcdonline_fromcategorieswidget(){
	$widget_ops = array('description' => 'Hiển thị category mới nhất');
	$control_ops = array('width' => 400, 'height' => 300);
	parent::WP_Widget(false,$name='Recent From Categories Widget',$widget_ops,$control_ops);
}
-->

Hàm trên sẽ qui định tên, ghi chú, kích thước hiển thị của control. Bạn save lại đăng nhập vào admin mục Widgets sẽ thấy được kết quả sau.

Khai báo phương thức trong widget wordpress

Khai báo phương thức trong widget wordpress

Bạn sẽ dễ dàng thấy được ghi chú, và tên của widget wordpress mà ta đã viết trong hàm trên.

From quản lý Widget

Đây là hàm qui định giao diện hiển thị các thông tin của Widget trong admin quản lý.

<!--
function form($instance){
//Defaults
	$instance = wp_parse_args( (array) $instance, array('title'=>'Tiêu đề Categories', 'posts_number'=>'5', 'blog_category'=>'') );

	$title = esc_attr($instance['title']);
	$posts_number = (int) $instance['posts_number'];
	$blog_category = (int) $instance['blog_category'];

	# Title
	echo '<p><label for="' . $this->get_field_id('title') . '">' . 'Title:' . '</label><input class="widefat" id="' . $this->get_field_id('title') . '" name="' . $this->get_field_name('title') . '" type="text" value="' . $title . '" /></p>';
	# Number Of Posts
	echo '<p><label for="' . $this->get_field_id('posts_number') . '">' . 'Số lượng hiển thị:' . '</label><input class="widefat" id="' . $this->get_field_id('posts_number') . '" name="' . $this->get_field_name('posts_number') . '" type="text" value="' . $posts_number . '" /></p>';
	# Category ?>
	<?php 
		$cats_array = get_categories('hide_empty=0');
	?>
	<p>
		<label for="<?php echo $this->get_field_id('blog_category'); ?>">Category</label>
		<select name="<?php echo $this->get_field_name('blog_category'); ?>" id="<?php echo $this->get_field_id('blog_category'); ?>" class="widefat">
			<?php foreach( $cats_array as $category ) { ?>
				<option value="<?php echo $category->cat_ID; ?>"<?php selected( $instance['blog_category'], $category->cat_ID ); ?>><?php echo $category->cat_name; ?></option>
			<?php } ?>
		</select>
	</p> 
	<?php
}
-->

Bạn có thể nhìn thấy được giao diện chúng ta bao gồm hai input text để nhập tiêu đề, và số lượng hiển thị bài post, một select để chọn thể loại.

Ta có biến $title để lưu giá trị của tiêu đề, $posts_number lưu số lượng của bài hiển thị, $blog_category lưu ID của categories.

$cats_array: mảng lưu các ID có trong cơ sở dữ liệu trừ thuộc tính hide_empty=0 thông qua hàm get_categories(), $category->cat_ID: Lấy id của thể loại, $category->cat_name: Lấy tên thể loại trong wordpress.

Sau đó bạn save lại và vào trong admin test thử bằng cách kéo control widget vừa tạo vào vị trí nào đó.

Quản lý widget wordpress trong admin

Quản lý widget wordpress trong admin

Nếu được như thế chúng ta sẽ qua bước típ theo.

Lưu thông tin trong widget

Có control rồi, có giao diện quản lý rồi, bạn có thể nhập thông tin bây giờ sẽ code phần lưu lại thông tin đó. Trong widgets wordpress cung cấp cho ta hàm update bạn viết như sau.

<!--
function update($new_instance, $old_instance){
	$instance = $old_instance;
	$instance['title'] = stripslashes($new_instance['title']);
	$instance['posts_number'] = (int) $new_instance['posts_number'];
	$instance['blog_category'] = (int) $new_instance['blog_category'];
	return $instance;
}
-->

Xong lưu lại để đó.

Hiển thị widget ra trang chủ blog wordpress

Tất cả các việc giờ sắp hoàn thành, bây giờ sẽ hiển thị các thông tin ra ngoài trang chủ của blog wordpress. Bạn típ tục viết hàm sau:

<!--
function widget($args, $instance){
	extract($args);
	$title = apply_filters('widget_title', empty($instance['title']) ? 'Recent From ' : $instance['title']);
	$posts_number = empty($instance['posts_number']) ? '' : (int) $instance['posts_number'];
	$blog_category = empty($instance['blog_category']) ? '' : (int) $instance['blog_category'];

	echo $before_widget;

	if ( $title )
	echo $before_title . $title . $after_title;
?>
	<?php query_posts("showposts=".$posts_number."&cat=".$blog_category);
	if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="block-post clearfix">
			<h3 class="title"><a href="<?php the_permalink(); ?>"><?php echo mb_substr(the_title('','',FALSE),0,35,'UTF-8');?>&hellip;</a></h3>
		</div> <!-- end .block-post -->
	<?php endwhile; endif; wp_reset_query(); ?>

<?php
	echo $after_widget;
}
-->

Bạn dễ dàng nhìn thấy trong wordpres loop của hàm trên sẽ có div bao quanh, thẻ h3 cho phép hiển thị title trong đó với các hàm wordpress cơ bản.

Add widget

Công việc này giúp bạn add hành động nảy h mình làm vào trong wordpress.

<!--
function bcdonline_fromcategorieswidgetInit() {
	register_widget('bcdonline_fromcategorieswidget');
}
add_action('widgets_init', 'bcdonline_fromcategorieswidgetInit');
-->

Tiếp đến bạn save tất cả, lại nhập các thông tin, sau đó bạn mở public lên test thử sẽ thấy kết quả sau, quên nữa dữ liệu trong categories chưa có bài nào bây giờ sẽ tạo để thấy được kết quả trực quan hơn.

Kết quả hiển thị widget wordpress

Kết quả hiển thị widget wordpress

Kết luận: Vậy là mình đã thiết kế được một widget cho chính mình, ban đầu tuy hơi cùi nhưng hãy định dạng css lại nha các bạn kết hợp với bài trước sử dụng widget wordpress sẽ OK thôi hii… Chúc thành công!

Download: http://www.mediafire.com/?ii86ga948mkas2k
Nguồn: http://codex.wordpress.org/WordPress_Widgets

VN:F [1.9.22_1171]
Rating: 9.8/10 (9 votes cast)
Thiết kế widget cho wordpress, 9.8 out of 10 based on 9 ratings
Share This