给wordpress加上QapTcha验证

大家可能注意到了,小博在评论的地方加上了QapTcha作为验证码来抵御垃圾评论,几天下来,效果显著,目前为止新增垃圾评论数量为0。在这里跟大家分享一下如何在wordpress里加入QapTcha,具体效果可以参考给评论加验证码了

传统验证码要求用户先辨认(或者计算),然后敲击键盘输入结果。使用QapTcha仅需滑动一下鼠标,可以很好的提高用户体验。其原理是当滑动条滑动到指定位置时,会由后台发起一个请求,该请求会往session里加上一些内容,我们只要在提交的时候判断一下在session里有没有这些内容就可以了。

好了,让我们开始吧。

1、先去官网下载最新版的压缩包,解压。QapTcha依赖于jquery,其包内自带了jquery的js文件。这里假设qaptcha文件夹的路径为http://yourdomain/wp-includes/qaptcha。

2、找到QapTcha.jquery.js,大约在52行

1
2
3
4
5
// 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,找到

1
2
3
4
var defaults = {
txtLock : "Locked : form can"t be submited",//解锁前的提示文字
txtUnlock : "Unlocked : form can be submited"//解锁后的提示文字
};

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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文件,找到你希望滚动条出现的位置,加上

1
<div id="QapTcha"></div>

7、把文件上传到你的服务器,看看效果吧,然后再修改一下样式,直到自己满意为止。 时间仓促,如有错误请指正。

update:

以下是一些朋友安装时经常犯的错误:

1、不要用wordpress自带的jquery.js,这个js文件功能不全,请去jquery的官网下载或者用google,雅虎或微软提供的cdn服务,还有就是用qaptcha自带的(这个可能版本有点老)。

2、jquery的引入一定要在qaptcha之前,有的朋友在页面中引入了两次jquery,一次在前,一次在后,也会导致失败。一定要把后面引入的那一个删掉。

3、还有就是这一行$.post(“php/Qaptcha.jquery.php”路径的问题了,很多朋友拖到最右边也没法解锁,多数就是这个路径写错了,赶紧检查一下吧。