wordpress後台登錄界面美化 - ⎝⎛CodingNote.cc ⎞⎠

wordpress後台登錄界面美化

2019 年 12 月 13 日
筆記

@font-face { font-family:fzz; src: url('https://img.zmki.cn/ttf/fzz.ttf'); } 模板從吾愛破解論壇搬的，原作者分享出來的圖片都丟失了，樣式也有點問題。寫了個圓角樣式及添加陰影，以及透明顯示。（~~本想用高斯模糊奈何這個結構全都都會變成毛玻璃效果。~~）用PHP隨機顯示圖片做背景，實現後台登錄背景隨機刷新。

效果預覽

右邊那裡是會透明的，透明度可以在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://a-oss.zmki.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;  }

Previous post

HTML炫酷PJAX引導單頁

Next post

HTML5 SVG+CSS3霓虹燈文字邊框動畫特效