Hướng dẫn tùy chỉnh phần comments trong WordPress

Chào mọi người! Bài viết hôm nay sẽ liên quan tới khu vực comments trên blog WordPress. Đây là một vị trí có thể nói khá quan trọng trong một bài viết. Dựa vào số lượt comments ta có thể đánh giá được blog đó mang uy tín hay không. Do thế toàn bộ các blogger đều tìm bí quyết nâng cao số lượng bình luận trên blog của mình. 1 số themes trao chuốt cho khu vực này siêu đẹ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. do vậy mình đã mua bí quyết 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à chúng ta thay đổi dòng chữ ở phía trên cùng của danh sách bình luận. Bạn có thể chèn code sau vào file functions.php:

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().'';
}

Bạn cần cân nhắc kỹ vì cách này chỉ có thể áp dụng được cho các blog sử dụng Genesis Child theme thôi nhé. Đối với những theme khác, các bạn có thể tùy chỉnh trong file comments.php. Chẳng hạn đối với theme twenty twelve của blog WordPress, bạn hãy tìm đến đoạn code bên dưới:

<?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>' );
?>

Tiếp đó, sửa nó lại thành:

<?php
    echo 'Có '.get_comments_number().'bình luận cho bài viết'.get_the_title().'';
?>

Thay đổi Leave a Reply hoặc Speak your mind

Đây là dòng chữ mà chúng ta thường hay thấy ở phía trên cùng của form comment. Để đổi được dòng chữ này, chúng ta sẽ sử dụng đến đoạn code nhỏ sau:

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 mục Submit button

Chúng ta có thể tùy chỉnh thay đổi chữ bên trong nút submit comment bằng cách sử dụng mẫu code sau:

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;
}

Code trên chỉ có thể áp dụng cho cả Genesis childthemes và những theme thông thường.

Tái cấu trúc lại form comment cho WordPress

Nếu bạn chưa hài lòng với thiết kế của form comment trên website của mình, các bạn có thể tự design lại nó. Tại đây mình sẽ cung cấp cho các bạn một mẫu form mà mình đang sử dụng.

/*--------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 );
}

Cập nhật thêm một số lớp css để thiết kế cho form comment đẹp mắt hơn.

/*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ế lại cho nút submit Comments ta sẽ thêm vào các lớp css sau (nếu đã có rồi thì bạn hãy tìm và chỉnh sửa lại đôi chút thôi):

#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 phần comment

Chú ý cách này chỉ có thể được áp dụng cho Genesis childthemes. Chúng ta sử dụng code sau chèn vào file functions.php:

add_filter( 'genesis_comment_list_args', 'rayno_comment_avatar_args' );
function rayno_comment_avatar_args( $args ) {
    $args['avatar_size'] = 60;
    return $args;
}

Bổ sung tiếp trong file style.css (nếu đã có rồi thì tìm và chỉnh sửa nó lại):

.comment-list li .avatar { 
    height: 60px;
    width: 60px;
}

Đối với những themes khác, bạn có thể tìm chỉnh sửa trong file comment.php hoặc trong file functions.php. Mặt khác, đối với theme twenty twelve của WordPress, bạn sẽ tìm đến trong file functions.php đoạn code:

echo get_avatar( $comment, 44 );

Số 44 là giới hạn kích thước của avatar, bạn có thể tùy chỉnh bằng giá trị theo ý bạn. Với các themes khác bạn có thể thao tác tương tự.

Bạn đang xem bài viết Hướng dẫn tùy chỉnh phần comments trong WordPress

Add Comment