前言#
不亦乐乎ブログのゲストブックを見ていると、読者の壁のスタイルに深く魅了されました。また、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);
// ツールチップの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 コードを変更できます。