自定义wordpress的后台登陆界面

今天在天空团博客闲逛的时候，发现Tokin做了个很nice的后台登陆界面，并分享出来了；所以呢，我也就顺手牵羊收下了，哈哈！这个方法适合开发主题的大侠，个人也做个日记以后或许会用到。

不过个人觉得Tokin做的页面左边略微空旷，然后呢我就加了两行文字，这样看起来就协调点了，所以我也分享出来吧！

实现的方法很简单就一段函数和一段CSS代码就搞定，改起来也不麻烦

第一步

把CSS追加到登陆页面，代码如下：

//自定义登录页面LOGO

function custom_login_logo() { echo '<link rel="stylesheet" id="wp-admin-css" href="'.get_bloginfo('template_directory').'/admstyle.css" type="text/css" />

<h1>        此页面仅提供给管理员作登录后台所用。

<br>※ 如果你不是本站管理员，请速速离去。（你的IP网站后台已自动记录）</h1>

</div>';}

add_action('login_head', 'custom_login_logo');

将上面代码丢进模板函数里(functions.php)，如果你的函数模板里面已经自定义过了，那就替换掉以前的，不然会报错哦！如果没有那就加到最后把。

第二步

新建一个CSS文件，把以下代码粘贴进去，重命名为：“admstyle.css”，然后传到主题根目录下。

body,textarea{font-size:14px;font-family:"Microsoft Yahei",宋体,PMingLiU,Verdana,Arial,Helvetica,sans-serif !important;}

input{font-size:14px;font-family:Tahoma,Arial,sans-serif !important;}

body{background:#92C1D1 url(http://mat1.gtimg.com/www/mb/skin/2013/aboluo/apollo_130417_01.jpg) fixed center top no-repeat !important;}

.login h1 a {background-image:url('images/logo.png') !important;background-size:120px;background-position:top center;

background-repeat:no-repeat;width:170px;margin:auto;margin-top:35px;height:35px;text-indent:-9999px;overflow:hidden;padding-bottom:15px;display:block;}

#login {

width:320px;

background:rgba(0, 0, 0, 0.2);

padding:0 20px 100% 12px;

margin:auto;

top:0px;

right:15%;

position:fixed;

box-shadow:0px 0px 5px 0px #333;

}

.login form {

margin-left:8px;

padding:26px 24px 46px;

font-weight:normal;

background:rgba(255, 255, 255, 0.2);

border:none;

-moz-box-shadow:none;

-webkit-box-shadow:none;

box-shadow:#000 0 0px 10px -1px;}

#loginform {-webkit-border-radius:0px;border-radius:0px;}

.login form .input, .login input[type="text"] {

color:#555;

font-weight:200;

font-size:24px;

line-height:1;

width:100%;

padding:5px;

margin-top:2px;

margin-right:6px;

margin-bottom:16px;

border:1px solid #FFF;

background:#FFF !important;

outline:0;

-moz-box-shadow:none;

-webkit-box-shadow:none;

box-shadow:none;

}

.login form .input, .login input[type="text"] {

font-size:17px;

padding-bottom:11px;

padding-top:11px;

text-indent:3px; }

.login form .input, .login input[type="text"] {border:2px solid #DCE4EC;}

input.button-primary{

margin-top:8px;

border:#000;

font-weight:bold;

text-shadow:#FFF 0 0px 10px;}

.login .button-primary {

font-size:14px!important;

line-height:22px;

padding:8px 117px;

border-radius:0px;

}

input.button-primary {

background:rgba(255, 255, 255, 0.5);color:#000; }

input.button-primary:hover,input.button-primary:focus {

background:rgba(255, 255, 255, 0.8);color:#000; }

input.button-primary:active{

background:rgba(255, 255, 255, 0.2);color:#000; }

.login form .forgetmenot {

font-weight:normal;

float:none;

margin-top:-10px;

}

.login #nav, .login #backtoblog {text-shadow:#FFF 0 0 5px,#FFF 0 0 10px;float:right;margin:0 30px 0 0px;padding:16px 0px 0 20px;}

.login #nav a, .login #backtoblog a{color:#FFF!important;}

.login #nav a:hover, .login #backtoblog a:hover{color:#000!important;}

div.error, .login #login_error {display:none;}

div.updated, .login .message {background-color: #E0FFE1;border-color: #ACE655;}

.slogan {

padding-left: 420px;

padding-top: 65px;

}

.slogan h1 {

font-size: 18px;

line-height: 2em;font-family: 'PT Sans Narrow',"Microsoft YaHei", serif;font-weight:400;margin-left: -320px;

margin-top: 200px;

}

好了，搞定！

背景中文字的颜色神马的自己可以再改，背景图是调用的腾讯微博的，觉得不漂亮自行修改吧，登陆框的颜色啊神马的也可以自行修改，次页面由Tokin原创，我只是转载，版权归Tokin所有！

7条回应：“自定义wordpress的后台登陆界面”

涂涂小窝说道：

2015 年 8 月 22 日下午 10:30

此站是极不稳定啊，时好时坏。

回复
- 东少说道：
  
  2015 年 8 月 22 日下午 11:47
  
  @涂涂小窝我已经习惯了，最经没时间来处理这个问题。哈哈！
  
  回复
曹鹏杰说道：

2014 年 11 月 19 日下午 4:09

怎么我修改之后无法显示啊

回复
泰国清新电影说道：

2013 年 7 月 8 日下午 11:15

自从修改了。整个人都好看多了

回复
杨固涵说道：

2013 年 4 月 26 日下午 5:31

漂亮，回去试试···

不过可惜·只能给自己一个人YY下···

回复
买点什么好说道：

2013 年 4 月 19 日下午 7:13

呵呵，果然也很不错，不过貌似在窄屏下，你那些文字和登陆框重叠了耶~

回复
- 东少说道：
  
  2013 年 4 月 19 日下午 7:25
  
  @买点什么好这个左边距我写死了的，改成适合自己就行了，毕竟后台只有管理员使用！
  
  回复

第一步

第二步

7条回应：“自定义wordpress的后台登陆界面”

发表评论 取消回复

发表评论取消回复