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个文件我会打包，请看最下面地址！

美化后的效果图！

美化后的效果解锁图！

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

提示：CSS代码提示可以改，颜色改，QapTcha.jquery.js里面句子提示也可以改！各有所爱！