Nếu bạn cảm thấy widget “Phản hồi gần đây” của WordPress quá thiếu thông tin, bài viết này sẽ giúp bạn.

Thêm mục Phản Hồi Gần Đây với đầy đủ nội dung, ảnh đại diện

Bài viết áp dụng cho những trang WordPress sử dụng hệ thống bình luận mặc định của WordPress, hoặc Disqus có đồng bộ bình luận, các bạn có thể tham khảo.

Phản Hồi Gần Đây

Giao diện này sử dụng Bootstrap 3, bạn có thể tự cập nhật lại các class nếu sử dụng CSS Framework khác. Đầu tiên các bạn xác định vị trí cần thêm, sau đó thêm trực tiếp trong sidebar.php.

<div class="widget">
    <h3 class="widget-title">Bình Luận Gần Đây</h3>
    <div class="widget-content">
        <ul class="most-views recent-comments text-left">
            <?php
                $recent_comments = get_comments(array('number' => 10, 'status' => 'approve', 'post_status' => 'publish'));
                if ($recent_comments) : foreach ($recent_comments as $comment) :
            ?>
            <li>
                <img class="img-circle pull-left <?php if (is_user_in_role($comment->user_id, 'administrator')) echo 'vip-thumbnail'; ?> list-left-img" src="https://gravatar.com/avatar/<?php echo md5(strtolower($comment->comment_author_email)); ?>?&d=retro&size=50" alt="<?php echo $comment->comment_author; ?> Avatar">
                <p class="super-title">
                    <?php echo '<span class="text-capitalize">' . $comment->comment_author . '</span>'; if (is_user_in_role($comment->user_id, 'administrator')) echo ' <span class="index-comment-level"><i class="glyphicon glyphicon-music"></i> ADMIN</span>'; ?>
                        &middot; <small><abbr title="Thời gian bình luận"><?php $timeago = vi_human_time_diff(get_comment_time('U'), current_time('timestamp')); if ($timeago == false) echo $comment->comment_date; else echo $timeago . ' trước'; ?></abbr></small>
                </p>
                <p class="small-title">Trong <a href="<?php echo esc_url(get_comment_link($comment)); ?>" title="<?php echo get_the_title($comment->comment_post_ID); ?>"><?php echo get_the_title($comment->comment_post_ID); ?></a></p>
                <p class="clearfix cmt-content"><?php echo wp_trim_words($comment->comment_content, 15, '...'); ?></p>
                <?php
                    if ($comment->comment_parent != 0) {
                        $reply_to = get_comment($comment->comment_parent);
                        if (strtolower($reply_to->comment_author) != strtolower($comment->comment_author)) echo '— trả lời <strong class="text-capitalize">' . $reply_to->comment_author . '</strong>';
                    }
                ?>
            </li>
            <?php endforeach; else : echo 'Không có bình luận.'; endif; ?>
        </ul>
    </div>
</div>

Thêm phương thức tính thời gian trong functions.php.

Tham khảo tại đây: Hiển thị thời gian đăng bài viết trong WordPress.

/**
 * Determines the difference between two timestamps
 */
function vi_human_time_diff($from, $to = '') {
    if (empty($to))
        $to = time();
    $diff = (int) abs($to - $from);
    if ($diff > 259200)
        return false;
    if ($diff < HOUR_IN_SECONDS) {
        $mins = round($diff / MINUTE_IN_SECONDS);
        if ($mins <= 1)
            $mins = 1;
        /* translators: min=minute */
        $since = sprintf(_n('%s phút', '%s phút', $mins), $mins);
    } elseif ($diff < DAY_IN_SECONDS && $diff >= HOUR_IN_SECONDS) {
        $hours = round($diff / HOUR_IN_SECONDS);
        if ($hours <= 1)
            $hours = 1;
        $since = sprintf(_n('%s giờ', '%s giờ', $hours), $hours);
    } elseif ($diff < WEEK_IN_SECONDS && $diff >= DAY_IN_SECONDS) {
        $days = round($diff / DAY_IN_SECONDS);
        if ($days <= 1)
            $days = 1;
        $since = sprintf(_n('%s ngày', '%s ngày', $days), $days);
    } elseif ($diff < 30 * DAY_IN_SECONDS && $diff >= WEEK_IN_SECONDS) {
        $weeks = round($diff / WEEK_IN_SECONDS);
        if ($weeks <= 1)
            $weeks = 1;
        $since = sprintf(_n('%s tuần', '%s tuần', $weeks), $weeks);
    } elseif ($diff < YEAR_IN_SECONDS && $diff >= 30 * DAY_IN_SECONDS) {
        $months = round($diff / (30 * DAY_IN_SECONDS));
        if ($months <= 1) $months = 1; $since = sprintf(_n('%s tháng', '%s tháng', $months), $months); } elseif ($diff >= YEAR_IN_SECONDS) {
        $years = round($diff / YEAR_IN_SECONDS);
        if ($years <= 1)
            $years = 1;
        $since = sprintf(_n('%s năm', '%s năm', $years), $years);
    }
    return $since;
}

Thêm phương thức xác định quyền admin trong functions.php

function is_user_in_role($user_id, $role) {
    return in_array($role, get_user_roles_by_user_id($user_id));
}

function get_user_roles_by_user_id($user_id) {
    $user = get_userdata($user_id);
    return empty($user) ? array() : $user->roles;
}

CSS

.widget {
    margin-bottom: 15px;
    overflow-x: hidden
}

.widget-title {
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 15px;
    padding: 0 0 10px;
    border-bottom: 2px solid #0faef1;
    color: #0faef1;
    font-weight: 700;
    margin-top: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.2
}

.recent-comments {
    margin: 0;
    padding: 0;
    list-style: none
}

.recent-comments li {
    padding-bottom: 14px;
    border-bottom: none;
    margin-bottom: 0;
}

.recent-comments li:last-child {
    padding-bottom: 0;
}

.super-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    margin-bottom: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.small-title {
    color: #9da2a8;
    font-size: 13px;
    font-weight: 400;
    margin: 0;
    margin-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

img.vip-thumbnail {
    background: #56ccf2;
    background: -webkit-linear-gradient(to right,#2F80ED,#56CCF2,#56CCF2,#2F80ED);
    background: linear-gradient(to right,#2F80ED,#56CCF2,#56CCF2,#2F80ED);
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    background-size: 300% 100%;
}

img.vip-thumbnail:hover {
    background-position: 100% 0;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.index-comment-level {
    font-size: 11px;
    color: #0faef1;
}

.cmt-content {
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 10px;
    position: relative;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #f4f5f7;
    background: #f4f5f7;
    font-weight: 400;
}

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

.list-left-img {
    vertical-align: middle;
    margin-right: 10px;
    padding: 3px;
    background: #f0f1f4;
    width: 50px;
}

Ta được.

Demo bình luận

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

Series: Thủ thuật WordPress