前阵子在逛张戈博客的时候,发现他的博客评论按钮挺好的,一来可以有效防止垃圾评论,二来减少一个评论提交步骤从而有效提高用户体验,所以我也把自己博客的评论按钮修改为滑动/拉链解锁后自动提交评论,今天就把折腾的过程分享一下。
一、不想折腾代码的只需两步即可,具体如下:
1、下载本站已经折腾好的Three主题滑动解锁自动提交代码压缩包,内含张戈博主分享的myqaptcha代码和Three主题需要修改的替换文件。
2、将本站分享的压缩包解压后,把myqaptcha文件夹上传到Three主题目录下;把“Three主题修改文件”文件夹内的comments.php和functions.php替换Three主题目录下的comments.php和functions.php文件,把comments-ajax.js替换Three主题目录下JS文件夹内的comments-ajax.js文件。
二、想折腾代码的具体步骤如下(适用于其他WordPress主题):
1、跟上面第一步一样,下载张戈博主分享的myQaptcha代码,下载解压后,将得到的myqaptcha文件夹整体上传到Three主题目录下备用。
2、编辑Three主题目录下的functions.php,在<?php 之后添加如下代码保存即可:
- // 滑动提交评论
- include("myqaptcha/myQaptcha.php");
3、修改评论框的提交按钮代码
打开Three主题目录下的comments.php,将以下代码:
- <p class="form-submit">
- <input id="submit" name="submit" type="submit" tabindex="5" value="提交评论">
- <?php comment_id_fields(); do_action('comment_form', $post->ID); ?>
- </p>
替换为以下代码:
- <div id="autosubmit"></div>
- <p style="display:none;">
- <input id="submit" name="submit" type="submit" tabindex="5" value="提交评论">
- <?php comment_id_fields(); do_action('comment_form', $post->ID); ?>
- </p>
4、修改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评论成功或失败后,复原滑动模块,让滑动模块可以再次使用!
至此,Three主题评论按钮修改为滑动/拉链解锁后自动提交评论的功能已经实现了,欢迎大家测试使用。
特别感谢:本文技术和myQaptcha代码均来自于张戈博主的《WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的方法》。
发表于2015-08-21 09:35 沙发
昨天还不是这样,今天又改进了呀
@中国历史[呲牙] 感觉这样滑动和提交评论合一比较好,减少步骤提高用户体验
@懿古今确实不错,一举两得
发表于2015-08-21 09:38 板凳
越改越漂亮了,楼主辛苦了 [强]
@守心斋[偷笑] 博客在于折腾嘛
发表于2015-08-21 13:26 地板
是在他那看到了这个但是有的主题也不兼容的.
@Zou's Blog这个就不太懂了,我的Three主题是完全兼容的,可以直接拿来就用了
@懿古今还有我有头像为什么你这不显示啊 .有缓存吗
@Zou's Blog有可能是缓存,也有可能你的头像不是gravatar头像或多说头像
发表于2015-08-21 18:19 4楼
哈哈这个功能确实不错
@videoclub[呲牙] 感觉能够有效防止垃圾评论
发表于2015-08-21 18:30 5楼
貌似和多说不兼容是不
@夜[疑问] 这个还真不知道,一般按照这个插件的都是自带评论,多说评论的防垃圾评论就很给力,应该不用安装这个
发表于2015-08-21 18:48 6楼
在好几个网站上看到这样的滑动解锁插件,博主也是与时俱进呀,确实这个功能不错,哈哈
@企业短信服务平台[呲牙] 我也是在张戈博客那里看到,感觉不错就折腾了一下
发表于2015-08-21 20:46 7楼
高大上的功能了。真的。说明技术无止境!
@wys.me[呲牙] 一直都说不再折腾,但是看到心动的东西还是会忍不住折腾一下
发表于2015-08-21 20:46 8楼
博客很赞,文章很实用
@创意应用[啤酒] 谢谢夸奖,欢迎有空常来
发表于2015-08-21 22:09 9楼
这个主题不错
@圆月博客[呲牙] 谢谢夸奖,这个也是自己瞎折腾的
发表于2015-08-21 22:27 10楼
已测试效果,真不错。
@李明[啤酒] 谢谢帮忙,祝周末愉快
发表于2015-08-23 17:13 11楼
我把滑动去掉了
@Sawyer个人喜好,无所谓,关键是自己喜欢就行
发表于2015-08-24 11:57 12楼
博主大神,向博主学习。嘿嘿
@流年[流汗] 还是菜鸟呢,大神离我好远啊
发表于2015-11-19 10:52 13楼
博客现在做的越来越好的,各方面不断的完善,这种滑动解锁要比输入字符数字那些好多了!
@电缆支架嗯,比那种输入汉字,字符,数字好很多,也快很多
发表于2015-12-01 20:29 14楼
感谢分享,有时间我拿去折腾下d8,另外这个滑动解锁插件,再做点修改,把图片和文字对齐下,会更加美观!
@清知枫这个可以自己折腾的,就是更换图片和修改CSS,自行折腾更爽
发表于2015-12-10 16:41 15楼
我先去测试测试