Init HTML

Giao diện

Dưới đây là giao diện bình luận phiên bản mới, là nâng cấp của bài viết Giao diện bình luận WordPress tiếng Việt đầy đủ. Các bạn có thể tùy chỉnh lại CSS các phần màu sắc, biểu mẫu… tùy ý.

Xem demo

Mã nguồn

Thêm đoạn mã sau vào tập tin functions.php.

<?php
// Custom Callback
add_filter('comment_flood_filter', '__return_false');
function your_theme_slug_comments($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment; ?>
    <li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
        <div class="comment-wrap">
            <div class="comment-img">
                <?php echo get_avatar($comment, $args['avatar_size'], null, null, array('class' => array('img-responsive', 'img-circle'))); ?>
            </div>
        <div class="comment-body">
            <p class="comment-author"><?php echo get_comment_author_link(); ?></p>
            <p class="comment-date">
                <?php printf(__('%1$s lúc %2$s', 'inithtml'), get_comment_date(), get_comment_time()) ?>
                <span class="comment-reply"> <?php comment_reply_link(array_merge($args, array('reply_text' => __('Trả lời', 'inithtml'), 'depth' => $depth, 'max_depth' => $args['max_depth'])), $comment->comment_ID); ?></span>
            </p>
            <?php if ($comment->comment_approved == '0') { ?><em><?php _e('Bình luận đang xét duyệt.', 'inithtml'); ?></em><br /><?php } ?>
            <div class="comment-content cmt-content"><?php comment_text(); ?></div>
        </div>
        <div class="clearfix"></div>
    </div>
<?php }

// Enqueue comment-reply
add_action('wp_enqueue_scripts', 'your_theme_slug_public_scripts');
function your_theme_slug_public_scripts() {
    if (!is_admin()) {
        if (is_singular() && get_option('thread_comments')) { wp_enqueue_script('comment-reply'); }
    }
}

/**
 * Remove URL from comment form
 */
function remove_comment_url($arg) {
    $arg['url'] = '';
    return $arg;
}
add_filter('comment_form_default_fields', 'remove_comment_url');

function sb_force_comment() {
    global $withcomments;
    if(is_category()) {
        $withcomments = true;
    }
}
add_filter('wp_head','sb_force_comment');

add_filter('comment_flood_filter', '__return_false');
remove_filter('comment_text', 'make_clickable', 9);

add_filter('get_comment_author_link', 'rv_remove_comment_author_link', 10, 3);
function rv_remove_comment_author_link($return, $author, $comment_ID) {
    return $author;
}

add_filter('comment_form_defaults', 'wpse33039_form_defaults');
function wpse33039_form_defaults($defaults) {
    $defaults['title_reply'] = '';
    return $defaults;
}

add_filter('comment_form_defaults', 'custom_reply_title');
function custom_reply_title( $defaults ){
    $defaults['title_reply_before'] = '<p id="reply-title" class="h4 comment-reply-title">';
    $defaults['title_reply_after'] = '</p>';
    return $defaults;
}

Nội dung tập tin comments.php.

<?php if (post_password_required()) { return; } ?>
<div id="comments" class="comments-area">
    <?php comment_form(); ?>
    <hr class="m-b-40">
    <?php if (have_comments()) { ?>
        <p class="comments-title"><?php comments_number(__('Không có bình luận', 'inithtml'), __('Có 1 bình luận', 'inithtml'), 'Có % ' . __('bình luận', 'inithtml')); ?></p>
        <span class="title-line"></span>
        <ol class="comment-list">
            <?php wp_list_comments(array('avatar_size' => 70, 'style' => 'ul', 'callback' => 'your_theme_slug_comments', 'type' => 'all')); ?>
        </ol>
        <?php the_comments_pagination(array('screen_reader_text' => 'Xem bình luận cũ hơn', 'prev_text' => '← <span class="screen-reader-text">' . __('Trở về', 'inithtml') . '</span>', 'next_text' => '<span class="screen-reader-text">' . __('Kế tiếp', 'inithtml') . '</span> →',)); ?>
    <?php } else { echo '<p>Không có bình luận.</p><div class="clearfix"></div>'; } ?>
    <?php if (!comments_open() && get_comments_number() && post_type_supports(get_post_type(), 'comments')) { ?>
        <p class="no-comments"><?php _e('Bình luận đã bị đóng.', 'inithtml'); ?></p>
    <?php } ?>
</div>

Thêm CSS.

textarea,
input {
    border: 1px solid #f6f6f6;
    padding: 5px 10px
}

textarea {
    width: 100%;
}

.comment-list,
.children {
    list-style: none;
}

.comment-list {
    margin-left: 0;
    padding-left: 0;
}

ul.children {
    list-style: none;
    padding-left: 0px;
    margin-left: 0px;
}

.comment-wrap {
    padding-bottom: 20px;
    margin-bottom: 20px;
    position: relative;
}

.comment-wrap .comments-title {
    padding-top: 60px;
}

.comment-wrap .comment-img {
    float: left;
    margin-right: 20px;
    padding-bottom: 25px;
}

.comment-wrap .comment-img img {
    background: #f6f6f6;
    width: 60px;
}

.comment-author {
    text-align: left;
    margin-top: 0;
    font-weight: 500;
}

.cmt-content {
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 10px;
    position: relative;
    border-radius: 5px;
    border: 1px solid #f4f5f7;
    background: #f4f5f7;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis
}

.cmt-content::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    bottom: 100%;
    left: 1.3em;
    border: .75rem solid transparent;
    border-top: none;
    border-bottom-color: #f4f5f7;
}

.comment-content {
    margin-bottom: 15px;
    display: inline-block;
    padding: 15px !important;
    width: 100%;
}

.comment-content p {
    margin-bottom: 0;
    white-space: normal;
    overflow-wrap: break-word;
}

.comment-content p:nth-child(2) {
    margin-top: 10px;
}

.comment-reply {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 5px 10px;
    background: #f6f6f6;
    font-size: 11px;
    text-transform: uppercase;
    border-radius: 4px;
}

.comment-author,
.comment-author a {
    font-size: 14px;
    text-transform: capitalize;
    letter-spacing: 1px;
    margin-bottom: 3px;
    font-weight: 700;
}

.comment-form-comment {
    position: relative;
}

.comment-date {
    font-size: 11px;
    letter-spacing: 1px;
    display: block;
    padding-bottom: 7px;
}

.depth-2 .comment-wrap {
    padding-left: 15px;
}

.depth-3 .comment-wrap {
    padding-left: 30px;
}

.depth-4 .comment-wrap {
    padding-left: 45px;
}

.depth-5 .comment-wrap {
    padding-left: 60px;
}

.depth-6 .comment-wrap {
    padding-left: 75px;
}

.depth-7 .comment-wrap {
    padding-left: 90px;
}

.depth-8 .comment-wrap {
    padding-left: 105px;
}

.depth-9 .comment-wrap {
    padding-left: 120px;
}

.depth-10 .comment-wrap {
    padding-left: 135px;
}

#commentform #comment,
#commentform #author,
#commentform #email,
#commentform #url {
    display: block;
    width: 100%;
    border-radius: 4px;
}

#commentform #comment {
    resize: none;
    height: 85px;
}

#commentform #comment::-webkit-scrollbar {
    width: 3px;
}

#commentform #comment::-webkit-scrollbar-thumb {
    background-color: #fb5012;
    outline: 0;
}

#commentform input[type="submit"], .main-btn {
    display: inline-block;
    padding: 10px 25px;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: #fb5012;
    margin-top: 15px;
    margin-bottom: 15px;
    color: #fff;
    border: none;
    border-radius: 4px;
}

#commentform input[type="submit"]:hover, .main-btn:hover {
    background: #000;
    -webkit-box-shadow: 0 10px 5px -5px rgba(0,0,0,.15);
    box-shadow: 0 10px 5px -5px rgba(0,0,0,.15);
    color: #fff;
}

.title-line {
    display: block;
    max-width: 30%;
    margin: 0 auto 35px;
    clear: both;
}

#wp-comment-cookies-consent {
    vertical-align: top;
    margin-right: 5px;
}

.comments-pagination {
    margin-bottom: 50px;
}

@media (min-width: 768px) {
    .comment-body {
        float: left;
        width: calc(100% - 80px);
    }

    .comment-content {
        margin-top: 10px !important;
        margin-bottom: 0 !important;
    }

    .comment-wrap .keywords-scroller-container:after {
        background-image: unset !important;
    }
}

@media (max-width:  767px) {
    .comment-wrap .comment-img img {
        width: 50px;
    }

    .comment-wrap .comment-img {
        margin-right: 10px;
    }

    .comment-content {
        width: 100%;
        max-width: 100%;
        margin-top: 0 !important;
        margin-bottom: 0;
    }

    .comment-reply {
        position: static;
        padding: 0;
        background: none;
    }

    .comment-reply:before {
        content: ' · ';
    }

    .comment-wrap .comment-img {
        padding-bottom: 15px;
    }

    .comment-author {
        padding-top: 8px;
    }

    .post-desc .post-title {
        font-size: 18px;
    }

    .single-desc .post-title {
        font-size: 22px;
    }
}

.comment-body .comment-content {
    text-align: justify;
}

Tham khảo thêm:

• Tự động lưu và ẩn trường nhập thông tin bình luận khi người dùng đã nhập
• Tích hợp Emoji cho bình luận đơn giản với jQuery

Chúc các bạn thành công!