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

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

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

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

(一).使用插件myQaptcha

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

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

效果图如下:

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

1.新建一个custom_radio.js,放在主题下的/javascripts目录,内容如下:

[php]
// 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);
});
});
[/php]

2.主题目录下/images/toggle放两张按钮图,方的圆的都可以,尺寸30×30,示意图如下:

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

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

[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>
[/php]

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

[php]
<textarea id="comment" tabindex="4" disabled="disabled" name="comment"></textarea>
<input class="submit" id="submit" tabindex="5" type="submit" disabled="disabled" name="submit" />
[/php]

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

[php]
<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>
[/php]

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

[php]
/***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;
}
[/php]

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

上一篇
下一篇
联系我们

联系我们

返回顶部