如何更换WordPress后台登录界面

2016-04-15 22:41 阅读 1,317 次 评论 3 条

今天有小伙伴问我WordPress后台登录界面可不可以更换,答案是可以更换的,说实话对于WordPress自带的后台登录界面的确不好看,今天远航带大家来换个后台登录界面;

先让大家看看我的后台登录界面,看着是不是挺不错啊,其实更换后台登录界面挺简单,大家跟着我步骤来:wp后台登录界面

1、找到我们网站模板里面的functions.php(模板函数),在将下面的代码添加在functions.php里面。

//登录界面
function diy_login_page() {
echo '' . "\n";
}
add_action( 'login_enqueue_scripts', 'diy_login_page' );
?>

2、找个漂亮的后台背景图片,图片名称设置为:beijing.jpg,上传到网站模板images文件里。假如你网站模板里面存放图片的文件是img的话,把代码里面的images改成img就行了。后台修改代码

3、在本地建立一个css样式,CSS样式名为设置为:login.css;将下面的代码粘贴进去,保存后,用Flash FTP工具上传在网站模板里面。

/* CSS Document */
html{
background: transparent;
}
body.login{
background:url("images/beijing.jpg");
background-size:100%;

}
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;
}
/*白色*/

ps:完成这三步,你网站后台登录界面就修改成功。大家赶紧试试吧!

版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:如何更换WordPress后台登录界面 | 重庆SEO【5年技术实力】重庆网站优化

发表评论


表情

  1. 艾特SEO
    艾特SEO 【农民】 @回复

    恩,这个后台很漂亮,写的很详细,有时间尝试下

  2. 沫沫
    沫沫 【农民】 @回复

    写的很仔细,不错,我的登录界面已更换, [憨笑] [憨笑] [坏笑] [坏笑]

  3. 子御
    子御 【农民】 @回复

    很好,可以自己DIY了。 [得意]