晚上随机看网友博客，发现一篇给wordpress创建读者墙功能的帖子。上周就想写一个wp评论排行的插件，但是样式太难看就放弃了。文章后面实现了预期的效果，但需要对前面的代码进行小小的调整，这非常简单！
推荐设置
此教程被标记为推荐内容，建议优先阅读。
读者墙效果预览
A
1
B
2
C
3
D
4
E
5
F
6
显示评论最多的读者头像和排名
具体步骤
下面是实现评论排行榜功能的具体步骤：
添加核心代码到functions.php
把以下代码添加至wp-content/themes/pix/functions.php中：
// 注册并加载读者墙的CSS样式
function enqueue_readers_wall_styles() {
wp_enqueue_style('readers-wall-style', THEME_URL . '/css/readers-wall.css', array(), '1.0.0');
}
add_action('wp_enqueue_scripts', 'enqueue_readers_wall_styles');
// 辅助函数：生成排行列表
function generate_readers_list($title, $query, $limit) {
global $wpdb;
$output = '';
// 使用 transient 缓存查询结果
$transient_key = 'readers_wall_' . md5($query);
$wall = get_transient($transient_key);
if (false === $wall) {
$wall = $wpdb->get_results($query);
set_transient($transient_key, $wall, 3600); // 设置缓存时间为1小时（3600秒）
}
$output .= '';
$output .= '' . esc_html($title) . ' TOP' . esc_html($limit) . '
';
if ($wall) {
$output .= "";
foreach ($wall as $comment) {
$avatar = get_avatar($comment->comment_author_email, 64, get_bloginfo('wpurl') . '/avatar/default.jpg', '', array('loading' => 'lazy'));
$url = esc_url($comment->comment_author_url ? $comment->comment_author_url : "#");
$author = esc_html($comment->comment_author);
$count = intval($comment->cnt);
$tooltip = "{$author}
评论: {$count}";
$output .= "-
{$avatar}
{$tooltip}
";
}
$output .= "
";
}
$output .= '';
return $output;
}
创建CSS样式文件
在主题目录下创建css/readers-wall.css文件：
/* 读者墙样式 */
.readers-section {
margin: 30px 0;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
}
.readers-section .entry-title {
text-align: center;
margin-bottom: 20px;
color: #333;
font-size: 18px;
font-weight: 600;
}
.readers-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 15px;
list-style: none;
padding: 0;
margin: 0;
}
.readers-list li {
text-align: center;
position: relative;
}
.readers-list li a {
display: block;
text-decoration: none;
position: relative;
}
.readers-list li .avatar {
border-radius: 50%;
transition: transform 0.3s ease;
}
.readers-list li a:hover .avatar {
transform: scale(1.1);
}
.readers-list li .tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
}
.readers-list li a:hover .tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-5px);
}
在页面中调用读者墙
在需要显示读者墙的页面模板中添加以下代码：
// 在页面模板中添加读者墙
$readers_query = "SELECT comment_author, comment_author_email, comment_author_url, COUNT(*) as cnt
FROM {$wpdb->comments}
WHERE comment_approved = 1
GROUP BY comment_author_email
ORDER BY cnt DESC
LIMIT 20";
echo generate_readers_list('评论排行榜', $readers_query, 20);
功能特点
- 缓存优化：使用WordPress的transient缓存，减少数据库查询
- 响应式设计：适配不同屏幕尺寸
- 悬停效果：鼠标悬停显示详细信息
- 排名显示：直观显示评论数量排名
- 头像支持：自动获取Gravatar头像
自定义选项
可以根据需要调整以下参数：
// 自定义读者墙参数
function custom_readers_wall($atts) {
$atts = shortcode_atts(array(
'limit' => 20,
'title' => '评论排行榜',
'days' => 365
), $atts);
global $wpdb;
$days = intval($atts['days']);
$limit = intval($atts['limit']);
$query = $wpdb->prepare("
SELECT comment_author, comment_author_email, comment_author_url, COUNT(*) as cnt
FROM {$wpdb->comments}
WHERE comment_approved = 1
AND comment_date > DATE_SUB(NOW(), INTERVAL %d DAY)
GROUP BY comment_author_email
ORDER BY cnt DESC
LIMIT %d
", $days, $limit);
return generate_readers_list($atts['title'], $query, $limit);
}
add_shortcode('readers_wall', 'custom_readers_wall');
使用提示
现在可以通过短代码 [readers_wall limit="15" title="活跃读者" days="30"] 在任何页面调用读者墙功能。
