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 版本不兼容问题,感谢知更鸟博主鸟哥提供的方案。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏司想君

小程序开发总结

经历了一段繁忙的工作期,还有2天就要过年了。在这里总结一下最新开发微信小程序的心得和体会,算是一个总结,也算温故而知新,如果还能对读者有所帮助,那就更好了。 开...

3617
来自专栏杨逸轩 ' sBlog

为你的 typecho 博客开启 gzip 压缩功能

2429
来自专栏葡萄城控件技术团队

作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?

如今,Visual Studio Code无疑是最流行的轻量级代码编辑器。它确实从其他代码编辑器那借鉴了很多,最主要是从Sublime和Atom那里。然而它的成...

2671
来自专栏腾讯NEXT学位

前端、设计师福利再升级:用FSP彻底拥抱中文WebFont时代

1862
来自专栏向治洪

Mac 高效工作指南

序 很多做开发的程序员,都喜欢用mac,其绚丽的外观,加上手感体验,很适合开发和装逼用。其实除了这些为什么那么多程序员喜欢用mac呢,分析了一下使用mac的好处...

49810
来自专栏Java帮帮-微信公众号-技术文章全总结

WordPress你要会用

WordPress你要会用 虽然是PHP开发的,但不能忽律它的简单化 WordPress介绍 WordPress是一种使用PHP语言开发的博客平台,用...

4125
来自专栏日常学python

Python爬取炉石传说原画及卡牌抓取

炉石传说原画链接:http://news.4399.com/gonglue/lscs/kptj/

1041
来自专栏前端布道

前端开发必备之Chrome开发者工具(下篇)

本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 本文...

31611
来自专栏FreeBuf

攻破黑市之拿下吃鸡DNF等游戏钓鱼站群

前段时间有个网友给我发了个网址,说找到个专门做钓鱼网站的连接,让我看看,然后就引出了一系列事件。

2223
来自专栏琯琯博客

超好用的谷歌浏览器、Sublime Text、Phpstorm、油猴插件合集

一、谷歌浏览器插件 二、Sublime Text 插件 三、Phpstorm 插件 四、油猴脚本 4.1 脚本网站 4.2 自用的脚本 五、相关链接 ? 分享...

1K8

扫码关注云+社区