自定义WordPress后台登陆界面wp-login.php美化登陆框

多朋友都想要美化自己WordPress的登陆界面、找回密码界面、注册界面wp-login.php文件,用了各种插件来修饰!大家都知道,wordpress插件使用多了wordpress系统就坏变慢,就拣了芝麻丢了西瓜了,不能为了好看而忘记了速度!今天给大家带来的是通过代码来实现wordpress登陆界面的自定义美化,文中内容来自于网络,有兴趣的童鞋可以看看,仅供参考!对个别主题可能不友好,xiu主题在内。

还有黑色样式,就不演示了

编辑主题的functions.php文件,加入以下代码(注意半角)

//登录界面
function diy_login_page() {
echo '' . "\n";
}
add_action( 'login_enqueue_scripts', 'diy_login_page' );

注意:以下css是两个版本的,全文粘贴过去是白色版本的,如果想要黑色的需要删除 /*白色*/往后的部分.

html{
background: transparent;
}
body.login{
background: #000 url("images/login_bg.jpg") no-repeat center top;
}
body.login div#login h1 a {
display: none;
}
body.login div#login h1{
display: block;
height: 70px;
}
.login form,.login form .input, .login input[type="text"],.wp-core-ui .button-primary,.wp-core-ui .button-primary:hover{
-webkit-box-shadow:none;
box-shadow:none;
-webkit-border-radius: 0;
border-radius: 0;
}
.login form{
background: rgba(10,35,35,.4);
border: none;
}
.login form .input, .login input[type="text"]{
background: transparent;
border-color: #444;
color: #eee;
}
.login form .input:focus{
border-color: #666;
}
.login label{
color: #999;
line-height: 35px;
}
.wp-core-ui .button.button-primary{
background: rgba(187,64,48,.7);
border: none;
line-height: 12px;
padding: 10px 30px;
}
.wp-core-ui .button-primary:hover{
background: rgba(0,0,0,.4);
-webkit-transition: background 0.5s ease-out 0s;
-moz-transition: background 0.5s ease-out 0s;
-ms-transition: background 0.5s ease-out 0s;
-o-transition: background 0.5s ease-out 0s;
transition: background 0.5s ease-out 0s;
}
.wp-core-ui .button.button-primary,
.login label,
.login form .input{
font-family: 'Microsoft YaHei';
}
#nav,#backtoblog{
display: none;
}
/*白色*/
body.login{
background: #fff url("http://ww1.sinaimg.cn/large/5d2f370dgw1ebce7cxr03j21400p0n9l.jpg");
}
.login label{
color: #000;
line-height: 35px;
}
.login form{
background: rgba(255,255,255,.6);
}
.login form .input, .login input[type="text"]{
background: transparent;
border-color: rgba(50,50,50,.5);
color: #666;
}
.login form .input:focus{
border-color: rgba(50,50,50,.8);
}

整个可以实现半透明效果的登录狂风,怎么样,很不错吧!有兴趣的朋友可以试试!要修改背景请修改body.login类的background地址中的图片!
采自原文链接: https://ihuan.me/1190.html

码十三旨在打造网站模板素材及源码资源免费下载优质服务平台:
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"ma13.com",如遇到无法解压的请联系管理员!
声明如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.
码十三 » 自定义WordPress后台登陆界面wp-login.php美化登陆框

让建站变的更简单,网站源码模板素材一网打尽!

立即查看 了解详情