Tạo Widget Recent Comments Avatar trong WordPress

WordPress vẫn luôn là một điều gì đó thú vị cho những blogger thích khám phá và thể hiện sự sáng tạo cho riêng mình đặc biệt là tính năng comment. Trong bài tạo Widget Recent Comments Avatar trong WordPress sẽ giới thiệu cho bạn cách thiết kế mục comments gần đây có thể hiện Avatar.

Đã lâu rồi không viết bài, giờ cũng đang rất bận rộn tuy nhiên cũng vội vàng viết 1 bài cho anh em vào chém chơi, widget recent comments cũng đã có sẳn trong WordPress tuy nhiên không có thành phần Avatar nếu ai muốn đơn giản thì có thể sử dụng widget recent comments này cũng được còn ai muốn thêm điều gì đó thú vị thì hãy theo dõi tiếp bài viết nhé.

Recent Comments Avatar trong WordPress

Recent Comments Avatar trong WordPress


Comment là điều mà không thể thiếu của Blog, nó như một sự giao lưu, để đọc giả, bạn bè trao đổi thông tin với bạn và ngươc lại, commnent sẽ làm bạn bè blogger đến gần nhau hơn và cũng là điều kiện cần và đủ để blog của bạn có thể phát triển còn Avatar mang nét đặt trưng cá nhân, nó là biểu tượng mà mọi người thông qua đó biết được bạn nhất là sự phát triển của Gravatar do đó mục Recent Comments gắng Avatar là sự cần thiết.

Cách mà tạo ra được một Widget mình đã chia sẻ rất nhiều ở các bài trước, ở đây mình sẽ không nói thêm để tránh cho các bạn đã và đang theo dõi mục này đỡ có sự nhàm chán, mà bài này trọng tâm là cách mà bạn tích hợp Recent Comments Avatar tạo thành Widget trong WordPress. Mời bạn xem lại: Cách dùng Widgetthiết kế Widget.

Tạo Widget Recent Comments Avatar

Bây giờ mình giả định các bạn đã tạo xong khai báo, set vị trí cũng như hoàn tất tất cả các bước chuẩn bị để có một Widget như ở hai bài mình giới thiệu trên. Sau đây sẽ chú trọng phần hàm chính trong Widget Recent Comments Avatar này, bạn vào file functions.php viết như sau:

<!--
add_action( 'widgets_init', 'comments_avatar_widget' );
function comments_avatar_widget() {
	register_widget( 'comments_avatar' );
}
class comments_avatar extends WP_Widget {

	function comments_avatar() {
		$widget_ops = array( 'classname' => 'comments-avatar' );
		$control_ops = array( 'width' => 250, 'height' => 350, 'id_base' => 'comments_avatar-widget' );
		$this->WP_Widget( 'comments_avatar-widget','Recent Comments with Avatar', $widget_ops, $control_ops );
	}
	
	function widget( $args, $instance ) {
		extract( $args );

		$title = apply_filters('widget_title', $instance['title'] );
		$no_of_comments = $instance['no_of_comments'];
		$avatar_size = $instance['avatar_size'];

		echo $before_widget;
		if ( $title )
			echo $before_title;
			echo $title ; ?>
		<?php echo $after_title; ?>
			<ul>	
		<?php most_commented( $no_of_comments , $avatar_size); ?>
		</ul>
	<?php 
		echo $after_widget;
	}

	function update( $new_instance, $old_instance ) {
		$instance = $old_instance;
		$instance['title'] = strip_tags( $new_instance['title'] );
		$instance['no_of_comments'] = strip_tags( $new_instance['no_of_comments'] );
		$instance['avatar_size'] = strip_tags( $new_instance['avatar_size'] );
		return $instance;
	}

	function form( $instance ) {
		$defaults = array( 'title' =>__( 'Recent Comments' , 'tie'), 'no_of_comments' => '5' , 'avatar_size' => '50' );
		$instance = wp_parse_args( (array) $instance, $defaults ); ?>

		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>">Title : </label>
			<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" class="widefat" type="text" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id( 'avatar_size' ); ?>"> Avatar Size : </label>
			<input id="<?php echo $this->get_field_id( 'avatar_size' ); ?>" name="<?php echo $this->get_field_name( 'avatar_size' ); ?>" value="<?php echo $instance['avatar_size']; ?>"  type="text" size="3" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id( 'no_of_comments' ); ?>">Number of comments to show:  </label>
			<input id="<?php echo $this->get_field_id( 'no_of_comments' ); ?>" name="<?php echo $this->get_field_name( 'no_of_comments' ); ?>" value="<?php echo $instance['no_of_comments']; ?>" type="text" size="3" />
		</p>


	<?php
	}
}
-->

Như những bài trước mình sẽ có hàm đăng ký cho widget comments_avatar class comments_avatar và 4 hàm quan thuộc comments_avatar(), widget(), update(), form(). Ở đây bạn chú ý vào hàm widget() chúng ta có gọi hàm most_commented() với hai đối số, hàm này sẽ là hàm lấy hiển thị dữ liệu vai trò như loop wordpress của chúng ta.

<!--
function most_commented($comment_posts = 5 , $avatar_size = 50){
$comments = get_comments('status=approve&number='.$comment_posts);
foreach ($comments as $comment) { echo $comment->ID; ?>
	<li>
		<div class="post-thumbnail">
			<?php echo get_avatar( $comment, $avatar_size ); ?>
		</div>
		<a href="<?php echo get_permalink($comment->comment_post_ID ); ?>#comment-<?php echo $comment->comment_ID; ?>">
		<span><?php echo strip_tags($comment->comment_author); ?></span>: <?php echo wp_html_excerpt( $comment->comment_content, 60 ); ?>... </a>
	</li>
<?php } 
}
-->

Hàm này có hai đối số, comment_posts: là số comment trong list mặc định là 5, avatar_size là giá trị kích thước mặc định là 50px, nhìn vào đây bạn có thể hiểu được cấu trúc hiển thị ở mỗi thẻ LI là một hình avatar, tên tác giả comment, tóm tắt nội dung với 60 ký tự đầu.

Recent Comments Avatar WordPress Admin

Recent Comments Avatar WordPress Admin

Công việc tiếp theo như thường lệ thì mình định dạng CSS cho Widget Recent Comments Avatar của mình thôi, bạn có thể dùng firebug mò ra các thuộc tính và đây là cách gần như mọi chúng ta đều hay sử dụng.

.comments-avatar{
}

.comments-avatar .widget-container{	
}

.comments-avatar .widget-container ul{
}

.comments-avatar .widget-container ul li{
}

.comments-avatar .widget-container .post-thumbnail{
}

.comments-avatar .widget-container a{
}

.comments-avatar .widget-container span{
}

Bạn có thể chạy lên được gia diện mẫu Widget Recent Comments Avatar trong WordPress đã định dạng sơ lược về CSS như sau:

Test Comments Avatar WordPress

Test Comments Avatar WordPress

Kết luận: Như vậy là chúng ta đã hoàn thành thêm một tính năng khá hay của WordPress, mong là bài này sẽ giúp được các bạn đặc biệt là những ai có ý định tự mình code theme để sử dụng. Mình sẽ cố gắng sưu tầm nhiều cách tạo widget hay chia sẻ cho mọi người trong thời gian tới, chúc thành công!

VN:F [1.9.22_1171]
Rating: 7.0/10 (6 votes cast)
Tạo Widget Recent Comments Avatar trong WordPress, 7.0 out of 10 based on 6 ratings
Share This