建站技巧

WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的通用方法

 2年前 (2019-03-26)     928  
文章目录
WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的通用方法

前几天在张戈论坛上看到WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的方法,就想搬到自己的网站,但碰到各种坑,因为我的主题没有comments-ajax.js这个文件,这么办,当然是遇到坑就填。

首页安装张戈的方法吧代码引入主题,然后在提交按钮的位置添加滑动按钮<div id="autosubmit"></div>然后隐藏默认按钮,坑来了,我主题没有<input id="submit"...这按钮,是用comment_form()设置的评论框,oo! 截至到现在,我就一两个月的建站经验,好,各种google。问题到是解决了,下面以我目前的主题Newspaper主题为例介绍修改方法。

修改includes\wp_booster\comments.php文件

/*-----这选择框如果想默认勾选,可以添加checked="checked"属性
'cookies' => '<p class="comment-form-cookies-consent"><input checked="checked" id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"' . $consent . ' />' .
'<label for="wp-comment-cookies-consent">' . __td( 'Save my name, email, and website in this browser for the next time I comment.' ) . '</label></p>' .
'<div id="autosubmit"></div>',//加在这
//在comment_form下面添加提交按钮样式
comment_form($defaults);
//提交按钮添加样式style="display:none;"隐藏提交按钮
echo str_replace('id="submit"','id="submit" style="display:none;"',ob_get_clean());

好了,打开文章看一下,oo! 没提交按钮了,什么都没有,换个浏览器试试,oo! 有滑动按钮啊。。。找原因...原来没有按钮的页面是我登陆了,而我把这按钮添加到了cookies位置下面,就是“记住我”复选框下面,而登陆之后是没有这个选择框的,所以就这样了。继续改...把它加到评论框下面,问题是可以解决,但是游客看到的就是这样了oo!

WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的通用方法

感觉不好看哈。。。找解决方案,找能不能调整输入框的顺序,把评论输入框放到最下面,没找到。。。找有没有添加到评论模块下面的钩子,也没找到,水平有限,搞了个笨方法

...
$defaults['comment_notes_before'] = '';
$defaults['comment_notes_after'] = '';
//添加下面这行,各路大神有什么好方法还请告诉我,谢谢
$defaults['submit_field'] = '<div id="autosubmit"></div><p class="form-submit">%1$s %2$s</p>';
$defaults['title_reply'] = __td('LEAVE A REPLY', TD_THEME_NAME);
$defaults['label_submit'] = __td('Post Comment', TD_THEME_NAME);
...

布局解决了,现在修改提交方法,因为没有主题没有comments-ajax.js这个文件,所以只能修改其他地方了,不扯了,直接贴代码,修改myqaptcha\jquery\myqaptcha.jquery.js文件

...
// 获取输入框
var iComment = document.getElementById('comment');
var iAuthor = document.getElementById('author');
var iEmail = document.getElementById('email');
      
var defaults = {
  txtLock : '请滑动提交评论',
  txtUnlock : '正在提交...',
  disabledSubmit : false,
  autoRevert : true,
  PHPfile : myQaptchaJqueryPage,
  autoSubmit : true
};   

// 判断空字符      
function isNull(val) {
  var str = val.replace(/(^\s*)|(\s*$)/g, '');//去除空格;
  if (str == '' || str == undefined || str == null) {
  return true;
  //console.log('空')
  } else {
  return false;
  //console.log('非空');
  }
}
// 判断邮箱
function isEmail(val){
  var reg = new RegExp(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/);
  if(!reg.test(val)) {
    return false;
    //alert("Email格式错误!");
  } else {
    return true;
    //console.log('非空');
  }
}


if(this.length>0)
return jQuery(this).each(function(i) {

...

  Slider.draggable({ 
    revert: function(){
    if(opts.autoRevert)
    {
      // 将下面的150改成160,解决页面可以重复提交的问题,呵呵...笨人笨方法啊
      if(parseInt(Slider.css("left")) > 160) return false;
    else return true;
    }
  },
  containment: bgSlider,
  axis:'x',
  stop: function(event,ui){
    if(ui.position.left > 150){
      jQuery.post(opts.PHPfile,{
        action : '30corg',
        myQaptcha : inputQapTcha.attr('name')
      },
      function(data) {
        if(!data.error){
          //Slider.draggable('disable').css('cursor','default');
          inputQapTcha.val('');
          //添加输入框内容判断,只有正确输入才显示“正在提交...”
          if((iEmail==null && !isNull(iComment.value)) ||  (!isNull(iComment.value) && !isNull(iAuthor.value) && !isNull(iEmail.value) && isEmail(iEmail.value))){
            TxtStatus.text(opts.txtUnlock).addClass('dropSuccess').removeClass('dropError');
            Icons.css('background-position', '-16px 0');
          }
          form.find('input[type=\'submit\']').removeAttr('disabled');
          if(opts.autoSubmit) form.find('input[type=\'submit\']').trigger('click');
        }
      },'json');
    }
  }
});
...

好了,这样差不多就解决问题了,可以用了,而且应该所以主题都可以用把。

部署代码

下载附件,将 myqaptcha 文件夹放到主题目录,编辑 WordPress 主题目录下的 functions.php,在<?php 之后添加如下代码保存即可:

include("myqaptcha/myQaptcha.php");

好了,效果可以到下面评论框体验。上面说的问题有更好的方法也麻烦告诉我。

下载信息 资源名称:myQaptcha修改 应用平台:WordPress 文件下载:13 次
下载密码:发表评论并刷新可见!
下载地址
版权声明:一为 发表于 2年前 (2019-03-26),共 3304 字。
转载请注明:WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的通用方法 | 一为忆

3 条评论

  • avatar

    111 ( VIP 1 )

    回复

    好久没玩wp了 :?:

  • avatar

    凯少 ( VIP 1 )

    回复

    貌似玩wp的好多,wp感觉好高档

  • avatar

    owen ( VIP 1 )

    回复

    试试评论条

2020/5/1 12:50
通勤一个月,劳动节继续加班! 详情