网站建设

解决升级Wordpress 5.1后回复评论框不跟随、页面刷新问题

近期,发现博客存在不少问题,先是发现图片暗箱、JS二维码失效了,接着评论点击回复按钮页面直接刷新,而没有评论框跟随效果,直到今天居然连网站CSS图标也挂了。。。 不能忍,决定花点时间看看到底是啥问题,打开F12并没有发现明显报错,既然是CSS图标挂了,那应该是我外链到fontawesome的css地址有问题。于是过滤了下这个地址,发现居然是301?? 类似情况如下: 原来是 cdn.bootcss.com 的CDN资源全部跳转到了 cdnjs.com 首页(这个做法有点醉),而我的博客好多功能都引用了这个CDN,所以都异常了! 最后找了个替代CDN:https://cdnjs.net/ ,替换之后图片暗箱、二维码、CSS图标、延迟加载等功能都恢复了,但是评论回复按钮还是异常刷新的! 最后和鸟哥交流了下,他说是WordPress升级到5.1.1导致的。网上找了下才发现是自己out了,不少博客已经给出了解决方案,比如懿古今博客:《WordPress 5.1评论回复按钮失效评论框不跟随怎么办?》。 不过,鸟哥给了我一个更简单的解决办法(可以免去刷新CDN缓存、浏览器缓存的麻烦): 如果是begin主题,直接在functions.php里面找到:zmingcx_scripts 函数,在最后一个 } 之前加上: 这段代码其实就是在页面加载一段JS: 所以,非begin主题,只需要在主题的header.php加上如下代码即可: 这样就问题就解决了!
阅读全文
WEB应用

解决网站404页面返回200状态码问题

好久没打理博客,突然收到CDN流量预警,发现平均每天40G流量消耗!what?就现在这个访问量,不存在的。看了下CDN日志发现有小人一直在请求博客页面,其中被请求最多的就是CCkiller防御工具那个文章地址。 呵呵,我就写一个简单的防御小工具,惹着你啦?实际上我用了CDN,也并没有安装这个工具,所以想试探、想测试效果的麻烦自己去安装使用,攻击我博客毫无意义,挂了又能怎么样? 废话就扯这么多,进入正题。 看日志的时候,我发现有大量请求到了博客其实并不存在的地址,但是返回码居然是200??这就不正常了,于是手工访问了一下一个不存在的页面,虽然WordPress在前台给我展示了一个404页面,但是浏览器显示返回码确实是200!!纳尼? 还以为WordPress更新后改了这个机制呢,把主题下的404.php加了一个强行的404返回码,发现没有任何效果。 最后发现,居然是自己以前把404页面静态化留下的坑! 原因很简单,当时经常有人攻击一些不存在的页面,也就是每次都是动态的404,服务器自然就容易高负载,因此做了一个静态化处理: 通过curl请求一个不存在的地址,触发404返回内容,然后保存在网站的某个目录下,比如xxxx下面: 然后,在Nginx Vhost下新增404响应规则: 重启Nginx之后,再访问不存在的博客页面的时候,Nginx就直接返回404.html的内容了,从而实现404页面的静态化。 但是,Nginx这里我写错了,导致每次返回404.html都是200返回码!!这样其实会误导搜索引擎的判断,以为页面是存在的。。。。大坑。 正确的Nginx配置方法应该是: 也就是不用等号,而是用空格!修改后,重启Nginx,然后访问不存在的地址发现已经是404返回码了,问题解决!
阅读全文
WEB应用

网站集成打字震动特效JS代码改进版

这又是一个拖欠了很久的分享,很早就有朋友留言问评论打字炫彩、震动特效怎么实现的。这功能其实网上早就有人分享N遍了,有点搜索技巧和DIY能力的站长同学也早就实现了。这里还是继续分享一下我这边的一些改进,也许有朋友可以用得到。 简单的改进: 1、移动端关闭震动,移动端震动会显得很卡; 2、添加震动开关,方便不喜欢的朋友进行关闭,采用Cookie记忆同一个浏览器点击关闭一次即可。 Ps:没什么技术含量,略懂JS语法的朋友完全可以自己继续发挥。 以下是简单的部署步骤(不限于WordPress,标准HTML网页均可使用): 1、将以下代码保存为js文件,比如 apm-min.js 上传到网站主题目录: 比如最终得到的JS地址:https://www.domain.com/wp-content/themes/begin/js/apm-min.js 能够在浏览器正常访问即可。 2、WordPress在主题的评论模板文件 comments.php中引入如下代码(位置随意),其他网站程序可以集成到网页的页脚等位置: 3、在想要出现震动开关的位置添加按钮代码: Ps:每个人网站风格不一样,这个按钮样式就不给CSS代码了,自行DIY修改吧。 效果预览:在本页留言即可看到效果。 之前很多朋友留言说震动太难受了,我只能说那么大个红色开关,你却视而不见?说明观察力有待提高啊!
阅读全文
网站建设

博客集成Hitokoto·一言经典语句功能

Hitokoto·一言是一个挺有意思的项目,官方的自我介绍如下: 一言网(Hitokoto.cn)创立于2016年,隶属于萌创Team,目前网站主要提供一句话服务。 动漫也好、小说也好、网络也好,不论在哪里,我们总会看到有那么一两个句子能穿透你的心。我们把这些句子汇聚起来,形成一言网络,以传递更多的感动。如果可以,我们希望我们没有停止服务的那一天。 简单来说,一言指的就是一句话,可以是动漫中的台词,也可以是网络上的各种小段子。 或是感动,或是开心,有或是单纯的回忆。来到这里,留下你所喜欢的那一句句话,与大家分享,这就是一言存在的目的。 自己用了好一段时间了,看到有不少朋友在问文章底部那个一句话是怎么实现的,所以这里来分享下。 一、他山之石 张戈博客之前是调用的自由天空的一言API接口,稳定性和速度还不错,不想折腾的朋友推荐参考他的教程快速部署一个即可。 Ps:喜欢使用官方接口也可以前往官方的API介绍地址参考部署:http://hitokoto.cn/api 如果是像我这种比较喜欢折腾的朋友,可以考虑自己部署一个,主要是方便DIY句子库内容。当然,自己部署的文章其实也已经有博友分享过了==>传送门 。 下面简单的介绍下张戈博客这边的DIY部署过程。 二、部署接口 首先按照我个人编码习惯,把小霖小朋友的代码略微改了下(代码强迫症): 以上代码保存为index.php,然后上传到网站根目录下的hitokoto文件夹(这个自己随机定义)最后,从小霖分享的文章下载hitokoto.txt文本文件 当然这里我也传了一份到微云网盘,方便大家下载: 下载地址:https://share.weiyun.com/cff40cfd057fca81fde3aeb6f00fbfb1 把hitokoto.txt上传到和index.php同级目录,比如hitokoto文件夹内。 现在,浏览器访问 http://你的域名/hitokoto/ 就可以看到输出内容了。 三、博客集成 第一步我们已经完成了这个接口的自建部署,现在可以把这个功能搬到博客上了。 部署方法和其他博客基本一致,非常简单,将下面两行代码添加到博客你想显示一言的位置即可: 不过,这样输出的样式可能会比较丑,如果你懂CSS的话可以自己再美化美化。 当然,Begin主题或者不会css的朋友可以先试下我这边写好的css代码(可以加到style.css): 部署完成之后,前台刷新应该就可以看到效果了,每次刷新都会随机展示一言经典句子。如果你有新的句子,也只要编辑hitokoto.txt文件加入即可。 好了,文章就介绍这么多,喜欢的朋友可以试下了。
阅读全文
网站建设

WordPress发布/更新文章、提交/审核评论自动清理阿里云CDN缓存

使用过CDN的朋友多少都有过文章更新无法自动删除CDN缓存的困惑,针对这个痛点,张戈博客也是多次发布相关教程,为广大草根站长朋友们解惑,比如: WordPress发布/更新文章、提交/审核评论自动清理腾讯云CDN缓存 WordPress发布/更新文章、提交/审核评论自动清理VeryCloud缓存 Nginx-helper纯代码版,文章评论发布自动清理Fastcgi缓存 但是,仍然不能满足博友们的诉求,于是很多朋友留言、邮件给我,要我帮忙写一个XX云CDN的自动清理功能之类的请求,我一般都是给出了敬请期待之类答复。 由于本人日常工作非常繁忙,所以只能一再跳票,今天难得得空,正好研究下阿里云CDN的缓存清理。 实际上,这些XX云CDN基本都有一些SDK接口文档,有点基础的朋友多花点时间撸一撸都能自己写出来,再说张戈博客之前还分享了好几篇类似教程,依葫芦画瓢总会吧?总不能因为有个XX云就要写一个XX云CDN清理教程吧?写完了XX云可能很快又会有一个OO云了。。。所以,掌握套路才是解决问题的关键! 好了,废话不多说,直接上教程。 一、准备工作 ①、开启CDN缓存 这里应该无需多言,如果存在CDN缓存不刷新困惑,肯定已经在CDN配置了文章、首页或目录缓存机制,否则也就不需要清理页面缓存了。 ②、申请认证密钥 阿里云密钥管理地址:https://ak-console.aliyun.com/#/accesskey 申请成功后,得到如图的AccessKey和AccessSecret,保存备用。 二、使用方法 ①、下载代码 为方便维护,代码已提交到github,请前往github下载或使用git clone命令克隆服务器本地: 然后,将refresh-aliyun-cdn-for-wordpress文件夹,上传到WordPress主题目录: ②、部署代码 编辑refresh-aliyun-cdn-for-wordpress文件夹下的api.php文件,按照实际情况修改如下代码:   保存后,修改WordPress主题函数模板文件functions.php,在<?php 之后加入如下代码并保存: 最后,如果PHP开启了opcache功能,还需要重启下php确保代码正常生效。 Ps:本文代码基于阿里云官方PHP-SDK代码修改,官方SDK包含了阿里云所有接口功能代码,单由于我们只用到CDN清理功能,所以其他功能代码已被我精简删除。 三、验证效果 完成上述部署操作后,我们可以进行效果验证了。验证方法很直观,我们先确保api.php文件中已将日志打开: 然后,我们在服务器上使用tail -f查看日志: 最后,我们试着更新文章、发表评论或审核评论,就会看到如下效果了: 当然这只是日志,你还可以实际修改下文章内容,然后在浏览器对比下修改前后的内容是否发生改变。 好了,关于阿里云CDN缓存的刷新就介绍这么多,后面有空再补充下百度云CDN的刷新教程,敬请期待!
阅读全文
网站建设

解决网站静态缓存后WP-PostViews插件不计数的问题

突然发现文章浏览计数功能失效了,文章发了几个月才几十上百的浏览数,本以为是因为最近发的文章都比较冷门,不受欢迎。但是发布了几个月,才不到2百的访问量,这就不合理了。 一、发现问题 于是花时间分析了下,结果一查网站日志,发现浏览计数的请求居然一个都没有。。。 由于网站开启了纯静态缓存(nginx_fastcgi_cache),所以wp-postviews的计数方式会自动改为ajax提交方式,正常情况下,Nginx日志里面会出现如下请求记录: 而我翻看了最近半个月的Nginx日志,只有寥寥数条,看来确实有情况。 二、解决问题 首先,我打开了一篇文章,按下F12,再刷新该页面,在NetWork内容中搜索我熟悉的admin-ajax,发现没有记录,甚至搜索php关键词都没有任何请求记录,直接在页面源码中搜索关键词也是一无所获,看来确实没有浏览计数代码了。 我以为是更新了WP导致PostViews插件不工作了,于是打开WP-PostViews源码看了下,发现有如下逻辑代码: 发现了开启ajax计数的必要条件:开启WP_CACHE缓存!!!!! 鉴于对WP的熟悉程度,我直接打开了wp-config.php文件,发现果然是我自己注释了如下代码: 估计是之前调试网站的时候注释掉了。 于是取消注释,重载php-fpm,并清理Nginx静态缓存后,前台熟悉的ajax代码就回来了: 再看了下Nginx日志,admin-ajax.php?xxx的请求也回来了,看来浏览计数功能已恢复正常。 三、结论分析 ①、为什么并非完全不计数或只计数一次? 回溯了下过程,很明显的发现,文章发布后还是有计数的,只是计数非常少,这是为什么?实际上,原因非常简单,文章在首次缓存的时候,WP-PostViews其实是会工作一次的,使用的是非缓存环境下的php计数。计数之后,文章就缓存下来了,再次访问就不会再更新计数了,直到有人发表了评论或者缓存到期,导致缓存被刷新,才会再一次发起浏览计数!这就是为啥并非不计数或只计数一次的原因了。 ②、WP-PostViews缓存环境下计数的条件 这个问题很常见,刚我还搜了下,发现也有不少和我这个类似的情况。也就说,PostViews插件会去判断WP是否开启了缓存(WP_CACHE),若开启了则使用ajax的计数方式,否则使用php计数方式。 因此,如果你使用的是非PHP的缓存机制,比如Nginx的fastcgi_cache或者proxy_cahe,那么必须在wp-config.php里面开启WP_CACHE: 让插件知道你的网站是有缓存机制的。要不然,你就得修改插件,去掉这个判断,让插件强行在页面中插入ajax计数代码了。
阅读全文