当前位置:首页 > WordPress插件WordPress教程 > 正文

自定义美化WordPress后台登陆界面,半透明效果登陆框

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

1130227

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

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

//登录界面
function diy_login_page() {
echo '<link rel="stylesheet" href="' . get_bloginfo( 'template_directory' ) . '/login.css" type="text/css" media="all" />' . "\n";
}
add_action( 'login_enqueue_scripts', 'diy_login_page' );

在当前模板目录下新建login.css文件 直接下载飞机票:http://pan.baidu.com/s/1o6Fjm6e

注意:以下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地址中的图片!

标签:
上一篇: 下一篇:

22 条评论

评论加载中...
  1. 10楼
    来自天朝的朋友 谷歌浏览器 Windows 7
    漠然  

    :bobo_jiujie: :bobo_jiujie: :bobo_jiujie: :bobo_jiujie: 撸主,鉴于垃圾评论……需要插件来治。。。前两天 我跟你这情况一样……不过我开启了审核,大半夜瞬间80封邮件

    2015年6月26日 16:21 评论
    • 幻殺あ殤璃  

      昨天优化了一下function删掉了很多,结果垃圾评论就好多没拦下来

      2015年6月26日 16:43 评论
  2. 9楼
    来自天朝的朋友 谷歌浏览器 Windows 8.1
    小微  

    留个脚印,不错。

    2015年6月24日 15:58 评论
  3. 8楼
    来自天朝的朋友 Internet Explorer Windows 8.1
    游客  

    为什么没有注册,忘记密码,返回网站选项

    2015年6月12日 16:42 评论
  4. 7楼
    来自天朝的朋友 谷歌浏览器 Windows 7
    筛宝  

    不错的博客。

    2015年6月4日 10:17 评论
  5. 6楼
    来自天朝的朋友 未知浏览器 Unknow Os
    之行  

    看看

    2015年3月29日 14:39 评论
  6. 5楼
    来自天朝的朋友 未知浏览器 Unknow Os
    八岐大蛇  

    不错

    2015年1月30日 10:00 评论
  7. 这个只有自己能看到,没什么实际用途

    2015年1月4日 12:36 评论
  8. 地板
    来自天朝的朋友 未知浏览器 Unknow Os
    中国历史  

    实用为好

    2014年10月25日 16:53 评论
  9. 好的嘛。

    2014年10月2日 09:36 评论
  10. 亲,你提供的这些,你先试过没有?咋个我用了,都打不开我的网站了呢?

    2014年10月1日 22:02 评论
    • 截图就是我试的时候截图的。函数修改的时候要半角,还有就是最好用专业编辑器。函数出差,整个网站都会打不开,从ftp中修改函数就好了

      2014年10月2日 05:11 评论

发表评论

不理你。不要啊!吃饭。吃惊。吃西瓜。飞吻!恭喜!Hi纠结!膜拜!OK抛媚眼。泡泡糖。抛钱。忍!生闷气!调皮。偷看。委屈。献花。疑问?抓狂!

小提示:Ctrl+Enter快速提交助您一臂之力~
加载中……