Theo mặc định của hệ thống Genesis Framework thì comments chỉ có chức năng viết và hiển thị dẫn đến sự nhàm chán khi sử dụng. Bài viết này mình sẽ hướng dẫn các bạn một số cách đơn giản để tùy biến khung bình luận Genesis theo phong cách cực riêng.
#1 Tổng quan cách tùy biến Comment Genesis
Trong bài viết này, mình sẽ hướng dẫn các bạn tùy biến khung bình luận của Genesis Framework theo trình tự từ trên xuống dưới.
Với một số cách bạn cần sử dụng thêm plugin bên ngoài, tuy nhiên những plugin này sẽ không làm ảnh hưởng tối tốc độ website của bạn.
Chúng ta bắt đầu nhé!
Xem thêm:
- Tổng hợp code tùy biến Breadcrumb trong Genesis Child Theme
#2 Hướng dẫn tùy biến Comment Genesis toàn tập
Hầu hết các cách tùy biến trong bài viết này đều chỉnh sử file functions.php trong child theme của bạn. File này có đường dẫn mặc định là /contents/themes/favorite/functions.php
Lưu ý: Trước khi thực hiện hãy backup file functions.php lại, phòng trường hợp bị lỗi code sau này.
Hiển thị số comments trong post meta
Thêm đoạn code sau đây vào cuối file functions.php của Genesis Framework hoặc Genesis child theme mà bạn đang sử dụng.
//Hiển thị số comment trong post meta
add_filter( 'genesis_title_comments', 'favorite_title_comments');
function favorite_title_comments() {
return __(comments_number( '<h3>Comments</h3>', '<h3>1 Comments</h3>', '<h3>% Comments</h3>' ), 'genesis' );
}
Hiển thị số comments của từng thành viên
Thêm đoạn code sau đây vào cuối file functions.php
Hiển thị thứ tự comment
- Bước 1: Cài đặt và kích hoạt plugin Greg’s Threaded Comment Numbering.
- Bước 2: Thêm đoạn code sau vào cuối files functions.php của child theme Genesis.
// Đánh STT commnents genesis by Greg's Threaded Comment Numbering plugin
add_filter( 'genesis_comment_list_args', 'sk_add_numbered_comments' );
function sk_add_numbered_comments( $defaults ) {
if ( function_exists( 'gtcn_basic_callback' ) ) {
$defaults['callback'] = genesis_html5() ? 'gtcn_basic_callback' : 'genesis_comment_callback';
}
return $defaults;
}
- Bước 3: Thêm đoạn code sau vào cuối file style.css của Genesis Framework hoặc Child Theme Genesis.
.commentnumber {
float: right;
font-size: 12px;
background: #ddd;
padding: 5px 10px;
}
Hiển thị comment Badge trong genesis
- Bước 1: Cài đặt và kích hoạt plugin Comment Author Role Badge
- Bước 2: Thêm đoạn CSS sau vào comment-author-role-badge.css
Trong thư mục /wp-content/plugins/comment-author-role-badge/comment-author-role-badge.css
.comment-author-role-badge {
display: inline-block;
padding: 3px 6px;
margin-left: .5em;
border-radius: 2px;
color: #ffffff;
font-size: 15px;
font-weight: normal;
text-transform: none;
text-align: left;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
}
.widget .comment-author-role-badge {
display: none;
}
.comment-author-role-badge--administrator { background: #f06723; }
.comment-author-role-badge--contributor { background: #c1f1d1; }
.comment-author-role-badge--author { background: #fdf5c5; }
.comment-author-role-badge--editor { background: #fdd8c5; }
.comment-author-role-badge--subscriber { background: #e8e8e8; }
/*
* Install the following plugin to enable this feature
*
* @link https://wordpress.org/plugins/current-theme-body-class/
*/
.current-theme--twentytwelve .comments-area .bypostauthor cite span {
display: none;
}
Tùy biến Author says text trong Genesis
Sử dụng đoạn code sau.
# Tùy biến author says text trong Genesis
add_filter( 'comment_author_says_text', 'favorite_comment_author_says_text' );
function favorite_comment_author_says_text() {
return 'author says';
}
Tùy biến/ Việt hóa nút Submit trong Genesis
// Tùy biến nút Submit trong Genesis
add_filter( 'comment_form_defaults', 'favorite_comment_submit_button' );
function favorite_comment_submit_button( $defaults ) {
$defaults['label_submit'] = __( 'Gửi bình luận', 'custom' );
return $defaults;
}
Tùy biến comments link text trong Genesis
Dùng đoạn code sau
// Tùy biến comments link trong Genesis
add_filter( 'genesis_post_info', 'favorite_post_info_filter' );
function favorite_post_info_filter( $post_info ) {
return '[post_comments zero="Để lại một bình luận" one="1 Bình luận" more="% Bình luận"]';
}
Tùy biến Trackbacks title text trong Genesis
// Tùy biến trackbacks title trong Genesis
add_filter( 'genesis_title_pings', 'favorite_title_pings' );
function favorite_title_pings() {
echo '<h3>Trackbacks</h3>';
}
Tùy biến dòng chữ Speak Your Mind / Leave a Comments
# Tùy biến dòng chữ Speak Your Mind trong Genesis
add_filter( 'comment_form_defaults', 'favorite_comment_form_defaults' );
function favorite_comment_form_defaults( $defaults ) {
$defaults['title_reply'] = __( 'Để lại một bình luận' );
return $defaults;
}
Thêm nội quy vào khung bình luận trong Genesis
// Thêm nội quy vào khung bình luận trong Genesis
add_action( 'genesis_after_comments', 'favorite_comment_policy' );
function favorite_comment_policy() {
if ( is_single() && !is_user_logged_in() && comments_open() ) {
?>
<div class="comment-policy-box">
<p class="comment-policy">Nội quy bình luận: Viết nội quy bình luận của bạn vào đây.</p>
</div>
<?php
}
}
Loại bỏ các thẻ HTML cho phép trên khung bình luận trong Genesis
// Loại bỏ các thẻ HTML được cho phép bên trên khung bình luận trong Genesis
add_filter( 'comment_form_defaults', 'favorite_remove_comment_form_allowed_tags' );
function favorite_remove_comment_form_allowed_tags( $defaults ) {
$defaults['comment_notes_after'] = '';
return $defaults;
}
Tùy chỉnh kích thước Gavatar trong Genesis
// Tùy biến kích thước của Gravatar trong Genesis
add_filter( 'genesis_comment_list_args', 'favorite_comments_gravatar' );
function favorite_comments_gravatar( $args ) {
$args['avatar_size'] = 96;
return $args;
}
Thay số 96 thành kích thước bạn muốn nó hiển thị
$args['avatar_size'] = 96;
Tùy biến Comment cookies text trong Genesis
// Tùy biến comment cookies text "Save my name, email, and website . . ." trong Genesis
add_filter( 'comment_form_default_fields', 'favorite_filter_comment_fields', 20 );
function favorite_filter_comment_fields( $fields ) {
$commenter = wp_get_current_commenter();
$consent = empty( $commenter['comment_author_email'] ) ? '' : ' checked="checked"';
$fields['cookies'] = '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"' . $consent . ' />' . '<label for="wp-comment-cookies-consent">Nhập nội dung</label></p>';
return $fields;
}
Loại bỏ Comment cookies checkbox trong Genesis
// Loại bỏ Comment cookies checkbox trong Genesis
add_filter( 'comment_form_default_fields', 'favorite_comment_form_hide_cookies_consent' );
function favorite_comment_form_hide_cookies_consent( $fields ) {
unset( $fields['cookies'] );
return $fields;
}
Loại bỏ link thời gian dưới bình luận
// Loại bỏ link thời gian dưới comment trong Genesis
add_filter( 'genesis_show_comment_date', 'favorite_remove_comment_time_and_link' );
function fovorite_remove_comment_time_and_link( $comment_date ) {
printf( '<p %s>', genesis_attr( 'comment-meta' ) );
printf( '<time %s>', genesis_attr( 'comment-time' ) );
echo esc_html( get_comment_date() );
echo '</time></p>';
return false;
}
#3 Tổng kết
Trên đây là tất cả những gì bạn cần để tùy biến giao diện comment Genesis Framework và Genesis Child Theme theo phong cách riêng. Hãy xem Thủ thuật Genesis Frameworks để biết thêm nhiều thủ thuật hay và có thể tự mình tạo ra một Genesis Child theme hoàn chỉnh.
Nếu có thắc mắc gì càn mình giúp đỡ thì hãy để lại comment bên dưới nhé. Chúc các bạn thành công!