文章參考自：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 重寫，代碼就不放出來了，請參考上一篇教程。