Three主题评论按钮修改为滑动/拉链解锁后自动提交评论的方法

 懿古今   2015-09-15 22:33:09 更新  技术文档

前阵子在逛张戈博客的时候，发现他的博客评论按钮挺好的，一来可以有效防止垃圾评论，二来减少一个评论提交步骤从而有效提高用户体验，所以我也把自己博客的评论按钮修改为滑动/拉链解锁后自动提交评论，今天就把折腾的过程分享一下。

Three主题评论按钮修改为滑动/拉链解锁后自动提交评论的方法

一、不想折腾代码的只需两步即可，具体如下：

1、下载本站已经折腾好的Three主题滑动解锁自动提交代码压缩包，内含张戈博主分享的myqaptcha代码和Three主题需要修改的替换文件。

2、将本站分享的压缩包解压后，把myqaptcha文件夹上传到Three主题目录下；把“Three主题修改文件”文件夹内的comments.php和functions.php替换Three主题目录下的comments.php和functions.php文件，把comments-ajax.js替换Three主题目录下JS文件夹内的comments-ajax.js文件。

二、想折腾代码的具体步骤如下（适用于其他WordPress主题）：

1、跟上面第一步一样，下载张戈博主分享的myQaptcha代码，下载解压后，将得到的myqaptcha文件夹整体上传到Three主题目录下备用。

2、编辑Three主题目录下的functions.php，在<?php 之后添加如下代码保存即可：

  1. // 滑动提交评论
  2. include("myqaptcha/myQaptcha.php");

3、修改评论框的提交按钮代码

打开Three主题目录下的comments.php，将以下代码：

  1. <p class="form-submit">
  2. <input id="submit" name="submit" type="submit" tabindex="5" value="提交评论">
  3. <?php comment_id_fields(); do_action('comment_form', $post->ID); ?>
  4. </p>

替换为以下代码：

  1. <div id="autosubmit"></div>
  2. <p style="display:none;">
  3.     <input id="submit" name="submit" type="submit" tabindex="5" value="提交评论">
  4.     <?php comment_id_fields(); do_action('comment_form', $post->ID); ?>
  5. </p>

4、修改comments-ajax.js代码

目的是为了滑动模块后，不管是评论提交成功还是失败，模块都应该恢复到未拉动的状态，以备再次评论。

把以下代码：

  1. /** Ajax */
  2.     $.ajax( {
  3.         url: ajax_php_url,
  4.         data: $(this).serialize(),
  5.         type: $(this).attr('method'),
  7.         error: function(request) {
  8.             $('#loading').slideUp();
  9.             $('#error').slideDown().html('<img src="' + pic_no + '" style="vertical-align:middle;" alt=""/> ' + request.responseText);
  10.             setTimeout(function() {$submit.attr('disabled', false).fadeTo('slow', 1); $('#error').slideUp();}, 3000);
  11.                 },
  13.         success: function(data) {
  14.             $('#loading').hide();
  15.             comm_array.push($('#comment').val());
  16.             $('textarea').each(function() {this.value = ''});
  17.             var t = addComment, cancel = t.I('cancel-comment-reply-link'), temp = t.I('wp-temp-form-div'), respond = t.I(t.respondId), post = t.I('comment_post_ID').value, parent = t.I('comment_parent').value;

替换为以下代码：

  1. /** Ajax */
  2.     $.ajax( {
  3.         url: ajax_php_url,
  4.         data: $(this).serialize(),
  5.         type: $(this).attr('method'),
  7.         error: function(request) {
  8.             $('#loading').slideUp();
  9.             $('#error').slideDown().html('<img src="' + pic_no + '" style="vertical-align:middle;" alt=""/> ' + request.responseText);
  10.             setTimeout(function() {$submit.attr('disabled', false).fadeTo('slow', 1); $('#error').slideUp();}, 3000);
  11.             $(".QapTcha").html('');$(".QapTcha").QapTcha();
  12.             },
  14.         success: function(data) {
  15.             $('#loading').hide();
  16.             comm_array.push($('#comment').val());
  17.             $('textarea').each(function() {this.value = ''});
  18.             var t = addComment, cancel = t.I('cancel-comment-reply-link'), temp = t.I('wp-temp-form-div'), respond = t.I(t.respondId), post = t.I('comment_post_ID').value, parent = t.I('comment_parent').value;
  19.             $(".QapTcha").html('');$(".QapTcha").QapTcha();

很明显，也就新增了2行JS代码，作用就是为了在aja评论成功或失败后，复原滑动模块，让滑动模块可以再次使用！

至此，Three主题评论按钮修改为滑动/拉链解锁后自动提交评论的功能已经实现了，欢迎大家测试使用。

特别感谢：本文技术和myQaptcha代码均来自于张戈博主的《WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的方法》。

本文地址：https://www.yigujin.cn/425.html

你可能感兴趣的文章

文章标签： ,   ,  
版权声明：本文为原创文章，版权归 懿古今 所有，欢迎分享本文，转载请保留出处！发布此文是出于传递更多信息之目的，若有来源标注错误或侵犯了您的合法权益，请发邮件至[email protected]，确认后马上更正、删除，谢谢！

发表评论

  1. 中国历史
    中国历史 @回复
    发表于2015-08-21 09:35  沙发

    昨天还不是这样，今天又改进了呀

    • 懿古今
      懿古今2015-08-21 10:05  回复

      @中国历史[呲牙] 感觉这样滑动和提交评论合一比较好，减少步骤提高用户体验

  2. 守心斋
    守心斋 @回复
    发表于2015-08-21 09:38  板凳

    越改越漂亮了，楼主辛苦了 [强]

  3. Zou
    Zou's Blog @回复
    发表于2015-08-21 13:26  地板

    是在他那看到了这个但是有的主题也不兼容的.

    • 懿古今
      懿古今2015-08-21 13:31  回复

      @Zou's Blog这个就不太懂了，我的Three主题是完全兼容的，可以直接拿来就用了

      • Zou
        Zou's Blog2015-08-21 13:31  回复

        @懿古今还有我有头像为什么你这不显示啊 .有缓存吗

        • 懿古今
          懿古今2015-08-21 14:10  回复

          @Zou's Blog有可能是缓存，也有可能你的头像不是gravatar头像或多说头像

  4. videoclub
    videoclub @回复
    发表于2015-08-21 18:19  4楼

    哈哈这个功能确实不错

  5. 夜
    夜 @回复
    发表于2015-08-21 18:30  5楼

    貌似和多说不兼容是不

    • 懿古今
      懿古今2015-08-22 08:59  回复

      @夜[疑问] 这个还真不知道，一般按照这个插件的都是自带评论，多说评论的防垃圾评论就很给力，应该不用安装这个

  6. 企业短信服务平台
    企业短信服务平台 @回复
    发表于2015-08-21 18:48  6楼

    在好几个网站上看到这样的滑动解锁插件，博主也是与时俱进呀，确实这个功能不错，哈哈

  7. wys.me
    wys.me @回复
    发表于2015-08-21 20:46  7楼

    高大上的功能了。真的。说明技术无止境！

    • 懿古今
      懿古今2015-08-22 09:01  回复

      @wys.me[呲牙] 一直都说不再折腾，但是看到心动的东西还是会忍不住折腾一下

  8. 创意应用
    创意应用 @回复
    发表于2015-08-21 20:46  8楼

    博客很赞，文章很实用

  9. 圆月博客
    圆月博客 @回复
    发表于2015-08-21 22:09  9楼

    这个主题不错

  10. 李明
    李明 @回复
    发表于2015-08-21 22:27  10楼

    已测试效果，真不错。

  11. Sawyer
    Sawyer @回复
    发表于2015-08-23 17:13  11楼

    我把滑动去掉了

    • 懿古今
      懿古今2015-08-23 22:46  回复

      @Sawyer个人喜好，无所谓，关键是自己喜欢就行

  12. 流年
    流年 @回复
    发表于2015-08-24 11:57  12楼

    博主大神，向博主学习。嘿嘿

    • 懿古今
      懿古今2015-08-24 21:43  回复

      @流年[流汗] 还是菜鸟呢，大神离我好远啊

  13. 电缆支架
    电缆支架 @回复
    发表于2015-11-19 10:52  13楼

    博客现在做的越来越好的，各方面不断的完善，这种滑动解锁要比输入字符数字那些好多了！

    • 懿古今
      懿古今2015-11-19 11:32  回复

      @电缆支架嗯，比那种输入汉字，字符，数字好很多，也快很多

  14. 清知枫
    清知枫 @回复
    发表于2015-12-01 20:29  14楼

    感谢分享，有时间我拿去折腾下d8，另外这个滑动解锁插件，再做点修改，把图片和文字对齐下，会更加美观！

    • 懿古今
      懿古今2015-12-02 10:20  回复

      @清知枫这个可以自己折腾的，就是更换图片和修改CSS，自行折腾更爽

  15. 关岛属于哪个国家
    关岛属于哪个国家 @回复
    发表于2015-12-10 16:41  15楼

    我先去测试测试