前言

有没有很多人都和我一样，觉得wordpress默认的后台登陆页面做的太丑了，强迫症的我当然受不了，于是就四处的寻找修改后台登陆页面的插件，后来想了下改一个页面就用插件会不会太过于大材小用了，所以我就想着利用CSS来实现修改后台登陆页面的布局，废话少说，下面上代码！

演示图

CSS代码

body,textarea {
    font-size:14px;
    font-family:"Microsoft Yahei",Arial,sans-serif !important;
}
input {
    font-size:14px;
    font-family:Tahoma,Arial,sans-serif !important;
}
body {
    background:#92C1D1 url(背景图片url) fixed center top no-repeat !important;
}
.login h1 a {
    background-image:url('LOGO图片url') !important;
    background-size:170px 35px;
    background-position:top center;
    background-repeat:no-repeat;
    width:170px;
    margin:auto;
    margin-top:35px;
    height:35px;
    text-indent:-9999px;
    overflow:hidden;
    padding-bottom:15px;
    display:block;
}
#login {
    width:320px;
    background:rgba(0,0,0,0.2);
    padding:0 20px 100% 12px;
    margin:auto;
    top:0px;
    right:15%;
    position:fixed;
    box-shadow:0px 0px 5px 0px #333;
}
.login form {
    margin-left:8px;
    padding:26px 24px 46px;
    font-weight:normal;
    background:rgba(255,255,255,0.2);
    border:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:#000 0 0px 10px -1px;
}
#loginform {
    -webkit-border-radius:0px;
    border-radius:0px;
}
.login form .input,.login input[type="text"] {
    color:#555;
    font-weight:200;
    font-size:24px;
    line-height:1;
    width:100%;
    padding:5px;
    margin-top:2px;
    margin-right:6px;
    margin-bottom:16px;
    border:1px solid #FFF;
    background:#FFF !important;
    outline:0;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}
.login form .input,.login input[type="text"] {
    font-size:17px;
    padding-bottom:11px;
    padding-top:11px;
    text-indent:3px;
}
.login form .input,.login input[type="text"] {
    border:2px solid #DCE4EC;
}
input.button-primary {
    margin-top:8px;
    border:#000;
    font-weight:bold;
    text-shadow:#FFF 0 0px 10px;
}
.login .button-primary {
    font-size:14px!important;
    line-height:22px;
    padding:8px 117px;
    border-radius:0px;
}
input.button-primary {
    background:rgba(255,255,255,0.5);
    color:#000;
}
input.button-primary:hover,input.button-primary:focus {
    background:rgba(255,255,255,0.8);
    color:#000;
}
input.button-primary:active {
    background:rgba(255,255,255,0.2);
    color:#000;
}
.login form .forgetmenot {
    font-weight:normal;
    float:none;
    margin-top:-10px;
}
.login #nav,.login #backtoblog {
    text-shadow:#FFF 0 0 5px,#FFF 0 0 10px;
    float:right;
    margin:0 30px 0 0px;
    padding:16px 0px 0 20px;
}
.login #nav a,.login #backtoblog a {
    color:#FFF!important;
}
.login #nav a:hover,.login #backtoblog a:hover {
    color:#000!important;
}
div.error,.login #login_error {
    display:none;
}
div.updated,.login .message {
    background-color:#E0FFE1;
    border-color:#ACE655;
}

使用方法

将以上CSS代码写入一个 xinadmin.css 文件，上传到主题目录下的css文件夹中

将以下代码加入到主题的 functions.php 文件里

//自定义登录页面
function custom_login_logo() { echo '<link rel="stylesheet" id="wp-admin-css" href="'.get_bloginfo('template_directory').'/css/xinadmin.css" type="text/css" />';}
add_action('login_head', 'custom_login_logo');

然后就大功告成了！注意替换CSS代码里面的图片url地址！