WordPress评论统计图

[wymusic title=”你知道我的迷惘 – Beyond”]347687[/wymusic]

在网络上经常会见到各种博客网站有评论留言墙,但统计图表却比较少见, 留言墙或统计图表的好处正如cfanlost在文章下面的评论所说:

cfanlost2020-04-18 10:42:16

:rolleyes: 激发了广大网友的评论热情。+1

前段时间无意在网友“牧羊人”那里见到这个,发现非常酷,于是弄过来用上了。

牧羊人:https://www.shephe.com/2015/07/wordpress-comment-chart

效果如下图:

评论统计图

其实方法网上很多,感觉没有贴出来的必要的,但今天在另一个网友那里看到他在折腾这个,发现他遇到和我当初一样的问题:如果不翻墙的话,图表有时会显示不出来。

核心代码
Code Source
<h2>活跃用户排名</h2>
<div id="chart_user_div" style="width:100%; height: 460px; margin: auto;"></div>
<h2>评论数量折线图</h2>
<div id="chart_day_div" style="width:100%; height: 500px; margin: auto;"></div>
<h2>评论数量柱状图</h2>
<div id="chart_month_div" style="width:100%; height: 500px; margin: auto;"></div>
<?php
global $wpdb;
$numbers_day = 120;
$numbers_month = 13;
$numbers_user = 12;
$query_day ="SELECT COUNT(*) AS `cnt` , DATE_FORMAT( `comment_date` , '%Y-%m-%d' ) AS d FROM $wpdb->comments GROUP BY d ORDER BY `d` DESC LIMIT 0 , " . $numbers_day;
$query_month="SELECT COUNT(*) AS `cnt` , DATE_FORMAT( `comment_date` , '%Y-%m' ) AS d FROM $wpdb->comments GROUP BY d ORDER BY `d` DESC LIMIT 0 , " . $numbers_month;
$query_user ="
SELECT
COUNT( comment_author_email ) AS number,
comment_author_email,
comment_author
FROM (
SELECT *
FROM $wpdb->comments
LEFT OUTER JOIN $wpdb->posts
ON ( $wpdb->posts.ID = $wpdb->comments.comment_post_ID )
WHERE
comment_date > date_sub( NOW(), INTERVAL 360 DAY )
AND user_id = '0'
AND comment_approved = '1'
ORDER BY comment_ID DESC
) AS tempcmt
GROUP BY comment_author_email
ORDER BY number DESC
LIMIT {$numbers_user}";
$output_day = $wpdb->get_results($query_day);
$output_month = $wpdb->get_results($query_month);
$output_user = $wpdb->get_results($query_user);
?>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart_day);
google.setOnLoadCallback(drawChart_month);
google.setOnLoadCallback(drawChart_user);
function drawChart_day() {
var data = google.visualization.arrayToDataTable([
['date', 'comments'],
<?php foreach (array_reverse($output_day) as $o) {echo "['" . $o->d . "'," . $o->cnt . "],";} ?>
]);
var options = {
title: '每日评论数图'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_day_div'));
chart.draw(data, options);
}
function drawChart_month() {
var data = google.visualization.arrayToDataTable([
['date', 'comments'],
<?php foreach (array_reverse($output_month) as $o) {echo "['" . $o->d . "'," . $o->cnt . "],";} ?>
]);
var options = {
title: '每月评论数图'
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_month_div'));
chart.draw(data, options);
}
function drawChart_user() {
var data = google.visualization.arrayToDataTable([
['comment_author', 'comments'],
<?php foreach ($output_user as $o) {echo "['" . $o->comment_author . "'," . $o->number . "],";} ?>
]);
var options = {
title: '一年内最活跃用户图'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_user_div'));
chart.draw(data, options);
}
</script>

把上面的代码放入主题下的新建页面模版或者其它你想放入的页面中即可。数据和样式可以根据自己的主题和需要修改。

引入Google的JSAPI库
Code Source
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

到这里基本就可以了,但因为GG服务被墙的原因,有时图表并不会出现。最后经过Lvtu各种折腾和测试,终于在网上找到了一个解决办法:

相关使用介绍:https://stackoverflow.com/questions/54248514/google-chart-using-https-www-gstatic-com-charts-loader-js

把上面GG的JS文件替换为下面的就可以了,当然为了避免失效,可以把JS文件放到自己服务器上来:

Code Source
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

刷新一下是不是可以了,详细效果可以见本站导航 >> 实验室 >> 评论统计, 在此对在本站留下痕迹的朋友表示真挚的感谢,感谢大家的不离不弃。。。。。。

这段时间没事在网站上折腾花了不少时间,改字体本来没当一回事,结果导致网站标题和副标题不显示,刚开始以为是其它原因,排查来排查去最后发现是字体和text-fill-color冲突。

同时把默认的播放器改成了类似微信公众号那样的样式, 只是歌曲时间倒计时没解决。效果见文章开篇。

内容较多的文章增加了一个类似BD百科那样的目录样式。效果见 ===> 传送门

列表页改了一下显示方式(主题自带),但对一些细节样式做了下修改。原来的大图加摘要显示方式用了很长一段时间了,适当切换改善一下视觉疲劳感。:-)))))

给文章页加了一个初始不完全显示,点击“阅读全文”才全部显示的效果,这样打开文章页的方式或许会舒服点。在折腾中意外发现因为新增”overflow:hidden”的原因,而导致之前定义的margin负值失效,后果就是又折腾半天才找到用JS解决。






给安德烈的一封信 — 小王子




孩子,我要求你读书用功,不是因为我要你跟别人比成绩,而是因为,我希望你将来会拥有选择的权利,选择有意义、有时间的工作,而不是被迫谋生。当你的工作在你心中有意义,你就有成就感。当你的工作给你时间,不剥夺你的生活,你就有尊严。成就感和尊严,给你快乐。
那天我问你,“你将来想做什么”,我注意到,你很不屑于回答我这个问题,所以跟我胡诌一通。是因为你们这个世代的人,对未来太自信,所以不屑与像我这一代人年轻时一样,讲究勤勤恳恳、如履薄冰,还是其实你们对于未来太没信心,所以假装出一种嘲讽和狂妄的姿态,来闪避我的追问?
我几乎要相信,你是在假装潇洒了。今天的青年人对于未来,潇洒得起来吗?法国年轻人在街头呼喊抗议的镜头让全世界都震惊了:这不是上世纪60年代的青年为浪漫的抽象的革命理想上街呐喊—戴着花环、抱着吉他唱歌,这是21世纪的青年为了自己的现实生计在烦恼,在挣扎。
从我的21岁到你的21岁,人类的自杀率升高了60%。你刻意闪避我的问题,是因为21岁的你,还在读大学的你,也感受到现实的压力了吗?
从18岁开始失业的画家
还记得我们在德国时遇见的那个画家—提摩吗?他从小爱画画,在气氛自由、不讲究竞争和排名的德国教育系统里,他一会儿学做外语翻译,一会儿学做锁匠,一会儿学做木工。毕业后找不到工作,一年过去了,两年过去了,三年又过去了,现在,应该是多少年了?我也不记得,但是,当年他失业时只有18岁,今年他41岁了,仍旧失业,和母亲住在一起。
没事的时候,他就坐在临街的窗口,画着长颈鹿。在他笔下,长颈鹿的脖子从巴士顶伸出来,穿过飞机场,走进一个正在放映电影的戏院……它睁着睫毛长长的大眼,盯着一个小孩骑三轮车。
因为没有工作,所以他没能结婚,自然也没有小孩。事实上,他一直过着小孩的生活。可是,他的母亲已经快80岁了。我担不担心你将来变成提摩?老实说,是的,我也担心。
把你当“别人”并不容易
我记得我们那晚在阳台上的谈话。你说:“妈,你要清楚接受一个事实,就是你有一个极其平庸的儿子。”你坐在阳台的椅子里,背对着大海,手里点着一支烟。那是清晨3点。
朋友若看见你在我面前点烟,一定会用一种不可置信的眼光望向我,“他怎么能在母亲面前抽烟?你又怎能容许儿子在你面前抽烟?”
我认真地想过这问题。我不喜欢人家抽烟,因为我不喜欢烟的气味,更不喜欢我的儿子抽烟,因为抽烟可能给他带来致命的肺癌。可是,我的儿子已经21岁了,是一个独立自主的成人。是成人,就得为他自己的行为负责,也为他自己的错误承担后果。一旦接受了这个逻辑,他决定抽烟,我要如何“不准许”呢?我有什么权力或权威来约束他呢?
我看着你点烟,翘起腿,抽烟,吐出一团青雾,恨不得把烟从你嘴里拔出来,丢向大海。可是我在心里对自己说,“请记住,你面前坐着一个成人,你得对他像对待天下所有其他成人一样。你不会把你朋友或一个陌生人嘴里的烟拔走,因此,你就不能把眼前这个人嘴里的烟拔走。他早已不是你的‘孩子’,他是一个‘别人’。”
青年的成长是一件不容易的事,大家都知道。但是,要抱着你、护着你长大的母亲学会“放手”,把你当某个程度的“别人”,也不容易啊!
如果你愿意去给河马刷牙
“你哪里‘平庸’了?”我说,“‘平庸’是什么意思?”
“我觉得我将来的事业一定比不上你,也比不上爸爸—你们俩都有博士学位。”听到这句话,我有点惊讶。
“我几乎可以确定我不太可能有爸爸的成就,更不可能有你的成就。我可能会变成一个很普通的人,有很普通的学历,很普通的职业,不太有钱,也没有名。一个最最平庸的人。”你捻熄了烟,“你会失望吗?”
现在我已忘了当时跟你怎么说的,说我不会失望,不管你做什么我都高兴,因为我爱你?或者很不以为然地跟你争辩“平庸”的哲学?或者很认真地试图说服你—你并不平庸,只是还没有找到真正的自己?
我不记得了。但是,我可以现在告诉你,如果你“平庸”,我是否“失望”。
对我最重要的,不是你有否成就,而是你是否快乐。而在现代的生活架构里,什么样的工作比较可能给你快乐?第一,它给你意义,你的工作不把你绑架,让你做工作的俘虏,第二,它给你时间,容许你去充分体验生活。
至于金钱和名声,哪里是快乐的核心元素呢?假如横在你眼前的选择是到华尔街做银行经理或者到动物园做照顾狮子河马的管理员,而你是一个喜欢动物研究的人,我就完全不认为银行经理比较有成就,或者狮子河马的管理员“平庸”。每天为钱的数字起伏而紧张而斗争,很可能不如每天给大象洗澡,给河马刷牙。
当你的工作在你心目中有意义,你就有成就感。当你的工作给你时间,不剥夺你的生活,你就有尊严。成就感和尊严,给你快乐。
我怕你变成画长颈鹿的提摩,不是因为他没钱没名,而是因为他找不到意义。我要求你读书用功,不是因为我要你跟别人比成就,而是因为,我希望你将来拥有更多选择的权利,选择有意义、有时间的工作,而不是被迫谋生。
如果我们不是在跟别人比名比利,而只是在为自己找心灵安适之所在,那么连“平庸”这个词都不太有意义了。“平庸”是跟别人比,心灵的安适是跟自己比。千山万水走到最后,我们最终的负责对象,还是“自己”二字。因此,你当然没有理由去跟你的上一代比,或者为了符合上一代对你的想象而活。
同样的,抽烟不抽烟,你也得对自己去解释吧。

展开阅读全文




其它就是细节上的CSS样式修改了,貌似都是视觉上的修改,具体也不知道改了哪里,会不会影响哪里,边看边折腾吧。

刚刚又把评论改成了使用ajax无刷新提交的方式,希望这样体验感好点。

写于2020年4月17日
酸甜苦辣咸,五味调和,共存相生,百味纷呈。

赞助 点赞 8 unread messages

伍子蛇, 格子老师, Ourboke联盟, 刘晨晨, 成人之美, 逆时针, Sam.Z, 阿和, 小陆花, cfanlost, 黑鸟博客, wys等人对本文发表了29条热情洋溢的评论。
  • 伍子蛇说道: 0
    其实你网站有个最大的问题,就是快速往上拉或者快速往下拉的时候页面会空白,也没看你的代码,不知道是不是大范围用了filter 这种css导致的。这是最大的体验不好,另外就是留言提交了,没有成功提示,我总不知道我是否提交成功了。 我班门弄斧了,一点小的建议
    1. Lvtu说道:
      回复 伍子蛇: 嗯,貌似是有这个问题,之前没快速拉过没发现,谢谢反馈! :thanks: 留言提交改成ajax时其实是有一个弹框提示的,感觉有点多余被我隐藏了 :lol:
  • 伍子蛇说道: 0
    这方法不好,建议封装一个Echat,在文章页也可以调用图表,用到的库要自己下到本地,不要调用墙外的东西,那可不用起来蛋疼。可以来看看我在文章中用的图表http://d-d.design/?p=10211
    1. Lvtu说道:
      回复 伍子蛇: 嗯,其实我的文章现在用到统计表比较少,另外技术有限,还没折腾到你那种高级别的程度 :wl: echat貌似BD家有一个库,不需要翻墙。。。。 :idea:
  • 格子老师说道: 1
    这篇文章开头 可以变色的背景真好看!!
  • 格子老师说道: 1
    “阅读全文” 可以修改成收费文档,点击之后就弹出支付,支付成功显示全文
    1. Lvtu说道:
      回复 格子老师: 还可以这样操作? :razz: 有源码吗? :idea:
      1. 格子老师说道: 1
        回复 Lvtu: https://suibi.qian.lu/1711.html 你看我这个站点的附件打赏,改一下前台的css 不就OK了!!插件地址 https://suibi.qian.lu/118.html
        1. Lvtu说道:
          回复 格子老师: 又要装插件,如非必要不喜欢安装插件。。。。 :lol:
  • 发表回复

    您的电子邮箱地址不会被公开。