#14 – WP Comments.php | Tùy biến form bình luận và danh sách bình luận

0 77

Trong bài học này, chúng ta sẽ hoàn thiện phần cuối cùng của template file single.php là hiển thị form bình luận và danh sách bình luận. WordPress cũng cung cấp sẵn khung bình luận mặc định nhưng để phù hợp với template html chúng ta cần tùy chỉnh lại.

Video Tùy biến form bình luận và danh sách bình luận

Hướng dẫn chi tiết

Có 2 cách để tùy biến lại khung bình luận và danh sách bình luận

  • Dùng filter Hook. Thường dùng để customize lại theme của người khác
  • Dùng template file comments.php. Thường dùng khi đang code theme của mình. Chúng ta chọn cách 2 nhé.

Comment Form – Hiển thị khung bình luận tùy chỉnh

Đầu tiên, các bạn hãy tạo template file đặt tên là comments.php nằm trong thư mục chính của theme goclamweb.

Lưu ý: mình chỉ trích dẫn đoạn code php cần phân tích. Những đoạn HTML các bạn coi trong code hoàn thành cuối bài nhé.

WordPress cung cấp cho chúng ta hàm comment_form để hiển thị khung bình luận.

comment_form( array(
        'comment_field' => '<textarea name="message" id="comment" rows="3">
                            </textarea>',
        'fields'        => array(
            'author'    => '<div class="row">
                                <div class="col-xs-12 col-sm-6">
                                    <input type="text" name="author" placeholder="Your Name" />
                                </div>',
            'email'     => '    <div class="col-xs-12 col-sm-6">
                                    <input type="email" name="email" placeholder="Email" />
                                </div>
                            </div>',
            'url'       =>  '<input type="text" name="website" placeholder="Website"/>'
        ),
        'class_form'    => 'custom-input mt-30',
        // 'class_submit'  => 'btn',
        // 'label_submit'  => __('Submit','glw'),
        'submit_button' => '<button class="btn" type="submit" name="submit">'
                                .__('Submit','glw')
                            .'</button>',
        'title_reply_before' => '<div class="comment-title mb-40">
                                    <h5 class="mb-5">',
        'title_reply'   => __('Leave a comment','glw'),
        'title_reply_after' =>      '</h5>
                                    <div class="horizontal-line">
                                        <hr class="top" />
                                        <hr class="bottom" />
                                    </div>
                                </div>'
));

Hàm này có 2 tham số: 1 tham số là $args mảng tham số để tùy biến lại form bình luận. Mảng này gồm 1 số những phần tử mình đã dùng bên trên như sau:

  • fields (array): Các trường nhập dữ liệu trong form bao gồm: author, email, url, cookies.
  • comment_field (string): nội dung của bình luận. Trường nhập liệu này được WordPress tách riêng với fields ở trên.
  • class_form: class name của form bình luận
  • submit_button:  nút gửi bình luận. Do mình không dùng thẻ input mà dùng thẻ button nên sử dụng submit_button. Nếu dùng thẻ input, các bạn có thể dùng class_submit, name_submit để tùy biến lại nút gửi bình luận.
  • title_reply_before: đoạn html trước tiêu đề khung bình luận và khung trả lời.
  • title_reply: tiêu đề của khung bình luận và khung trả lời. Có thể dùng hàm cho phép dịch.
  • title_reply_after: đoạn html sau tiêu đề khung bình luận và khung trả lời.

Tham số thứ 2 của comment_form là $post_id. Ở đây mình không truyền tham số thứ hai.

Hiển thị danh sách bình luận

Hiển thị số lượng bình luận của bài viết

comments_number( 
      __('No comments','glw'), 
      __('One comment','glw'), 
      __('% comments','glw')
);

Hàm comments_number dùng để in ra số lượng bình luận của bài viết. Hàm này cần 3 tham số tương ứng với 3 trường hợp

  • Không có bình luận
  • Có 1 bình luận
  • Có nhiều bình luận (do Tiếng Anh có phân biệt số ít số nhiều). Dấu % trong đoạn văn bản ở trường hợp 3 là vị trí sẽ in ra con số bình luận. Tất nhiên, nếu dùng Tiếng Việt thì 3 trường hợp bạn có thể dùng dạng __(‘% bình luận’, ‘text-domain’) thì 0 1 hay nhiều cũng hợp lý hết.

Hiển thị danh sách các bình luận

Hàm in danh sách các bình luận wp_list_comments( array(‘callback’=> ‘glw_show_comments’));  cần 1 mảng tham số, trong đó phần tử cần truyền vào là 1 hàm callback, thay đổi cách chúng ta hiển thị comment. Do mỗi phần tử là thẻ li nên chúng ta sẽ đặt wp_list_comments trong thẻ ul nhé. Hàm callback glw_show_comments viết như sau

<?php
function glw_show_comments($comment, $args, $depth){
    global $count;
    $count++;
    if ($comment->comment_approved == '1') :
?>
    <li <?php comment_class( 'pb-10 count-'.$count ) ?> id="comment-<?php comment_ID(); ?>">
        <div class="author-img pull-left">
            <?php echo get_avatar( $comment, 82); ?>
        </div>
        <div class="text pt-5">
            <h5 class="text-capitalize"><?php comment_author($comment ); ?></h5>
            <?php echo nl2br(get_comment_text( $comment)); ?>
            <h6>
                <?php comment_date('M d Y', $comment); ?> 
                <span>|</span> 
                <?php 
                    comment_reply_link( 
                         array_merge( 
                               $args, 
                               array('depth' => $depth, 'max_depth' => $args['max_depth']) 
                         ) 
                    ); 
                ?>
            </h6>
        </div>
    </li>

<?php 
    endif;
}
?>

Chúng ta cũng tạo tự động cho từng thẻ li (bình luận) một class và id riêng biệt (chúng ta không dùng nhưng biết đâu người dùng theme cần).

Để sử dụng tính năng reply / trả lời bình luận, các bạn cần enqueue js comment-reply mà WordPress có sẵn vào theme của chúng ta. Thêm vào hàm glw_enqueue một đạon sau nhé

if ( is_single() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
}

Và thêm một vài đạon css để hiển thị sự phân cấp comment nhé (do template html không có sẵn).

ul.children {
   margin: 10px 0px 10px 20px !important;
}

class children là class mà WordPress sẽ tự thêm vào những bình luận trả lời bình luận chính.

Phân trang danh sách bình luận

Mình sẽ phân trang đơn giản bằng next và previous thui nhé.

<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
    <div class="clear"></div>
    <!-- start: #comment-nav -->
    <nav id="comment-nav" >
        <div class="nav-previous float-left">
            <?php previous_comments_link( __('<< Previous', 'gola') ); ?>
        </div>
        <div class="nav-next float-right">
            <?php next_comments_link( __('Next >>', 'gola')); ?>
        </div>
    </nav>
    <!-- end: #comment-nav -->
<?php endif; ?>

Tài liệu WordPress

Link tài liệu chính chủ WordPress về các hàm đã dùng trong bài học nếu muốn tìm hiểu sâu hơn

Code hoàn thành của bài học: Google Drive

Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Đừng quên LikeShare nếu thấy bài viết thú vị.

Liên hệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.