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 .
Vò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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/*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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.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 Avatars, Recent Comments with Avatars và còn nhiều plugins khác nữa. Chúc bạn thành công!
