Three主题评论按钮修改为滑动/拉链解锁后自动提交评论的方法

原创 懿古今  2015-08-21 08:55  阅读 2,170 次

前阵子在逛张戈博客的时候,发现他的博客评论按钮挺好的,一来可以有效防止垃圾评论,二来减少一个评论提交步骤从而有效提高用户体验,所以我也把自己博客的评论按钮修改为滑动/拉链解锁后自动提交评论,今天就把折腾的过程分享一下。

Three主题评论按钮修改为滑动/拉链解锁后自动提交评论的方法

一、不想折腾代码的只需两步即可,具体如下:

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 之后添加如下代码保存即可:

  1. // 滑动提交评论
  2. include("myqaptcha/myQaptcha.php");

3、修改评论框的提交按钮代码

打开Three主题目录下的comments.php,将以下代码:

  1. <p class="form-submit">
  2. <input id="submit" name="submit" type="submit" tabindex="5" value="提交评论">
  3. <?php comment_id_fields(); do_action('comment_form', $post->ID); ?>
  4. </p>

替换为以下代码:

  1. <div id="autosubmit"></div>
  2. <p style="display:none;">
  3.     <input id="submit" name="submit" type="submit" tabindex="5" value="提交评论">
  4.     <?php comment_id_fields(); do_action('comment_form', $post->ID); ?>
  5. </p>

4、修改comments-ajax.js代码

目的是为了滑动模块后,不管是评论提交成功还是失败,模块都应该恢复到未拉动的状态,以备再次评论。

把以下代码:

  1. /** Ajax */
  2.     $.ajax( {
  3.         url: ajax_php_url,
  4.         data: $(this).serialize(),
  5.         type: $(this).attr('method'),
  6.         error: function(request) {
  7.             $('#loading').slideUp();
  8.             $('#error').slideDown().html('<img src="' + pic_no + '" style="vertical-align:middle;" alt=""/> ' + request.responseText);
  9.             setTimeout(function() {$submit.attr('disabled', false).fadeTo('slow', 1); $('#error').slideUp();}, 3000);
  10.                 },
  11.         success: function(data) {
  12.             $('#loading').hide();
  13.             comm_array.push($('#comment').val());
  14.             $('textarea').each(function() {this.value = ''});
  15.             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;

替换为以下代码:

  1. /** Ajax */
  2.     $.ajax( {
  3.         url: ajax_php_url,
  4.         data: $(this).serialize(),
  5.         type: $(this).attr('method'),
  6.         error: function(request) {
  7.             $('#loading').slideUp();
  8.             $('#error').slideDown().html('<img src="' + pic_no + '" style="vertical-align:middle;" alt=""/> ' + request.responseText);
  9.             setTimeout(function() {$submit.attr('disabled', false).fadeTo('slow', 1); $('#error').slideUp();}, 3000);
  10.             $(".QapTcha").html('');$(".QapTcha").QapTcha();
  11.             },
  12.         success: function(data) {
  13.             $('#loading').hide();
  14.             comm_array.push($('#comment').val());
  15.             $('textarea').each(function() {this.value = ''});
  16.             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;
  17.             $(".QapTcha").html('');$(".QapTcha").QapTcha();

很明显,也就新增了2行JS代码,作用就是为了在aja评论成功或失败后,复原滑动模块,让滑动模块可以再次使用!

至此,Three主题评论按钮修改为滑动/拉链解锁后自动提交评论的功能已经实现了,欢迎大家测试使用。

特别感谢:本文技术和myQaptcha代码均来自于张戈博主的《WordPress评论滑动/拉链解锁myQaptcha修改为自动提交的方法》。

历史上的今天:

本文地址:http://yigujin.cn/425.html
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:aiboke112
版权声明:本文为原创文章,版权归 懿古今 所有,欢迎分享本文,转载请保留出处!
WordPress免费清新BLOG/CMS/博客导航三合一响应式主题Three
WordPress免费响应式主题:Nana

发表评论


表情

  1. 关岛属于哪个国家
    关岛属于哪个国家 【农民】 @回复

    我先去测试测试

  2. 清知枫
    清知枫 【队长】 @回复

    感谢分享,有时间我拿去折腾下d8,另外这个滑动解锁插件,再做点修改,把图片和文字对齐下,会更加美观!

  3. 电缆支架
    电缆支架 【队长】 @回复

    博客现在做的越来越好的,各方面不断的完善,这种滑动解锁要比输入字符数字那些好多了!

  4. 流年
    流年 【队长】 @回复

    博主大神,向博主学习。嘿嘿

  5. Sawyer
    Sawyer 【队长】 @回复

    我把滑动去掉了

  6. 李明
    李明 【镇长】 @回复

    已测试效果,真不错。

  7. 圆月博客
    圆月博客 【农民】 @回复

    这个主题不错

  8. 创意应用
    创意应用 【农民】 @回复

    博客很赞,文章很实用

  9. wys.me
    wys.me 【镇长】 @回复

    高大上的功能了。真的。说明技术无止境!

    • 懿古今
      懿古今【博主】2015-08-22 09:01  回复

      @wys.me[呲牙] 一直都说不再折腾,但是看到心动的东西还是会忍不住折腾一下

  10. 企业短信服务平台
    企业短信服务平台 【队长】 @回复

    在好几个网站上看到这样的滑动解锁插件,博主也是与时俱进呀,确实这个功能不错,哈哈

  11. 夜
    【村长】 @回复

    貌似和多说不兼容是不

    • 懿古今
      懿古今【博主】2015-08-22 08:59  回复

      @夜[疑问] 这个还真不知道,一般按照这个插件的都是自带评论,多说评论的防垃圾评论就很给力,应该不用安装这个

  12. videoclub
    videoclub 【省长】 @回复

    哈哈这个功能确实不错

  13. Zou
    Zou's Blog 【村长】 @回复

    是在他那看到了这个但是有的主题也不兼容的.

  14. 守心斋
    守心斋 【市长】 @回复

    越改越漂亮了,楼主辛苦了 [强]

  15. 中国历史
    中国历史 【省长】 @回复

    昨天还不是这样,今天又改进了呀