前几天逛博客，看到大家的博客都有很多好玩的页面，比如Hary大佬的博客中有一个互动排行榜页面。

还有皮总的博客皮皮社上面的评论用户等级。

感觉大家的网站都很有趣，于是也打算自己实现一个评论等级排行榜，所以就写了一个WordPress插件。

插件主要功能如下：

• 统计用户评论数
• 通过简码的方式展示评论用户排行榜

简码实现的代码很简单：

function cur_render_rank_top($atts) {

    $atts = shortcode_atts(array(
        'num'         => 10,
        'avatar_size' => 64,
        'columns'     => 3,
        'title'       => '评论等级排行榜',
    ), $atts, 'comment_rank_top');

    $limit = min(intval($atts['num']), 50);
    $avatar_size = intval($atts['avatar_size']);
    $avatar_size = $avatar_size < 32 ? 32 : $avatar_size;
    $columns = intval($atts['columns']);
    $columns = $columns < 1 ? 1 : ($columns > 4 ? 4 : $columns);
    $custom_title = esc_html($atts['title']);

    global $wpdb;
    $table_prefix = $wpdb->prefix;

    $top_users = $wpdb->get_results($wpdb->prepare(
        "SELECT
            COUNT(*) as comment_count,
            comment_author_email,
            comment_author,
            comment_author_url
         FROM {$table_prefix}comments
         WHERE comment_approved = '1' AND user_id != 1
           AND comment_type NOT IN ('pingback', 'trackback')
         GROUP BY comment_author
         ORDER BY comment_count DESC
         LIMIT %d",
        $limit
    ), ARRAY_A);

    if (empty($top_users)) {
        return sprintf(
            '<div class="comment-rank-top">
                <h3 class="rank-top-title">%s</h3>
                <p class="rank-top-empty">暂无符合条件的评论数据</p>
            </div>',
            $custom_title
        );
    }

    $html = '<div class="comment-rank-top">';
    $html .= sprintf('<h3 class="rank-top-title">%s</h3>', $custom_title);
    $html .= sprintf('<div class="rank-top-flex" style="--columns: %d;">', $columns);

    foreach ($top_users as $index => $user) {
        $comment_count = intval($user['comment_count']);
        $email = esc_attr($user['comment_author_email']);
        $name = esc_html($user['comment_author']);
        $url = esc_url($user['comment_author_url']);
        $rank = cur_get_user_rank($comment_count);

        $card_class = '';
        if ($index === 0) {
            $card_class = 'rank-card-1st';
            $rank_badge = '<span class="rank-top-badge rank-1st">🏆 第1名</span>';
        } elseif ($index === 1) {
            $card_class = 'rank-card-2nd';
            $rank_badge = '<span class="rank-top-badge rank-2nd">🥈 第2名</span>';
        } elseif ($index === 2) {
            $card_class = 'rank-card-3rd';
            $rank_badge = '<span class="rank-top-badge rank-3rd">🥉 第3名</span>';
        } else {
            $rank_badge = sprintf('<span class="rank-top-badge">第%d名</span>', $index + 1);
        }

        $avatar = get_avatar($email ?: $name, $avatar_size, '', $name, array(
            'class' => 'rank-top-avatar',
            'alt'   => $name . '的头像'
        ));

        $user_name_html = $url ? sprintf('<a href="%s" target="_blank" rel="nofollow">%s</a>', $url, $name) : $name;
        $rank_tag = sprintf('<span class="comment-user-rank %s">%s</span>', esc_attr($rank['class']), esc_html($rank['name']));

        $html .= sprintf(
            '<div class="rank-top-card %s">
                %s
                <div class="rank-top-card-inner">
                    <div class="rank-top-avatar-wrap" style="width: %dpx; height: %dpx;">%s</div>
                    <div class="rank-top-name">%s</div>
                    <div class="rank-top-meta">
                        %s
                        <span class="rank-top-count">评论数：%d</span>
                    </div>
                </div>
            </div>',
            $card_class,
            $rank_badge,
            $avatar_size,
            $avatar_size,
            $avatar,
            $user_name_html,
            $rank_tag,
            $comment_count
        );
    }

    $html .= '</div></div>';

    return $html;
}

add_shortcode('comment_rank_top', 'cur_render_rank_top');

css样式比较简单，这里就不贴出来了，大家可以根据自己的喜好制定自己喜欢的样式即可。

我这里给榜一、榜二和榜三的大佬添加不同的样式，比如给榜一、榜二和榜三的标签添加不同的颜色，给榜一、榜二和榜三的标签添加不同的图标，用来彰显三位大佬的身份。

展示效果大家可以在这个页面看到：https://www.lifengdi.com/comment-user-rank

简码用法如下：
简码：comment_rank_top
示例：[comment_rank_top num="10" columns="3" title="🔥 互动热榜"]
参数说明：

• title: 排行榜标题（支持自定义，默认"评论等级排行榜"）
• columns: 列数（1~4，默认3）
• num: 显示数量（默认10，最大50）
• avatar_size: 头像尺寸（默认64px，最小32px）

大家有什么好的想法也可以提出来，我来负责实现。😉

除非注明，否则均为李锋镝的博客原创文章，转载必须以链接形式标明本文链接

本文链接：https://www.lifengdi.com/article/cha-jian/4626