JQuery插件 QapTcha :评论滑块验证(附Demo)

  QapTcha是个很舒服的验证插件

传统验证码要求用户先辨认（或者计算），然后敲击键盘输入结果。使用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']) && emptyempty($_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文件，找到你希望滚动条出现的位置，加上

<div id=”QapTcha”></div>

 

7、把文件上传到你的服务器，看看效果吧，然后再修改一下样式，直到自己满意为止。
以下是一些朋友安装时经常犯的错误：

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

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

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

HotNews Pro 主题注意:主题和我是同一个的注意,因为这个功能我添加了很久才成功的,发现问题是 主题引入了两次jquery.min.js文件,需要修改header.php里的引入代码, 引入了两次,删除第二个,把第一个引入地址修改成 http://ajax.googleapis.com/ajax/libs/jquery /1.4.2/jquery.min.js?ver=1.4.2 便可以了,如果嫌每次都要外联,可把这个JS下载到本地,传到空间里,然后地址修改成指定目录也可以.

(注:本文转自http://www.seoued.net/qaptcha-huakuai.htm)