筆者雖然設定了前臺登入，但偶爾也會從後臺介面登入，有時為客戶做了一些網站不需要整合這一功能，所以看的久了，難免產生視覺疲勞。

而 WordPress 後臺登入介面也沒有自定義的功能設定，雖然有外掛可行，但總是不想用外掛。

方法其實很簡單，向 functions.php 新增函式，然後呼叫 css 即可，就兩部分程式碼，而介面的設計就靠個人的感覺。

新增之前，我們在主題目錄下的 includes 資料夾 （或者主題根目錄下，只要函式中呼叫 CSS 樣式的路徑正確就可以） 下新建一個存放自定義後臺介面的樣式和圖片的資料夾 login，方便以後再次利用。

  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="sll">
  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="https://yfdxs.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');
  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');

第二部，在函式中呼叫的樣式檔案 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. #sll{ padding-left: 420px; padding-top: 65px; }
  9. #sll p,#sllh1 { margin-left:-320px; color:#fff; line-height:32px; }
  10. #sll h1 { letter-spacing:8px; width: 320px; }
  11. #sll 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; }

具體效果可以看筆者後臺登入介面，有好的建議可以給我留言。