网站建设

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

Jager · 8月7日 · 2015年 3848次已读

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

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

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

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

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

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

一、下载代码

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

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

二、部署代码

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

include(“myqaptcha/myQaptcha.php”);

三、修改代码

①、评论框

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

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

<input id="submit" class="submit" name="submit" type="submit" tabindex="5" value="提交评论"/>
<?php comment_id_fields(); do_action('comment_form', $post->ID); ?>

然后修改为:

<div id="autosubmit"></div>
<p style="display:none;"> <!-- 目的就是为了隐藏提交按钮 -->
<input id="submit" class="submit" name="submit" type="submit" tabindex="5" value="提交评论"/>
<?php comment_id_fields(); do_action('comment_form', $post->ID); ?>
</p>

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

②、ajax代码

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

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

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

修改很简单:

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

/** Ajax */
	$.ajax( {
		url: ajax_php_url,
		data: $(this).serialize(),
		type: $(this).attr('method'),

		error: function(request) {
			$('#loading').slideUp();
			$('#error').slideDown().html('<img src="' + pic_no + '" style="vertical-align:middle;" alt=""/> ' + request.responseText);
			setTimeout(function() {$submit.attr('disabled', false).fadeTo('slow', 1); $('#error').slideUp();}, 3000);
			},

		success: function(data) {
			$('#loading').hide();
			comm_array.push($('#comment').val());
			$('textarea').each(function() {this.value = ''});
			var t = addComment, cancel = t.I('cancel-comment-reply-link'), temp = t.I('wp-temp-form-div'), respond = t.I(t.respondId), post = t.I('comment_post_ID').value, parent = t.I('comment_parent').value;

然后如下修改即可:

/** Ajax */
	$.ajax( {
		url: ajax_php_url,
		data: $(this).serialize(),
		type: $(this).attr('method'),

		error: function(request) {
			$('#loading').slideUp();
			$('#error').slideDown().html('<img src="' + pic_no + '" style="vertical-align:middle;" alt=""/> ' + request.responseText);
			setTimeout(function() {$submit.attr('disabled', false).fadeTo('slow', 1); $('#error').slideUp();}, 3000);
			$(".QapTcha").html('');$(".QapTcha").QapTcha();//新增刷新模块代码
			},

		success: function(data) {
			$('#loading').hide();
			comm_array.push($('#comment').val());
			$('textarea').each(function() {this.value = ''});
			var t = addComment, cancel = t.I('cancel-comment-reply-link'), temp = t.I('wp-temp-form-div'), respond = t.I(t.respondId), post = t.I('comment_post_ID').value, parent = t.I('comment_parent').value;
			$(".QapTcha").html('');$(".QapTcha").QapTcha();//新增刷新模块代码

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

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

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

//js_url = js_url.replace('res.zgboke.com','zhang.ge'); 若是用到CDN,请自行修改下此行,并取消注释

四、更多吐槽

①、不显示?

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

function myQaptcha_wp_footer() {
   if (is_singular() && !is_user_logged_in()) {

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

function myQaptcha_wp_footer() {
   if (is_singular()) {

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

②、整站暗链

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

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

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

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

③、不动脑筋

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

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

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

再啰嗦一个例子:

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

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

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

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

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

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

69 条回应
  1. 老杨2015-8-7 · 14:51

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

  2. 老杨2015-8-7 · 16:10

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

    • Jager2015-8-7 · 16:13

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

      • 老杨2015-8-7 · 16:21

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

        • Jager2015-8-7 · 16:22

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

          • 老杨2015-8-7 · 16:24

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

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

            • Jager2015-8-7 · 16:26

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

  3. 陌小雨2015-8-7 · 18:14

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

    • 陌小雨2015-8-8 · 11:34

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

      • Jager2015-8-8 · 11:42

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

        • 老杨2015-8-8 · 11:55

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

          • Jager2015-8-8 · 13:20

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

            • 老杨2015-8-8 · 14:33

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

  4. World2015-8-8 · 9:23

    沙发!
    赞一个 :mrgreen:

    • 老杨2015-8-8 · 16:39

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

      • World2015-8-9 · 10:03

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

        • Jager2015-8-9 · 11:07

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

  5. 学车族2015-8-8 · 21:45

    这个是为了垃圾评论吗

    • Jager2015-8-9 · 11:07

      听说有点效果

  6. Sawyer2015-8-10 · 0:35

    不明觉叼,有空来折腾下

  7. 男生女生银版2015-8-10 · 10:55

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

  8. 技术咖!牛叉! 学习了

  9. 吃过没|chiguomei.cn2015-8-10 · 20:53

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

  10. 全网目录2015-8-11 · 11:12

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

  11. boke112导航2015-8-11 · 12:46

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

  12. 群伟伟博客2015-8-12 · 14:08

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

  13. shark2015-8-12 · 15:59

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

    • Jager2015-8-13 · 10:38

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

  14. 胡歌网摘2015-8-13 · 16:37

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

  15. 网赚论坛2015-8-14 · 13:37

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

  16. 水族论坛2015-8-14 · 14:20

    不错,张哥人很好!

  17. 问鼎2015-8-15 · 14:29

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

    • 懿古今2015-8-21 · 11:09

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

      • Jager2015-8-21 · 12:57

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

  18. kkkk2015-8-16 · 6:58

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

  19. asxzx2015-8-19 · 15:34

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

  20. 微部落博客2015-8-21 · 8:50

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

  21. 懿古今2015-8-21 · 11:08

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

    • Jager2015-8-21 · 12:56

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

      • 懿古今2015-8-21 · 14:48

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

  22. Zou's Blog2015-8-21 · 13:29

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

  23. 同盟源2015-8-21 · 16:38

    这个不错,

  24. 企业短信服务平台2015-8-24 · 15:45

    谢谢博主分享

  25. shark2015-8-28 · 22:58

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

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

  26. 5282015-9-13 · 21:56

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

  27. 帅气小琦琦2015-9-19 · 16:04

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

    • Jager2015-9-19 · 19:48

      个人博客,随心即可。

  28. ae2015-9-26 · 20:01

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

  29. 大奔来袭2015-11-13 · 11:52

    谢谢分享

  30. 帅气小琦琦2015-12-8 · 10:08

    一直处于正在提交中

  31. 爸爸八佰伴2016-2-23 · 1:35

    000000000000000呵呵哈哈哈000000000

  32. 番茄2016-4-23 · 11:27

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

  33. 明月登楼2016-5-4 · 16:40

    我还是先收藏了吧!

  34. kailiuwang2016-5-30 · 23:24

    体验一下,看看效果怎么样 😀

  35. 水哥2016-7-19 · 14:39

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

  36. Aron2016-10-16 · 7:19

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

    • Jager2016-10-16 · 8:53

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

  37. TOKUL2016-12-9 · 18:39

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

  38. NVZA2017-7-10 · 13:05

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

    • Jager2017-7-12 · 14:05

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

      • NVZA2017-7-12 · 14:56

        comment-ajax.php 405报错

  39. NVZA2017-7-10 · 13:08

    没有使用加速

  40. 小童2017-8-5 · 9:35

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

  41. 米虫2017-11-14 · 14:59

    确实可以大大提高用户体验度,学习了~

  42. 许小珂2019-1-27 · 22:17

    很不错的分享