WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的方法

自从肉牛、钢材等垃圾评论泛滥,很多朋友都用上了各种评论验证方案,其中一个比较惹眼的就是张戈博客目前在用的myQaptcha滑动解锁。WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的方法

很久之前张戈博客已经分享了这个滑动解锁的代码部署教程。不过还是有很多朋友眼馋张戈目前在用的滑动后自动提交评论的方案,各种留言求分享。

其实,这个功能的想法是从无主题博客小武那“剽窃”过来的,小武第一个想到滑动后自动提交,才能进一步提高用户体验,毕竟少了一步操作嘛!稍微会折腾的朋友,其实分析一下就能自己写代码了,根本用不到分享。

原理很简单:先用css隐藏评论提交按钮,然后将评论提交动作绑定到滑动解锁上即可。

好吧,张戈好人做到底,整理一下详细的做法(发现很多朋友都喜欢看张戈罗里吧嗦。。。)

WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的方法

一、下载代码

为了省去如何修改代码洋洋洒洒的几百字,张戈决定直接将修改好的代码打包分享出来:

下载解压后,将得到的myqaptcha文件夹整体上传到WordPress主题目录下备用。

二、部署代码

部署很简单,编辑WordPress主题目录下的 functions.php,在<?php 之后添加如下代码保存即可:

include("myqaptcha/myQaptcha.php");

三、修改代码

①、评论框

为了配合这个自动提交,我们必须修改一下评论框的提交按钮代码。

打开 WordPress 的评论模板,一般是 comments.php ,找到如下类似代码:

然后修改为:

Ps:每个主题写的代码可能会不一样,但是评论提交的按钮代码是类似的(submit),这也不会找的话建议不要折腾这个花哨的功能了。

②、ajax代码

可以看出来,张戈博客这个滑动自动提交和Ajax评论提交是绝配。如果你博客的评论不是ajax模式(即点击提交评论页面会刷新),那么ajax代码这一步就不用做啦!

使用ajax评论模式的网站,绝大部分会用到 comments-ajax.js 这个js文件。

为了配合这个自动提交,我们需要简单的改造一下这个js。目的是为了滑动模块后,不管是评论提交成功还是失败,模块都应该恢复到未拉动的状态,以备再次评论!总不能滑动评论一次就不能评论了吧?

修改很简单:

编辑  comments-ajax.js 找到如下代码:

然后如下修改即可:

很明显,也就新增了2行JS代码,作用就是为了在aja评论成功或失败后,复原滑动模块,让滑动模块可以再次使用!

另外,张戈也在下载包里提供了自用 comments-ajax.js,不会修改的可以参考或直接替换即可。

Ps:如果博客用了CDN,请编辑  comments-ajax.js ,找到 如下代码,自行修改下:

四、更多吐槽

①、不显示?

部署完之后,如果发现滑动模块不显示了怎么办?很可能你用的就不是张戈提供的代码,而是直接在原版插件啥修改而成。这时候请编辑 myQaptcha.php 这个文件,找到如下语句:

然后去掉登陆判断,如下修改即可:

Ps:原因就是原版插件并不是替换提交按钮,所以已登录用户并不需要滑动解锁!如果在原版基础上修改成滑动提交,那么不管是否登陆这个滑动模块都应该显示才行!!!

②、整站暗链

知更鸟博主鸟哥,在分享这个他修改版的滑动解锁插件时,提到了这个插件会往评论框写入一个隐藏的a标签(不得不说作者三十岁还是动了一点歪脑筋的)。

不过汗颜的是,当初张戈分享这个插件的时候,鬼使神差的将这个暗链改成了我自己的博客地址(哈哈)。当时其实是看不太懂JS代码的,只是看到了别人的网址不爽,就下意识的改成了自己的博客地址,然后还分享出去了。。。。

其实吧,这是一个废暗链,毫无作用。因为用到但是JS输出的方式,搜索引擎并不会解析这个代码。。

这次张戈分享的代码,已经注释掉了这个小聪明,大伙可以放心使用。

③、不动脑筋

自动提交的原理很简单,说白了就是将原有的提交按钮用css样式隐藏掉,然后在滑动动作绑定一个点击隐藏的提交按钮的机制,这样用户滑动模块,就会自动点击那个隐藏的提交按钮了,从而实现自动提交!

并不高明的技术,但是很多朋友就是不理解,部署起来,只要遇到小问题就卡死胡同了。完全不会自己去学习一下网站的基础技术,比如简单的js、css等。总是把希望寄托在他人身上,殊不知他人也是从小白过来的,和你最大的区别也就是比你动的脑筋多一些而已。

折腾网站这种事,适合喜欢动脑筋的勤快人,那些既不会技术又不愿意想事情的人,建议不要折腾这些花哨无用的功能,还是专注内容比较好!

再啰嗦一个例子:

张戈博客早期的文章《WordPress评论滑动/拉链解锁myQaptcha代码版及部署方法》已经分享了代码部署的方法。

这篇文章中提到了因 Jquery 版本问题导致无法滑动。完了问题来了,很多朋友各种提问,Jquery 版本是怎么升级或怎么降级的?我擦,这问题实在是太那啥了!你实在搞不清楚怎么升级 Jquery,你就不会查看张戈博客的网页源代码,从里面找到JQ的连接,然后下载走么???

我估计 Jquery 是什么都不清楚吧,可是为啥不百度呢?

WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的方法

另外,部署后若发现位置错乱的请自行解决,代码是不可能兼容每个主题的CSS样式和布局。

好了,这些分享的包应该已经解决了这个JQ版本不兼容问题,感谢知更鸟博主鸟哥提供的方案。

文件下载

无限续期,永久免费科学上网服务,你值得拥有!

发表评论

gravatar

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

刷新评论

目前评论:67   其中:访客  53   博主  14

  1. 老杨 4 来自天朝的朋友 火狐浏览器 Windows 7 广东省揭阳市 电信

    咦,点击下载按钮提示加载失败……

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

      百度缓存坑了。。
      点这个:
      http://pan.baidu.com/s/1o6BYhEa

      • 老杨 4 来自天朝的朋友 火狐浏览器 Windows 7 广东省揭阳市 电信

        谢谢,刚点了点下载按钮,链接可以出来了。

  2. 老杨 4 来自天朝的朋友 火狐浏览器 Windows 7 广东省揭阳市 电信

    有小 bug?按照代码,登录用户提交按钮和滑动解锁都没有?

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

      我看你已经部署了一个,也有自动提交功能。

      • 老杨 4 来自天朝的朋友 火狐浏览器 Windows 7 广东省揭阳市 电信

        嗯,参考你的教程刚加上的。谢谢。话说你这里的评论缓存很难刷出来,直接访问评论链接才出来了呢。

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

          嗯,有2层缓存的。
          点击工具条刷新评论可以看到最新的。

          • 老杨 4 来自天朝的朋友 火狐浏览器 Windows 7 广东省揭阳市 电信

            找了好久没找到手动刷新按钮,以为你撤掉了呢。

            现在才发现在右下角,囧……

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

              评论工具条也有一个啊,嵌套回复宽度太窄被隐藏了。。。这个功能一般就我自己用来回复而已,不用太明显。其他人一般点过来的连接是不缓存的。

  3. 陌小雨 5 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 联通

    xiu主题真的不是一般的主题,不能拿来直接就用。

    • 陌小雨 5 来自天朝的朋友 火狐浏览器 Windows 7 广东省广州市 联通

      本地测试,修改了下,不过提交成功后一直显示正在提交呀,还有就是博主的回复不知道怎么提交了,难道只能后台回复。。。

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

        滑动相当于替代了按钮,博主前台回复,原来按钮在,那么滑动就在。如果看不到说明div位置添加有问题。
        一直显示正在提交,一般F12看报错信息,猜测是前台加载的 php 路径错了。

        • 老杨 4 来自天朝的朋友 Safari浏览器 iPhone iPhone OS 8_3 like Mac OS X) AppleWebKit 广东省 电信

          插件代码不是排除了登录用户?我试过把排除的判断语句去掉,依然是出不来,还需要另外加东西?

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

            理论上有div,js就会插入一个滑动模块。。。之前登录用户都有提交按钮,那应该就有滑动模块。。只能具体情况具体分析了。

            • 老杨 4 Singapore 火狐浏览器 Windows 7 香港 SoftLayer机房

              嗯,可以了,之前是删除判断条件了。

  4. World 3 来自天朝的朋友 谷歌浏览器 Windows 10 广东省深圳市 电信

    沙发!
    赞一个 :mrgreen:

    • 老杨 4 Singapore 火狐浏览器 Windows 7 香港 SoftLayer机房

      哈哈,这里很明显不是沙发了。

      • World 3 来自天朝的朋友 谷歌浏览器 Windows 7 广东省佛山市 电信

        那天进来的时候看还没有评论 以为是沙发

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

          被缓存坑了。。。
          抢沙发前点击右下角绿色刷新按钮即可防坑。

  5. 学车族 2 来自天朝的朋友 火狐浏览器 Windows XP 广东省东莞市 电信

    这个是为了垃圾评论吗

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

      听说有点效果

  6. Sawyer 2 来自天朝的朋友 Safari浏览器  Android 4.4.4 MI 3W Build/KTU84P 湖北省武汉市 电信

    不明觉叼,有空来折腾下

  7. 男生女生银版 4 来自天朝的朋友 搜狗浏览器 Windows 7 广东省广州市 电信

    额。。。不知道哪里错了,出现两个横条

    • 男生女生银版 4 来自天朝的朋友 搜狗浏览器 Windows 7 广东省广州市 电信

      我的

      • 男生女生银版 4 来自天朝的朋友 搜狗浏览器 Windows 7 广东省广州市 电信

        几经周折,还是暂时放弃了!。。。。主题的一些事件找不到。。

  8. 谭话网校免费获取各类考试资料 0 来自天朝的朋友 QQ浏览器 Windows 7 北京市 创新为营网络通信科技有限公司

    技术咖!牛叉! 学习了

  9. 吃过没|chiguomei.cn 1 来自天朝的朋友 火狐浏览器 Windows 8.1 山东省潍坊市 电信

    确实深受其害。还有一些用户注册进来老是打草稿,占用空间。

  10. 全网目录 0 来自天朝的朋友 谷歌浏览器 Windows 7 广西贵港市 电信

    很赞的功能,好多博客都使用了

  11. boke112导航 5 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 电信

    其实这个滑动就提交评论的设计挺方便的

  12. 群伟伟博客 2 来自天朝的朋友 谷歌浏览器 Windows XP 广东省佛山市南海区 联通

    我是群伟伟博客,来看看支持下。[嘻嘻]

  13. shark 0 来自天朝的朋友 Netscape Navigator iPhone iPhone OS 8_3 like Mac OS X) AppleWebKit 辽宁省沈阳市 电信

    支持其他的博客系统麽???有教程麽其他的博客程序怎样部署啊? :?:

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

      理论上支持,不过需要自己研究。

  14. 胡歌网摘 4 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省温州市 电信

    牛逼,这功能不错,只是我不想去折腾了。

  15. 网赚论坛 0 来自天朝的朋友 谷歌浏览器 Windows XP 广东省珠海市 电信

    折腾网站这种事,适合喜欢动脑筋的勤快人,那些既不会技术又不愿意想事情的人,建议不要折腾这些花哨无用的功能,还是专注内容比较好!这句话说的对,有时候不懂一弄又把网站弄坏了

  16. 水族论坛 1 来自天朝的朋友 谷歌浏览器 Windows 7 北京市 北龙中网

    不错,张哥人很好!

  17. 问鼎 0 来自天朝的朋友 Safari浏览器  Android 4.4.1 V8 Build/JDQ39 广西河池市金城江区 电信

    博主的固定连接什么弄得,才4个数字,求教

    • 懿古今 3 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 电信

      这个是文章ID数的,你文章越多,ID数字就越大了

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

        目前是人工数字别名,为了完美连续。

  18. kkkk 0 来自天朝的朋友 谷歌浏览器 Windows 7 贵州省黔东南州凯里市 电信

    验证码没漏洞 你这个单一可能的很容易被破解

  19. asxzx 1 来自天朝的朋友 火狐浏览器 Windows 7 北京市 星光数据中心IDC机房

    签到成功!签到时间:下午3:25:38,每日签到,生活更精彩哦~

  20. 微部落博客 4 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省常州市 电信

    滑动评论的设计,的确能防止一些机器刷垃圾评论

  21. 懿古今 3 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 电信

    谢谢分享,本站已经成功实现该功能

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

      还是会折腾的比较好,很多人折腾半天都搞不定。

      • 懿古今 3 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 电信

        文章介绍得非常详细了,就修改那么三个文件,挺简单的

  22. Zou's Blog 0 来自天朝的朋友 QQ浏览器 Windows 10 湖北省咸宁市 电信

    太快了 实在是太快了 每次来你博主我都这样想 :lol:

  23. 同盟源 5 来自天朝的朋友 谷歌浏览器 Windows 10 安徽省芜湖市 电信

    这个不错,

  24. 企业短信服务平台 2 来自天朝的朋友 谷歌浏览器 Windows XP 河南省郑州市 联通

    谢谢博主分享

  25. shark 0 来自天朝的朋友 谷歌浏览器 Windows 7 辽宁省大连市 联通

    可惜手脚不利索要不我也整这么一个验证….自己折腾不起来啊。惭愧惭愧

    签到成功!签到时间:下午10:55:48,每日签到,生活更精彩哦~

  26. 528 0 来自天朝的朋友 谷歌浏览器 Windows 7 福建省龙岩市 联通

    pc端很完美,但是移动端发布成功后按钮无法弹回去。一直显示“正在提交”。请问博主这个问题需要怎么解决?

  27. 帅气小琦琦 4 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省 电信

    确实是少了一个步骤,但是我还是比较习惯那种华东再提交的方式,总感觉有双重保险的感觉 哈哈

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省深圳市 联通

      个人博客,随心即可。

  28. ae 1 来自天朝的朋友 谷歌浏览器 Windows 8.1 福建省福州市 电信

    签到成功!签到时间:19:26:53,每日签到,生活更精彩哦~

  29. 大奔来袭 0 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 电信

    谢谢分享

  30. 帅气小琦琦 4 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信

    一直处于正在提交中

  31. 爸爸八佰伴 0 来自天朝的朋友 QQ浏览器 Windows 7 山东省青岛市 联通

    000000000000000呵呵哈哈哈000000000

  32. 番茄 0 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 星光数据中心IDC机房

    我就想要你这文章结尾的点赞插件。

  33. 明月登楼 5 来自天朝的朋友 谷歌浏览器 Windows 10 河南省南阳市 联通

    我还是先收藏了吧!

  34. kailiuwang 1 来自天朝的朋友 谷歌浏览器 Mac OS X 10_11_4 辽宁省抚顺市 联通

    体验一下,看看效果怎么样 :grin:

  35. 水哥 0 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 联通

    水水更健康 :mrgreen: :mrgreen: :mrgreen: :mrgreen:

  36. Aron 1 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 移动

    张大神,使用了百度云加速CDN全站静态化后,Ajax评论失效,你可有解决办法

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Mac OS X 10_11_3 广东省深圳市 移动

      谷歌浏览器按下F12看评论提交后的报错信息,基本的DEBUG思路,做网站的都应该知道。

  37. TOKUL 0 Taiwan; Republic of China (ROC) 火狐浏览器 Windows 10 台湾省 中华电信

    QQQQQQ 评论必须含中文! 评论必须含中文! 评论必须含中文!

  38. NVZA 2 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

    按照方法操作后,评论滑块正常显示,但是滑动到底一直显示正在提交,不会弹回,而且填写评论内容后点击滑动解锁,又提示“滑动解锁才能提交”,是怎么回事,求救

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

      按下F12,切换到network界面,拉动滑块,查看报错是什么。

      • NVZA 2 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

        comment-ajax.php 405报错

  39. NVZA 2 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

    没有使用加速

  40. 小童 0 来自天朝的朋友 谷歌浏览器 Windows 7 湖南省长沙市 电信

    博主,赞下面的那一段话是怎么实现的,想知道 :?:

加载中,请稍候...