Chào các bạn! Bài viết hôm nay sẽ liên quan đến khu vực comments trên blog WordPress. Đây là một khu vực khá quan trọng. Dựa vào số lượt comments ta có thể đánh giá được blog đó có uy tín hay không. Vì vậy tất cả các bloger đều tìm cách tăng số lượng bình luận trên blog của mình. Một số themes trao chuốt cho khu vực này rất đẹp mắt nhưng một số themes thì không ổn lắm, chẳng hạn như trên blog của mình. Vì vậy mình đã tìm cách chỉnh sửa nó lại một chút xíu cho dễ nhìn hơn. Và dưới đây là tất cả những gì mình đã làm.
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', 'rayno_title_comments' ); function rayno_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 Leave a Reply hay Speak your mind
Đây là dòng chữ các bạn thường thấy ở phía trên của form comment. Để đổi dòng chữ này, ta sẽ sử dụng code sau:
|
1 2 3 4 5 |
function raynoblog_comment_text($args) { $args['title_reply']='Gửi bình luận'; return $args; } add_filter( 'comment_form_defaults', 'raynoblog_comment_text' ); |
Cách này có thể áp dụng cho cả Genesis childthemes và các theme thông thường.
Đổi chữ trong Submit button
Bạn có thể thay đổi chữ bên trong nút submit comment bằng cách dùng code:
|
1 2 3 4 5 |
add_filter( 'comment_form_defaults', 'raynoblog_change_submit_comment' ); function raynoblog_change_submit_comment( $defaults ) { $defaults['label_submit'] = 'Gửi bình luận'; return $defaults; } |
Cách này có thể áp dụng cho cả Genesis childthemes và các theme thông thường.
Thiết kế lại form comment cho WordPress
Nếu bạn chưa vừa ý với thiết kế của form comment trên blog của mình, các bạn có thể tự thiết kế lại nó. Ở đây mình cung cấp cho các bạn một mẫu form mình đang sử dụ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', 'rayno_comment_form_args' ); function rayno_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 ); } |
Bổ sung một số lớp css để cho form comment đẹ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 24 25 26 27 28 29 30 31 32 33 34 35 36 |
/*custom comments form ------------------------------------------------------------ */ .author{ background: url(http://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(http://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(http://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 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', 'rayno_comment_avatar_args' ); function rayno_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ự.
Trên đây là một số chỉnh sửa cho khu vực comment mà mình đã làm. Hy vọng sẽ giúp ích được cho các bạn. Chúc các bạn thành công! {c1}
