前言#
在逛不亦乐乎博客時，我被其留言頁面上讀者牆的樣式深深吸引。此外，在wys的友鏈頁面，我也看到了獨特的樣式，這讓我心癢難耐。於是，我開始在網上搜索相關的信息，偶然發現了張戈博客之前寫過的一個插件。雖然這個插件由於年代久遠已不再適用，但我決定根據其代碼進行修改，並將其實現到自己的博客中。
步驟#
- 添加代碼至 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');
- 創建 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;
}
}
- 新建頁面並插入簡碼
在你的 WordPress 後台，創建一個新頁面或編輯現有頁面，並插入以下簡碼：
readers_wall
結尾#
以上就是我在個人博客上實現自定義讀者牆功能的步驟。如果你希望根據自己的需求進行樣式調整，可以隨意修改 readers-wall.css 中的 CSS 代碼，