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

2 Comments