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修改为自动提交的方法》。