前言
在逛不亦乐乎博客时，我被其留言页面上读者墙的样式深深吸引。此外，在wys的友链页面，我也看到了独特的样式，这让我心痒难耐。于是，我开始在网上搜索相关的信息，偶然发现了张戈博客之前写过的一个插件。虽然这个插件由于年代久远已不再适用，但我决定根据其代码进行修改，并将其实现到自己的博客中。
步骤
1. 添加代码至 functions.php
首先，在你博客的主题目录下找到并打开 functions.php 文件。然后，将以下代码添加到文件末尾：
// 注册并加载读者墙的CSS样式
function enqueue_readers_wall_styles() {
global $post;
if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'readers_wall')) {
wp_enqueue_style('readers-wall-style', get_template_directory_uri() . '/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);
}
$output .= '<div class="readers-section">';
$output .= '<h2 class="entry-title">' . esc_html($title) . ' TOP' . esc_html($limit) . '</h2>';
if ($wall) {
$output .= "<ul class='readers-list'>";
foreach ($wall as $comment) {
$avatar = get_avatar($comment->comment_author_email, 64, '', '', 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 的 ID
$tooltip_id = sanitize_title($author);
$tooltip = "{$author}<br>评论数: {$count}";
$output .= "<li>
<a rel='friend' target='_blank' href='{$url}' aria-describedby='tooltip-{$tooltip_id}'>
{$avatar}
<div class='tooltip' id='tooltip-{$tooltip_id}' role='tooltip'>{$tooltip}</div>
</a>
</li>";
}
$output .= "</ul>";
} else {
$output .= "<p>没有找到" . esc_html($title) . "数据。</p>";
}
$output .= '</div>';
return $output;
}
// 短代码函数：读者墙
function readers_wall_shortcode() {
global $wpdb;
$output = '';
// 评论总排行榜
$query2 = $wpdb->prepare(
"SELECT COUNT(comment_ID) AS cnt, comment_author, comment_author_url, comment_author_email
FROM $wpdb->comments
LEFT JOIN $wpdb->posts ON ($wpdb->posts.ID = $wpdb->comments.comment_post_ID)
WHERE post_password = ''
AND comment_approved = '1'
AND comment_author != %s
GROUP BY comment_author_email
ORDER BY cnt DESC
LIMIT %d",
'段先森',
12
);
$output .= generate_readers_list('评论总排行榜', $query2, 12);
// 年度评论排行
$query1 = $wpdb->prepare(
"SELECT COUNT(comment_ID) AS cnt, comment_author, comment_author_url, comment_author_email
FROM (
SELECT * FROM $wpdb->comments
LEFT JOIN $wpdb->posts ON ($wpdb->posts.ID = $wpdb->comments.comment_post_ID)
WHERE comment_date BETWEEN DATE_SUB(NOW(), INTERVAL 1 YEAR) AND NOW()
AND post_password = ''
AND comment_approved = '1'
AND comment_author != %s
) AS tempcmt
GROUP BY comment_author_email
ORDER BY cnt DESC
LIMIT %d",
'段先森',
365
);
$output .= generate_readers_list('年度评论排行', $query1, 365);
// 本月评论排行
$query2 = $wpdb->prepare(
"SELECT COUNT(comment_ID) AS cnt, comment_author, comment_author_url, comment_author_email
FROM (
SELECT * FROM $wpdb->comments
LEFT JOIN $wpdb->posts ON ($wpdb->posts.ID = $wpdb->comments.comment_post_ID)
WHERE DATE_FORMAT(comment_date, '%%Y-%%m') = DATE_FORMAT(NOW(), '%%Y-%%m')
AND post_password = ''
AND comment_approved = '1'
AND comment_author != %s
) AS tempcmt
GROUP BY comment_author_email
ORDER BY cnt DESC
LIMIT %d",
'段先森',
31
);
$output .= generate_readers_list('本月评论排行', $query2, 31);
// 本周评论排行
$query3 = $wpdb->prepare(
"SELECT COUNT(comment_ID) AS cnt, comment_author, comment_author_url, comment_author_email
FROM (
SELECT * FROM $wpdb->comments
LEFT JOIN $wpdb->posts ON ($wpdb->posts.ID = $wpdb->comments.comment_post_ID)
WHERE YEARWEEK(DATE_FORMAT(comment_date, '%%Y-%%m-%%d')) = YEARWEEK(NOW())
AND post_password = ''
AND comment_approved = '1'
AND comment_author != %s
) AS tempcmt
GROUP BY comment_author_email
ORDER BY cnt DESC
LIMIT %d",
'段先森',
7
);
$output .= generate_readers_list('本周评论排行', $query3, 7);
return $output;
}
add_shortcode('readers_wall', 'readers_wall_shortcode');
2. 创建 CSS 文件
在你主题的目录下，找到 css 文件夹，并新建一个名为 readers-wall.css 的文件。将以下样式代码粘贴到该文件中：
/* readers-wall.css */
/* 容器样式 */
.readers-section {
margin-bottom: 30px;
}
.readers-section h2.entry-title {
font-size: 24px;
margin-bottom: 15px;
color: #333;
}
/* 头像列表样式 */
.readers-list {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
}
.readers-list li {
position: relative;
margin: 10px;
width: 50px; /* 调整头像大小 */
height: 50px;
}
.readers-list li a {
display: block;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
position: relative;
}
.readers-list li img {
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.readers-list li a:hover img,
.readers-list li a:focus img {
transform: scale(1.1);
}
/* 悬停信息框样式 */
.readers-list li .tooltip {
visibility: hidden;
opacity: 0;
width: 160px;
background-color: rgba(0, 0, 0, 0.75);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px;
position: absolute;
bottom: 60px; /* 头像上方 */
left: 50%;
transform: translateX(-50%);
transition: opacity 0.3s ease;
z-index: 10;
font-size: 14px;
}
.readers-list li .tooltip::after {
content: "";
position: absolute;
top: 100%; /* 箭头指向头像 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.75) transparent transparent transparent;
}
.readers-list li:hover .tooltip,
.readers-list li a:focus .tooltip {
visibility: visible;
opacity: 1;
}
/* 响应式设计 */
@media (max-width: 600px) {
.readers-list li {
width: 40px;
height: 40px;
}
.readers-section h2.entry-title {
font-size: 20px;
}
.readers-list li .tooltip {
width: 140px;
font-size: 12px;
}
}
3. 新建页面并插入简码
在你的 WordPress 后台，创建一个新页面或编辑现有页面，并插入以下简码：
结尾
以上就是我在个人博客上实现自定义读者墙功能的步骤。如果你希望根据自己的需求进行样式调整，可以随意修改 readers-wall.css 中的 CSS 代码，
[tip type="info" ]感谢 maie 的提醒，已修改funtions.php相关代码，隐藏邮箱地址。新增评论排行总榜[/tip]
后记