WordPress
自定义wordpress登录界面（第二版）
远方的雪山在13年5月就写了《自定义wordpress登录界面》的文章，但当时只是为了界面的个性化，而没有考虑到实质性的东西，使用时得修改一些内容，也产生了一些不必要的代码。
时下流行的响应式设计在第一版中也没有设计出来，第二版萨龙龙很早就修改好，方法与第一版一样，只是在WP默认的界面上重新设计，去除默认的LOGO，添加了响应式的全屏背景，以及设计了下表单。
修改之前，我们还是在主题目录下的includes文件夹（或者主题其它目录下，只要函数中调用CSS样式的路径正确就可以）下新建一个存放自定义后台界面的样式和图片的文件夹login，方便以后再次利用，怕麻烦就到文章下面下载login文件夹。
第一步，向主题functions.php函数文件的最后一个“?>”添加代码：
- // 远方的雪山自定义后台登录界面
- //向body中添加一些标签，方便设置页面
- function custom_login() {
- echo '<!-- 网站Logo -->
- <div class="logo-main">
- <a class="logo" href="'. get_home_url() .'" title="'. get_bloginfo('name') .' | '. get_bloginfo('description') .'">'. get_bloginfo('name') .'</a>
- </div>
- <!-- 网站Logo end --> '; }
- add_action('login_body_class', 'custom_login');
- //引入自定义的css文件，自定义的css样式优先于wp样式
- function fixed_login() {
- // 下面载入的样式路径不能出错了
- echo '<link rel="stylesheet" tyssspe="text/css" href="' . get_bloginfo('template_directory') . '/includes/login/login.css" />'; }
- add_action('login_head', 'fixed_login');
第二步，添加CSS样式：
- /*************后台新加入的CSS样式*************/
- html{
- background: none !important;
- }
- .logo-main{
- display: block;
- height: 46px;
- margin: 36px auto 0 auto;
- text-align: center;
- overflow: hidden;
- }
- .logo-main a{
- color: #fff;
- text-shadow: 2px 2px 3px rgba(0,0,0,.4);
- font-size: 42px;
- line-height: 42px;
- font-family: "微软雅黑";
- text-decoration: none;
- font-weight: bold;
- }
- /*隐藏默认LOGO*/
- #login > h1{
- display: none;
- }
- /*默认LOGO样式*/
- .login h1 a{
- background: none;
- font-size: 30px;
- text-indent: 1px;
- display: inline;
- }
- #login{
- padding: 0;
- }
- /*背景样式*/
- body.login{
- background-image: url(login_bg.jpg);/*背景图片与login.css样式在同一目录下*/
- -webkit-background-size: cover;
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
- overflow: hidden;
- }
- /*表单样式*/
- .login form{
- background-color: rgba(255, 255, 255, 0.4);
- border: 1px rgba(255,255,255,.3) solid;
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
- box-shadow: none;
- }
- #loginform .input{
- background-color: rgba(0, 0, 0, 0.2);
- -webkit-transition: ease-in-out .5s;
- -moz-transition: ease-in-out .5s;
- -ms-transition: ease-in-out .5s;
- -o-transition: ease-in-out .5s;
- transition: ease-in-out .5s;
- border: none;
- color: #333;
- }
- #loginform .input:focus{
- background-color: #0af;
- color: #fff;
- }
- .login label{
- color: #333;
- }
- .login .button-primary{
- background-color: #666;
- border: none;
- padding: 2px 8px;
- color: #fff;
- cursor: pointer;
- -webkit-transition: ease-in-out .5s;
- -moz-transition: ease-in-out .5s;
- -ms-transition: ease-in-out .5s;
- -o-transition: ease-in-out .5s;
- transition: ease-in-out .5s;
- }
- .login .button-primary:hover{
- background-color: #0af;
- }
- .login #nav a, .login #backtoblog a{
- color: #333;
- }
- .login #nav a:hover, .login #backtoblog a:hover{
- color: #0af;
- }
- /*隐藏错误*/
- #login_error{
- display: none;
- }
最后还是附上萨龙龙修改后的文件夹login，下载解压放在主题includes目录下，如果放在其它目录也没有问题，只需要修改login.php文件中调用login.css的路径，然后在主题functions.php函数文件的最后一个“?>”添加代码：
- // 后台登录界面
- include("includes/login/login.php");
远方的雪山的后台登录界面是使用本文章中的样式，这一版不会有什么问题，希望你能喜欢。
本文由 远方的雪山 作者：萨龙龙 发表，转载请注明来源！
关键词：WordPress 使用, 界面设计
萨龙龙
文章：290 画廊：33 视频：37一个平平常常的人，热爱生活、旅行和摄影，骑行去过西藏，一直计划再去。14年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！
相关文章
背景图片可以调用必应的，每天同步更新
现在都不开放后台注册，感觉登录页面不需要再优化，现在干脆使用默认的。
我的主题按您的方法怎么不行呢 是不是一定要响应式主题才能呢，我的主题不是响应式的
我们现在用的桌面主题不是响应式的，按您的方法弄之后，出现错误 一定要响应式的主题才能弄吗
谢谢啦
很漂亮，尤其是看到了你的新LOGO，太帅了。
哈哈，这个也是花了很长的时间才想到这个方案。
很不错，不白花时间
这个还真没试过，马上实践看看
这个确实好看多了！
嗯，最重要的是响应式
看起来确实很醒目啊 会不会吸引spam呢
这方面没有想到，应该不至于，WP的后台地址谁都知道
界面么,懒得动了..吾倒是一直想改下登陆地址,怎奈几次都以失败告终,结果还是有TMD许多黑客….
后台地址我也想改，但没有找到好的方法。