关于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() {
    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文件，找到你希望滚动条出现的位置，加上

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

7、把文件上传到你的服务器，看看效果吧，然后再修改一下样式，直到自己满意为止。

 
目前已知问题。
1、启用了willin大师的AJAX评论的童鞋无法修改提交按钮状态为disabled。

2、我启用QapTcha之后解锁状态下无法使用AJAX评论效果，不排除我是用的老版本AJAX的问题。

3、必须保证jquery至少是1.5版本以上，我直接换了1.6版本

演示地址请查看:  三十岁

在asp.net下配置Qaptcha请参考我的另外一篇文章 传送门

本功能已经做成插件并上传到Wordpress官网，具体内容请参看 

WordPress集成Qaptcha的滑动解锁插件–myQaptcha

分享到：