给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() {
    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

请订阅本站 RSS feed 订阅到信箱 ,欢迎 Donate 或者 上面的广告内容 支持三十岁

本文链接:给Wordpress加上QapTcha验证

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:三十岁,谢谢!^^


分享到:          
  • 通告关闭
  • 评论 (49)
  1. 期待做成插件啊

    • 不行我过几天做做试试,需要改的地方挺多的

    • 已经做成插件,自己去下载吧

  2. 佩服,我去百度搜 WordPress 拖 验证
    本来是想找老师你博客这个插件的,没想到直接跑你这了….
    权重这么高….

    • 搜索嘛,本来就是哪都可能去

  3. 这个好酷,准备试试,谢谢分享。

  4. 我的加上为什么只有字 没有图片啊!!
    求解。。。。。。。。。。。
    help。。。。。。。。。。。

    • 1.你的图片位置对不对,我的是在我的对应路径
      2.你的htaccess是否允许
      3.你的图片所在文件夹是否可读

  5. 很好,测试过了,效果很好

  6. 根据教程。测试 失败。不知道那里的问题,最后报错。。。试了多次,无奈作罢!

    • 给wp加常见错误是jquery冲突
      请打开你的出错页面,查看源代码jquery加载了几次
      多余的全部删除
      还有为了兼容,最好直接使用jquery1.6

  7. 试试这个东西,不过看起来挺复杂的,不知道搞不搞的好,有问题再来请教博主。

  8. 测试下。。。效果有木有!!

    • 肯定有,木哈哈

      • willin大师的AJAX评论效果有冲突?不能同时使用? 郁闷,我就是已经加了AJAX效果了。。 仲么办?

        • 查看ajax评论的插件代码,调整jquery加载
          你的估计是重复导入了jquery导致错误
          之所以我写成插件就是因为多插件冲突,没法协调

  9. 好东西,受用了。就是代码不懂懂的用

    • 复制粘贴就成,效果看本页效果就成了

  10. 这找了很久,试试看

  11. 为什么不是直接安装的插件呢……

  12. 看起来要修改代码,好麻烦啊~俺对修改代码菜鸟一个啊,怕改错了,博客访问不了

    • 备份一下,代码都是直接可用的

  13. 测试留言!貌似加上这个滑动锁后,没有解锁点提交的话会出现框架变形 – -!

    • 感谢测试,我这个博客服务器最近访问速度超差,一直懒得调整
      您说的这个错误,是因为qaptcha的div css没有设置严格尺寸导致

  14. 博主能告知下评论里显示“回复”、“引用”的代码吗

    • 这是wp在comment里面自带的

  15. 测试下

  16. 创意不错,就是过于复杂,建议弄成插件   

    • 因为要修改的内容较多,而且还有js定位文件
      目前无法做成统一配置的插件

  17. 速度

  18. 请问QapTcha的提示文字默认是在下起一行显示的,您是怎么改为在同一行显示的?谢谢

    • 改变div的大小就可以了
      或者您可以查看当前网页的源代码查看

      • 源代里只是显示<div id="QapTcha"></div>,我仔细地对照了您使用的QapTcha.jquery.css,发现在长度方面的数值是一样的,但显示还是在下一行里。

    • DH China Google Chrome Windows
    • 2011年06月17日

    我的就是弄不好。不知道哪里出问题了。呵呵以后再捣鼓吧

    • 里面的ajax调试会比较麻烦点,不过这东西本身写的不乱,仔细找找吧
      其实我以前写的找不到了,今天这是刚自己测试现写的,哈哈哈哈

    • DH China Google Chrome Windows
    • 2011年06月16日

    你好像没有安装,想找一个安装的问问,怎么安装,看看示例

    • 我这个空间现在已经卡的要死了
      回复的ckeditor都被我去掉了
      访问量不大,暂时不加上
      本地测试过可以用的

        • DH China Google Chrome Windows
        • 2011年06月17日

        昨天捣鼓了一下,在本地试用的。不知道怎么,就是不成功。在需要滑动鼠标的地方,只出现了北京,没有滑动鼠标的东西。很郁闷,不搞了。都是按照这个做的。呵呵,快要放弃了。。

        • 我忍不住自己加上了,测试一下对不对
          登陆之前需要验证,登录以后就不需要验证了

评论关闭