自定义wordpress登录界面（第二版）

发表评论

远方的雪山在13年5月就写了《自定义wordpress登录界面》的文章，但当时只是为了界面的个性化，而没有考虑到实质性的东西，使用时得修改一些内容，也产生了一些不必要的代码。

时下流行的响应式设计在第一版中也没有设计出来，第二版萨龙龙很早就修改好，方法与第一版一样，只是在WP默认的界面上重新设计，去除默认的LOGO，添加了响应式的全屏背景，以及设计了下表单。

修改之前，我们还是在主题目录下的includes文件夹（或者主题其它目录下，只要函数中调用CSS样式的路径正确就可以）下新建一个存放自定义后台界面的样式和图片的文件夹login，方便以后再次利用，怕麻烦就到文章下面下载login文件夹。

第一步，向主题functions.php函数文件的最后一个"?>"添加代码：

  1. // 远方的雪山自定义后台登录界面
  3. //向body中添加一些标签，方便设置页面
  4. function custom_login() {
  5. echo '<!-- 网站Logo -->
  6.     <div class="logo-main">
  7.       <a class="logo" href="'. get_home_url() .'" title="'. get_bloginfo('name') .' | '. get_bloginfo('description') .'">'. get_bloginfo('name') .'</a>
  8.     </div>
  9.     <!-- 网站Logo end --> '; }
  10. add_action('login_body_class', 'custom_login');
  11. //引入自定义的css文件，自定义的css样式优先于wp样式
  12. function fixed_login() {
  13. // 下面载入的样式路径不能出错了
  14. echo '<link rel="stylesheet" tyssspe="text/css" href="' . get_bloginfo('template_directory') . '/includes/login/login.css" />'; }
  15. add_action('login_head', 'fixed_login');

第二步，添加CSS样式：

  1. /*************后台新加入的CSS样式*************/
  2. html{
  3.     background: none !important;
  4. }
  5. .logo-main{
  6.     display: block;
  7.     height: 46px;
  8.     margin: 36px auto 0 auto;
  9.     text-align: center;
  10.     overflow: hidden;
  11. }
  12. .logo-main a{
  13.     color: #fff;
  14.     text-shadow: 2px 2px 3px rgba(0,0,0,.4);
  15.     font-size: 42px;
  16.     line-height: 42px;
  17.     font-family: "微软雅黑";
  18.     text-decoration: none;
  19.     font-weight: bold;
  20. }
  21. /*隐藏默认LOGO*/
  22. #login > h1{
  23.     display: none;
  24. }
  25. /*默认LOGO样式*/
  26. .login h1 a{
  27.     background: none;
  28.     font-size: 30px;
  29.     text-indent: 1px;
  30.     display: inline;
  31. }
  32. #login{
  33.     padding: 0;
  34. }
  35. /*背景样式*/
  36. body.login{
  37.     background-image: url(login_bg.jpg);/*背景图片与login.css样式在同一目录下*/
  38.     -webkit-background-size: cover;
  39.     background-size: cover;
  40.     background-position: center;
  41.     background-repeat: no-repeat;
  42.     overflow: hidden;
  43. }
  44. /*表单样式*/
  45. .login form{
  46.     background-color: rgba(255, 255, 255, 0.4);
  47.     border: 1px rgba(255,255,255,.3) solid;
  48.     -webkit-box-shadow: none;
  49.     -moz-box-shadow: none;
  50.     box-shadow: none;
  51. }
  52. #loginform .input{
  53.     background-color: rgba(0, 0, 0, 0.2);
  54.     -webkit-transition: ease-in-out .5s;
  55.     -moz-transition: ease-in-out .5s;
  56.     -ms-transition: ease-in-out .5s;
  57.     -o-transition: ease-in-out .5s;
  58.     transition: ease-in-out .5s;
  59.     border: none;
  60.     color: #333;
  61. }
  62. #loginform .input:focus{
  63.     background-color: #0af;
  64.     color: #fff;
  65. }
  66. .login label{
  67.     color: #333;
  68. }
  69. .login .button-primary{
  70.     background-color: #666;
  71.     border: none;
  72.     padding: 2px 8px;
  73.     color: #fff;
  74.     cursor: pointer;
  75.     -webkit-transition: ease-in-out .5s;
  76.     -moz-transition: ease-in-out .5s;
  77.     -ms-transition: ease-in-out .5s;
  78.     -o-transition: ease-in-out .5s;
  79.     transition: ease-in-out .5s;
  80. }
  81. .login .button-primary:hover{
  82.     background-color: #0af;
  83. }
  84. .login #nav a, .login #backtoblog a{
  85.     color: #333;
  86. }
  87. .login #nav a:hover, .login #backtoblog a:hover{
  88.     color: #0af;
  89. }
  90. /*隐藏错误*/
  91. #login_error{
  92.     display: none;
  93. }

最后还是附上萨龙龙修改后的文件夹login，下载解压放在主题includes目录下，如果放在其它目录也没有问题，只需要修改login.php文件中调用login.css的路径，然后在主题functions.php函数文件的最后一个"?>"添加代码：

  1. // 后台登录界面
  2. include("includes/login/login.php");

login文件(提取码：wwet)

远方的雪山的后台登录界面是使用本文章中的样式，这一版不会有什么问题，希望你能喜欢。

 

附：第一笔

 

 


远方的雪山虽然设置了前台登录，但偶尔也会从后台界面登录，有时为客户做了一些网站不需要集成这一功能，所以看的久了，难免产生视觉疲劳。

而wordpress后台登录界面也没有自定义的功能设置，虽然有插件可行，但总是不想用插件。

方法其实很简单，向functions.php添加函数，然后调用css即可，就两部分代码，而界面的设计就靠个人的感觉。

添加之前，我们在主题目录下的includes文件夹（或者主题根目录下，只要函数中调用CSS样式的路径正确就可以）下新建一个存放自定义后台界面的样式和图片的文件夹login，方便以后再次利用。

第一步，向主题functions.php函数文件的最后一个"?>"添加代码：

  1. //远方的雪山自定义后台登录界面
  2. function custom_login() {
  3. echo '<div id="header">
  4.   <div><a href="'.get_home_url().'" title="'.get_bloginfo( 'name' ).'" class="logo_c"></a></div>
  5.   <div id="topmenu">
  6.     <a href="'.get_home_url().'" title="'.get_bloginfo( 'name' ).'">'.get_bloginfo( 'name' ).'</a>
  7.   </div>
  8. </div>
  9. <div id="salong">
  10.   <div id="sall">
  11.     <h1>'.get_bloginfo( 'name' ).'</h1>
  12.     <p>'.get_bloginfo('description').'</p>
  13.   </div>
  14. </div>
  15. <div id="footer-bottom">
  16.   <div id="footer-bottom-container">
  17.       <div class="sleft">Copyright &copy; 2013. <a href="'.get_home_url().'" title="'.get_bloginfo( 'name' ).'">'.get_bloginfo( 'name' ).'</a>.版权所有&nbsp;Design by <a target="_blank" href="http://salonglong.com">萨龙龙</a></div>
  18.   </div>
  19. </div>
  20. <div id="login_n"></div>
  21. <div id="loginBg"></div>
  22.  '; }
  23. add_action('login_body_class', 'custom_login');
  24. //向body中添加一些标签，方便设置页面
  25. function fixed_login() {
  26. echo '<link rel="stylesheet" tyssspe="text/css" href="' . get_bloginfo('template_directory') . '/includes/login/login.css" />'; }
  27. add_action('login_head', 'fixed_login');
  28. //引入自定义的css文件，自定义的css样式优先于wp样式

第二部，在函数中调用的样式文件login.css中添加如下代码（样式做了更改，把之前隐藏的登录界面中的返回站点、注册与忘记密码三个按钮显示出来）：

  1. #header { background:#fff; height:48px; width: 100%; box-shadow:2px 2px 5px #333; position:relative; z-index:999; }
  2. body.login { -webkit-text-size-adjust:none; background:url(login_bg.jpg) no-repeat; font-family: Verdana,sans-serif; background-size: cover; }
  3. .logo_c{ background:url(logo_h.png) no-repeat; display:block !important; float:left; width:40px; height:40px; margin:4px 16px; }
  4. #topmenu { float:rightright; margin:12px 20px 0 0; width: auto; display:block}
  5. #topmenu a { color: #000; text-decoration: none; }
  6. #topmenu a:hover { color:#f60; }
  7. #salong { height: 120px; margin: 0 auto; width: 960px; padding: 0; }
  8. #sall { padding-left: 420px; padding-top: 65px; }
  9. #sall p,#sall h1 { margin-left:-320px; color:#fff; line-height:32px; }
  10. #sall h1 { letter-spacing:8px; width: 320px; }
  11. #sall p { letter-spacing:2px; font-size: 14px; width: 420px; }
  12. #wp-submit { border:none; display:inline-block; height:26px; line-height:26px; padding:0 12px; font-size:12px; color:#fff; min-width:48px; text-align:center; border-radius:2px}
  13. #wp-submit { background-color:#1E7BB3; background-image:-webkit-linear-gradient(top, #3999D2, #1E7BB3); background-image:-moz-linear-gradient(top, #3999D2, #1E7BB3); background-image:-ms-linear-gradient(top, #3999D2, #1E7BB3); border-bottom:1px solid #02598E; cursor:pointer; }
  14. #wp-submit:hover { background:#3275a8; color:#fff}
  15. .login form .input:focus, .login input[type="text"]:focus { border-color:#3999D2; box-shadow:0 0 3px #1E7BB3}
  16. #footer-bottombottom { background:#000; opacity:0.8; border-bottom: 8px solid #FFFFFF; clear: both; color: #999999; height:40px; position: fixed; width: 100%; z-index: 100; bottombottom:0; line-height: 32px; }
  17. #footer-bottombottom-container { margin: 0 auto; width: 960px; overflow: hidden; padding: 0; position: relative; z-index: 100; }
  18. .sleft { color:#ccc; text-align:center; }
  19. #footer-bottombottom a { color:#ddd; text-decoration:none}
  20. #footer-bottombottom a:hover { color:#f90; }
  21. #login { overflow:hidden; position:relative; z-index:999; rightright:220px; padding:0; float:rightright; }
  22. .login form { width:240px; float:rightright; background:none; border:none; box-shadow:none; padding: 8px 24px 12px; }
  23. .login h1 a { background: url(logo.png) no-repeat; float: left; height:56px; position: relative; width:175px; display:none}
  24. .login #nav, .login #backtoblog { text-shadow: none; margin-left: 42px; }
  25. .login #nav a, .login #backtoblog a{ color: #fff !important; text-decoration: none; }
  26. #loginBg{ background:#000000; height: 500px; opacity: 0.6; position: absolute; rightright:220px; top: 0; width: 287px; z-index: 99; }
  27. #login_n{ background:url(login_n.png) no-repeat; height:93px; position: absolute; rightright:280px; top:46px; width:168px; z-index:999; }
  28. #user_login,#user_pass,.login form .input, .login input[type="text"]{ background:none; color:#fff; border:1px solid #3999D2; font-size:18px; }
  29. #login_error,.message{ width:240px; float:rightright; margin:0 8px; background:none !important; border:none !important; color:#f00; margin: 0 12px 12px 8px !important; }
  30. #login_error a,body, #wpbody, .form-table .pre, .ui-autocomplete li a,.login label{ color:#fff; }

具体效果可以看远方的雪山后台登录界面，有好的建议可以给我留言。

 

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。