文章參考自：http://www.tutorialstag.com/custom-WordPress-login-without-using-a-plugin.html

像上一篇教程，很多人不喜歡 WordPress 預設的註冊頁面，登陸頁面也一樣，這篇教程我們將建立一個自定義的登陸頁面，你可以透過一個自定義頁面模板來實現，也可以透過前面教程中提到的 url 重寫來實現。

第一步：建立檔案

首先 (還是以 twenty ten 主題為例)：在 twenty ten 主題資料夾裡面新建一個 php 檔案，檔名隨意，比如：page-login.php 。

第二步：給頁面模板命名
在 page-login.php 頁面開頭新增程式碼：

  1. <?php   
  2. /*
  3. Template Name: 自定義登陸頁面  
  4. */  
  5. ?>  

這樣你在後臺新增頁面的時候選擇頁面模板就可以看到這個頁面模板了。

第三步：判斷使用者是否已經登陸

我們首先要做的當然還是判斷使用者是否已經登陸。接著新增以下程式碼：

  1. <?php   
  2. global $wpdb,$user_ID;   
  3.   
  4. if (!$user_ID) { //判斷使用者是否登入   
  5.     //接下來的程式碼都新增在這裡   
  6.   
  7. }else { //跳轉到首頁   
  8.     echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";   
  9. }   
  10. ?>  

第四步：新增登陸表單和 ajax 提交程式碼

在上一步留下的位置新增以下程式碼

  1. get_header();//載入頭部檔案   
  2. ?>   
  3. <!--<script src="http://code.jquery.com/jquery-1.4.4.js"></script>--><!--如果你發現沒有 ajax 提交，請檢查是否有引入 jquery.js 檔案-->   
  4. <div id="container">   
  5. <div id="content">   
  6. <h3> 阿樹工作室-登陸頁面</h3>   
  7. <div id="result"></div> <!-- 輸出結果 -->   
  8. <form id="wp_login_form" action="" method="post">   
  9. <label> 使用者名稱</label><br />   
  10. <input type="text" name="username" class="text" value="" /><br />   
  11. <label> 密碼</label><br />   
  12. <input type="password" name="password" class="text" value="" /> <br />   
  13. <label>   
  14. <input name="rememberme" type="checkbox" value="forever" /> 記住我</label>   
  15. <br /><br />   
  16. <input type="submit" id="submitbtn" name="submit" value="Login" />   
  17. </form>   
  18.   
  19. <script type="text/javascript"><!--ajax 提交資料-->                        
  20. $("#submitbtn").click(function() {   
  21. <!--請準備一個 gif 圖-->   
  22. $('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loader.gif" class="loader" />').fadeIn();   
  23. var input_data = $('#wp_login_form').serialize();   
  24. $.ajax({   
  25. type: "POST",   
  26. url:  "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",   
  27. data: input_data,   
  28. success: function(msg){   
  29. $('.loader').remove();   
  30. $('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');   
  31. }   
  32. });   
  33. return false;   
  34.   
  35. });   
  36. </script>   
  37.   
  38. </div>   
  39. </div>   
  40. <?php   
  41. get_footer(); //載入底部檔案  

第五步：驗證資料
將下面的程式碼新增在第四步中程式碼的前面，然而要注意的是，最有一個大括號要放在第四步程式碼的後面。

  1. if($_POST){ //資料提交   
  2.     //We shall SQL escape all inputs   
  3.     $username = $wpdb->escape($_REQUEST['username']);   
  4.     $password = $wpdb->escape($_REQUEST['password']);   
  5.     $remember = $wpdb->escape($_REQUEST['rememberme']);   
  6.        
  7.     if($remember){   
  8.         $remember = "true";   
  9.     } else {   
  10.         $remember = "false";   
  11.     }   
  12.     $login_data = array();   
  13.     $login_data['user_login'] = $username;   
  14.     $login_data['user_password'] = $password;   
  15.     $login_data['remember'] = $remember;   
  16.     $user_verify = wp_signon( $login_data, false );    
  17.     //wp_signon 是 WordPress 自帶的函式，透過使用者資訊來授權使用者 (登陸)，可記住使用者名稱   
  18.            
  19.     if ( is_wp_error($user_verify) ) {    
  20.         echo "<span > 使用者名稱或密碼錯誤，請重試!</span>";//不管啥錯誤都輸出這個資訊   
  21.         exit();   
  22.     } else { //登陸成功則跳轉到首頁 (ajax 提交所以需要用 js 來跳轉)   
  23.         echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";   
  24.         exit();   
  25.     }   
  26. } else {   
  27.   
  28.     //第四步中的程式碼應該都包含在這裡   
  29.        
  30. }  

到這裡就已經搞定了，下馬是本篇教程的程式碼檔案下載：

懶人下載--有一個程式碼檔案

關於本頁面透過 url 重寫，程式碼就不放出來了，請參考上一篇教程。