Android 猫头鹰登录界面,WordPress个性化登陆界面（添加会遮挡双眼的猫头鹰动画）...

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

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

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

在文件最后面的

login_footer();

break;

} // end action switch

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

$(function() {

$('#login #user_pass').focus(function() {

$('#owl-login').addClass('password');

}).blur(function() {

$('#owl-login').removeClass('password');

});

});

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

<?php bloginfo( 'name' ); ?>

全部替换为：

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

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

#login #owl-login {

position: absolute;

left: 50%;

margin-left: -111px;

background-image: url("https://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("https://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、素材一

2、素材二

由于 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("/(.+)/ies",$str,$matches)){

$imgurl='http://cn.bing.com'.$matches[1];

echo'';

}}

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');"));

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