WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的方法
自从肉牛、钢材等垃圾评论泛滥,很多朋友都用上了各种评论验证方案,其中一个比较惹眼的就是张戈博客目前在用的 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 找到如下代码:
/** 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 评论成功或失败后,复原滑动模块,让滑动模块可以再次使用!
另外,张戈也在下载包里提供了自用 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 版本不兼容问题,感谢知更鸟博主鸟哥提供的方案。
- async & await 的前世今生(Updated)
- MVC5 - ASP.NET Identity登录原理 - Claims-based认证和OWIN
- Spring @Transactional踩坑记
- jvm运行时环境属性一览
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
- C#集合类型大盘点
- 将spring源码导入到eclipse中
- 将struts源码导入eclipse
- 初探领域驱动设计(1)为复杂业务而生
- 最大公约数的算法
- 是时候开始用C#快速开发移动应用了
- Open ID Connect(OIDC)在 ASP.NET Core中的应用
- Jetty入门
- java序列化反序列化深入探究
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一起来学matlab-matlab学习笔记10 10_3关系运算符和逻辑运算符
- 一篇文章学懂Shell脚本,最简明的教程在这里
- 一起来学matlab-matlab学习笔记10 10_5 通用字符串操作和比较函数
- 一个案例彻底弄懂如何正确使用 mysql inndb 联合索引
- 一起来学matlab-matlab学习笔记11 11_2 高维数组处理和运算 squeeze, ind2sub, sub2ind
- matlab结构体 rmfield,arrayfun,structfun,struct2cell,cell2struct
- PHP函数参数传递方法的具体改进技巧
- matlab学习笔记11_3 高维数组处理 filp, shiftdim, size, permute, ipermute
- 看完这篇文章,你的Linux基础就差不多了
- jzy3D从入门到弃坑
- git丢弃本地修改的所有文件(新增、删除、修改)
- Jmetal设置Solution Variables
- git log 查看某文件的修改历史
- 进程和线程的概念、区别和联系
- CDATA和转义字符