如何在WordPress博客评论前添加评论(滑动+点击)解锁开关[插件+代码]

随着Wordpress博客(www.lajiz.cn)的不断走红,垃圾评论也不断攀升,很多开启了评论功能的WordPress博客每天可以收到大量由Bot自动提交的、水军人为手动提交的垃圾评论。现如今过多的垃圾评论惹的博主们苦不堪言,每天登录博客的第一件事就是删除这些垃圾评论,那么有没有一些更好的方法防治垃圾评论呢?

垃圾站博客本文主讲如何通过人工解锁的方式防止由机器人自动提交的垃圾评论

(一).使用插件myQaptcha

使用滑动解锁的插件“myQaptcha”可以有效防止垃圾评论,不喜欢修改代码的博主们可以直接安装此插件!

(二).通过修改代码实现点击解锁

效果图如下:

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,示意图如下:

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" />

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;
}

本文由垃圾站编辑整理自tiandiyoyo.com,转载请注明本文链接:http://www.lajiz.cn/1718.html

本文固定链接: http://www.lajiz.cn/1718.html | 垃圾站

该文章由 sdujane 于2013年06月18日发表在 WP教程 分类下, 访客可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客!
原创文章,转载请注明: 如何在WordPress博客评论前添加评论(滑动+点击)解锁开关[插件+代码] | 垃圾站
关键字: ,

如何在WordPress博客评论前添加评论(滑动+点击)解锁开关[插件+代码]:目前有15 条留言

  1. 代码好长

    2015-01-14 下午 3:45 [回复]
  2. 我的网站流量不大,所以暂时不用!

    2013-08-04 下午 10:56 [回复]
  3. 6楼
    ztyhome:

    好东西啊~这个很实用,

    2013-06-26 上午 9:36 [回复]
  4. 可惜用手机评论好像不能滑动的。

    2013-06-25 上午 1:56 [回复]
    • 这倒是个问题,如果有手机版客户端会好点!

      2013-06-25 下午 3:08 [回复]
  5. 太长太难果断不看= =

    2013-06-20 下午 3:49 [回复]
    • 当然使用插件myQaptcha方法简单,不过有人反映插件可能会冲突……

      2013-06-20 下午 4:36 [回复]
  6. 地板
    新奇趣:

    这个功能蛮新颖

    2013-06-20 上午 8:41 [回复]
    • 谢谢来访垃圾站博客,欢迎常来逛逛!

      2013-06-20 下午 4:38 [回复]
  7. 板凳
    bbis:

    按钮比验证码好多了。

    2013-06-19 下午 3:29 [回复]
    • 是啊,验证码有时候懒得输入了,按钮按一下就好了!

      2013-06-19 下午 3:31 [回复]
  8. 沙发我来坐

    2013-06-18 下午 3:29 [回复]
    • 欢迎欢迎哈,好久没有更新了……

      2013-06-18 下午 4:42 [回复]

发表评论

快捷键:Ctrl+Enter