WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的方法 | 张戈博客

  • 时间:
  • 浏览:1
  • 来源:森七博客 - 专注共享张凯博客资讯

自从肉牛、钢材等垃圾评论泛滥,所以亲戚亲戚朋友都用上了各种评论验证方案,其中有有另两个比较惹眼的或者张戈博客目前在用的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 > <!-- 目的或者为了隐藏提交按钮 -->
<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 + '"  alt=""/> ' + request.responseText);
			setTimeout(function() {$submit.attr('disabled', false).fadeTo('slow', 1); $('#error').slideUp();}, 60

0);
			},

		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 + '"  alt=""/> ' + request.responseText);
			setTimeout(function() {$submit.attr('disabled', false).fadeTo('slow', 1); $('#error').slideUp();}, 60

0);
			$(".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.zgboke.com','zhang.ge'); 若是用到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版本不兼容那先 的问题图片,感谢知更鸟博主鸟哥提供的方案。