自从肉牛、钢材等垃圾评论泛滥，很多朋友都用上了各种评论验证方案，其中一个比较惹眼的就是张戈博客目前在用的myQaptcha滑动解锁。
很久之前张戈博客已经分享了这个滑动解锁的代码部署教程。不过还是有很多朋友眼馋张戈目前在用的滑动后自动提交评论的方案，各种留言求分享。
其实，这个功能是从无主题博客小武那扒来的，小武第一个想到滑动后自动提交，才能进一步提高用户体验，毕竟少了一步操作嘛！稍微会折腾的朋友，其实分析一下就能自己写代码了，根本用不到分享。
原理很简单：先用css隐藏评论提交按钮，然后将评论提交动作绑定到滑动解锁上即可。
好吧，张戈好人做到底，整理一下详细的做法（发现很多朋友都喜欢看张戈罗里吧嗦。。。）
![]()
一、下载代码
为了省去如何修改代码洋洋洒洒的几百字，张戈决定直接将修改好的代码打包分享出来：
下载解压后，将得到的myqaptcha文件夹整体上传到WordPress主题目录下备用。
二、部署代码
部署很简单，编辑WordPress主题目录下的 functions.php，在<?php 之后添加如下代码保存即可：
include("myqaptcha/myQaptcha.php");
三、修改代码
①、评论框
为了配合这个自动提交，我们必须修改一下评论框的提交按钮代码。
打开 WordPress 的评论模板，一般是 comments.php ，找到如下类似代码：
|
|
<input id="submit" class="submit" name="submit" type="submit" tabindex="5" value="提交评论"/>
<?php comment_id_fields(); do_action('comment_form', $post->ID); ?>
|
然后修改为：
|
|
<div id="autosubmit"></div>
<p style="display:none;"> <!-- 目的就是为了隐藏提交按钮 -->
<input id="submit" class="submit" name="submit" type="submit" tabindex="5" value="提交评论"/>
<?php comment_id_fields(); do_action('comment_form', $post->ID); ?>
</p>
|
Ps：每个主题写的代码可能会不一样，但是评论提交的按钮代码是类似的（submit），这也不会找的话建议不要折腾这个花哨的功能了。
②、ajax代码
可以看出来，张戈博客这个滑动自动提交和Ajax评论提交是绝配。如果你博客的评论不是ajax模式（即点击提交评论页面会刷新），那么ajax代码这一步就不用做啦！
使用ajax评论模式的网站，绝大部分会用到 comments-ajax.js 这个js文件。
为了配合这个自动提交，我们需要简单的改造一下这个js。目的是为了滑动模块后，不管是评论提交成功还是失败，模块都应该恢复到未拉动的状态，以备再次评论！总不能滑动评论一次就不能评论了吧？
修改很简单：
编辑 comments-ajax.js 找到如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
/** 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;
|
然后如下修改即可：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
/** 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评论成功或失败后，复原滑动模块，让滑动模块可以再次使用！
另外，张戈也在下载包里提供了自用 comments-ajax.js，不会修改的可以参考或直接替换即可。
Ps：如果博客用了CDN，请编辑 comments-ajax.js ，找到 如下代码，自行修改下：
|
|
//js_url = js_url.replace('res.zhangge.net','zhangge.net'); 若是用到CDN，请自行修改下此行，并取消注释
|
四、更多吐槽
①、不显示？
部署完之后，如果发现滑动模块不显示了怎么办？很可能你用的就不是张戈提供的代码，而是直接在原版插件啥修改而成。这时候请编辑 myQaptcha.php 这个文件，找到如下语句：
|
|
function myQaptcha_wp_footer() {
if (is_singular() && !is_user_logged_in()) {
|
然后去掉登陆判断，如下修改即可：
|
|
function myQaptcha_wp_footer() {
if (is_singular()) {
|
Ps：原因就是原版插件并不是替换提交按钮，所以已登录用户并不需要滑动解锁！如果在原版基础上修改成滑动提交，那么不管是否登陆这个滑动模块都应该显示才行！！！
②、整站暗链
知更鸟博主鸟哥，在分享这个他修改版的滑动解锁插件时，提到了这个插件会往评论框写入一个隐藏的a标签（不得不说作者三十岁还是动了一点歪脑筋的）。
不过汗颜的是，当初张戈分享这个插件的时候，鬼使神差的将这个暗链改成了我自己的博客地址（哈哈）。当时其实是看不太懂JS代码的，只是看到了别人的网址不爽，就下意识的改成了自己的博客地址，然后还分享出去了。。。。
其实吧，这是一个废暗链，毫无作用。因为用到但是JS输出的方式，搜索引擎并不会解析这个代码。。
这次张戈分享的代码，已经注释掉了这个小聪明，大伙可以放心使用。
③、不动脑筋
自动提交的原理很简单，说白了就是将原有的提交按钮用css样式隐藏掉，然后在滑动动作绑定一个点击隐藏的提交按钮的机制，这样用户滑动模块，就会自动点击那个隐藏的提交按钮了，从而实现自动提交！
并不高明的技术，但是很多朋友就是不理解，部署起来，只要遇到小问题就卡死胡同了。完全不会自己去学习一下网站的基础技术，比如简单的js、css等。总是把希望寄托在他人身上，殊不知他人也是从小白过来的，和你最大的区别也就是比你动的脑筋多一些而已。
折腾网站这种事，适合喜欢动脑筋的勤快人，那些既不会技术又不愿意想事情的人，建议不要折腾这些花哨无用的功能，还是专注内容比较好！
再啰嗦一个例子：
张戈博客早期的文章《WordPress评论滑动/拉链解锁myQaptcha代码版及部署方法》已经分享了代码部署的方法。
这篇文章中提到了因 Jquery 版本问题导致无法滑动。完了问题来了，很多朋友各种提问，Jquery 版本是怎么升级或怎么降级的？我擦，这问题实在是太那啥了！你实在搞不清楚怎么升级 Jquery，你就不会查看张戈博客的网页源代码，从里面找到JQ的连接，然后下载走么？？？
我估计 Jquery 是什么都不清楚吧，可是为啥不百度呢？
![]()
另外，部署后若发现位置错乱的请自行解决，代码是不可能兼容每个主题的CSS样式和布局。
好了，这些分享的包应该已经解决了这个JQ版本不兼容问题，感谢知更鸟博主鸟哥提供的方案。
感谢欣赏，遥握：）
赏