WordPress后台登录界面美化

模板从吾爱破解论坛搬的,原作者分享出来的图片都丢失了,样式也有点问题。写了个圆角样式及添加阴影,以及透明显示。(本想用高斯模糊奈何这个结构全都都会变成毛玻璃效果。)用PHP随机显示图片做背景,实现后台登录背景随机刷新。

效果预览

%title插图%num


右边那里是会透明的,透明度可以在css里调整(文字透明度也会被调整,慎用!

使用教程:

  • 把 wp-login.php 复制到网站根目录替换
  • 把 css images js 3个文件复制到当前使用的主题根目录下
  • 将下面代码添加到主题functions.php文件中
    //后台登录页自定义

	//登录页
	function custom_login() {
		echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/css/login.css" />'."\n";
	}
	add_action('login_head', 'custom_login');

	//登录页标题
	function custom_headertitle ( $title ) {
		return get_bloginfo('name');
	}
	add_filter('login_headertitle','custom_headertitle');

	//登录页链接
	function custom_loginlogo_url($url) {
		return esc_url( home_url('/') );
	}
	add_filter( 'login_headerurl', 'custom_loginlogo_url' );

	//登录页页脚
	function custom_html() {
		echo '<div class="footer">'."\n";
		echo '<p>©xxxx '.date('Y').' </p>'."\n";//版权
		echo '</div>'."\n";
		echo '<script type="text/javascript" src="'.get_bloginfo('template_directory').'/js/resizeBg.js"></script>'."\n";
		echo '<script type="text/javascript">'."\n";
		echo 'jQuery("body").prepend("<div class=\"loading\"><img src=\"'.get_bloginfo('template_directory').'/images/login_loading.gif\" width=\"58\" height=\"10\"></div><div id=\"bg\"><img /></div>");'."\n";
		echo 'jQuery(\'#bg\').children(\'img\').attr(\'src\', \''.get_bloginfo('template_directory').'/images/login_bg.jpg\').load(function(){'."\n";
		echo '	resizeImage(\'bg\');'."\n";
		echo '	jQuery(window).bind("resize", function() { resizeImage(\'bg\'); });'."\n";
		echo '	jQuery(\'.loading\').fadeOut();'."\n";
		echo '});';
		echo '</script>'."\n";
	}
	add_action('login_footer', 'custom_html');

css样式(部分自己写的,很乱)

/* clear float */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
.clearfix { display: block; }

/* common */
html { overflow:auto; }
body { background: white; }

#bg img { opacity:0; }


span.login {
    color: #fff;
    font-size: 58px;
    height: 250px;
    line-height: 250px;
    border-bottom: 5px solid #ff5874;
    padding-bottom: 5px;
}
.login #login_error, .login .message, .login .success {
    border-left: 4px solid #333;
    /* padding: 0; */
    margin-left: 0;
    margin-bottom: 0;
    background-color: #fff;
    box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
    /* height: 0px; */
    padding-top: -50px;
    padding-bottom: 50p;
    /* margin-bottom: 50px; */
    /* margin-top: 50px; */
    width: auto;
    float: left;
}

/* login */
.login form .input, .login form input[type=checkbox], .login input[type=text] {
    background: #fff-;
}
body.login.login-action-login.wp-core-ui.locale-zh-cn {
    width: 100%;
    height: 100%;
    position: relative;
	overflow: auto;
	min-height: 950px;
}
input[type=radio], input[type=checkbox] {
    border: 1px solid #6e7491;

}
#login {
 /*-------登录左边图片(只用到这个,下边那个遮挡了)----------------------------------------------------- */
    width: 60%;
    /* max-width: 500px; */
    min-width: 350px;
    height: 80%;
    padding: 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #394673;
	/* 只设置左下角和右下角的圆角 */
	border-radius: 3% 3% 3% 3%;
	/* 阴影 */
-webkit-filter: drop-shadow(8px 8px 10px #000);filter: drop-shadow(8px 8px 10px #000);
    
   
	background-image: url(https://img.zmki.cn/bkbj/index.php);
}  /*-------登录界面背景图片----------------------------------------------------- */

#login h1 a {  

    margin-left: 0px;
}

	    
     /*-------登录栏图片(这个遮挡了,看不见)----------------------------------------------------- */
#login form { 
	box-shadow: inset 0 999px 99999px rgba(1,1,1,1), 0 99px 0 rgba(255,255,255,0.15);/*调色*/
    padding: 0;
    background: #242e50;
    float: right;
    padding-right: 7%;	/*半边比例*/
    height: 100%;		/*高度比例*/
    padding-left: 1%;	/*半边比例*/
	    margin-top: 0;
	    /* 只设置左下角和右下角的圆角 */
	border-radius: 0% 3% 3% 0%;
	-webkit-filter: opacity(50%);filter: opacity(90%);/*透明度*/


	/*background-image: url(https://60yu.w4i.cn/img/5ca07743af29c.jpg);*/
}



#login form p {
	font-family:"Microsoft Yahei";
	position:relative;
	padding:0px;
	padding-top: 35px;
}

#login a {
	color:#dbe0f7 !important;
	font-family:"Microsoft Yahei";
}
#login_error a {
	color: #6e7491;
    text-shadow: none;
}

#login form label {
	color: #6e7491;
    text-shadow: none;
}
input::-webkit-input-placeholder {
    color: #ffffff2e;
}
.login form .input, .login form input[type=checkbox], .login input[type=text] {
    background: #fff0;
}
#login form .input { 
    font-size: 18px;
    border: none;
    background-color: #fff0;
    height: 50px;
    line-height: 50px;
    padding: 0 0;
    margin-bottom: 20px;
    outline: none;
    box-shadow: inset 0 0px 0px rgba(0,0,0,.07);
    width: 300px;
    border-color: #d6d6d6;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    color: #fff;
    letter-spacing: 4px;
    font-weight: 700;
}

#login form .input:focus {
	box-shadow:none;
}

#login .form-send .bot {
	width:100%;
	border-bottom:1px solid #ccc;
}

#login form .forgetmenot {
	float:none;
}

#login form p.submit {
	padding:0px;
	margin-top: 60px;
}

#login .submit .button {
	width: 60%;
    box-sizing: border-box;
    display: inline-block;
    height: 45px;
    line-height: 45px;
    border-width: 0px;
    border-style: solid;
    color: #fff;
    background-color: #ff5874;
    border-color: #fff0;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding: 0 40px;
    outline: none;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.5s;
    text-shadow: none;
    border-radius: 25px;
    float: left;
}
#login .submit .button:hover {
    background-color: #c34157;
    color: #FFF;
}
.login #backtoblog, .login #nav {
    font-size: 13px;
    padding: 0 24px;
    opacity: 0;
	height: 1px;
}
.login #nav {
    margin: 24px 0 0;
    opacity: 0;
	height: 1px;
}
h1 {
    height: 0px;
    opacity: 0;
}
#login form p.wen {
    padding-top: 50px;
}
span {
    color: #6e7491;
    font-size: 14px;
}

.wp-core-ui .button-primary {
    background: #fff;
    box-shadow: 0 0px 0 #ffffff;
    text-shadow: none;
}

button{


outline:none;


}

/* footer */
.footer { font-size: 13px;
    font-family: "Microsoft Yahei";
    position: absolute;
    left: 0px;
    bottom: 10px;
    height: 30px;
	width:100%;
	text-align: center;
    line-height: 30px;
    color: #333; }
.footer a { text-decoration:underline; color:#FFF; }

/* loading */
.loading { position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:99; overflow:auto; background:#000; }
.loading img { position:absolute; top:50%; left:50%; width:58px; height:10px; margin:-5px 0px 0px -29px; }



.field{
  --uiFieldPaddingTop: var(--fieldPaddingTop, 0px);
  --uiFieldPaddingRight: var(--fieldPaddingRight, 0px);
  --uiFieldPaddingBottom: var(--fieldPaddingBottom, 0px);
  --uiFieldPaddingLeft: var(--fieldPaddingLeft, 0px);

  --uiFieldBorderColor: var(--fieldBorderColor, transpatent);
  --uiFieldBorderTop: var(--fieldBorderTop, 0px);
  --uiFieldBorderRight: var(--fieldBorderRight, 0px);
  --uiFieldBorderBottom: var(--fieldBorderBottom, 0px);
  --uiFieldBorderLeft: var(--fieldBorderLeft, 0px);

  --uiFieldBgColor: var(--fieldBgColor, transpatent);
  --uiFieldPlaceholderColor: var(--fieldPlaceholderColor, #767676);
  --uiFieldAnimationDuration: var(--fieldAnimationDuration, .3s);
  --uiFieldFonstSize: var(--fieldFontSize, 16px);

  position: relative;  
}

.field__input{
  width: 100%;
  box-sizing: border-box;
  background-color: var(--uiFieldBgColor);

  /* for iOS */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0;

  border-style: solid;
  border-color: var(--uiFieldBorderColor);

  border-top-width: var(--uiFieldBorderTop);
  border-right-width: var(--uiFieldBorderRight);
  border-bottom-width: var(--uiFieldBorderBottom);
  border-left-width: var(--uiFieldBorderLeft);

  padding-top: var(--uiFieldPaddingTop);
  padding-right: var(--uiFieldPaddingRight);
  padding-bottom: var(--uiFieldPaddingBottom);
  padding-left: var(--uiFieldPaddingLeft);

  font-family: inherit;
  font-size: 100%;
  color: inherit;
}

.field__input::-webkit-input-placeholder{ 
  color: var(--uiFieldPlaceholderColor);
  opacity: 0;
}

.field__input::-moz-placeholder{ 
  color: var(--uiFieldPlaceholderColor);
  opacity: 0;
}

.field__input:focus{
  outline: none;  
}

.field__input:focus::-webkit-input-placeholder{ 
  -webkit-transition: opacity var(--uiFieldAnimationDuration) ease-out var(--uiFieldAnimationDuration); 
  transition: opacity var(--uiFieldAnimationDuration) ease-out var(--uiFieldAnimationDuration);
  opacity: 1;
}

.field__input:focus::-moz-placeholder{ 
  -webkit-transition: opacity var(--uiFieldAnimationDuration) ease-out var(--uiFieldAnimationDuration); 
  transition: opacity var(--uiFieldAnimationDuration) ease-out var(--uiFieldAnimationDuration);
  opacity: 1;
}

.field__label{
  position: absolute;
  top: calc(8px + var(--uiFieldPaddingTop) + var(--uiFieldBorderTop));
  left: calc(0px + var(--uiFieldPaddingLeft) + var(--uiFieldBorderLeft));

  pointer-events: none;

  -webkit-transition: top var(--uiFieldAnimationDuration) cubic-bezier(0.9,-0.15, 0.1, 1.15), opacity var(--uiFieldAnimationDuration) ease-out;

  transition: top var(--uiFieldAnimationDuration) cubic-bezier(0.9,-0.15, 0.1, 1.15), opacity var(--uiFieldAnimationDuration) ease-out;
  will-change: top, opacity;
}

.field__input:not(:placeholder-shown) ~ .field__label{
  opacity: 0;
  top: calc(0px + var(--uiFieldPaddingTop) + var(--uiFieldBorderTop));
}

.field__input:focus ~ .field__label{
  opacity: 1;
  top: calc(-1 * calc(var(--uiFieldPaddingTop) + var(--uiFieldBorderTop) + 15px));
}

/* type1 */

.field_type1{
  --uiFieldPaddingTop: var(--fieldPaddingTop, 15px);
  --uiFieldPaddingRight: var(--fieldPaddingRight, 15px);
  --uiFieldPaddingBottom: var(--fieldPaddingBottom, 15px);
  --uiFieldPaddingLeft: var(--fieldPaddingLeft, 15px);

  --uiFieldBorderTop: var(--fieldBorderTop, 2px);
  --uiFieldBorderRight: var(--fieldBorderRight, 2px);
  --uiFieldBorderBottom: var(--fieldBorderBottom, 2px);
  --uiFieldBorderLeft: var(--fieldBorderLeft, 2px);  
}

.field_type1 .field__input{  
  -webkit-transition: border-color var(--uiFieldAnimationDuration) ease-out;  
  transition: border-color var(--uiFieldAnimationDuration) ease-out;
  will-change: border-color;
}

.field_type1 .field__input:focus{
  --uiFieldBorderColor: var(--fieldBorderColorActive);
}

/* type 2 */

.field_type2{
  --uiFieldBorderBottom: var(--fieldBorderBottom, 2px);
  --uiFieldPaddingTop: var(--fieldPaddingTop, 5px);
  --uiFieldPaddingRight: var(--fieldPaddingRight, 15px);
  --uiFieldPaddingBottom: var(--fieldPaddingBottom, 10px);
  --uiFieldPaddingLeft: var(--fieldPaddingLeft, 0px);  
}

.field_type2 .field__line{
  width: 0;
  background-color: var(--fieldBorderColorActive);

  position: absolute;
  bottom: 0;
  left: 0;

  will-change: width;
  -webkit-transition: width var(--uiFieldAnimationDuration) ease-out;
  transition: width var(--uiFieldAnimationDuration) ease-out;
}

.field_type2 .field__input:focus ~ .field__line{
  width: 100%;
}

/* type 3 */

.field_type3{
  --uiFieldBorderBottom: var(--fieldBorderBottom, 2px);
  --uiFieldPaddingTop: var(--fieldPaddingTop, 5px);
  --uiFieldPaddingRight: var(--fieldPaddingRight, 15px);
  --uiFieldPaddingBottom: var(--fieldPaddingBottom, 10px);
  --uiFieldPaddingLeft: var(--fieldPaddingLeft, 0px);  
}

.field_type3 .field__line{
  width: 100%;
  height: var(--uiFieldBorderBottom);

  position: absolute;
  bottom: 0;
  left: 0;
}

.field_type3 .field__line:before, .field_type3 .field__line:after{
  content: "";
  width: 0;
  height: 100%;
  background-color: var(--fieldBorderColorActive);

  position: absolute;
  bottom: 0;

  will-change: width;
  -webkit-transition: width var(--uiFieldAnimationDuration) ease-out;
  transition: width var(--uiFieldAnimationDuration) ease-out;
}

.field_type3 .field__line:before{
  left: 50%;
}

.field_type3 .field__line:after{
  right: 50%;
}

.field_type3 .field__input:focus ~ .field__line:before,
.field_type3 .field__input:focus ~ .field__line:after{
  width: 50%;
}

/*
* demo styles
*/

.field{
  --fieldBorderColor: #fff;
  --fieldBorderColorActive: #fbc2eb;
  --fieldPlaceholderColor: #fff;
  display: block;
  color: #fff;
}

.field_type1{

}

/*
* demo page
*/
.page{
  
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.page__demo{
  -webkit-box-flex: 2;
      -ms-flex-positive: 2;
          flex-grow: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.main-container{
}

.page__container{
  width: 80%;  
  margin: auto;  
  padding-top: 100px;
  max-width: 380px;
}

.page__section:not(:first-child){
}



@media screen and (min-width: 641px){


  .melnik909{
    margin-left: 2rem;
  }  
}

@media screen and (max-width: 640px){

  .melnik909{
    display: none;
  } 
}

input[type=text], input[type=search], input[type=radio], input[type=tel], input[type=time], input[type=url], input[type=week], input[type=password], input[type=checkbox], input[type=color], input[type=date], input[type=datetime], input[type=datetime-local], input[type=email], input[type=month], input[type=number], select, textarea {
    border: none;
    box-shadow: none;
    background-color: #fff0;
	font-size: 24px;
    width: 100%;
    padding: 3px;
    margin: 2px 6px 5px 0;
	color: #fff;
}
.page__section {
    padding-top: 50px;
}
label.field.field_type2 {
    border-bottom: 2px solid #ffffff;
}
.login form .input, .login input[type=text] {
    margin: 2px 6px 5px 0;
	letter-spacing: 2px;
}
input#user_pass {
    letter-spacing: 5px;
}
span.login_title {
    font-size: 48px;
    color: #fff;
    line-height: 150px;
    padding-bottom: 5px;
    border-bottom: 5px solid #ff5874;
}

span.lostpassword {
    float: left;
    width: 54%;
    padding-top: 20px;
    margin-left: 8px;
    padding-right: 10px;
}
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 共2条

请登录后发表评论

    • 头像彼岸花莫语0