自定義美化 WordPress 後臺登陸介面，半透明效果登陸框

很多朋友都想要美化自己的登陸介面、找回密碼介面、註冊介面，用了各種外掛來修飾！大家都知道，WordPress 外掛使用多了 WordPress 系統就壞變慢，就揀了芝麻丟了西瓜了，不能為了好看而忘記了速度！今天給大家帶來的是透過程式碼來實現 WordPress 登陸介面的自定義美化，文中內容來自於網路，有興趣的童鞋可以看看，僅供參考！對個別主題可能不友好，xiu 主題在內。

還有黑色樣式，就不演示了

編輯主題的 functions.php 檔案, 加入以下程式碼 （注意半形）

//登入介面
function diy_login_page() {
echo '<link rel="stylesheet" href="'%20.%20get_bloginfo(%20'template_directory'%20)%20.%20'/login.css" type="text/css" media="all" />' . "
";
}
add_action( 'login_enqueue_scripts', 'diy_login_page' );

在當前模板目錄下新建login.css 檔案 直接下載飛機票：http://pan.baidu.com/s/1o6Fjm6e

注意：以下 css 是兩個版本的, 全文貼上過去是白色版本的, 如果想要黑色的需要刪除 /*白色*/往後的部分.

html{
background: transparent;
}
body.login{
background: #000 url("images/login_bg.jpg") no-repeat center top;
}
body.login div#login h1 a {
display: none;
}
body.login div#login h1{
display: block;
height: 70px;
}
.login form,.login form .input, .login input[type="text"],.wp-core-ui .button-primary,.wp-core-ui .button-primary:hover{
-webkit-box-shadow:none;
box-shadow:none;
-webkit-border-radius: 0;
border-radius: 0;
}
.login form{
background: rgba(10,35,35,.4);
border: none;
}
.login form .input, .login input[type="text"]{
background: transparent;
border-color: #444;
color: #eee;
}
.login form .input:focus{
border-color: #666;
}
.login label{
color: #999;
line-height: 35px;
}

.wp-core-ui .button.button-primary{
background: rgba(187,64,48,.7);
border: none;
line-height: 12px;
padding: 10px 30px;
}
.wp-core-ui .button-primary:hover{
background: rgba(0,0,0,.4);
-webkit-transition: background 0.5s ease-out 0s;
-moz-transition: background 0.5s ease-out 0s;
-ms-transition: background 0.5s ease-out 0s;
-o-transition: background 0.5s ease-out 0s;
transition: background 0.5s ease-out 0s;
}
.wp-core-ui .button.button-primary,
.login label,
.login form .input{
font-family: 'Microsoft YaHei';
}
#nav,#backtoblog{
display: none;
}
/*白色*/
body.login{
background: #fff url("http://ww1.sinaimg.cn/large/5d2f370dgw1ebce7cxr03j21400p0n9l.jpg");
}
.login label{
color: #000;
line-height: 35px;
}
.login form{
background: rgba(255,255,255,.6);
}
.login form .input, .login input[type="text"]{
background: transparent;
border-color: rgba(50,50,50,.5);
color: #666;
}
.login form .input:focus{
border-color: rgba(50,50,50,.8);
}

整個可以實現半透明效果的登入狂風，怎麼樣，很不錯吧！有興趣的朋友可以試試！要修改背景請修改 body.login 類的 background 地址中的圖片！