专栏首页张戈的专栏WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的方法

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 条评论
登录 后参与评论

相关文章

  • 妹子你真萌:一次心惊肉跳的服务器误删文件的恢复过程

    刚在我的订阅里面看到这篇文章,在爆笑之余也让跟我一样的运维农民工们发人深省,所以转过来分享一下。妹子啊妹子,网上找的东西也不能直接照搬啊,太萌了~~哈哈! 作者...

    张戈
  • WP Super Cache静态缓存插件纯代码版(兼容多域名网站)

    中午,小熊发来一篇来自歧路亡羊博客的精彩教程:《wordpress 利用代码来实现缓存》。粗略看了一下,发现这个代码在几个月之前我就用过,不过由于此代码无法区分...

    张戈
  • 解决网站404页面返回200状态码问题

    好久没打理博客,突然收到 CDN 流量预警,发现平均每天 40G 流量消耗!what?就现在这个访问量,不存在的。看了下 CDN 日志发现有小人一直在请求博客页...

    张戈
  • 一些提高效率的神器

    本文会对列举一些自己在工作中使用的好用的工具。或许与PPT设计之类的关系不大,但是对于提高我们工作效率是很有帮助的。 我想,本来科技就是这样,以人为本,提高效率...

    企鹅号小编
  • Flask中使用cookie和sessi

    py3study
  • 黑科技 | 用温度控制脑部活动,磁热刺激技术可用于治疗精神疾病

    镁客网
  • 选择合适的块级HTML标签流程图

    Joel
  • Uncaught SyntaxError: Unexpected token in body onload

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang
  • 谷歌联手Kaggle举办10万美元视频分类大赛

    谷歌和 Kaggle 于今日宣布将举办一场新的机器学习挑战赛,该比赛要求开发人员找到自动给视频添加标签的最优方法。 这场冠军奖金高达30,000美元(排在其后的...

    AI科技大本营
  • Xcode中修改变量名、类名及字符串的替换操作

            在做iOS开发代码优化的工作时,优化代码结构之前,我们应该先整理好工程的外貌,将文件和类的命名进行规范,在Xcode中为我们提供了方便而强大的名...

    珲少

扫码关注云+社区

领取腾讯云代金券