Bài viết liên quan
Comment là phần quan trọng bậc nhất của một trang web. Đây là nơi mà tác giả với người xem có thể tương tác với nhau. Qua số lượt comment có thể đánh giá được trang web đó có uy tín hay không, độ tin cậy thông tin mà trang web đó chia sẻ. Chính vì vậy, chăm chút hơn một chút cho phần comment cũng là dễ hiểu phải không. Trong bài viết này, tôi xin chia sẻ tới các bạn một số code để tùy chỉnh phần comment trong WordPress.
Xóa field nhập website trong comment WordPressLàm nổi bật comment của tác giả trong WordPressHiển thị lượt bình luận bên cạnh tên tác giả
Thiết kế lại form comment
Khung mặc định quá xấu, bạn hãy thử khung này của tôi nhé.
add_filter( 'comment_form_defaults', 'cswp_comment_form_args' );function cswp_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="Name" 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="Email" 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="Website" 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' => __( 'Leave a Reply', 'genesis' ),'comment_notes_before' => '','comment_notes_after' => '',);$args = wp_parse_args( $args, $defaults );return apply_filters( 'cswp_comment_form_args', $args, $user_identity, $id, $commenter, $req, $aria_req );}
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
add_filter( 'comment_form_defaults', 'cswp_comment_form_args' );
function cswp_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="Name" 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="Email" 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="Website" 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' => __( 'Leave a Reply', 'genesis' ),
'comment_notes_before' => '',
'comment_notes_after' => '',
);
$args = wp_parse_args( $args, $defaults );
return apply_filters( 'cswp_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.
.author {padding-left:35px !important; font-size: 15px !important;margin: 10px 0 10px;}.email {padding-left:35px !important; font-size: 15px !important;margin: 10px 0 10px;}.url {padding-left:35px !important; font-size: 15px !important;margin: 10px 0 10px;}.form {background: #fff;margin: 10px 0 10px;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.author {
padding-left:35px !important;
font-size: 15px !important;
margin: 10px 0 10px;
}
.email {
padding-left:35px !important;
font-size: 15px !important;
margin: 10px 0 10px;
}
.url {
padding-left:35px !important;
font-size: 15px !important;
margin: 10px 0 10px;
}
.form {
background: #fff;
margin: 10px 0 10px;
}
Thay đổi tiêu đề của phần Comment
Đối với các Child Theme của Genesis, cá bạn thêm đoạn code sau vào file functions.php.
function cswp_title_comments() { echo 'Có '.get_comments_number().'bình luận cho bài viết';}add_filter( 'genesis_title_comments', 'cswp_title_comments' );
1
2
3
4
function cswp_title_comments() {
echo 'Có '.get_comments_number().'bình luận cho bài viết';
}
add_filter( 'genesis_title_comments', 'cswp_title_comments' );
Đối với các theme khác, các bạn mở file comments.php để sửa code. Ví dụ tôi làm với theme Twenty Seventeen.
Thay đoạn code:
'%1$s Reply to “%2$s”','%1$s Replies to “%2$s”',
1
2
'%1$s Reply to “%2$s”',
'%1$s Replies to “%2$s”',
thành:
'Có %1$s bình luận trong “%2$s”','Có %1$s bình luận trong “%2$s”',
1
2
'Có %1$s bình luận trong “%2$s”',
'Có %1$s bình luận trong “%2$s”',
Thay đổi chữ Leave a Reply (hoặc Speak Your Mind)
function cswp_comment_text($args) { $args['title_reply']='Bình luận'; return $args;}add_filter( 'comment_form_defaults', 'cswp_comment_text' );
1
2
3
4
5
function cswp_comment_text($args) {
$args['title_reply']='Bình luận';
return $args;
}
add_filter( 'comment_form_defaults', 'cswp_comment_text' );
Áp dụng với cả Genesis Child Theme và các theme khác nhé.
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,…
function cswp_change_submit_comment( $defaults ) { $defaults['label_submit'] = 'Gửi bình luận'; return $defaults;}add_filter( 'comment_form_defaults', 'cswp_change_submit_comment' );
1
2
3
4
5
function cswp_change_submit_comment( $defaults ) {
$defaults['label_submit'] = 'Gửi bình luận';
return $defaults;
}
add_filter( 'comment_form_defaults', 'cswp_change_submit_comment' );
Áp dụng với cả Genesis Child Theme và các theme khác.
Thay đổi kích thước Gavatar
Đối với các theme của Genesis
function cswp_comment_avatar_args( $args ) { $args['avatar_size'] = 40; //Size của avatar return $args;}add_filter( 'genesis_comment_list_args', 'cswp_comment_avatar_args' );
1
2
3
4
5
function cswp_comment_avatar_args( $args ) {
$args['avatar_size'] = 40; //Size của avatar
return $args;
}
add_filter( 'genesis_comment_list_args', 'cswp_comment_avatar_args' );
Thêm stylesheet cho avatar bằng cách thêm đoạn code sau vào file style.css.
.comment-list li .avatar { height: 40px; width: 40px; border-radius: 50% // Làm tròn ảnh}
1
2
3
4
5
.comment-list li .avatar {
height: 40px;
width: 40px;
border-radius: 50% // Làm tròn ảnh
}
Đối với các theme khác các bạn sửa code trong file comments.php. Ví dụ tôi làm với theme Twenty Seventeen.
Sửa đoạn code
'avatar_size' => 100,
1
'avatar_size' => 100,
thành
'avatar_size' => 60, // 60 là size của avatar
1
'avatar_size' => 60, // 60 là size của avatar
Thay đổi chữ Reply trong bình luận
function cswp_change_reply_text($args) { $args = str_replace('Reply', 'Trả lời', $args); return $args;}add_filter('comment_reply_link', 'cswp_change_reply_text');
1
2
3
4
5
function cswp_change_reply_text($args) {
$args = str_replace('Reply', 'Trả lời', $args);
return $args;
}
add_filter('comment_reply_link', 'cswp_change_reply_text');
Loại bỏ phần mô tả
Một số theme sẽ có đoạn mô tả chẳng hạn như “Bạn có thể sử dụng các thẻ HTML…” Để loại bỏ dòng chữ này, các bạn sử dụng đoạn code sau:
function cswp_comments_form_defaults($default) { unset($default['comment_notes_after']); return $default;}function cswp_init() { add_filter('comment_form_defaults','cswp_comments_form_defaults');}add_action('after_setup_theme','cswp_init');
1
2
3
4
5
6
7
8
function cswp_comments_form_defaults($default) {
unset($default['comment_notes_after']);
return $default;
}
function cswp_init() {
add_filter('comment_form_defaults','cswp_comments_form_defaults');
}
add_action('after_setup_theme','cswp_init');
Giới hạn kí tự tối thiểu, tối đa trong Comment
function cswp_preprocess_comment($comment) { if ( strlen( $comment['comment_content'] ) >= 1000 ) { wp_die('Bình luận của bạn quá dài, vui lòng sử dụng dưới 1000 ký tự'); }if ( strlen( $comment['comment_content'] ) <= 60 ) { wp_die('Độ dài bình luận không đủ yêu cầu, vui lòng sử dụng trên 60 ký tự.'); } return $comment;}add_filter( 'preprocess_comment', 'cswp_preprocess_comment' );
1
2
3
4
5
6
7
8
9
10
function cswp_preprocess_comment($comment) {
if ( strlen( $comment['comment_content'] ) >= 1000 ) {
wp_die('Bình luận của bạn quá dài, vui lòng sử dụng dưới 1000 ký tự');
}
if ( strlen( $comment['comment_content'] ) <= 60 ) {
wp_die('Độ dài bình luận không đủ yêu cầu, vui lòng sử dụng trên 60 ký tự.');
}
return $comment;
}
add_filter( 'preprocess_comment', 'cswp_preprocess_comment' );
Tổng kết
Trên đây là một số code để tùy chỉnh phần comment trong WordPress, nếu các bạn có khó khăn nào hãy để lại bình luận cho tôi phía dưới nhé. Chúc các bạn thành công.
Nguồn: Việt Hùng admin https://chiasewp.com/
Thẻ :
Wordpress
Bình Luận