给WordPress加评论滑动解锁QapTcha验证

网站APP, 转自点点 13 年前 回复

, , , , ,

先看演示:
1、先去官网下载最新版的压缩包,解压。将jquery、images文件夹和php文件夹里的Qaptcha.jquery.php拷贝到主题下,比如我的主题yMoo下。
2、找到jquery/QapTcha.jquery.js,大约在15行

txtLock : 'Locked : form can\'t be submited', //可以改成中文“发表评论前,请滑动滚动条”解锁
txtUnlock : 'Unlocked : form can be submited', //可以改成中文“已解锁,可以发表评论了”
disabledSubmit : true,
autoRevert : false,
PHPfile : '/wp-content/themes/yMoo/Qaptcha.jquery.php' //这个很重要,路径错误,就不显示了

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

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

function my_wp_head() {//这个函数里的内容当然也可以直接写到header.php里
  if(get_option('qt')!='' && is_singular() && !is_user_logged_in()) {
    echo '<script type="text/javascript" src="'.get_template_directory_uri().'/js/jquery-ui.js"></script>'."\n";
    echo '<script type="text/javascript" src="'.get_template_directory_uri().'/js/jquery.ui.touch.js"></script>'."\n";
    echo '<script type="text/javascript" src="'.get_template_directory_uri().'/js/QapTcha.jquery.js"></script>'."\n";
    echo '<link rel="stylesheet" href="'.get_template_directory_uri().'/js/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 (get_option('qt')!='' && !is_user_logged_in()) {
    if(!session_id()) session_start();
    if(isset($_POST['iQapTcha']) && empty($_POST['iQapTcha']) && isset($_SESSION['iQaptcha']) && $_SESSION['iQaptcha']) {
      //unset($_SESSION['iQaptcha']);   //如果不用ajax评论的话,可以开启这项
      return($comment);
    } else err(__("Sorry, you can't be verified."));//提示语自行修改
  } else
    return($comment);
}
add_action('preprocess_comment', 'my_preprocess_comment');

5、然后修改主题的comments.php文件,找到你希望滚动条出现的位置,加上

<div class="QapTcha"></div>

这个代码.
常见问题请注意:
1、不要用wordpress自带的jquery.js,这个js文件功能不全,请去jquery的官网下载或者用google,雅虎或微软提供的cdn服务,还有就是用qaptcha自带的(这个可能版本有点老)。
2、jquery的引入一定要在qaptcha之前,有的朋友在页面中引入了两次jquery,一次在前,一次在后,也会导致失败。一定要把后面引入的那一个删掉。
3、还有就是路径的问题了,很多朋友拖到最右边也没法解锁,多数就是这个路径写错了,赶紧检查一下吧。
4、如果没有通过验证是返回一个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');

这个参考这里
这个插件不需要用户敲击键盘输入验证码,只需要像ios系统那样滑动下就可以解锁,在用户体验上也加分不少。

支付宝打赏微信打赏

如果此文对你有帮助,欢迎打赏作者。

发表评论

欢迎回来 (打开)

(必填)