WordPress后台登陆界面美化教程 by ADMIN on 24 4 月,2018
网上大多教程的方式均是在主题模板函数 (functions.php)文件中取消注册和取消加载WordPress的自带css文件,然后加上自己的CSS文件。
但是本人按照这种方式并没有成功,怎么都取消不掉WordPress在头部加载的自带样式表,我自己的CSS文件倒是能加到头部去,但是优先级并没有自带的高,所以并没有效果。
打开登陆页面,检查页面元素会看到如下代码(在头部加载了一个由load-styles.php生成的样式表):
上图是未美化时的样子
下图是美化过后的样子(加载的是主题下的样式表)
既然登陆页面是wp-login.php生成的,那我们直接去修改wp-login.php文件来美化不也是一样的吗
在根目录找到wp-login.php文件,打开,找到85行:
wp_enqueue_style( 'login' );
改成
wp_register_style( 'style', get_bloginfo('template_directory').'/style.css' );
wp_enqueue_style( 'style' );
上面这句话的意思是加载主题目录下的style.css文件,这样样式就掌握在我们自己手中了,就可以自己对登陆页面进行样式美化了。
下面的CSS是我自己的样式,可做参考:
/* ************ *
* 登陆页面美化 *
* ************ */
.login div#login {
font-family:"Segoe UI","DejaVu Sans","Open Sans","Helvetica Neue", "Microsoft YaHei UI", "Microsoft YaHei","WenQuanYi Micro Hei","PingFang SC",sans-serif;
font-weight: 300;
font-size: 14px;
margin: 0 auto;
width: 320px;
padding: 8% 0 0;
}
.login div#login h1 a{
background-image: none,url(logo地址);
background-size: 84px;
background-position: center top;
background-repeat: no-repeat;
color: #444;
height: 84px;
font-size: 20px;
line-height: 1.3em;
margin: 0 auto 25px;
padding: 0;
width: 84px;
text-indent: -9999px;
display: block;
border-radius:50%;
}
.login #login_error, .login .message{
font-size: 13px;
padding: 12px;
margin-left: 0;
margin-bottom: 20px;
background-color: #fff;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.13);
}
.login .message{border-left: 1px solid #73c09c;}
.login #login_error{border-left: 1px solid #dc3232;}
.login #login_error a{color: #73c09c;}
.login form .input, .login input[type=text] {
font-size: 24px;
font-weight: 300;
width: 97%;
padding: 3px;
margin: 8px 0px 16px 0;
}
.login div#login input#rememberme{
display:none;
}
.login div#login .checkboxInput{
background-color:#fbfbfb;
border:1px solid #eee;
border-radius:0;
display:inline-block;
height:16px;
margin-right:10px;
margin-top:-2px;
vertical-align:middle;
width:16px;
}
.login div#login #rememberme:checked + .checkboxInput:after{
background-color:#73c09c;
border-radius:0;
content:"";
display:inline-block;
height:12px;
margin:2px;
width:12px
}
.wp-core-ui .button, .wp-core-ui .button-primary, .wp-core-ui .button-secondary{
border-radius:0;
}
.wp-core-ui .button-primary{
float: right;
}
.login form {
margin-top: 20px;
margin-left: 0;
padding: 26px 24px 36px;
background: #fff;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.13);
}
.login form, .login h1 a {
overflow: hidden;
}
.login div#login span#backtoblog {
float: left;
margin: 24px 0 0;
}
.login div#login span#nav {
float: right;
margin: 24px 0 0;
}
.login div#login span#backtoblog a, .login div#login span#nav a, .login div#login span#backtoblog a:visited, .login div#login span#nav a:visited, .login div#login span#backtoblog a:active, .login div#login span#nav a:active{
color: #666;
text-decoration: none;
}
.login div#login span#nav a:hover,.login div#login span#backtoblog a:hover{
color: #73c09c;
text-decoration: underline;
}
除了以上,当然还可以继续在wp-login.php文件中做一些修改。
找到116行 117行:
$login_header_url = __( 'https://wordpress.org/' );
$login_header_title = __( 'Powered by WordPress' );
改成
$login_header_url = get_bloginfo('url');
$login_header_title = get_bloginfo('name');
这句话的意思是修改logo链接到自己的主页,显示自己主页的标题
然后找到251行 254行 1019行 1032行的
<p>...</p>
改成
<span>...</span>
将p标记改成span标记是让 “返回到某某某” 和 “忘记密码” 这两句话在一行中显示
效果地址:https://www.aoiai.com/wp-login.php?user=admin