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

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

Three主题评论按钮修改为滑动/拉链解锁后自动提交评论的方法-第1张-boke112百科(boke112.com)

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

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=“‘ + pic_no + ‘” 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=“‘ + pic_no + ‘” 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修改为自动提交的方法》。

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

相关文章

最新文章

热门标签