给自己的网站加个荣誉墙(读者墙)
本文是《技术相关(共39篇)》目录的第 38 篇。阅读本文前,建议先阅读本文前3篇文章:
原本用的Zibll主题,现在是PIX主题,都适用,理论上支持所有基于wordpress开发的主题。界面错位的话就是微改下CSS!
2024/12/10:完善了自己的逻辑。我理想的逻辑是:年度评论从每年的1月1日开始至当年的12月31日结束;月度评论从每月的1日开始至当月最后一天结束(此处每月天数不一致,需要智能判断);周评论从每周的星期一开始至星期天结束。超过以上各自的周期,评论需要重新拉取当年、当月和当周的数据并重新排列。
readerwall.php上传到pix/page目录下,然后新建页面,模板选择荣誉墙。
显示逻辑如下:
1、评论者无论是否注册本站,只要输入网址,点击头像打开新链接进入网址;
2、评论者注册本站,但未输入网址,点击头像进入本站内author个人页;
3、评论者未注册本站,也未输入网址,鼠标经过头像无变化,也无法点击。
为了实现第2条,本文结合以下文章食用效果更佳:
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这个数字。
威言威语
这个挺不错,我想是不是我也弄一个。
似水流年
完全可以啊。大佬的走心评论一直想上,前前后后装了两次,无奈和这个主题不匹配,我改了css还是不行,忍痛下了。😭
威言威语
走心评论列表页展示的样式和主题不一致是吗? 可以修改插件的touching.php文件,其中约135-145行是评论列表的结构,你可以修改的和主题的评论列表的结构类似,就能保持样式统一了。
似水流年
好的,有了方向,回头我试试。
网友小宋
灵妹妹胜我一筹哈
似水流年
今晚你也夜班啊?
沉沦
这个评论排行榜厉害了啊,周月年全部涵盖~看来我接下来再鼓捣一下评论排行功能?
似水流年
折腾博客是我们最大的乐趣。😄
obaby
这个功能不错
有仪式感,哈哈哈
似水流年
重新优化了一下代码逻辑,前几天发现错误了,新的一周开始了,荣誉墙周评数据居然不更新,并且月末和月评数据相差不大。
Evan
换个浏览器试试。。普通刷新刚刚也不行。
似水流年
我退出以普通用户身份试一下。
Evan
我怎么看不到代码~
似水流年
页面只能刷新一次。
Evan
晕,很不友好。哈哈
三途河
原因找到了。前几天写了一个跳转提示的文章,恢复的时候可能源码有的地方改动了,导致评论的时候过十几秒钟顶部上方才提示评论成功。只能等提示成功的时候才能刷新看到,明天再看一下源码修正一下错误。
Evan
为了看代码哈哈
似水流年
应该改一下css就差不多了。
Evan
如果样式跟pix的友链页面统一就更好了😜
魏叔叔
这个不错 正好需要一个读者墙
似水流年
这个可以,有使用问题留言。
战东海
看看新版本
战东海
来看看
似水流年
我的评论不能提示成功并且不能自动刷新还是不行,目前找不到原因,如果是登录之后评论就没有问题,改的东西多了不知道改哪里出错了。
战东海
手动刷新也不显示
似水流年
我试试。
战东海
好像有点卡卡的不刷新
似水流年
你看下我的正常不正常,我感觉我这里还行啊。
战东海
带走了
战东海
评论来也显示不出来
战东海
来看看新版
扶苏
可以啊,小伙玩的挺花哨啊~😊
似水流年
没事给网站找点乐子。😂
战东海
不错不错拿走了
似水流年
随便用啊😃