给wordpress加上QapTcha验证

关于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行

// 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，找到

var defaults = {

txtLock : 'Locked : form can\'t be submited',//解锁前的提示文字

txtUnlock : 'Unlocked : form can be submited'//解锁后的提示文字

};

4、如果你要修改样式，请对照自己的主题修改QapTcha.jquery.css。

5、修改主题里的functions.php，加上

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 文件防止冲突，如:

// 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就没有问题了。

也就是以前第五步中间的后边部分：

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提交评论是很早期的版本，那么还需要注意，如果你添加之后在错误提示的时候导致网页变形，请查看源代码中错误提示的位置是否这样的

<title>WordPress 错误</title>

<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天下

34 thoughts on “给wordpress加上QapTcha验证”

Dianso在2011年5月6日下午2:46说道：

我删除了wp本身发评论的文件，用了ajax的那个文件，基本已经没了垃圾评论

登录以回复
- 西华秦在2011年5月6日下午3:07说道：
  
  是的，这样基本没有垃圾评论了，不过好玩得东东舍不得放过。 🙂
  
  登录以回复
电商圈在2011年5月6日下午4:08说道：

WP功能就是给力

登录以回复
Ooon在2011年5月6日下午8:03说道：

良心好像解决了ajax这个问题

登录以回复
- 西华秦在2011年5月6日下午9:26说道：
  
  🙂 横天的，良心解决了AJAX的问题，不过没有解决评论按钮锁定的问题 😥 没他的主题，不知道如何解决的
  
  登录以回复
Ooon在2011年5月6日下午8:12说道：

你的主机是哪里的呀，好快 💡

登录以回复
- 西华秦在2011年5月6日下午9:29说道：
  
  你那空间偶尔抽风，顺便说下，你那按钮滑不动了，锁死了。 😆
  
  登录以回复
飞一般的蜗牛在2011年5月6日下午10:29说道：

这个不错。我用的那个验证插件很累人的。哈哈 😈

登录以回复
- 西华秦在2011年5月7日上午10:06说道：
  
  不需要AJAX得童鞋可以加上了
  
  登录以回复
3shi在2011年5月6日下午10:41说道：

折腾这个的人挺多呀。

登录以回复
- 西华秦在2011年5月7日上午10:03说道：
  
  一起折腾才有意思
  
  登录以回复
Microhu在2011年5月7日上午1:30说道：

看了下,这个东西的判断语句会和willin的冲突喔.
有时间找找怎么绕开冲突.

登录以回复
Microhu在2011年5月7日上午1:40说道：

同一个人15秒的评论间隔. 屏蔽重复的评论.
其实willin的评论判断已经够用了.
防机器人是够了.
当然也有人工手动的广告垃圾.
如果是人工的. 不管怎么防都防不住的

登录以回复
- 西华秦在2011年5月7日上午10:08说道：
  
  是够了，将wordpress根目录下的wp-comments-post.php删除后，你自己都会感觉不习惯。
  
  登录以回复
小羿在2011年5月7日下午12:35说道：

折腾看看。。话说你的图出来的好慢

登录以回复
- 西华秦在2011年5月7日下午10:12说道：
  
  应该是防盗链的原因 🙂
  
  登录以回复
evil在2011年5月7日下午7:44说道：

和验证码相同呢 ❗

登录以回复
- 西华秦在2011年5月7日下午10:13说道：
  
  其实这就是另类的验证码功能
  
  登录以回复
小A在2011年5月7日下午9:58说道：

~~好的我的站已经用上一个UI效果了。。要不再折腾一个！！

登录以回复
- 西华秦在2011年5月7日下午11:53说道：
  
  努力再折腾一个 🙂
  
  登录以回复
老驴在2011年5月8日上午12:09说道：

这个用户体验不错，先收藏了，有时间折腾折腾。

登录以回复
空空裤兜在2011年5月8日下午3:36说道：

还有个问题就是手机不能回复评论

登录以回复
- 西华秦在2011年5月8日下午4:23说道：
  
  当然，作者并没有写针对手机版的，不过最新版已经可以在IPAD下使用
  
  登录以回复
图图在2011年5月8日下午4:32说道：

一会折腾下~~！

登录以回复
剑书在2011年5月9日下午10:13说道：

不到迫不得已，决不上验证码，这玩意过于影响用户体验

登录以回复
- 西华秦在2011年5月10日上午10:48说道：
  
  其实我也老讨厌验证码什么的。
  
  登录以回复
zva在2011年5月14日下午6:48说道：

有趣

登录以回复
扣扣聊天在2011年5月20日上午12:18说道：

➡ 搞了一天，都不成功，不显示。

登录以回复
- clove在2011年8月15日上午9:46说道：
  
  偶的喵上了，可惜木人用
  
  登录以回复
DH在2011年6月8日下午1:08说道：

你的博客没有安装这个？

登录以回复
- 西华秦在2011年6月8日下午6:22说道：
  
  因为目前使用willin kan的小墙基本能够应付目前的Spam。所以并没有添加此功能，毕竟，在新奇的验证码功能，也会降低用户体验。所以没到必要时候，我还没考虑加上它！
  
  登录以回复
  - DH在2011年6月8日下午6:26说道：
    
    恩。willin kan的小墙还没有用过，呵呵，最近收到了3条垃圾评论，但是我也是很少遇到垃圾评论，是我的网站档次还不够。
    
    登录以回复
老妖在2011年9月26日上午11:56说道：

你现在怎么取消掉了呢？没看见你博客上有啊

登录以回复
Pingback引用通告：给WordPress加评论滑动解锁QapTcha验证 - W7C