^ Back to top

WordPress个性化登陆界面(添加会遮挡双眼的猫头鹰动画)

在开始本篇文章之前,我们先来看下最终效果,需要的话就继续看下去吧。文章最后面还加了个点心,欢迎品尝。

maotouying

即当鼠标切换到登陆密码一栏时,那只萌萌的猫头鹰就害羞的遮挡住了双眼。陌小雨给大家分享这效果的具体方法:

1、编辑WordPress根目录下的/wp-login.php文件

在文件最后面的

<php
login_footer();
break;
} // end action switch

代码之前添加下面js代码:

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(function() {
 
        $('#login #user_pass').focus(function() {
            $('#owl-login').addClass('password');
        }).blur(function() {
            $('#owl-login').removeClass('password');
        });
    });
</script>

然后继续在该文件中搜索下面代码:

<div id="login">
		<h1><a href="<php echo esc_url( $login_header_url ); >" title="<php echo esc_attr( $login_header_title ); >" tabindex="-1"><php bloginfo( 'name' ); ></a></h1>

全部替换为:

<div id="login">
     <div id="owl-login">
           <div class="hand"></div>
           <div class="hand hand-r"></div>
           <div class="arms">
               <div class="arm"></div>
               <div class="arm arm-r"></div>
           </div>
      </div>

2、编辑/wp-admin/css目录下的login.min.css文件

editplus打开该文件后依次选择菜单:文档-自动换行,再将下面的文件粘帖到最后面:

#login #owl-login {
    position: absolute;
    left: 50%;
    margin-left: -111px;
    background-image: url("http://pic.dedewp.com/wp-content/uploads/owl-login.png");
    height: 108px;
    width: 211px;
    margin-top: -79px;
}
#login #owl-login .hand {
    width: 34px;
    height: 34px;
    border-radius: 40px;
    background-color: #472D20;
    transform: scaleY(0.6);
    transition: all 0.3s ease-out 0s;
    position: absolute;
    left: 14px;
    bottom: -8px;
}
#login #owl-login .hand.hand-r {
    left: 170px;
}
#login #owl-login .hand {
    width: 34px;
    height: 34px;
    border-radius: 40px;
    background-color: #472D20;
    transform: scaleY(0.6);
    transition: all 0.3s ease-out 0s;
    position: absolute;
    left: 14px;
    bottom: -8px;
}
#login #owl-login .arms {
    top: 58px;
    position: absolute;
    width: 100%;
    height: 41px;
    overflow: hidden;
}
#login #owl-login.password .hand{
  -webkit-transform: translateX(42px) translateY(-15px) scale(0.7);
  -moz-transform: translateX(42px) translateY(-15px) scale(0.7);
  -o-transform: translateX(42px) translateY(-15px) scale(0.7);
  -ms-transform: translateX(42px) translateY(-15px) scale(0.7);
  transform: translateX(42px) translateY(-15px) scale(0.7);
}
#login #owl-login.password .hand.hand-r {
  -webkit-transform: translateX(-42px) translateY(-15px) scale(0.7);
  -moz-transform: translateX(-42px) translateY(-15px) scale(0.7);
  -o-transform: translateX(-42px) translateY(-15px) scale(0.7);
  -ms-transform: translateX(-42px) translateY(-15px) scale(0.7);
  transform: translateX(-42px) translateY(-15px) scale(0.7);
}
#login #owl-login .arms .arm{
  width: 40px;
  height: 65px;
  position: absolute;
  left: 20px;
  top: 40px;
  background-image: url("http://pic.dedewp.com/wp-content/uploads/owl-login-arm.png");
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  -ms-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
#login #owl-login .arms .arm.arm-r {
  -webkit-transform: rotate(20deg) scaleX(-1);
  -moz-transform: rotate(20deg) scaleX(-1);
  -o-transform: rotate(20deg) scaleX(-1);
  -ms-transform: rotate(20deg) scaleX(-1);
  transform: rotate(20deg) scaleX(-1);
  left: 158px;
}
#login #owl-login.password .arms .arm{
  -webkit-transform: translateY(-40px) translateX(40px);
  -moz-transform: translateY(-40px) translateX(40px);
  -o-transform: translateY(-40px) translateX(40px);
  -ms-transform: translateY(-40px) translateX(40px);
  transform: translateY(-40px) translateX(40px);
}
#login #owl-login.password .arms .arm.arm-r{
  -webkit-transform: translateY(-40px) translateX(-40px) scaleX(-1);
  -moz-transform: translateY(-40px) translateX(-40px) scaleX(-1);
  -o-transform: translateY(-40px) translateX(-40px) scaleX(-1);
  -ms-transform: translateY(-40px) translateX(-40px) scaleX(-1);
  transform: translateY(-40px) translateX(-40px) scaleX(-1);
}
#login_error, .login .message {
    margin-top: 20px;
}

下面是上述代码中所需的两个图片素材,右键另存为下载后上传到自己的服务器替换其中的图片地址。

1、素材一

owl-login

2、素材二owl-login-arm

由于WordPress自动升级频繁,所以每次自动升级后都需要手动将login.min.css中添加的css代码重新添加一次。

如果需要和陌小雨一样,给登陆界面添加一个漂亮的背景图,只需要将下面的代码添加到主题functions.php。

//自定义登录页面背景
    function custom_login_head(){
    $str=file_get_contents('http://cn.bing.com/HPImageArchive.aspxidx=0&n=1');
    if(preg_match("/<url>(.+)<\/url>/ies",$str,$matches)){
    $imgurl='http://cn.bing.com'.$matches[1];
        echo'<style type="text/css">body{background: url('.$imgurl.');background-attachment:fixed;width:100%;height:100%;background-image:url('.$imgurl.');background-attachment:fixed;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;-webkit-background-size: 100% 100%;background-size: 100% 100%;-moz-border-image: url('.$imgurl.') 0;background-attachment:fixed;background-repeat:no-repeat\9;background-image:none\9;}h1 a { background-image:url('.get_bloginfo('url').'/favicon.ico)!important;width:32px;height:32px;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}#loginform {background-color:rgba(251,251,251,0.3)!important;}.login label,a{color:#000!important;}</style>';
    }}
    add_action('login_head', 'custom_login_head');
    add_filter('login_headerurl', create_function(false,"return get_bloginfo('url');"));
    add_filter('login_headertitle', create_function(false,"return get_bloginfo('name');"));

背景图是每日一换的哦,每一天都是新鲜的。

陌陌评论 8

评论前必须登录!

登陆 注册
  1. 森林之家
    我就来看看我的头像弄好了没
  2. 知园
    超赞! :mrgreen:
  3. 同盟源
    萌翻了,设计得好啊!
  4. 灰常记忆
    :wink: 你用上了?