文章参考自：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 重写，代码就不放出来了，请参考上一篇教程。