给自己的网站加个荣誉墙(读者墙)

原本用的Zibll主题,现在是PIX主题,都适用,理论上支持所有基于wordpress开发的主题。界面错位的话就是微改下CSS!

2024/12/10:完善了自己的逻辑。我理想的逻辑是:年度评论从每年的1月1日开始至当年的12月31日结束;月度评论从每月的1日开始至当月最后一天结束(此处每月天数不一致,需要智能判断);周评论从每周的星期一开始至星期天结束。超过以上各自的周期,评论需要重新拉取当年、当月和当周的数据并重新排列。

readerwall.php上传到pix/page目录下,然后新建页面,模板选择荣誉墙。

显示逻辑如下:

1、评论者无论是否注册本站,只要输入网址,点击头像打开新链接进入网址;

2、评论者注册本站,但未输入网址,点击头像进入本站内author个人页;

3、评论者未注册本站,也未输入网址,鼠标经过头像无变化,也无法点击。

为了实现第2条,本文结合以下文章食用效果更佳:

给自己的网站加一个作者主页功能 给自己的网站加一个作者主页功能 因为自己的网站有一个荣誉墙,为了实现荣誉墙的第2个效果,就需要加一个作者主页功能。这两个相互配合简直天衣无缝。 荣誉墙在这里: [pix_post ids=341] 简单说明一下: 就是获取某个用户发... 时间:2023/12/9 分类:技术相关

readerwall.php代码如下:

[reply]

<?php
/**
 * Template Name: 荣誉墙
 */
get_header();

// 公共函数,用于查询并显示评论排行
function displayCommentRank($query) {
    global $wpdb;

    $wall = $wpdb->get_results($query);

    if ($wall !== null) {
        if (!empty($wall)) {
            $maxNum = $wall[0]->cnt;
            $output = ""; // 初始化 $output
            foreach ($wall as $comment) {
                $width = round(40 / ($maxNum / $comment->cnt), 2);
                //此处是对应的血条的宽度
                $avatar_style = ""; // 初始化 $avatar_style
                $avatar_link = "#"; // 默认链接为 "#"
                if ($comment->comment_author_url) {
                    $url = $comment->comment_author_url;
                    $avatar_link = $comment->comment_author_url; // 如果留下网址,点击头像打开对应网址
                } elseif ($comment->user_id) {
                    $url = get_author_posts_url($comment->user_id); // 获取站内作者主页链接
                    $author_name = get_comment_author($comment); // 获取评论作者的用户名
                    $avatar_link = trailingslashit($url) . $author_name; // 根据用户名生成完整的作者主页链接
                } else {
                    $avatar_style = "style=\"pointer-events: none;\"";
                }
                $avatar = get_avatar($comment->comment_author_email, $size = '32', $default = get_bloginfo('wpurl') . '/avatar/default.jpg');
                $tmp = "<li><div " . $avatar_style . "><a rel=\"friend\" alt=\"avatar头像\" target=\"_blank\" href=\"" . $avatar_link . "\">" . $avatar . "<em>" . $comment->comment_author . "</em> <strong>+" . $comment->cnt . "</strong></br>" . $comment->comment_author_url . "</a></div></li>";
                $output .= $tmp;
            }
            $output = "<ul class=\"readers-list\">" . $output . "</ul>";
            echo $output;
        } else {
            // $wall 是一个空数组,没有符合条件的结果
            echo "没有找到符合条件的评论数据。";
        }
    } else {
        // 查询失败,处理错误情况
        echo "无法获取评论数据。";
    }
}

?>
<main class="container">
    <div class="content-wrap">
        <div class="content-layout">
            <?php while (have_posts()) : the_post(); ?>
                <?php
                $header_style = 0;
                if ($header_style != 1) {
                    echo get_header();
                }
                ?>
            <?php endwhile; ?>
            <div class="box-body theme-box radius8 main-bg main-shadow">
                <?php if ($header_style == 1) {
                    echo get_header();
                } ?>
             <style type="text/css">.readers-list{line-height:18px;text-align:left;overflow:hidden;_zoom:1}.readers-list li{width:50%;float:left;*margin-right:-1px}.readers-list a,.readers-list a:hover strong{background-color:#f2f2f2;background-image:-webkit-linear-gradient(#f8f8f8,#f2f2f2);background-image:-moz-linear-gradient(#f8f8f8,#f2f2f2);background-image:linear-gradient(#f8f8f8,#f2f2f2)}.readers-list a{position:relative;display:block;height:44px;margin:4px;padding:4px 4px 4px 44px;color:#999;overflow:hidden;border:#ccc 1px solid;border-radius:2px;box-shadow:#eee 0 0 2px}.readers-list img,.readers-list em,.readers-list strong{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;transition:all .2s ease-out}.readers-list img{width:36px;height:36px;float:left;margin:0 8px 0 -40px;border-radius:2px}.readers-list em{color:#666;font-style:normal;margin-right:10px}.readers-list strong{color:#666;width:40px;text-align:right;position:absolute;right:6px;top:4px;font:bold 14px/16px microsoft yahei}.readers-list a:hover{border-color:#bbb;box-shadow:#ccc 0 0 2px;background-color:#fff;background-image:none}.readers-list a:hover img{opacity:.6;margin-left:0}.readers-list a:hover em{color:#EE8B17;font:bold 12px/36px microsoft yahei}.readers-list a:hover strong{color:#EE8B17;left:1px;top:0;text-align:center;border-right:#ccc 1px solid;height:44px;line-height:40px}.readers-list li{list-style:none}.diy-bt{position:relative;width:170px;background:#DC214C;color:#fff;display:inline-block;margin:10px!important;font-size:16px!important;text-align:center;height:36px;line-height:36px!important;border-left:10px solid #A31838;box-sizing:content-box}.diy-bt::before{content:'';position:absolute;width:0;height:0;border-style:solid;border-width:18px 20px 18px 0;border-color:#DC214C transparent #DC214C transparent;left:170px}</style>
             <p class="diy-bt">本年评论排行 TOP20</p>
                <?php
             $query1 = "SELECT COUNT(comment_author) AS cnt, user_id, comment_author, comment_author_url, comment_author_email FROM $wpdb->comments WHERE comment_date between CONCAT(YEAR(NOW()), '-01-01') and CONCAT(YEAR(NOW()), '-12-31') AND user_id!='1' AND comment_author_email!='管理员邮箱地址' AND comment_author!='1' AND comment_approved='1' AND (comment_type='' OR comment_type='comment') GROUP BY comment_author ORDER BY cnt DESC LIMIT 20";
                displayCommentRank($query1);
                ?>
                <!-- end 年度排行 -->
                <div class="clear"></div>
                <br />
             <p class="diy-bt">本月评论排行 TOP20</p>
                <?php
             $query2 = "SELECT COUNT(comment_author) AS cnt, user_id, comment_author, comment_author_url, comment_author_email 
                 FROM $wpdb->comments WHERE comment_date >= CONCAT(YEAR(NOW()), '-', LPAD(MONTH(NOW()), 2, '0'), '-01') AND comment_date <= LAST_DAY(NOW()) AND user_id!='1' AND comment_author_email!='管理员邮箱地址' AND comment_author!='1' AND comment_approved='1' AND (comment_type='' OR comment_type='comment') GROUP BY comment_author ORDER BY cnt DESC LIMIT 20";
                 displayCommentRank($query2);
                ?>
                <!-- end 本月排行 -->
                <div class="clear"></div>
                <br />
             <p class="diy-bt">本周评论排行 TOP20</p>
                <?php
             $query3 = "SELECT COUNT(comment_author) AS cnt, user_id, comment_author, comment_author_url, comment_author_email 
                 FROM $wpdb->comments WHERE comment_date >= DATE_SUB(NOW(), INTERVAL WEEKDAY(NOW()) DAY) AND comment_date <= DATE_ADD(NOW(), INTERVAL (6 - WEEKDAY(NOW())) DAY) AND user_id!='1' AND comment_author_email!='管理员邮箱地址' AND comment_author!='1' AND comment_approved='1' AND (comment_type='' OR comment_type='comment') GROUP BY comment_author ORDER BY cnt DESC LIMIT 20";
                displayCommentRank($query3);
                ?>
                <!-- end 本周排行 -->
            </div>
        </div>
    </div>
</main>
<?php get_footer(); ?>

[/reply]

这里有三个排名:本年评论排行 TOP10($query1),本月评论排行 TOP10($query2),本周评论排行 TOP10($query3),上面这些query查询最后的10就是显示的个数。如果你的网站互动性很好,可以改成稍大一些,比如50,记得如果这个改了,别忘记改TOP X这个数字。

您已阅读完《技术相关(共39篇)》目录的第 38 篇。请继续阅读本文后3篇文章:

阅读本目录下更多其它文章

Comments | 35 条评论
  • 威言威语

    Google Chrome 131 Google Chrome 131 Windows 10 Windows 10 1中国–上海–上海 电信 ip address 114.86.*.*

    这个挺不错,我想是不是我也弄一个。

    • 似水流年

      IBrowse r IBrowse r Android 12 Android 12 1中国–河南–漯河 电信 ip address 222.89.*.*

      完全可以啊。大佬的走心评论一直想上,前前后后装了两次,无奈和这个主题不匹配,我改了css还是不行,忍痛下了。😭

      • 威言威语

        Firefox 133 Firefox 133 Windows 10 Windows 10 1中国–上海–上海 电信 ip address 114.86.*.*

        走心评论列表页展示的样式和主题不一致是吗? 可以修改插件的touching.php文件,其中约135-145行是评论列表的结构,你可以修改的和主题的评论列表的结构类似,就能保持样式统一了。

        • 似水流年

          IBrowse r IBrowse r Android 12 Android 12 1中国–河南 移动/数据上网公共出口 ip address 39.144.*.*

          好的,有了方向,回头我试试。

  • 网友小宋

    Microsoft Edge 131 Microsoft Edge 131 Windows 10 Windows 10 1中国 中国联通 ip address 2408:8221:6014:f081:*:*

    灵妹妹胜我一筹哈

    • 似水流年

      IBrowse r IBrowse r Android 12 Android 12 1中国–河南–漯河 电信 ip address 222.89.*.*

      今晚你也夜班啊?

  • 沉沦

    Safari 18 Safari 18 Mac OS X 10.15 Mac OS X 10.15 1中国–河北 电信 ip address 27.128.*.*

    这个评论排行榜厉害了啊,周月年全部涵盖~看来我接下来再鼓捣一下评论排行功能?

    • 似水流年

      Google Chrome 93 Google Chrome 93 GNU/Linux GNU/Linux 1中国–河南–漯河 联通 ip address 123.10.*.*

      折腾博客是我们最大的乐趣。😄

  • obaby

    Google Chrome 126 Google Chrome 126 Mac OS X 10.15 Mac OS X 10.15 1中国–山东–青岛 联通 ip address 112.224.*.*

    这个功能不错
    有仪式感,哈哈哈

    • 似水流年

      Microsoft Edge 131 Microsoft Edge 131 Windows 10 Windows 10 1中国–河南–漯河 联通 ip address 42.238.*.*

      重新优化了一下代码逻辑,前几天发现错误了,新的一周开始了,荣誉墙周评数据居然不更新,并且月末和月评数据相差不大。

  • Evan

    Safari 18 Safari 18 Mac OS X 10.15 Mac OS X 10.15 1中国–北京–北京 联通/网宿科技联通CDN节点 ip address 123.125.*.*

    换个浏览器试试。。普通刷新刚刚也不行。

    • 似水流年

      IBrowse r IBrowse r Android 12 Android 12 1中国–河南–漯河 联通 ip address 182.126.*.*

      我退出以普通用户身份试一下。

  • Evan

    Google Chrome 129 Google Chrome 129 Mac OS X 10.15 Mac OS X 10.15 1中国–北京–北京 联通/网宿科技联通CDN节点 ip address 123.125.*.*

    我怎么看不到代码~

    • 似水流年

      IBrowse r IBrowse r Android 12 Android 12 1中国–河南–漯河 联通 ip address 182.126.*.*

      页面只能刷新一次。

      • Evan

        Safari 18 Safari 18 Mac OS X 10.15 Mac OS X 10.15 1中国–北京–北京 联通/网宿科技联通CDN节点 ip address 123.125.*.*

        晕,很不友好。哈哈

        • 三途河

          IBrowse r IBrowse r Android 12 Android 12 1中国–河南–漯河 联通 ip address 182.126.*.*

          原因找到了。前几天写了一个跳转提示的文章,恢复的时候可能源码有的地方改动了,导致评论的时候过十几秒钟顶部上方才提示评论成功。只能等提示成功的时候才能刷新看到,明天再看一下源码修正一下错误。

  • Evan

    Google Chrome 129 Google Chrome 129 Mac OS X 10.15 Mac OS X 10.15 1中国–北京–北京 联通/网宿科技联通CDN节点 ip address 123.125.*.*

    为了看代码哈哈

    • 似水流年

      IBrowse r IBrowse r Android 12 Android 12 1中国–河南–漯河 联通 ip address 182.126.*.*

      应该改一下css就差不多了。

  • Evan

    Google Chrome 129 Google Chrome 129 Mac OS X 10.15 Mac OS X 10.15 1中国–北京–北京 联通/网宿科技联通CDN节点 ip address 123.125.*.*

    如果样式跟pix的友链页面统一就更好了😜

  • 魏叔叔

    Google Chrome 122 Google Chrome 122 Windows 10 Windows 10 1中国–浙江–温州 电信 ip address 115.223.*.*

    这个不错 正好需要一个读者墙

    • 似水流年

      Microsoft Edge 129 Microsoft Edge 129 Windows 10 Windows 10 1中国–河南–漯河 联通 ip address 42.238.*.*

      这个可以,有使用问题留言。

  • 战东海

    Microsoft Edge 120 Microsoft Edge 120 Windows 10 Windows 10 1中国–辽宁–抚顺 联通 ip address 113.231.*.*

    看看新版本

  • 战东海

    Microsoft Edge 119 Microsoft Edge 119 Windows 10 Windows 10 1中国–辽宁–抚顺 联通 ip address 113.236.*.*

    来看看

    • 似水流年

      Microsoft Edge 119 Microsoft Edge 119 Windows 10 Windows 10 1中国–河南–漯河 联通 ip address 42.238.*.*

      我的评论不能提示成功并且不能自动刷新还是不行,目前找不到原因,如果是登录之后评论就没有问题,改的东西多了不知道改哪里出错了。

  • 战东海

    Microsoft Edge 119 Microsoft Edge 119 Windows 10 Windows 10 1中国–辽宁–抚顺 联通 ip address 113.236.*.*

    手动刷新也不显示

    • 似水流年

      IBrowse r IBrowse r Android 10 Android 10 1中国–河南–漯河 联通 ip address 182.126.*.*

      我试试。

  • 战东海

    Microsoft Edge 119 Microsoft Edge 119 Android 10 Android 10 1中国–辽宁–沈阳 联通 ip address 175.167.*.*

    好像有点卡卡的不刷新

    • 似水流年

      IBrowse r IBrowse r Android 10 Android 10 1中国–河南 移动/数据上网公共出口 ip address 39.144.*.*

      你看下我的正常不正常,我感觉我这里还行啊。

  • 战东海

    Microsoft Edge 119 Microsoft Edge 119 Windows 10 Windows 10 1中国–辽宁–抚顺 联通 ip address 113.236.*.*

    带走了

    • 战东海

      Microsoft Edge 119 Microsoft Edge 119 Windows 10 Windows 10 1中国–辽宁–抚顺 联通 ip address 113.236.*.*

      评论来也显示不出来

  • 战东海

    Microsoft Edge 119 Microsoft Edge 119 Windows 10 Windows 10 1中国–辽宁–抚顺 联通 ip address 113.236.*.*

    来看看新版

  • 扶苏

    Microsoft Edge 119 Microsoft Edge 119 Windows 10 Windows 10 1美国 ip address 172.83.*.*

    可以啊,小伙玩的挺花哨啊~😊

    • 似水流年

      Microsoft Edge 119 Microsoft Edge 119 Windows 10 Windows 10 1中国–河南–郑州 联通 ip address 182.127.*.*

      没事给网站找点乐子。😂

  • 战东海

    Microsoft Edge 119 Microsoft Edge 119 Windows 10 Windows 10 1中国–辽宁–抚顺 联通 ip address 113.231.*.*

    不错不错拿走了

    • 似水流年

      IBrowse r IBrowse r Android 10 Android 10 1中国–河南–郑州 联通 ip address 182.127.*.*

      随便用啊😃

消息盒子
# 您需要首次评论以获取消息 #
# 您需要首次评论以获取消息 #

只显示最新10条未读和已读信息