WordPress后台登录界面美化

250180

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

效果预览

%title插图%num

右边那里是会透明的，透明度可以在css里调整（文字透明度也会被调整，慎用！）

  • %title插图%num
  • %title插图%num
  • %title插图%num
  • %title插图%num

使用教程:

  • 把 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;
}
© 版权声明
版权声明 1 本网站名称：钻芒博客
2 本站永久网址：www.zuanmang.net
3 本站原创内容转载请注明出处，付费内容未经本站授权禁止转载二次发布
4 本站所有内容禁止用于任何非法用途！部分文章、素材、资源软件来自网络，仅供大家学习与参考。如有侵权，请联系站长进行删除处理
5 本站投稿禁止发布任何违法内容，如发现将立即封号处理，欢迎举报监督
6 本站附件资源、教程等内容如因时效原因失效或不可用，请联系留言或联系站长及时更新
THE END
WordPress优化
# wordpress# wordpress美化# WordPress后台
喜欢就支持一下吧
点赞0 分享
Alextao的头像-钻芒网赞助会员
Typecho 导航主题Webstack 钻芒博客二开美化版 新增暗黑模式全屏切换等-钻芒网
Typecho 导航主题Webstack 钻芒博客二开美化版 新增暗黑模式全屏切换等
Typecho 导航主题Webstack 钻芒博客二开美化版 新增暗黑模式全屏切换...
2年前 811W+
WPS Office政府企业版-专业版无广告带VBA组件-钻芒网
WPS Office政府企业版-专业版无广告带VBA组件
WPS Office政府企业版-专业版无广告带VBA组件
5年前 28.6W+
Time相册主题 for Typecho模板 [2020年2月12日更新至V1.1.2 支持懒加载]-钻芒网
Time相册主题 for Typecho模板 [2020年2月12日更新至V1.1.2 支持懒加载]
Time相册主题 for Typecho模板 [2020年2月12日更新至V1.1.2 支持懒...
5年前 20.3W+
钻芒博主首个汉化主题-Gliu – 创意WordPress博客主题-钻芒网
钻芒博主首个汉化主题-Gliu – 创意WordPress博客主题
钻芒博主首个汉化主题-Gliu – 创意WordPress博客主题
5年前 13.1W+
钻芒博主汉化主题-Contentberg-内容营销和个人博客-钻芒网
钻芒博主汉化主题-Contentberg-内容营销和个人博客
钻芒博主汉化主题-Contentberg-内容营销和个人博客
5年前 9.5W+
WordPress主题 iDowns V1.8.4 最新版 带会员管理 卡密插件-钻芒网
WordPress主题 iDowns V1.8.4 最新版 带会员管理 卡密插件
WordPress主题 iDowns V1.8.4 最新版 带会员管理 卡密插件
5年前 7.2W+
相关推荐
钻芒博主首个汉化主题-Gliu – 创意WordPress博客主题-钻芒网
钻芒博主首个汉化主题-Gliu – 创意WordPress博客主题
钻芒博主首个汉化主题-Gliu – 创意WordPress博客主题
5年前 13.1W+
WordPress主题 iDowns V1.8.4 最新版 带会员管理 卡密插件-钻芒网
WordPress主题 iDowns V1.8.4 最新版 带会员管理 卡密插件
WordPress主题 iDowns V1.8.4 最新版 带会员管理 卡密插件
5年前 7.2W+
WordPress免登陆WPPAY 付费下载/隐藏内容插件【更新至Wppay V2.1 】-钻芒网
WordPress免登陆WPPAY 付费下载/隐藏内容插件【更新至Wppay V2.1 】
WordPress免登陆WPPAY 付费下载/隐藏内容插件【更新至Wppay V2.1 】
5年前 4.7W+
WordPress主题仿站视频教程-钻芒网
WordPress主题仿站视频教程
WordPress主题仿站视频教程
5年前 3.7W+
站长移植美化-WordPress下载插件xydown 移植美化版-钻芒网
站长移植美化-WordPress下载插件xydown 移植美化版
站长移植美化-WordPress下载插件xydown 移植美化版
5年前 2.3W+
WordPress自定义分类顺序排序调整插件-custom-taxonomy-order-钻芒博主汉化插件-钻芒网
WordPress自定义分类顺序排序调整插件-custom-taxonomy-order-钻芒博主汉化插件
WordPress自定义分类顺序排序调整插件-custom-taxonomy-order-钻芒博主汉化插件
4年前 1.7W+
评论 共2条

请登录后发表评论

    只看作者
    • 头像彼岸花莫语0
      Hello，站长好，使用这个的话，后台登录界面似乎没有背景呢？
      4年前
用户封面
Alextao的头像-钻芒网赞助会员

Typecho 导航主题Webstack 钻芒博客二开美化版 新增暗黑模式全屏切换等

WPS Office政府企业版-专业版无广告带VBA组件

Time相册主题 for Typecho模板 [2020年2月12日更新至V1.1.2 支持懒加载]

钻芒博主首个汉化主题-Gliu – 创意WordPress博客主题

钻芒博主汉化主题-Contentberg-内容营销和个人博客

WordPress主题 iDowns V1.8.4 最新版 带会员管理 卡密插件