自定义WordPress后台登陆界面

25

login_page

login_page_black

编辑functions.php文件,加入以下代码

1
2
3
4
5
//登录界面
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' );

在当前模板目录下新建login.css,内容如下

login.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
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);
}

补充一下,这个css是两个版本的,全文粘贴过去是白色版本的,如果想要黑色的需要删除 /*白色*/ 往后的部分.

共 25 条评论

  1. 回复

    请问,要是好几张背景图片自己切换该怎么弄,谢谢

    • 回复

      这个单用CSS没法解决需要js控制
      懒得码 网上找找现成的吧

  2. 回复

  3. 回复

    博主用的是什么代码高亮插件

    • 回复

      插件是 wp-syntax 样式是自己写的

  4. 回复

    最新版本的wp可以使用吗

  5. 回复

    搜藏了

  6. 回复

    默認的不美觀,這個修改就格調弄得完全不同。

  7. 回复

    不显示图片问题,求解决啦,博主自己的登陆界面也不显示。。。

    • 回复

      我的是故意不显示的,请查看文章结尾的补充部分.

      • 回复

        哈,没看到这个,,谢谢!解决了!
        可以交换链接吗?我的博客已经加上您的了。

        • 回复

          已添加.

          • 谢谢,很喜欢!

  8. 回复

    博主,请问为什么登陆界面的背景图片不显示呢?

    • 回复

      图片要自己找

      • 回复

        我找了图片,也按照代码中的位置加进去了,但是就是不显示,,求救,很喜欢这篇文章中的效果的样子。。

        • 回复

          url(“images/login_bg.jpg”) 把这个换成http开头的绝对路径 试下,主要是我不知道你遇到了什么问题.

          • 我试了,不过我看到您的也是不显示的,您可以自己试试看。

  9. 回复

    这个后台很漂亮!

  10. 回复

    这个不错,支持了!

  11. 回复

    呵呵 多用户的时候挺好的,一个人想折腾也能有折腾

  12. 回复

    再加个自动获取什么图片网站的图片就酷了~

    • 回复

      壁纸这个东西还是看个人喜好放吧. 众口难调.

    • 回复

      获取后给自己看?还不如直接上图片站看

发表评论

您的邮箱不会公开,当您的评论有新的回复时,会通过您填写的邮箱向您发送评论内容。 必填字段 *

为何看不到我发布的评论?

正在提交, 请稍候...

This site uses Akismet to reduce spam. Learn how your comment data is processed.