Loper主题美化滑动解锁功能Loper主题集成了一个很实用的滑动解锁功能,它的作用就是防止垃圾评论和机器人,拽立网,让你不用整天忙于文章评论审核和删除,我个人感觉强大是强大就是样式效果不怎么好看,可能是我看的太多了看腻了,所以我决定要修改滑动解锁美化效果,今天我把Loper主题美化滑动解锁功能方法分享给大家,请看以下操作!

美化前的效果图!

Loper主题美化滑动解锁功能

2.登陆你的后台管理,选择【外观】-【编辑】-【loper: 模板函数 (functions.php)】

直接搜索以下全部代码:

//滑动验证  
    function my_preprocess_comment($comment) {
        if (!is_user_logged_in()) {
            if(!session_id()) session_start();
            if(isset($_POST['iQapTcha']) && empty($_POST['iQapTcha']) && isset($_SESSION['iQaptcha']) && $_SESSION['iQaptcha']) {
                unset($_SESSION['iQaptcha']);
                return($comment);
            } else err("抱歉,你没有通过验证。");//提示语自行修改
        } else
            return($comment);
    }
    add_action('preprocess_comment', 'my_preprocess_comment');

 

把上面全部代码替换为:

//滑动验证  
function my_preprocess_comment($comment) {
if (!is_user_logged_in()) {
if(!session_id()) session_start();
if(isset($_POST['iQapTcha']) && empty($_POST['iQapTcha']) && isset($_SESSION['iQaptcha']) && $_SESSION['iQaptcha']) {
unset($_SESSION['iQaptcha']);
return($comment);
} else err("抱歉,你没滑动解锁!");//提示语自行修改
} else
return($comment);}
add_action('preprocess_comment', 'my_preprocess_comment');

 

2.登陆你的后台管理,选择【外观】-【编辑】-【loper: 样式表 (style.css)】

直接添加以下全部代码:【放在最底部】

/********************************/
/*******QapTcha滑动解锁功能CSS****/
/** 拽立网修改版 www.zlinet.com **/
/*******************************/
/* 控制解锁位子 */
#QapTcha {padding:10px 10px 10px 0;margin-top:10px;}
/* 控制清除效果 */
#QapTcha .clr{ clear:both ;}
/* 控制解锁条图片 */
#QapTcha #bgSlider {width:202px;height:22px;background:transparent url('qaptcha/sprites.png') no-repeat 0 -22px;float:left;}
/* 控制解锁按钮图片 */
#QapTcha #Slider {width:26px;height:22px;background:transparent url('qaptcha/sprites.png') no-repeat 0 0 ;margin: 0 0 0 5px;cursor:e-resize;}
/* 控制提示字体大小位子 */
#QapTcha #TxtStatus {float:left;width:202px;margin:2px 0 0 10px;font-size:11px;}
/* 解锁前字体颜色 */
#QapTcha .dropError { color:#FF0000 ;}
/* 解锁后字体颜色 */
#QapTcha .dropSuccess { color:#67A611 ;}

 

3.登陆你的后台管理,选择【外观】-【编辑】-【loper: 顶部 (header.php)】

直接搜索以下【4】个代码:

<script src="<?php bloginfo('template_url');?>/qaptcha/jquery/jquery-ui.js"></script>
<script src="<?php bloginfo('template_url');?>/qaptcha/jquery/jquery.ui.touch.js"></script>
<script src="<?php bloginfo('template_url');?>/qaptcha/jquery/QapTcha.jquery.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url');?>/qaptcha/jquery/QapTcha.jquery.css" />

 

把上面【4】个代码全部替换为以下全部【3】个代码:

<script src="<?php bloginfo('template_url');?>/qaptcha/jquery-ui.js"></script>
<script src="<?php bloginfo('template_url');?>/qaptcha/jquery.ui.touch.js"></script>
<script src="<?php bloginfo('template_url');?>/qaptcha/QapTcha.jquery.js"></script>

 

然后把以下3个JS代码和1个图片上传到Loper主题【/qaptcha/】目录里!

上传文件前,必须清空里面的全部文件和文件夹【jquery】和【images】!

要上传的4个文件我会打包,请看最下面地址!

美化后的效果图!

Loper主题美化滑动解锁功能

美化后的效果解锁图!

Loper主题美化滑动解锁功能

提示:除去【qaptcha】目录CSS,添加到主题(style.css)优化加载速度方便修改!

提示:CSS代码提示可以改,颜色改,QapTcha.jquery.js里面句子提示也可以改!各有所爱!

» 原创文章:《Loper主题美化滑动解锁功能》 » 本文地址:《http://www.zlinet.com/139.html
©版权声明:《拽立网》 » 转载请务必注明出处,喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^