关于QapTcha这个东东,很好玩,很有效。QapTcha是一个利用jQuery UI实现,易于使用,简单并且直观可拖动的jQuery Captcha系统。它让用户拖动一下来代替输入不易看清的验证码。我们可以利用它来实现验证码功能,抵御垃圾评论。
不过对于将QapTcha这东西集成到wordpress的介绍很少,目前看到好几位wper已经用上了,其中几位都是loper付费主题用户,通过google只搜索到了一篇文章,而且我集成之后无法使用AJAX评论功能。借此文章介绍一下该方法,以便大家一起捣鼓。
传统验证码要求用户先辨认(或者计算),然后敲击键盘输入结果。使用QapTcha仅需滑动一下鼠标,可以很好的提高用户体验。其原理是当滑动条滑动到指定位置时,会由后台发起一个请求,该请求会往session里加上一些内容,我们只要在提交的时候判断一下在session里有没有这些内容就可以了。
1、先去官网下载最新版的压缩包,解压。QapTcha依赖于jquery,其包内自带了jquery的js文件。这里假设qaptcha文件夹的路径为http://yourdomain/wp-includes/qaptcha。
2、找到QapTcha.jquery.js,大约在52行
0 1 2 3 |
// set the SESSION iQaptcha in PHP file $.post("php/Qaptcha.jquery.php",{//把这个地址改为"/wp-includes/qaptcha/php/Qaptcha.jquery.php" action : 'qaptcha' }, |
3、如果你要修改提示文字,在QapTcha.jquery.js,找到
0 1 2 3 |
var defaults = { txtLock : 'Locked : form can\'t be submited',//解锁前的提示文字 txtUnlock : 'Unlocked : form can be submited'//解锁后的提示文字 }; |
4、如果你要修改样式,请对照自己的主题修改QapTcha.jquery.css。
5、修改主题里的functions.php,加上
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function my_wp_head() {//这个函数里的内容当然也可以直接写到header.php里 if(is_singular() && !is_user_logged_in()) { echo '<script type="text/javascript" src="'.get_bloginfo("wpurl").'/wp-includes/qaptcha/jquery/jquery-ui.js"></script>'."\n"; echo '<script type="text/javascript" src="'.get_bloginfo("wpurl").'/wp-includes/qaptcha/jquery/jquery.ui.touch.js"></script>'."\n"; echo '<script type="text/javascript" src="'.get_bloginfo("wpurl").'/wp-includes/qaptcha/jquery/QapTcha.jquery.js"></script>'."\n"; echo '<link rel="stylesheet" href="'.get_bloginfo("wpurl").'/wp-includes/qaptcha/jquery/QapTcha.jquery.css" type="text/css" />'."\n"; echo '<script type="text/javascript"> $(document).ready(function(){ $("#QapTcha").QapTcha({disabledSubmit:true}); }); </script>'."\n"; } } add_action('wp_head', 'my_wp_head', 100); function my_preprocess_comment($comment) { if (!is_user_logged_in()) { if(!session_id()) session_start(); if(isset($_POST['iQapTcha']) && empty($_POST['iQapTcha']) && isset($_SESSION['iQaptcha']) && $_SESSION['iQaptcha']) { unset($_SESSION['iQaptcha']); return($comment); } else wp_die("抱歉,你没有通过验证。");//提示语自行修改 } else return($comment); } add_action('preprocess_comment', 'my_preprocess_comment'); |
6、然后修改主题的comments.php文件,找到你希望滚动条出现的位置,加上
0 |
<div id="QapTcha"></div> |
7、把文件上传到你的服务器,看看效果吧,然后再修改一下样式,直到自己满意为止。
update 2011.5.10 :
目前“良心发现”已经发布了他添加的方法,除上面必要的步骤外,需要注意一下几点:
1、$.post和主题有js冲突的,请自己修改 QapTcha.jquery.js 文件防止冲突,如:
0 1 2 3 4 |
// set the SESSION iQaptcha in PHP file var $js=jQuery.noConflict(); $js.post("/wp-content/Qaptcha.jquery.php",{ action : 'qaptcha' }, |
2、如果没有通过验证是返回一个wordpress提示,使用了“wp_die”函数。但是如果使用了Willin Kan的ajax提交评论的话,就必须得改改。可以看一下Willin Kan的comments-ajax.php 里面将“wp_die”改成了“err”。所以只要把上面代码中的wp_die改成err就没有问题了。
也就是以前第五步中间的后边部分:
0 1 2 3 4 5 6 7 8 9 10 |
function my_preprocess_comment($comment) { if (!is_user_logged_in()) { if(!session_id()) session_start(); if(isset($_POST['iQapTcha']) && empty($_POST['iQapTcha']) && isset($_SESSION['iQaptcha']) && $_SESSION['iQaptcha']) { unset($_SESSION['iQaptcha']); return($comment); } else err(__("抱歉,你没有通过验证。"));//提示语自行修改 } else return($comment); } add_action('preprocess_comment', 'my_preprocess_comment'); |
3、如果使用的ajax提交评论是很早期的版本,那么还需要注意,如果你添加之后在错误提示的时候导致网页变形,请查看源代码中错误提示的位置是否这样的
0 1 2 3 |
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>WordPress 错误</title> <link type="text/css" href="http://127.0.0.1/wp-admin/css/install.css" rel="stylesheet"> <p>重复发表评论,您好像发表过类似的评论。</p> |
目前发现少部分会出现这样的问题,当然也包括我,大部分都是正常的只显示<P>标签内得内容。
如果出现这样的错误,需要修改ajax评论的js文件里的
0 |
$('#commenterror').show('slow').html(request.responseText) |
改为
0 |
$('#commenterror').show('slow').html(request.responseText.replace(/<(?!p).*?>(?:.*?<\/.*?>)?/gi,'')); |
即可,这样就会过滤掉<meta><link>和<title>标签以及他们中间的内容,只留下需要的<p>标签。此方法来源于:qiqiboy
目前已知问题。
1、启用了willin大师的AJAX评论的童鞋无法修改提交按钮状态为disabled。
2、我启用QapTcha之后解锁状态下无法使用AJAX评论效果,不排除我是用的老版本AJAX的问题。
至于演示,请查看:http://www.3shi.net/add-qaptcha-to-wordpress/ 这里的评论栏效果。
本方法来源于:3shi天下
我删除了wp本身发评论的文件,用了ajax的那个文件,基本已经没了垃圾评论
是的,这样基本没有垃圾评论了,不过好玩得东东舍不得放过。 🙂
WP功能就是给力
良心好像解决了ajax这个问题
🙂 横天的,良心解决了AJAX的问题,不过没有解决评论按钮锁定的问题 😥 没他的主题,不知道如何解决的
你的主机是哪里的呀,好快 💡
你那空间偶尔抽风,顺便说下,你那按钮滑不动了,锁死了。 😆
这个不错。我用的那个验证插件很累人的。哈哈 😈
不需要AJAX得童鞋可以加上了
折腾这个的人挺多呀。
一起折腾才有意思
看了下,这个东西的判断语句会和willin的冲突喔.
有时间找找怎么绕开冲突.
同一个人15秒的评论间隔. 屏蔽重复的评论.
其实willin的评论判断已经够用了.
防机器人是够了.
当然也有人工手动的广告垃圾.
如果是人工的. 不管怎么防都防不住的
是够了,将wordpress根目录下的wp-comments-post.php删除后,你自己都会感觉不习惯。
折腾看看。。话说你的图出来的好慢
应该是防盗链的原因 🙂
和验证码相同呢 ❗
其实这就是另类的验证码功能
~~好的 我的站已经用上一个UI效果了。。要不再折腾一个!!
努力再折腾一个 🙂
这个用户体验不错,先收藏了,有时间折腾折腾。

还有个问题就是手机不能回复评论
当然,作者并没有写针对手机版的,不过最新版已经可以在IPAD下使用
一会折腾下~~!
不到迫不得已,决不上验证码,这玩意过于影响用户体验
其实我也老讨厌验证码什么的。
有趣
➡ 搞了一天,都不成功,不显示。
偶的喵上了,可惜木人用
你的博客没有安装这个?
因为目前使用willin kan的小墙基本能够应付目前的Spam。所以并没有添加此功能,毕竟,在新奇的验证码功能,也会降低用户体验。所以没到必要时候,我还没考虑加上它!
恩。willin kan的小墙还没有用过,呵呵,最近收到了3条垃圾评论,但是我也是很少遇到垃圾评论,是我的网站档次还不够。
你现在怎么取消掉了呢?没看见你博客上有啊
Pingback引用通告: 给WordPress加评论滑动解锁QapTcha验证 - W7C
Pingback引用通告: 给WordPress加评论滑动解锁QapTcha验证 – 你好!刘