wordpress登录页美化教程

WordPress后台的登录页面默认就是一个登录的表单，背景什么的都是白茫茫的一片。看久了还真有点腻。今天就分享一下美化后台登录界面的简易教程。

首先，打开你的主题的"functions.php",拉倒最后面，在最后一行的 “?>” 前面添加如下代码：
 

/**
*WordPress登录界面美化
**/
functioncustom_login_style(){
echo'<link rel="stylesheet" id="wp-admin-css" href="'.get_bloginfo('template_directory').'/admin-style.css"type="text/css"/>';
}
add_action('login_head','custom_login_style');

再新建一个css文件，命名为“admin-style.css”，css内容如下：

body{
font-family:"MicrosoftYaHei",Helvetica,Arial,LucidaGrande,Tahoma,sans-serif;
width:100%;
height:100%;
background:url(2_14.jpg)no-repeat;
-moz-background-size:cover;/*背景图片拉伸以铺满全屏*/
-ms-background-size:cover;
-webkit-background-size:cover;
background-size:cover;
}
/*顶部的logo*/
.loginh1a{
background:url(images/logo.png)no-repeat;
background-size:220px50px;
width:220px;
height:50px;
padding:0;
margin:0auto1em;
border:none;
-webkit-animation:dropIn1slinear;
animation:dropIn1slinear;
}
/*登录框表单*/
.loginform,.login.message{
background:#fff;
background:rgba(255,255,255,0.3);
border-radius:3px;
border:1pxsolid#fff;
border:1pxsolidrgba(255,255,255,0.4);
-webkit-animation:fadeIn1slinear;
animation:fadeIn1slinear;
}
/*登录框输入框*/
.loginlabel{
color:#000;
}
.login.message{
color:#000;
}
#user_login{
font-size:18px;
line-height:32px;
}
/*返回博客与忘记密码链接*/
#backtobloga,#nava{
color:#fff!important;
display:inline-block;
-webkit-animation:rtol1slinear;
animation:rtol1slinear;
}
/*掉落的动画效果*/
@-webkit-keyframesdropIn{
0%{
-webkit-transform:translate3d(0,-100px,0)
}
100%{
-webkit-transform:translate3d(0,0,0)
}
}
@keyframesdropIn{
0%{
transform:translate3d(0,-100px,0)
}
100%{
transform:translate3d(0,0,0)
}
}
/*逐渐出现的动画效果*/
@-webkit-keyframesfadeIn{
from{
opacity:0;
-webkit-transform:scale(.8)translateY(20px)
}
to{
opacity:1;
-webkit-transform:scale(1)translateY(0)
}
}
@keyframesfadeIn{
from{
opacity:0;
transform:scale(.8)translateY(20px)
}
to{
opacity:1;
transform:scale(1)translateY(0)
}
}
/*从右往左的动画效果*/
@-webkit-keyframesrtol{
from{
-webkit-transform:translate(80px,0)
}
to{
-webkit-transform:translate(0,0)
}
}
@keyframesrtol{
from{
transform:translate(80px,0)
}
to{
transform:translate(0,0)
}
}

你可以自由修改第5行的背景图片和第14行的logo图片。修改好后保存，并上传到当前主题的目录即可。

这样就可以自定义登录背景了，操作起来是不是特别简单？

快换上心仪的背景吧 ~