Comments WordPress đóng một vai trò quan trọng trong việc xây dựng, tăng mức độ tương tác của người dùng trên một trang web. Một form mẫu Comments thân thiện với người dùng thân thiện sẽ khuyến khích người dùng tham gia thảo luận trên trang web của bạn hơn.
Chính vì vậy, chăm chút hơn một chút cho phần comments cũng là dễ hiểu phải không. Đó là lý do tại sao hôm nay mình chia sẽ về Comment WordPress.
Nội dung chính
Tùy chỉnh mẫu Comments WordPress
Bên trong hầu hết các theme WordPress sẽ có một tệp mẫu là comments.php. Tệp này được sử dụng để hiển thị các bình luận, nhận xét và biểu mẫu bình luận trên các bài đăng trên trang web của bạn. Hình thức bình luận WordPress được tạo ra bằng cách sử dụng các hàm chức năng:
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 |
/*--------custom comments form------------------*/ add_filter( 'comment_form_defaults', 'comment_form_args' ); function comment_form_args($defaults) { global $user_identity, $id; $commenter = wp_get_current_commenter(); $req = get_option( 'require_name_email' ); $aria_req = ( $req ? ' aria-required="true"' : '' ); $author = '<p class="comment-form-author">' . '<input id="author" name="author" type="text" class="author" placeholder="Nhập tên của bạn" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30" tabindex="1"' . $aria_req . '/>' . '</p><!-- #form-section-author .form-section -->'; $email = '<p class="comment-form-email">' . '<input id="email" name="email" type="text" class="email" placeholder="Nhập email của bạn" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30" tabindex="2"' . $aria_req . ' />' . '</p><!-- #form-section-email .form-section -->'; $url = '<p class="comment-form-url">' . '<input id="url" name="url" type="text" class="url" placeholder="Nhập địa chỉ website của bạn" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" tabindex="3" />' . '</p><!-- #form-section-url .form-section -->'; $comment_field = '<p class="comment-form-comment">' . '<textarea id="comment" name="comment" cols="45" rows="8" class="form" tabindex="4" aria-required="true"></textarea>' . '</p><!-- #form-section-comment .form-section -->'; $args = array( 'fields' => array( 'author' => $author, 'email' => $email, 'url' => $url, ), 'comment_field' => $comment_field, 'title_reply' => __( 'Gửi bình luận', 'genesis' ), 'comment_notes_before' => '', 'comment_notes_after' => '', ); $args = wp_parse_args( $args, $defaults ); return apply_filters( 'raynoblog_comment_form_args', $args, $user_identity, $id, $commenter, $req, $aria_req ); } |
Nếu bạn muốn có thể tùy chỉnh lại stylesheet cho khung này. Thêm đoạn code sau vào file style.css
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 |
/*custom comments form ------------------------------------------------------------ */ .author{ background: url(https://nx5.upanh.com/b5.s29.d3/ab36e72a619b1d210ef5de5a68d30f15_56167325.name.png) no-repeat; padding-left:35px !important; font-size: 15px !important; margin: 10px 0 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .email{ background: url(https://nx1.upanh.com/b1.s36.d1/d26bff75d0ead63137051a8c02e1a5e9_56167321.mail.png) no-repeat; padding-left:35px !important; font-size: 15px !important; margin: 10px 0 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .url{ background: url(https://nx6.upanh.com/b4.s38.d3/74e69381eae4e5112c5e026882375842_56167326.website.png) no-repeat; padding-left:35px !important; font-size: 15px !important; margin: 10px 0 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .form{ background: #fff; margin: 10px 0 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } |
Để thiết kế cho nút submit ta sẽ thêm vào các lớp sau (nếu đã có rồi thì tìm và chỉnh sửa lại):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#submit { background: #009966 !important; border: 1px solid #009933; color: #fff; cursor: pointer; font-family: 'Oswald', arial, serif !important; font-size: 12px !important; font-weight: bold !important; padding: 5px 7px; text-decoration: none; text-transform: uppercase; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } #submit:hover { background: #009933 !important; border: 1px solid #009966; color: #fff; text-decoration: none; text-transform: uppercase; } |
Thay đổi chữ Leave a Reply (hoặc Speak Your Mind)
1 2 3 4 5 |
function comment_text($args) { $args['title_reply']='Bình luận'; return $args; } add_filter( 'comment_form_defaults', 'comment_text' ); |
Thay đổi nội dung nút Submit
Nút này chính là nút nhấn để gửi bình luận đó, các bạn thường thấy là Post Comment, Submit Comment,…
1 2 3 4 5 |
function change_submit_comment( $defaults ) { $defaults['label_submit'] = 'Gửi bình luận'; return $defaults; } add_filter( 'comment_form_defaults', 'change_submit_comment' ); |
Áp dụng với cả Genesis Child Theme và các theme khác.
Thêm một Checkbox Đăng ký theo dõi bình luận trong WordPress
Khi người dùng để lại bình luận trên trang web của bạn, nhiều người có thể đang đặt một câu hỏi và muốn theo dõi câu trả lời từ chủ thớt hoặc từ một người nào đó vì vậy việc tạo một checkbox đăng ký theo dõi bình luận trên trang web là điều không thể thiếu. Ngoài ra, với checkbox này bạn sẽ thu hút thêm những người đã thảo luận trên trang web sẽ tiếp tục quay lại và thảo luận tiếp.
Để thêm checkbox này, điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Subscribe to Comments Reloaded. Sau khi kích hoạt, bạn cần truy cập Settings » Subscribe to Comments để cấu hình các cài đặt cho plugin.
Thay đổi title comment
Nghĩa là thay đổi dòng chữ phía trên cùng của danh sách comment. Ta chèn code sau vào file functions.php:
1 2 3 4 |
add_filter( 'genesis_title_comments', 'title_comments' ); function title_comments() { echo 'Có '.get_comments_number().'bình luận cho bài viết'.get_the_title().''; } |
Chú ý cách này chỉ áp dụng đối với các blog sử dụng Genesis Child theme. Đối với các theme khác bạn có thể thay đổi trong file comments.php. Chẳng hạn đối với theme twenty twelve của WordPress, bạn sẽ tìm đoạn code:
1 2 3 |
<?php printf( _n( 'One thought on “%2$s”', '%1$s thoughts on “%2$s”', get_comments_number(), 'twentytwelve' ),number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' ); ?> |
Sửa lại thành:
1 2 3 |
<?php echo 'Có '.get_comments_number().'bình luận cho bài viết'.get_the_title().''; ?> |
Thay đổi kích thước avatar trong comment
Chú ý cách này chỉ áp dụng cho Genesis childthemes. Ta sử dụng code sau chèn vào file functions.php:
1 2 3 4 5 |
add_filter( 'genesis_comment_list_args', 'comment_avatar_args' ); function comment_avatar_args( $args ) { $args['avatar_size'] = 60; return $args; } |
Bổ sung vào file style.css (nếu đã có rồi thì tìm và sửa lại):
1 2 3 4 |
.comment-list li .avatar { height: 60px; width: 60px; } |
Đối với các themes khác, ta có thể tìm trong file comment.php hoặc trong file functions.php. Ví dụ đối với theme twenty twelve của WordPress, ta sẽ tìm trong file functions.php đoạn code:
1 |
echo get_avatar( $comment, 44 ); |
Số 44 là kích thước của avatar, bạn có thể thay đổi nó. Với các themes khác bạn có thể làm tương tự.
Hi vọng với bài viết: Hướng dẫn tùy chỉnh phần Comments WordPress này bạn sẽ có thêm nhiều ý tưởng cho việc thiết kế web và tối ưu hóa tỷ lệ tương tác trên website của mình
Add Comment