美好的明天
分享改变,记录生活
美好的明天
当前位置: 首页 > WordPress > 正文

WordPress 增加评论等级标识

增加评论等级标识,用于激励用户多参与评论互动,同时通过视觉标识区分活跃用户,提升社区氛围。

效果演示

效果演示

修改步骤

1 修改functions.php

复制以下代码,按图片所示,将代码放置于/主题文件夹/functions.php文件<?php后;


/**
 * 显示用户评论等级
 * 
 * @param int $user_id 用户ID
 * @param string $comment_author_email 评论者邮箱
 * @return string 等级标识HTML
 */
function get_user_comment_level($user_id, $comment_author_email) {
    global $wpdb;
    
    // 如果是管理员,返回博主标识
    if (user_can($user_id, 'manage_options')) {
        return '<svg class="icon" aria-hidden="true"><title>博主</title><use xlink:href="#wmviv-bozhurenzheng"></use></svg>';
    }
    
    // 获取用户评论数
    $comment_count = $wpdb->get_var(
        $wpdb->prepare(
            "SELECT COUNT(comment_ID) 
             FROM $wpdb->comments 
             WHERE comment_author_email = %s 
             AND comment_approved = '1'",
            $comment_author_email
        )
    );
    
    // 根据评论数确定等级
    if ($comment_count >= 1000) {
        $level = 15;
    } elseif ($comment_count >= 800) {
        $level = 14;
    } elseif ($comment_count >= 600) {
        $level = 13;
    } elseif ($comment_count >= 400) {
        $level = 12;
    } elseif ($comment_count >= 300) {
        $level = 11;
    } elseif ($comment_count >= 200) {
        $level = 10;
    } elseif ($comment_count >= 100) {
        $level = 9;
    } elseif ($comment_count >= 50) {
        $level = 8;
    } elseif ($comment_count >= 30) {
        $level = 7;
    } elseif ($comment_count >= 20) {
        $level = 6;
    } elseif ($comment_count >= 15) {
        $level = 5;
    } elseif ($comment_count >= 10) {
        $level = 4;
    } elseif ($comment_count >= 7) {
        $level = 3;
    } elseif ($comment_count >= 3) {
        $level = 2;
    } elseif ($comment_count >= 1) {
        $level = 1;
    } else {
        return ''; // 没有评论,不显示等级
    }
    
    // 返回等级图标
    return '<svg class="vip vip-icon vip' . $level . '" aria-hidden="true"><title>亲密度 ' . $level . '级</title><use xlink:href="#vip-level-' . $level . '"></use></svg>';
}

代码解析

  • 管理员识别:通过user_can()函数判断是否为管理员,显示特殊标识
  • 数据查询:使用 WordPress 数据库接口$wpdb安全查询评论数量
  • 等级逻辑:采用分段式条件判断,评论数越多等级越高
  • 图标生成:动态拼接 CSS 类名与 SVG 引用,实现等级视觉化

2 在评论模板中调用函数

接下来需要修改评论模板文件(通常位于themes/你的主题/templates/comments.php),在合适位置添加调用代码:


<?php 
  // 显示用户等级或博主标识
  echo get_user_comment_level($comment->user_id, $comment->comment_author_email);
?>

推荐位置

  • 评论者名称旁(如<?php echo get_comment_author(); ?>后)
  • 评论时间下方
  • 评论内容开头或结尾

具体位置可根据主题布局调整,确保等级标识与评论信息关联显示。

3 修改style.css

复制以下代码,在主题的style.css中添加以下样式代码;


/* 用户等级图标样式 */
.comment-list .comment-box .vip{width:20px;height:20px;}
.vip-icon{margin-left:5px;vertical-align:middle;width:16px;height:16px}
.vip1 { fill: #cccccc; } /* 灰色 - 初始等级 */
.vip2 { fill: #9e9e9e; } /* 深灰 */
.vip3 { fill: #795548; } /* 棕色 */
.vip4 { fill: #607d8b; } /* 蓝灰 */
.vip5 { fill: #4caf50; } /* 绿色 */
.vip6 { fill: #03a9f4; } /* 青色 */
.vip7 { fill: #2196f3; } /* 蓝色 */
.vip8 { fill: #3f51b5; } /* 靛蓝 */
.vip9 { fill: #9c27b0; } /* 紫色 */
.vip10 { fill: #e91e63; } /* 粉色 */
.vip11 { fill: #f44336; } /* 红色 */
.vip12 { fill: #ff9800; } /* 橙色 */
.vip13 { fill: #ffc107; } /* 黄色 */
.vip14 { fill: #ffd700; } /* 金色 */
.vip15 { fill: #ffff00; } /* 亮金色 - 顶级等级 */

等级图标可在iconfont自行选择:点此前往

番外

对于高流量网站,可添加缓存机制减少数据库查询,替换步骤1中代码:


/**
 * 显示用户评论等级
 * 
 * @param int $user_id 用户ID
 * @param string $comment_author_email 评论者邮箱
 * @return string 等级标识HTML
 */
function get_user_comment_level($user_id, $comment_author_email) {
    global $wpdb;
    
    // 如果是管理员,返回博主标识
    if (user_can($user_id, 'manage_options')) {
        return '<svg class="icon" aria-hidden="true"><title>博主</title><use xlink:href="#wmviv-bozhu"></use></svg>';
    }
    
    // 缓存机制(基于邮箱MD5)
    $cache_key = 'comment_level_' . md5($comment_author_email);
    $comment_count = get_transient($cache_key);
    
    if (false === $comment_count) {
        // 缓存不存在时查询数据库
        $comment_count = $wpdb->get_var(
            $wpdb->prepare(
                "SELECT COUNT(comment_ID) 
                 FROM $wpdb->comments 
                 WHERE comment_author_email = %s 
                 AND comment_approved = '1'",
                $comment_author_email
            )
        );
        
        // 设置1天缓存(86400秒)
        set_transient($cache_key, $comment_count, 86400);
    }
    
    // 根据评论数确定等级
    if ($comment_count >= 1000) {
        $level = 15;
    } elseif ($comment_count >= 800) {
        $level = 14;
    } elseif ($comment_count >= 600) {
        $level = 13;
    } elseif ($comment_count >= 400) {
        $level = 12;
    } elseif ($comment_count >= 300) {
        $level = 11;
    } elseif ($comment_count >= 200) {
        $level = 10;
    } elseif ($comment_count >= 100) {
        $level = 9;
    } elseif ($comment_count >= 50) {
        $level = 8;
    } elseif ($comment_count >= 30) {
        $level = 7;
    } elseif ($comment_count >= 20) {
        $level = 6;
    } elseif ($comment_count >= 15) {
        $level = 5;
    } elseif ($comment_count >= 10) {
        $level = 4;
    } elseif ($comment_count >= 7) {
        $level = 3;
    } elseif ($comment_count >= 3) {
        $level = 2;
    } elseif ($comment_count >= 1) {
        $level = 1;
    } else {
        return ''; // 没有评论,不显示等级
    }
    
    // 返回等级图标
    return '<svg class="vip vip-icon vip' . $level . '" aria-hidden="true"><title>亲密度 ' . $level . '级</title><use xlink:href="#vip-level-' . $level . '"></use></svg>';
}

/**
 * 评论发布后清除对应缓存
 */
function clear_comment_level_cache($comment_id) {
    $comment = get_comment($comment_id);
    $cache_key = 'comment_level_' . md5($comment->comment_author_email);
    delete_transient($cache_key);
}
add_action('comment_post', 'clear_comment_level_cache');
温馨提示

本页面最后更新于:2025-06-02,距今已 12 天,若有链接失效或教程无效,欢迎留言反馈。

THE END

猜你喜欢

目前有 1 条评论

  1. 棕耳兔
    沙发
    棕耳兔

    测试一下

    2025-06-01 07:22 来自:安徽

发表评论