如何自定义WordPress博客后台登陆界面

垃圾站[www.lajiz.cn]博客教程之自定义WordPress博客后台登陆界面

首先编辑博客主题根目录中functions.php文件,添加以下代码:

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

然后在当前Wordpress模板主题根目录下新建login.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: #f6f6f6;
}
.login label{
  color: #000;
  line-height: 35px;
}
.login form{
  background: #fff;
}
.login form .input, .login input[type="text"]{
  background: transparent;
  border-color: #ddd;
  color: #666;
}
.login form .input:focus{
  border-color: #ccc;
}

在代码第五行有下面代码“images/login_bg.jpg”,编辑一个你想要的合适尺寸的背景图片命名为login_bg.jpg并上传到images目录中即可!

相关教程→如何更换WordPress博客后台登录界面Logo及url链接

本文由垃圾站编辑整理自xiumu.org,转载请注明原文地址:http://www.lajiz.cn/2152.html

本文固定链接: http://www.lajiz.cn/2152.html | 垃圾站

该文章由 sdujane 于2013年11月25日发表在 WP教程 分类下, 访客可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客!
原创文章,转载请注明: 如何自定义WordPress博客后台登陆界面 | 垃圾站
关键字:

如何自定义WordPress博客后台登陆界面:目前有4 条留言

  1. 地板
    斌果:

    CSS不错

    2013-12-01 上午 8:28 [回复]
  2. 板凳
    kagxi:

    为什么不要装?我看见很多人都装了啊

    2013-11-26 下午 3:26 [回复]
  3. 沙发
    kagxi:

    没事来逛逛。。。问个跟帖子不相关的问题。。。
    为什么我装了多说之后 访客评论的头像都不显示呢?

    2013-11-26 上午 12:51 [回复]
    • 最好不要装多说,如果不显示是不是你设置问题,或者网络问题?

      2013-11-26 下午 12:30 [回复]

发表评论

快捷键:Ctrl+Enter