自定义 WordPress 后台登录界面方法

如何自定义 WordPress 后台登录界面？让WordPress 后台登录界面更有个性化，修改之前，我们还是在主题目录下的includes文件夹（或者主题其它目录下，只要函数中调用CSS样式的路径正确就可以）下新建一个存放自定义后台界面的样式和图片的文件夹login，方便以后再次利用，怕麻烦就到文章下面下载login文件夹。

第一步，向主题functions.php函数文件的最后一个“?>”添加代码：

// 远方的雪山自定义后台登录界面
//向body中添加一些标签，方便设置页面
function custom_login() {
echo '<!-- 网站Logo -->
    <div class="logo-main">
      <a class="logo" href="'. get_home_url() .'" title="'. get_bloginfo('name') .' | '. get_bloginfo('description') .'">'. get_bloginfo('name') .'</a>
    </div>
    <!-- 网站Logo end --> '; }
add_action('login_body_class', 'custom_login');
//引入自定义的css文件，自定义的css样式优先于wp样式
function fixed_login() {
// 下面载入的样式路径不能出错了
echo '<link rel="stylesheet" tyssspe="text/css" href="' . get_bloginfo('template_directory') . '/includes/login/login.css" />'; }
add_action('login_head', 'fixed_login');

第二步，添加CSS样式：

/*************后台新加入的CSS样式*************/
html{
    background: none !important;
}
.logo-main{
    display: block;
    height: 46px;
    margin: 36px auto 0 auto;
    text-align: center;
    overflow: hidden;
}
.logo-main a{
    color: #fff;
    text-shadow: 2px 2px 3px rgba(0,0,0,.4);
    font-size: 42px;
    line-height: 42px;
    font-family: "微软雅黑";
    text-decoration: none;
    font-weight: bold;
}
/*隐藏默认LOGO*/
#login > h1{
    display: none;
}
/*默认LOGO样式*/
.login h1 a{
    background: none;
    font-size: 30px;
    text-indent: 1px;
    display: inline;
}
#login{
    padding: 0;
}
/*背景样式*/
body.login{
    background-image: url(login_bg.jpg);/*背景图片与login.css样式在同一目录下*/
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
/*表单样式*/
.login form{
    background-color: rgba(255, 255, 255, 0.4);
    border: 1px rgba(255,255,255,.3) solid;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
#loginform .input{
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-transition: ease-in-out .5s;
    -moz-transition: ease-in-out .5s;
    -ms-transition: ease-in-out .5s;
    -o-transition: ease-in-out .5s;
    transition: ease-in-out .5s;
    border: none;
    color: #333;
}
#loginform .input:focus{
    background-color: #0af;
    color: #fff;
}
.login label{
    color: #333;
}
.login .button-primary{
    background-color: #666;
    border: none;
    padding: 2px 8px;
    color: #fff;
    cursor: pointer;
    -webkit-transition: ease-in-out .5s;
    -moz-transition: ease-in-out .5s;
    -ms-transition: ease-in-out .5s;
    -o-transition: ease-in-out .5s;
    transition: ease-in-out .5s;
}
.login .button-primary:hover{
    background-color: #0af;
}
.login #nav a, .login #backtoblog a{
    color: #333;
}
.login #nav a:hover, .login #backtoblog a:hover{
    color: #0af;
}
/*隐藏错误*/
#login_error{
    display: none;
}

# 更多WordPress技巧，请关注「WordPress专题」

方法来源：yfdxs