前阵子在逛张戈博客的时候，发现他的博客评论按钮挺好的，一来可以有效防止垃圾评论，二来减少一个评论提交步骤从而有效提高用户体验，所以我也把自己博客的评论按钮修改为滑动/拉链解锁后自动提交评论，今天就把折腾的过程分享一下。
一、不想折腾代码的只需两步即可，具体如下：
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 之后添加如下代码保存即可：
// 滑动提交评论
include(“myqaptcha/myQaptcha.php”);
3 、修改评论框的提交按钮代码
打开Three主题目录下的comments.php，将以下代码：
<p class=”form-submit”>
<input id=”submit” name=”submit” type=”submit” tabindex=”5″ value=”提交评论”>
<?php comment_id_fields(); do_action(‘comment_form’, $post->ID); ?>
</p>
替换为以下代码：
<div id=”autosubmit”></div>
<p style=”display:none;”>
<input id=”submit” name=”submit” type=”submit” tabindex=”5″ value=”提交评论”>
<?php comment_id_fields(); do_action(‘comment_form’, $post->ID); ?>
</p>
4 、修改 comments-ajax.js 代码
目的是为了滑动模块后，不管是评论提交成功还是失败，模块都应该恢复到未拉动的状态，以备再次评论。
把以下代码：
/** Ajax */
$.ajax( {
url: ajax_php_url,
data: $(this).serialize(),
type: $(this).attr(‘method’),
error: function(request) {
$(‘#loading’).slideUp();
$(‘#error’).slideDown().html(‘<img src=”‘%20+%20pic_no%20+%20′” style=”vertical-align:middle;” alt=””/> ‘ + request.responseText);
setTimeout(function() {$submit.attr(‘disabled’, false).fadeTo(‘slow’, 1); $(‘#error’).slideUp();}, 3000);
},
success: function(data) {
$(‘#loading’).hide();
comm_array.push($(‘#comment’).val());
$(‘textarea’).each(function() {this.value = ”});
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;
替换为以下代码：
/** Ajax */
$.ajax( {
url: ajax_php_url,
data: $(this).serialize(),
type: $(this).attr(‘method’),
error: function(request) {
$(‘#loading’).slideUp();
$(‘#error’).slideDown().html(‘<img src=”‘%20+%20pic_no%20+%20′” style=”vertical-align:middle;” alt=””/> ‘ + request.responseText);
setTimeout(function() {$submit.attr(‘disabled’, false).fadeTo(‘slow’, 1); $(‘#error’).slideUp();}, 3000);
$(“.QapTcha”).html(”);$(“.QapTcha”).QapTcha();
},
success: function(data) {
$(‘#loading’).hide();
comm_array.push($(‘#comment’).val());
$(‘textarea’).each(function() {this.value = ”});
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;
$(“.QapTcha”).html(”);$(“.QapTcha”).QapTcha();
很明显，也就新增了2行JS代码，作用就是为了在aja评论成功或失败后，复原滑动模块，让滑动模块可以再次使用！
至此，Three主题评论按钮修改为滑动/拉链解锁后自动提交评论的功能已经实现了，欢迎大家测试使用。
特别感谢： 本文技术和myQaptcha代码均来自于张戈博主的《WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的方法》。
