Tạo Widget recent comments với ảnh Avatar

Chào các bạn! Nếu như đây không phải là lần đầu tiên bạn ghé thăm blog của mình thì bạn có thể thấy mình vừa thiết kế lại giao diện cho nó. Đây là lần thay đổi giao diện đầu tiên kể từ khi blog được thành lập từ tháng 3 năm nay. Ở theme trước mình đã lấy ý tưởng từ theme MD2 và mình đã tương đối thành công vì đã có nhiều bạn lầm tưởng nó là MD2 nếu như mình không có chú thích bên dưới là mình sử dụng Genesis. Và ở lần thay đổi này cũng vậy, mình vẫn dựa trên nền tảng Genesis nhưng lần này mình không theo khuôn mẫu nào cả. Có thể giao diện lần này không bắt mắt bằng lần trước nhưng thôi thì cứ đổi mới cho nó bớt nhàm chán vậy .

recent commentVòng vo vậy chắc đủ rồi, giờ mình vào nội dung chính. Trong quá trình thiết kế giao diện lần này, mình đã cố gắng tích hợp vào một widget hiễn thị nhưng bình luận mới kèm với hình ảnh avatar. Tất nhiên bạn có thể làm điều này một cách đơn giản bằng cách sử dụng các plugins. Nhưng vì mình đã sử dụng quá nhiều plugin nên không muốn cài thêm nữa.

Xem thêm: Chỉnh sửa widget recent comments trong WordPress

Trước tiên bạn cần đăng ký một widget. Ở đây mình đặt tên cho widget là Recent comments with avatar, ta sử dụng đoạn code sau:

/*recent comment width avatar */
class recent_comment_avatar extends WP_Widget
{
  function recent_comment_avatar()
  {
    $widget_ops = array(
          'classname' => 'recent_comment_avatar', 
          'description' => 'Hiển thị comment mới với ảnh avatar' );
    $this->WP_Widget('recent_comment_avatar', 'Recent comment with avatar', $widget_ops);
  }
  function form($instance)
  {
    $instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
    $title = $instance['title'];
?>
  <p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
<?php
  }
  function update($new_instance, $old_instance)
  {
    $instance = $old_instance;
    $instance['title'] = $new_instance['title'];
    return $instance;
  }
  function widget($args, $instance)
  {
    extract($args, EXTR_SKIP);
    echo $before_widget;
    $title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);
    if (!empty($title))
      echo $before_title . $title . $after_title;;

  		//NỘI DUNG WIDGET

    echo $after_widget;
  } 
}
add_action( 'widgets_init', create_function('', 'return register_widget("recent_comment_avatar");') );

Bây giờ bạn vào Appearance >> Widgets sẽ thấy xuất hiện widgets có tên là Recent comments with avatar, bạn có thể kéo nó qua sidebar để sử dụng. Bạn có thể sử dụng đoạn code trên để tạo ra các widget khác, chỉ cần thay tên hàm recent_comment_avatar thành một tên khác.

Giờ ta sẽ bổ sung nội dung cho widget mới đăng ký bằng cách sử dụng đoạn code sau chèn vào vị trí NỘI DUNG WIDGET trong đoạn code trên:

			$no_comments = 5;
			$comment_len = 80;
			$avatar_size = 60;
		    $comments_query = new WP_Comment_Query();
			$comments = $comments_query->query( array( 'number' => $no_comments ) );
			$comm = '';
			echo '<ul class="recentcomment">';
			if ( $comments ) : foreach ( $comments as $comment ) :
				$comm .= '<li><div class="ava">' . get_avatar( $comment->comment_author_email, $avatar_size );
				$comm .= '</div><div class="aut"><a class="author" href="' . get_permalink( $comment->comment_post_ID ) . '#comment-' . $comment->comment_ID . '">';
				$comm .= get_comment_author( $comment->comment_ID ) . ':</a>';
				$comm .= strip_tags( substr( apply_filters( 'get_comment_text', $comment->comment_content ), 0, $comment_len ) ) . '</div></li>';

			endforeach; else :
				$comm .= 'No comments.';
			endif;
			echo $comm;	
			echo '<li></li></ul>';

Trong đoạn code trên thì số comments hiễn thị là 5, độ dài comments hiễn thị là 80 ký tự, kích thước avatar là 60px. Bạn có thể thay đổi các số này nếu muốn.

Ngoài ra nếu bạn không muốn hiễn thị trích dẫn comment mà muốn hiễn thị tiêu đề bài viết thì bạn có thể sử dụng đoạn code sau thay cho đoạn code ở trên:

			$no_comments = 5;
			$comment_len = 80;
			$avatar_size = 60;
		    $comments_query = new WP_Comment_Query();
			$comments = $comments_query->query( array( 'number' => $no_comments ) );
			$comm = '';
			echo '<ul class="recentcomment">';
			if ( $comments ) : foreach ( $comments as $comment ) :
				$comm .= '<li><div class="ava">' . get_avatar( $comment->comment_author_email, $avatar_size );
				$comm .= '</div><div class="aut"><a class="author" href="' . get_permalink( $comment->post_ID ) . '#comment-' . $comment->comment_ID . '">';
				$comm .= get_comment_author( $comment->comment_ID ) . ':</a> on <a href="'. get_comment_link($comment->comment_ID) . '">' . get_the_title($comment->comment_post_ID) . '</a></div></li>';

			endforeach; else :
				$comm .= 'No comments.';
			endif;
			echo $comm;	
			echo '<li></li></ul>';

Cuối cùng là bổ sung vào một số lớp css để widget hiễn thị đẹp hơn:

.recentcomment {
    padding: 5px;
    margin: 0px !important;
}
.recentcomment li{
    list-style: none !important;
    clear: both;
    padding: 5px;
}
.ava {
    width: 70px; height: 70px;
    float: left;
    margin: 2px 8px 0 -10px;
    padding: 7px;
    background: #fff;
}
.aut {
	padding-top: 5px;
}
.aut a{
	color: #0052A4;
	font-size: 14px;
}

Vậy là bạn đã tạo đươc một widget hoàn chỉnh và có thể sử dụng.

Nếu bạn nào ngại sử dụng code thì có thể tìm một số plugins có thể giúp bạn tạo ra widget recent comments với ảnh avatar rất đơn giản như WP Recent Comments With AvatarsRecent Comments with Avatars và còn nhiều plugins khác nữa. Chúc bạn thành công!

Đánh giá bài viết này

Chú ý - WordPress Hosting 1$/tháng - miễn phí tên miền

Bạn có biết GoDaddy đang có khuyến mãi WordPress hosting chỉ còn 1$/tháng kèm theo một tên miền .COM .NET .ORG miễn phí. Hãy đăng ký ngay để tiết kiệm chi phí nhất nhé.
Xem ngay

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nếu thấy bài viết trên blog có ích cho bạn, hãy đăng ký nhận tin qua email để cập nhật bài viết mới nhanh nhất và thỉnh thoảng nhận quà bất ngờ!

Comments

  1. Đạt Phạm says:

    Thanks anh! {c27}

  2. Lê Hùng says:

    Lâu mới quay lại blog của bác rayno. Cho em nói thật một câu hơi phũ. Nhưng mà cái giao diện trước kia đẹp hơn nhiều à {c26} {c26} {c26}

  3. Đạt Phạm says:

    Ờ cho em hỏi Raynoblog nghĩa là gì vậy bác ? {c15}

  4. tai game java says:

    Giao diện này do màu xanh “đậm quá”. Theo mình nếu yêu thích màu xanh bạn nên cho nhạt hơn chút. nhìn màu này lâu hơi chói mắt {c27}

  5. Đạt Phạm says:

    mÌNH CÓ NHÌN NHẦM KO VẬY ? {c14} HÌNH NHƯ CÁI MÀU XANH NÀY BẢO MỚI LÀM NÓ NHẠT ĐI PHẢI KO ? {c15} THẤY HÔM NAY TỰ DƯNG SÁNG VÀ ĐẸP SAO SAO ẤY ! {c1}

  6. Đạt Phạm says:

    Cái này thì OK rồi ! {c20}

  7. Đạt Phạm says:

    Tính viết bài cho bác mà bận thiết kế cái blog nên ko bik khi nào thì dc ! {c4}

  8. nguyen van toan says:

    hay qua

  9. Cái này hay nhưng load vậy có làm website chậm lại không bác nhỉ ??? {c5}

  10. Em nghĩ là không đến nỗi nặng đâu bác

  11. Rất hữu ích thanks anh nhiều

Gửi bình luận

Lưu ý: Không sử dụng keyword để thay cho tên của bạn, hãy sử dụng tên thật. Cảm ơn bạn đã tham gia bình luận trên blog!