WordPress酷炫CSS3读者墙,排名按年度、本月、本周划分的小方法

WordPress酷炫CSS3读者墙这个玩意一般不用我多说,大部分用WordPress的博主都了解过了,出自折子戏博客。

不过他这个读者墙的排行是按年度划分的,也就是一年内的留言数排行。为了增强评论的积极性,我们可以学习卢松松留言板的按月份排行的做法。甚至还可以一周为单位,进一步激励读者评论留言。WordPress酷炫CSS3读者墙,排名按年度、本月、本周划分的小方法

下面分享修改排名时间段的方法。

先看下原代码中的MySQL查询代码:

大家可以看到查询代码中有一个comment_date > date_sub( NOW(), INTERVAL 24 MONTH )的关键性约束,也就是24个月的评论排行。那了解了这一点,事情就好办了!

根据mysql时间段条件约束,有如下语句可选:

①、将comment_date字段的时间限制在本年度范围:

②、将comment_date字段的时间限制在本月范围:

③、将comment_date字段时间限制在本周范围(从周日算起):

所以,正在在使用这个读者墙的朋友,如果要改变排行时间段,只要参考①②③,修改读者墙代码中的

即可,非常简单!

Ps:大家也看到了,为什么年度排行和本周排行我用的是1 YEAR,和1 WEEK,而不是24 MONTH和7 DAY呢?其实是存在一个逻辑性问题的:使用24 MONTH 或 7 DAY来作为时间段划分,逻辑上是存在问题的,因为这个时间段的起点是活动的,没法固定的!

比如,今天的近7天和明天的近7天是不一样的,这样查询的数据也就不准确了!所以,我采用了1 YEAR 和 1 WEEK,这样的好处就是明确的规定了时间段的起点,比如本周这个时间段,那起点就是上周日。

好了,各时段的代码都已给出,下面贴上一周为时间段的完整代码:

①、本周排行的完整代码

将以上代码添加到主题目录的留言板模块的合适位置即可,如果你还没有留言板,那么请自行百度如何给Wrodpress添加留言板,具体做法我就不赘述了。

如果,你需要其他时间段的排行,那么只要参考本文前面分享的时间段,修改下代码中的INTERVAL 1 WEEK即可!

当然,张戈博客一直以分享为宗旨,所以本站留言板同时存在多个时间段排行的完整代码如下,仅供参考:

细看可以发现,其实组合三种时间段,最关键性的地方就修改变量名,否则一样的变量名会导致数据重复!需要修改的变量名是: output query,我是改成了 output1 output2这种形式,相信你一看就懂!

最后,啰嗦一下,原文介绍是将CSS样式集成到style.css当中的,为啥我这直接和php写在一起呢?你想啊,如果是写到style.css那每个页面都需要加载一次,而写到页面代码中就只会在留言板加载,从而就起到优化的微小效果!当然,最好的方式可以将css代码保存为readers.css。然后只添加到留言板当中即可,因为做出css文件,浏览器会缓存到本地,那就进一步优化了留言板的加载速度了(本段乃强迫症发作所述,可直接无视之,囧....)。

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

刷新评论

目前评论:36   其中:访客  25   博主  11

  1. 糯米汇 5 来自天朝的朋友 谷歌浏览器 Windows 7 四川省成都市 奇虎360科技电信CDN节点

    感觉不错 我去试试

  2. 微信大学 3 来自天朝的朋友 谷歌浏览器 Windows 7 上海市 奇虎360科技电信CDN节点

    已成功!感谢张戈.
    但是评论者的头像,有的不显示. 提示504

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 北京市 联通云BGP数据中心

      注意代码中default.jpg

  3. 成都SEO 5 来自天朝的朋友 谷歌浏览器 Windows 7 四川省成都市 奇虎360科技电信CDN节点

    好炫的功能。有空了用用

    • 叶德华 4 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省常州市 奇虎360科技电信CDN节点

      飞哥,你怎么那么多别名啊!

  4. 龙三公子 6 来自天朝的朋友 谷歌浏览器 Windows XP 江苏省南京市 移动

    zblog的没有插件,上次看了下,要搞有些麻烦,不然我也折腾一个。

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 北京市 联通云BGP数据中心

      自己写代码

  5. 梦轩丽人 6 来自天朝的朋友 火狐浏览器 Windows XP 广东省广州市 电信

    不错的功能,等下班后回家再试试,谢谢分享。

  6. ysicing 2 来自天朝的朋友 谷歌浏览器 Windows 7 山西省太原市 奇虎360科技联通CDN节点

    签到成功!签到时间:下午1:15:08,每日签到,生活更精彩哦~

  7. 小马博客 2 来自天朝的朋友 谷歌浏览器 Windows 7 山西省太原市 奇虎360科技联通CDN节点

    这功能不错!我去试试!

  8. 中国历史 6 来自天朝的朋友 火狐浏览器 Windows XP 广东省广州市 电信

    按 @梦轩丽人 指示,特来感谢张戈,我修改了读者墙中的排名,按一周评论倒序排

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 北京市 联通云BGP数据中心

      哈哈,都改了,不错的

  9. 中国历史 6 来自天朝的朋友 火狐浏览器 Windows XP 广东省广州市 电信

    话说张戈自己搬石头砸脚,他懂的

  10. 灰常记忆 4 来自天朝的朋友 Safari浏览器  Android 4.1.2 HUAWEI MT1-T00 Build/HuaweiMT1-T00 四川省成都市 奇虎360科技电信CDN节点

    额。有空折腾下。

  11. 收录独立博客 2 来自天朝的朋友 谷歌浏览器 Windows 7 上海市 奇虎360科技电信CDN节点

    wp这个程序一直在用。哈哈,折腾人的是技术。

  12. 飞哥 4 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 电信

    感觉是个好东西,,就是代码加载有点麻烦。对于我们小白来讲实现起来有点难度啊、不过还是要认可博主的认真劲

  13. 飞哥 4 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 电信

    这个代码是不是可以用一下呢?我去试试!

  14. 糯米汇 5 来自天朝的朋友 谷歌浏览器 Windows 7 四川省成都市 奇虎360科技电信CDN节点

    通过梦轩丽人博主帮助,已经弄上去了

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 北京市 联通云BGP数据中心

      不错不错

  15. 叶德华 4 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省常州市 奇虎360科技电信CDN节点

    唉,看你们一个个的都这么爱折腾博客,给博客加新功能,回头看看我自己的,就有种后妈生的的感觉。

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 北京市 联通云BGP数据中心

      别偷懒就行。

  16. 我就看看,什么也不买 4 来自天朝的朋友 谷歌浏览器 Windows 8.1 北京市 联通云BGP数据中心

    怎么百度收录的速度那么慢?

  17. 梦轩丽人 6 来自天朝的朋友 火狐浏览器 Windows XP 广西贵港市 奇虎360科技电信CDN节点

    谢谢分享,已更改。PS:分享的本月评论代码有误,dateformat应该为date_format

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广西贵港市 奇虎360科技电信CDN节点

      嗯,发现了,敲错了。

  18. 梦想网络 5 来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 电信

    博主,问个问题,如果没有人评论则输出自己自定义的字,比如输出:”居然没有人抢沙发,你们忍心么?”,该如何判断?对php不懂。。。方便的话帮我写一段。。。 :evil:

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      回来给你看下,应该简单。

      • 梦想网络 5 来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 电信

        好的,就像这篇文章,评论底部,没有人评论,显示一张图片,或者显示自己想输出的字。。

        • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

          你自己应该可以写出来吧?都有案例了,直接扒代码,我这边已经偷过来了:http://zhangge.net/video/na-xie-nian/

          • 梦想网络 5 来自天朝的朋友 谷歌浏览器 Windows 10 四川省攀枝花市 电信

            他这次这个真的没有看懂。。。我看他的只有一个class,你的加了js,是不是还需要在functions里面加判断。。。

            • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

              js是我额外改进的,判断其实一般主题都有,你看下主题下的comments.php就可以找到了

              • 梦想网络 5 来自天朝的朋友 谷歌浏览器 Windows 10 四川省攀枝花市 电信

                冏,,,能力还是不够,你能写个教程出来吗。
                加了if判断如果评论数为0则输出…,但是什么都没输出,反而输出到我回复别人的评论里面去了。。。

                • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

                  QQ上说,这个没必要发文发教程。

                  • 梦想网络 5 来自天朝的朋友 谷歌浏览器 Windows 10 四川省攀枝花市 电信

                    :evil: 嗯,好,你QQ多少来着。。我的759071793

  19. 滕绍武博客 2 来自天朝的朋友 谷歌浏览器 Windows XP 山东省潍坊市 联通

    有这个功能是不错,就是我是小白,不会用,直接用现成的

  20. 随谈网 0 来自天朝的朋友 谷歌浏览器 Windows 10 上海市 电信

    挺炫的,我试了下把这个代码加到我博客里about页面,结果显示的每个血条之间间距好大,请博主帮忙看看是怎么回事,谢谢了

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      看了下你的展示,将以下css加入到主题的自定义样式里面即可:

加载中,请稍候...