增加评论等级标识,用于激励用户多参与评论互动,同时通过视觉标识区分活跃用户,提升社区氛围。
效果演示
修改步骤
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
版权声明
- 本文标题:美好的明天 - WordPress 增加评论等级标识
- 本文地址:https://www.wmviv.com/archives/1115.html
- 转载请保留本文标题、本文地址及链接
- 本站遵循 知识共享《署名—非商业性使用—相同方式共享 4.0 协议国际版》(CC BY-NC-SA 4.0)公共许可协议
- 部分文章来源于网络,仅作为学习展示之用,版权归原作者所有,若侵犯您的权益,请您 来信告知。
测试一下