WordPress创建自定义读者墙功能

 11个月前     浏览:569  

文章目录

    前言

    在逛不亦乐乎博客时,我被其留言页面上读者墙的样式深深吸引。此外,在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
    WordPress创建自定义读者墙功能

    结尾

    以上就是我在个人博客上实现自定义读者墙功能的步骤。如果你希望根据自己的需求进行样式调整,可以随意修改 readers-wall.css 中的 CSS 代码,

    感谢 maie 的提醒,已修改funtions.php相关代码,隐藏邮箱地址。新增评论排行总榜

    版权声明:段先森 发表于 11个月前,共 5214 字。
    转载请注明:WordPress创建自定义读者墙功能 | 三无青年

    您可能感兴趣的

    74 条评论