WordPress技巧:在评论前加个评论解锁开关 – 千丝海阁

首页 » Wordpress » WordPress技巧:在评论前加个评论解锁开关

WordPress技巧:在评论前加个评论解锁开关

5887 34

写这篇文章之前,我有一些话要说。原先我看见有不少站点都在使用一种滑动解锁的插件myQaptcha,感觉还挺漂亮,想想这也是自己想要实现的功能,于是就下载安装了一下,结果发现没有办法直接运行显示,经过一阵折腾后,主要是jq冲突,能正常显示也能正常滑动解锁功能了。但偶尔有一次我滑动范围大了点,结果那个中间的滑动块没了。见下图:
myQaptcha
没有中间那滑动块,也就意味着解不了锁,也就意味着不能评论,解决的方法只能是重新刷新网页。我试了两款Chrome浏览器都有这问题,但FF没有,IE未试。
于是我到作者博客去留言反应此问题,由于某种众所皆知的可能原因,我的留言隔天没了。我顺便也点了下作者博客站点上的此滑动条,发现同样有相同的问题。你们有兴趣的话可以试试用Chrome访问作者博客http://blog.30c.org/2006.html鼠标按住滑动条往上方拖拉,然后在松开鼠标,很神奇吧。同样有问题的网站:http://www.itbobo.com/这样说明这个问题不是个例了。但是同样,也有正常的网站,http://www.52wordpress.net/
在我搞不清楚这个插件的状况的情况下,我只能自己写一个开关出来,于是就有了现在大家看到这个评论开关:
评论解锁 评论解锁
开关的作用仅仅在于开打评论输入框和激活submit按钮,没有Qaptcha(不是myQaptcha)的session机制,其实我到现在也搞不懂最简单的屏蔽通过comments.php页面提交的垃圾评论为啥要搞个session机制,也许它是想post一些参数,在最后的时候进行验证,但是如果这个session被拦截了,不都白搭了么,简简单单点设置button.disable不好吗?
由于这个评论开关牵涉到CSS样式,再加上我用的Freshblog主题的comments.php好像和默认主题twenty系列的comments.php用的元素相差太多,所以我暂时没有做成插件的打算(抱歉,没有对主题格式研究过,看上去Freshblog主题的评论好像集成了某个评论插件的功能,可以自动嵌套,我记得默认主题是没有这个功能的),如有需要,则再说了,下面放出所有代码,各位有能力者可以自行修改:
1.新建一个custom_radio.js,放在主题下的/javascripts目录,内容如下:

// Custom checkbox and radios

var toggleHandler = function(toggle) {
    var toggle = toggle;
    var radio = $(toggle).find("input");

    var checkToggleState = function() {
        if (radio.eq(0).is(":checked")) {
            $(toggle).removeClass("toggle-off");
        } else {
            $(toggle).addClass("toggle-off");
        }
    };

    checkToggleState();

    radio.eq(0).click(function() {
        $(toggle).toggleClass("toggle-off");
    });

    radio.eq(1).click(function() {
        $(toggle).toggleClass("toggle-off");
    });
};

$(document).ready(function() {
    $(".toggle").each(function(index, toggle) {
        toggleHandler(toggle);
    });
});

2.主题目录下/images/toggle放两张按钮图,方的圆的随便,尺寸30×30:

toggle

3.comments.php相关位置,即网址输入框后,评论输入框前,加入以下代码:

评论前先开启评论开关:
<div class="toggle">
    <label class="toggle-radio" for="toggleOption2">ON</label> 
    <input id="toggleOption1" type="radio" name="toggleOptions" value="option1" /> 
    <label class="toggle-radio" for="toggleOption1">OFF</label>  
    <input id="toggleOption2" type="radio" checked="checked" name="toggleOptions" value="option2" />
</div>

4.comments.php里的输入框和提交按钮属性里加上disabled属性,为了让网页打开时,输入框和提交按钮默认是无效状态,大致如下代码:

<textarea id="comment" tabindex="4" disabled="disabled" name="comment"></textarea> 
<input class="submit" id="submit" tabindex="5" type="submit" disabled="disabled" name="submit" value="Submit" />

5.最后在comments.php尾部,当然你也可以在footer.php里加上以下代码,注意下面的jquery库按照你自己的需要调整路径:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/jquery-1.8.3.min.js"></script> 
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/custom_radio.js"></script> 
<script type="text/javascript">
$(function() {  
$(".toggle :radio").change(function() {
         var lineType = $("input[name='toggleOptions']:checked").val();    
		 if(lineType == "option1")  {
			commentform.comment.disabled = false;
			commentform.submit.disabled = false;
		 }
		 else
			{
			commentform.comment.disabled = true;
			commentform.submit.disabled = true;
			}
     });
});  
</script>

6.将以下css样式加入到主题下的style.css中:

/***toggle button  ***/
.toggle {
  background-color: #6db240;
  border-radius: 6px;
  color: white;
  height: 29px;
  width: 81px;
  margin: 10px 12px 2px 0;
  overflow: hidden;
  *zoom: 1;
  display: inline-block;
  zoom: 1;
  *display: inline;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  transition: 0.25s;
  -webkit-backface-visibility: hidden; 
  }

.toggle.toggle-off {
    background-color: #ebebe4; 
}
.toggle.toggle-off .toggle-radio {
      background-image: url("images/toggle/icon-off.png");
      background-position: 0 0;
      color: white;
      left: 0;
      margin-left: 0.5px;
      margin-right: -13px;
      z-index: 1; 
}
.toggle.toggle-off .toggle-radio:first-child {
      left: -120%; 
}
.toggle .toggle-radio {
    background: url("images/toggle/icon-on.png") right top no-repeat;
    color: white;
    display: block;
	left: 120%;
    font-weight: 700;
    height: 22px;
    margin-left: -13px;
    padding: 5px 32px 2px;
    position: relative;
    text-align: center;
    z-index: 2;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
    -webkit-backface-visibility: hidden; 
}
.toggle .toggle-radio:first-child {
      margin-bottom: -29px;
      left: 0; 
}
.toggle input {
    display: none;
    position: absolute;
    outline: none !important;
    display: block\9;
    opacity: 0.01;
    filter: alpha(opacity=1);
    zoom: 1; 
}

评论开关样式来自zoe提供的Flat UI 扁平化风格工具包

2014.2.25 追加,如果需要设置发表过评论的用户能自动打开开关,则将上面第3段代码修改为

<div class="toggle">
<label class="toggle-radio" for="toggleOption2">ON</label>
<?php if (empty($comment_author)) {?>
	<input type="radio" name="toggleOptions" id="toggleOption1" value="option1" >
	<label class="toggle-radio" for="toggleOption1">OFF</label>
	<input type="radio" name="toggleOptions" id="toggleOption2" value="option2" checked="checked">
<?php }
else { ?>
	<input type="radio" name="toggleOptions" id="toggleOption1" value="option1" checked="checked">
        <label class="toggle-radio" for="toggleOption1">OFF</label>
	<input type="radio" name="toggleOptions" id="toggleOption2" value="option2" >
<?php } ?>
</div>

如要防所有垃圾,则在wp-comment-post里追加两行

$comment_radio        = ( isset($_POST['toggleOptions']) ) ? trim($_POST['toggleOptions']) : null;
if ( 'option1' != $comment_radio )
	wp_die( __('<strong>ERROR</strong>: please turn on the swtich first.') );
文章评分2次,平均分5.0



上一篇:WordPress技巧:文章内图片链接新窗口打开
下一篇:WordPress技巧:计算页面载入响应时间

本文原始地址:http://www.tiandiyoyo.com/2013/05/add-switch-before-comment/
本站所有文章,除了特别注明外,均为本站原创,转载请注明出处来自www.tiandiyoyo.com

您可能还会对以下文章感兴趣:

评论前先开启评论开关:


34 Comments

  1. 谢谢分享···················· 太复杂了 能做成插件吗?

  2. 还有几个问题麻烦博主⊙ω⊙
    1,为什么我改的效果是有,但发表过评论后姓名邮件等能够记住(不需再填,但这个开关还得开一次)?我看你这里开关也是能记住的哇~
    2,不需修改wp-comment-post.php就能放垃圾评论机器人?

    麻烦抽空不吝赐教,谢谢

    • tiandi :

      1.那个是我之后加的,你把上面第3段代码加个if (empty($comment_author))的判定即可。
      2.还是需要改的,文件需要加上对radio的识别。

      看文章更新的最后那些,我刚加的。

  3. 可是Twenty系列都是直接调用模板评论框怎么办呢
    comment_form( );

  4. 很人性化喔,之前评论过,现在不需再次开关~

    话说之前我一看到评论开关就想找教程,无奈贵站没有搜索框,只好/?s =评论开关来找~(我真是太聪明了)

    既然都新建了一个/custom_radio.js
    那么这段代码可不可以也放在这个文件里呢
    $(function() { $(“.toggle :radio”).change(function() { var lineType = $(“input[name='toggleOptions']:checked”).val(); if(lineType == “option1″) { commentform.comment.disabled = false; commentform.submit.disabled = false; } else { commentform.comment.disabled = true; commentform.submit.disabled = true; } }); });

  5. tennfy :

    学习下,用到我那上面去

  6. Era :

    用了这个以后,垃圾评论的问题怎么样?

    • tiandi :

      wp-comments-post上我加了对这个评论开关的判定。。。所以到目前为止是0。当然AK是开启的,补充一下,AK都是直接SPAM掉的,留在垃圾回收站的都是正常误判评论。

      • Era :

        AK都是直接SPAM掉的 是怎么回事?
        我现在把根目录那个文件都改名了,还有垃圾评论!虽然都被ak拦截了。

  7. myQaptcha已经不更新啦,现在WP都3.6.1了,我开始装了这个但是怎么都出不来,刚刚才知道作者已经停止更新了。感谢博主提供了另一种类似的解决方案!

  8. Andrew :

    点击的好,我的是选中

  9. 番茄 :

    体验效果很不错!

  10. 最讨厌滑动解锁的,经常要滑几次,点击的还好,点一下就可以。

  11. :

    原来Flat UI是基于Twitter Bootstrap实现一套界面工具,它包含许多基本的和复杂的 UI 部件,例如按钮,输入框,组合按钮,复选框,单选按钮,标签,菜单,进度条和滑块,导航元素等等。
    现在扁平化风格从手机UI到PC web都能看到在大量使用。简单,脱俗,会让人有眼前一亮的感脚。最主要的是: free! 话不多说,上图先~~ 下载接链在图后。
    值得注意的是它用了不少JQ特效和css3样式,如果舍不得抛弃低版本浏览器的用户,就别用了。

  12. :

    这个我喜欢,拿来折腾去。

  13. 呵呵,最近有发现这个东东,感觉挺有意思的.

  14. 请问博主用什么代码插件 我用不了代码 代码一方 出来就是效果了

    还有 如何实现不能复制 ?

    • tiandi :

      我用的 WP Code Highlight这款,你后台插件中心搜索就能找到。

      你指的不能复制是啥?右键不能弹框?CTRL+C不能用还是别的?

  15. 其实,现在用一些评论插件似乎还不错,至少垃圾留言少了,只是留言内容搜索引擎都看不到,所以我放弃了

  16. 这个也相当的实用!!

  17. Rilun :

    嘿嘿 能不能小巧一点 敢不敢啊

  18. 斌果 :

    有的浏览器不兼容很坑,这样就无法评论了

载入分页评论...