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 :

    Thanks anh! {c27}

  2. Lê Hùng :

    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}

    • Đạt Phạm :

      Ý kiến của bạn hoàn toàn giống mình !

    • Rayno :

      {c27} Cảm ơn nhận xét chân thành của hai bác. Mắt thẩm mĩ e kém lắm, lại nghèo ý tưởng nữa, chắc phải tìm trang của bác nào đẹp đẹp đễ bắt chước thôi {c20}

      • Đạt Phạm :

        Bác lại khiêm tốn rồi ! {c20}

  3. Đạt Phạm :

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

    • Rayno :

      he he. Bác thử đoán xem {c21}

      • Đạt Phạm :

        Bik chết liền ! {c26}

    • Rayno :

      Là rẫy nổ đó bác, đó là tên xóm của e {c27}

      • Đạt Phạm :

        Ơ hay nhỉ ? {c1}

      • thiết kế logo công ty :

        xóm bác chắc có nhiều bom nhỉ {c27}

  4. tai game java :

    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}

    • Rayno :

      Cảm ơn bạn đã góp ý nhiệt tình!!!

  5. Đạt Phạm :

    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}

    • Rayno :

      He he, mới đổi đó bạn, nhiều người chê quá mà {c26}

  6. Đạt Phạm :

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

  7. Đạt Phạm :

    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}

    • Rayno :

      Hiii. Cảm ơn bác! Blog của bác là gì thế?

      • Đạt Phạm :

        Blog của em là blog phần mềm, game, thủ thuật sưu tầm được .v.v. bác ạ !

  8. nguyen van toan :

    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!