首页 » Wordpress » Wordpress进阶教程
网站地图

wordpress进阶教程(十八):创建自定义的登陆页面

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

像上一篇教程，很多人不喜欢wordpress默认的注册页面，登陆页面也一样，这篇教程我们将创建一个自定义的登陆页面，你可以通过一个自定义页面模板来实现，也可以通过前面教程中提到的url重写来实现。

wordpress自定义登陆页面效果

第一步：创建文件

首先(还是以twenty ten主题为例)：在twenty ten主题文件夹里面新建一个php文件，文件名随意，比如：page-login.php。

第二步：给页面模板命名
在page-login.php页面开头添加代码：

  2. <?php   
  3. /* 
  4. Template Name: 自定义登陆页面  
  5. */  
  6. ?>  
  9. <?php   
  10. global $wpdb,$user_ID;   
  11.   
  12. if (!$user_ID) { //判断用户是否登录   
  13.     //接下来的代码都添加在这里   
  14.   
  15. }else { //跳转到首页   
  16.     echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";   
  17. }   
  18. ?>  
  21. get_header();//载入头部文件   
  22. ?>   
  23. <!--<script src="http://code.jquery.com/jquery-1.4.4.js"></script>--><!--如果你发现没有ajax提交，请检查是否有引入jquery.js文件-->   
  24. <div id="container">   
  25. <div id="content">   
  26. <h3>阿树工作室-登陆页面</h3>   
  27. <div id="result"></div> <!-- 输出结果 -->   
  28. <form id="wp_login_form" action="" method="post">   
  29. <label>用户名</label><br />   
  30. <input type="text" name="username" class="text" value="" /><br />   
  31. <label>密码</label><br />   
  32. <input type="password" name="password" class="text" value="" /> <br />   
  33. <label>   
  34. <input name="rememberme" type="checkbox" value="forever" />记住我</label>   
  35. <br /><br />   
  36. <input type="submit" id="submitbtn" name="submit" value="Login" />   
  37. </form>   
  38.   
  39. <script type="text/javascript"><!--ajax 提交数据-->                        
  40. $("#submitbtn").click(function() {   
  41. <!--请准备一个gif图-->   
  42. $('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loader.gif" class="loader" />').fadeIn();   
  43. var input_data = $('#wp_login_form').serialize();   
  44. $.ajax({   
  45. type: "POST",   
  46. url:  "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",   
  47. data: input_data,   
  48. success: function(msg){   
  49. $('.loader').remove();   
  50. $('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');   
  51. }   
  52. });   
  53. return false;   
  54.   
  55. });   
  56. </script>   
  57.   
  58. </div>   
  59. </div>   
  60. <?php   
  61. get_footer(); //载入底部文件  
  64. if($_POST){ //数据提交   
  65.     //We shall SQL escape all inputs   
  66.     $username = $wpdb->escape($_REQUEST['username']);   
  67.     $password = $wpdb->escape($_REQUEST['password']);   
  68.     $remember = $wpdb->escape($_REQUEST['rememberme']);   
  69.        
  70.     if($remember){   
  71.         $remember = "true";   
  72.     } else {   
  73.         $remember = "false";   
  74.     }   
  75.     $login_data = array();   
  76.     $login_data['user_login'] = $username;   
  77.     $login_data['user_password'] = $password;   
  78.     $login_data['remember'] = $remember;   
  79.     $user_verify = wp_signon( $login_data, false );    
  80.     //wp_signon 是wordpress自带的函数，通过用户信息来授权用户(登陆)，可记住用户名   
  81.            
  82.     if ( is_wp_error($user_verify) ) {    
  83.         echo "<span class='error'>用户名或密码错误，请重试!</span>";//不管啥错误都输出这个信息   
  84.         exit();   
  85.     } else { //登陆成功则跳转到首页(ajax提交所以需要用js来跳转)   
  86.         echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";   
  87.         exit();   
  88.     }   
  89. } else {   
  90.   
  91.     //第四步中的代码应该都包含在这里   
  92.        
  93. }  

这样你在后台添加页面的时候选择页面模板就可以看到这个页面模板了。

第三步：判断用户是否已经登陆

我们首先要做的当然还是判断用户是否已经登陆。接着添加以下代码：

  2. <?php   
  3. /* 
  4. Template Name: 自定义登陆页面  
  5. */  
  6. ?>  
  9. <?php   
  10. global $wpdb,$user_ID;   
  11.   
  12. if (!$user_ID) { //判断用户是否登录   
  13.     //接下来的代码都添加在这里   
  14.   
  15. }else { //跳转到首页   
  16.     echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";   
  17. }   
  18. ?>  
  21. get_header();//载入头部文件   
  22. ?>   
  23. <!--<script src="http://code.jquery.com/jquery-1.4.4.js"></script>--><!--如果你发现没有ajax提交，请检查是否有引入jquery.js文件-->   
  24. <div id="container">   
  25. <div id="content">   
  26. <h3>阿树工作室-登陆页面</h3>   
  27. <div id="result"></div> <!-- 输出结果 -->   
  28. <form id="wp_login_form" action="" method="post">   
  29. <label>用户名</label><br />   
  30. <input type="text" name="username" class="text" value="" /><br />   
  31. <label>密码</label><br />   
  32. <input type="password" name="password" class="text" value="" /> <br />   
  33. <label>   
  34. <input name="rememberme" type="checkbox" value="forever" />记住我</label>   
  35. <br /><br />   
  36. <input type="submit" id="submitbtn" name="submit" value="Login" />   
  37. </form>   
  38.   
  39. <script type="text/javascript"><!--ajax 提交数据-->                        
  40. $("#submitbtn").click(function() {   
  41. <!--请准备一个gif图-->   
  42. $('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loader.gif" class="loader" />').fadeIn();   
  43. var input_data = $('#wp_login_form').serialize();   
  44. $.ajax({   
  45. type: "POST",   
  46. url:  "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",   
  47. data: input_data,   
  48. success: function(msg){   
  49. $('.loader').remove();   
  50. $('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');   
  51. }   
  52. });   
  53. return false;   
  54.   
  55. });   
  56. </script>   
  57.   
  58. </div>   
  59. </div>   
  60. <?php   
  61. get_footer(); //载入底部文件  
  64. if($_POST){ //数据提交   
  65.     //We shall SQL escape all inputs   
  66.     $username = $wpdb->escape($_REQUEST['username']);   
  67.     $password = $wpdb->escape($_REQUEST['password']);   
  68.     $remember = $wpdb->escape($_REQUEST['rememberme']);   
  69.        
  70.     if($remember){   
  71.         $remember = "true";   
  72.     } else {   
  73.         $remember = "false";   
  74.     }   
  75.     $login_data = array();   
  76.     $login_data['user_login'] = $username;   
  77.     $login_data['user_password'] = $password;   
  78.     $login_data['remember'] = $remember;   
  79.     $user_verify = wp_signon( $login_data, false );    
  80.     //wp_signon 是wordpress自带的函数，通过用户信息来授权用户(登陆)，可记住用户名   
  81.            
  82.     if ( is_wp_error($user_verify) ) {    
  83.         echo "<span class='error'>用户名或密码错误，请重试!</span>";//不管啥错误都输出这个信息   
  84.         exit();   
  85.     } else { //登陆成功则跳转到首页(ajax提交所以需要用js来跳转)   
  86.         echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";   
  87.         exit();   
  88.     }   
  89. } else {   
  90.   
  91.     //第四步中的代码应该都包含在这里   
  92.        
  93. }  

第四步：添加登陆表单和ajax提交代码

在上一步留下的位置添加以下代码

  2. <?php   
  3. /* 
  4. Template Name: 自定义登陆页面  
  5. */  
  6. ?>  
  9. <?php   
  10. global $wpdb,$user_ID;   
  11.   
  12. if (!$user_ID) { //判断用户是否登录   
  13.     //接下来的代码都添加在这里   
  14.   
  15. }else { //跳转到首页   
  16.     echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";   
  17. }   
  18. ?>  
  21. get_header();//载入头部文件   
  22. ?>   
  23. <!--<script src="http://code.jquery.com/jquery-1.4.4.js"></script>--><!--如果你发现没有ajax提交，请检查是否有引入jquery.js文件-->   
  24. <div id="container">   
  25. <div id="content">   
  26. <h3>阿树工作室-登陆页面</h3>   
  27. <div id="result"></div> <!-- 输出结果 -->   
  28. <form id="wp_login_form" action="" method="post">   
  29. <label>用户名</label><br />   
  30. <input type="text" name="username" class="text" value="" /><br />   
  31. <label>密码</label><br />   
  32. <input type="password" name="password" class="text" value="" /> <br />   
  33. <label>   
  34. <input name="rememberme" type="checkbox" value="forever" />记住我</label>   
  35. <br /><br />   
  36. <input type="submit" id="submitbtn" name="submit" value="Login" />   
  37. </form>   
  38.   
  39. <script type="text/javascript"><!--ajax 提交数据-->                        
  40. $("#submitbtn").click(function() {   
  41. <!--请准备一个gif图-->   
  42. $('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loader.gif" class="loader" />').fadeIn();   
  43. var input_data = $('#wp_login_form').serialize();   
  44. $.ajax({   
  45. type: "POST",   
  46. url:  "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",   
  47. data: input_data,   
  48. success: function(msg){   
  49. $('.loader').remove();   
  50. $('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');   
  51. }   
  52. });   
  53. return false;   
  54.   
  55. });   
  56. </script>   
  57.   
  58. </div>   
  59. </div>   
  60. <?php   
  61. get_footer(); //载入底部文件  
  64. if($_POST){ //数据提交   
  65.     //We shall SQL escape all inputs   
  66.     $username = $wpdb->escape($_REQUEST['username']);   
  67.     $password = $wpdb->escape($_REQUEST['password']);   
  68.     $remember = $wpdb->escape($_REQUEST['rememberme']);   
  69.        
  70.     if($remember){   
  71.         $remember = "true";   
  72.     } else {   
  73.         $remember = "false";   
  74.     }   
  75.     $login_data = array();   
  76.     $login_data['user_login'] = $username;   
  77.     $login_data['user_password'] = $password;   
  78.     $login_data['remember'] = $remember;   
  79.     $user_verify = wp_signon( $login_data, false );    
  80.     //wp_signon 是wordpress自带的函数，通过用户信息来授权用户(登陆)，可记住用户名   
  81.            
  82.     if ( is_wp_error($user_verify) ) {    
  83.         echo "<span class='error'>用户名或密码错误，请重试!</span>";//不管啥错误都输出这个信息   
  84.         exit();   
  85.     } else { //登陆成功则跳转到首页(ajax提交所以需要用js来跳转)   
  86.         echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";   
  87.         exit();   
  88.     }   
  89. } else {   
  90.   
  91.     //第四步中的代码应该都包含在这里   
  92.        
  93. }  

第五步：验证数据
将下面的代码添加在第四步中代码的前面，然而要注意的是，最有一个大括号要放在第四步代码的后面。

  2. <?php   
  3. /* 
  4. Template Name: 自定义登陆页面  
  5. */  
  6. ?>  
  9. <?php   
  10. global $wpdb,$user_ID;   
  11.   
  12. if (!$user_ID) { //判断用户是否登录   
  13.     //接下来的代码都添加在这里   
  14.   
  15. }else { //跳转到首页   
  16.     echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";   
  17. }   
  18. ?>  
  21. get_header();//载入头部文件   
  22. ?>   
  23. <!--<script src="http://code.jquery.com/jquery-1.4.4.js"></script>--><!--如果你发现没有ajax提交，请检查是否有引入jquery.js文件-->   
  24. <div id="container">   
  25. <div id="content">   
  26. <h3>阿树工作室-登陆页面</h3>   
  27. <div id="result"></div> <!-- 输出结果 -->   
  28. <form id="wp_login_form" action="" method="post">   
  29. <label>用户名</label><br />   
  30. <input type="text" name="username" class="text" value="" /><br />   
  31. <label>密码</label><br />   
  32. <input type="password" name="password" class="text" value="" /> <br />   
  33. <label>   
  34. <input name="rememberme" type="checkbox" value="forever" />记住我</label>   
  35. <br /><br />   
  36. <input type="submit" id="submitbtn" name="submit" value="Login" />   
  37. </form>   
  38.   
  39. <script type="text/javascript"><!--ajax 提交数据-->                        
  40. $("#submitbtn").click(function() {   
  41. <!--请准备一个gif图-->   
  42. $('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loader.gif" class="loader" />').fadeIn();   
  43. var input_data = $('#wp_login_form').serialize();   
  44. $.ajax({   
  45. type: "POST",   
  46. url:  "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",   
  47. data: input_data,   
  48. success: function(msg){   
  49. $('.loader').remove();   
  50. $('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');   
  51. }   
  52. });   
  53. return false;   
  54.   
  55. });   
  56. </script>   
  57.   
  58. </div>   
  59. </div>   
  60. <?php   
  61. get_footer(); //载入底部文件  
  64. if($_POST){ //数据提交   
  65.     //We shall SQL escape all inputs   
  66.     $username = $wpdb->escape($_REQUEST['username']);   
  67.     $password = $wpdb->escape($_REQUEST['password']);   
  68.     $remember = $wpdb->escape($_REQUEST['rememberme']);   
  69.        
  70.     if($remember){   
  71.         $remember = "true";   
  72.     } else {   
  73.         $remember = "false";   
  74.     }   
  75.     $login_data = array();   
  76.     $login_data['user_login'] = $username;   
  77.     $login_data['user_password'] = $password;   
  78.     $login_data['remember'] = $remember;   
  79.     $user_verify = wp_signon( $login_data, false );    
  80.     //wp_signon 是wordpress自带的函数，通过用户信息来授权用户(登陆)，可记住用户名   
  81.            
  82.     if ( is_wp_error($user_verify) ) {    
  83.         echo "<span class='error'>用户名或密码错误，请重试!</span>";//不管啥错误都输出这个信息   
  84.         exit();   
  85.     } else { //登陆成功则跳转到首页(ajax提交所以需要用js来跳转)   
  86.         echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";   
  87.         exit();   
  88.     }   
  89. } else {   
  90.   
  91.     //第四步中的代码应该都包含在这里   
  92.        
  93. }  

到这里就已经搞定了，下马是本篇教程的代码文件下载：

懒人下载--有一个代码文件

关于本页面通过url重写，代码就不放出来了，请参考上一篇教程。