Bài viết này cung cấp giao diện bình luận mặc định của WordPress bằng tiếng Việt. Các bạn chỉ cần thêm vào Theme của mình là có thể sử dụng được, không cần thêm bất kì Plugin nào.

Giao diện bình luận WordPress tiếng Việt đầy đủ

Giao diện

Dưới đây là giao diện bình luận mẫu của bài viết nà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 ý.

Mã nguồn

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

<?php
add_filter('comment_flood_filter', '__return_false');

// Custom Callback
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">
            <h4 class="comment-author"><?php echo get_comment_author_link(); ?></h4>
            <span class="comment-date"><?php printf(__('%1$s lúc %2$s', 'inithtml'), get_comment_date(), get_comment_time()) ?></span>
            <?php if ($comment->comment_approved == '0') { ?><em><?php _e('Bình luận đang xét duyệt.', 'inithtml'); ?></em><br /><?php } ?>
            <?php comment_text(); ?>
            <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>
        </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'); }
    }
}

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

<?php if (post_password_required()) { return; } ?>
<div id="comments" class="comments-area">
    <?php if (have_comments()) { ?>
        <h4 class="comments-title"><?php comments_number(__('Không có bình luận', 'ocumeo'), __('1 bình luận', 'ocumeo'), '% ' . __('bình luận', 'ocumeo')); ?></h4>
        <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('prev_text' => '&larr; <span class="screen-reader-text">' . __('Trở về', 'ocumeo') . '</span>', 'next_text' => '<span class="screen-reader-text">' . __('Kế tiếp', 'ocumeo') . '</span> &rarr;',)); ?>
    <?php } ?>
    <?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.', 'ocumeo'); ?></p>
    <?php } ?>
    <?php comment_form(); ?>
</div>

Thêm CSS.

textarea,
input {
    border: 1px solid #f4f5f7;
    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 {
    border-bottom: 1px solid #f4f5f7;
    padding-bottom: 40px;
    margin-bottom: 50px;
    position: relative;
}

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

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

.comment-author {
    text-align: left;
}

.comment-reply {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 5px 10px;
    background: #f4f5f7;
    font-size: 12px;
    text-transform: uppercase;
}

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

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

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

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

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

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

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

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

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

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

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

#commentform #comment,
#commentform #author,
#commentform #email,
#commentform #url {
    display: block;
    width: 100%;
}

#commentform input[type="submit"] {
    display: inline-block;
    padding: 10px 25px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: #19C0FF;
    margin-top: 15px;
    margin-bottom: 15px;
    color: #fff;
}

#commentform input[type="submit"]:hover {
    background: #11a8ff;
}

.title-line {
    border-top: 1px dotted #f4f5f7;
    display: block;
    max-width: 30%;
    margin: 0 auto 25px;
}

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

@media (max-width: 767px) {
    .comment-list,
    .children {
        padding-left: 0px;
    }
    .comment-wrap .comment-img {
        float: none;
        margin: 0px;
        width: 100%;
        padding-bottom: 0px;
    }
    .comment-img>img {
        display: block;
        margin: 0px auto;
    }
    .comment-author,
    .comment-author a,
    .comment-date {
        text-align: center;
    }
    .depth-2 .comment-wrap,
    .depth-3 .comment-wrap,
    .depth-4 .comment-wrap,
    .depth-5 .comment-wrap,
    .depth-6 .comment-wrap,
    .depth-7 .comment-wrap,
    .depth-8 .comment-wrap,
    .depth-9 .comment-wrap,
    .depth-10 .comment-wrap {
        padding-left: 0px;
    }
    .comment-reply {
        position: relative;
        text-align: center;
        display: block;
        margin-top: 25px;
    }
}

Sử dụng TinyMCE

Để bật chức năng TinyMCE cho bình luận, thêm đoạn mã sau vào functions.php.

/**
 * Rich Text Comment
 */
add_filter('comment_form_defaults', 'rich_text_comment_form');
function rich_text_comment_form($args) {
    ob_start();
    wp_editor('', 'comment', array(
        'wpautop' => false,
        'media_buttons' => false,
        'textarea_rows' => '8',
        'dfw' => false,
        'tinymce' => true,
        'quicktags' => false
    ));
    $args['comment_field'] = ob_get_clean();
    return $args;
}

Tham khảo thêm:

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

5/5 (1 bình chọn)