wordpress进阶教程(十七):创建自定义的注册页面

本文翻译自http://www.tutorialstag.com/create-custom-wordpress-registration-page.html谢谢(有改动)。

我相信大多数站长使用wordpress时不喜欢让用户使用默认的注册/登陆页面来让用户注册或者登陆。大家都希望让这个页面看起来能配合站点的样式。这一篇教程我们将创建一个自定义的注册页面。

原文使用的是自定义的页面模板,我们在文章结尾将讲述使用我们上一篇教程说到的自定义url重写功能来添加这样一个页面。

第一步:创建文件。

我们还是以默认的twenty ten主题为例,在主题文件夹下面创建一个custom-register.php。

第二步:给页面模板命名。
在custom-register.php的开头添加下面代码,提示:注意文件编码哦

  1. <?php     
  2. /* 
  3. Template Name: 自定义注册页面模板  
  4. */     
  5. ?>  

第三步:检查用户是否已经登录

我们首先应该检车用户是否已经登录,如果登录了,还注册啥?所以只有未注登录用户才能注册。我们需要包含wordpress的wp-includes文件夹里面的registration.php文件,以便我们创建一个新的用户。继续添加以下代码

  1. <?php   
  2. require_once(ABSPATH . WPINC . '/registration.php'); //宝航registration.php文件   
  3. global $wpdb$user_ID//glocal全局变量   
  4. if (!$user_ID) { //如果存在$user_ID变量,则用户已经登录   
  5.    //接下来的代码都添加在这里.     
  6. }else{   
  7.    wp_redirect( home_url() ); exit//如果已经登录,重定向到站点首页   
  8. }   
  9. ?>  

第四步:添加注册表单和ajax代码。

在我们显示注册表单之前,我们要先获取后台设置选项的值:是否允许注册,如果后台设置了不允许注册,那就不显示注册表单。

虽然下面贴出了代码,但是请先不要在文件中添加下面的代码。

  1. //get_option('users_can_register')获取是否允许注册   
  2. if(get_option('users_can_register')) {   
  3. ?>   
  4. <h1>注册</h1>   
  5. <div id="result"></div> <!-- 为ajax返回结果做准备 -->     
  6. <form id="wp_signup_form" action="" method="post"> <!--注册表单-->   
  7. <label>用户名</label>   
  8. <input type="text" name="username" class="text" value="" /><br />   
  9. <label>Email</label>   
  10. <input type="text" name="email" class="text" value="" /> <br />   
  11. <input type="submit" id="submitbtn" name="submit" value="注册" />   
  12. </form>   
  13.   
  14. <script type="text/javascript">   
  15.     $("#submitbtn").click(function() {   
  16.         $('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loader.gif" class="loader" />').fadeIn();   
  17.         var input_data = $('#wp_signup_form').serialize();   
  18.         $.ajax({   
  19.             type: "POST",   
  20.             url:  "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",   
  21.             data: input_data,   
  22.             success: function(msg){   
  23.                 $('.loader').remove();   
  24.                 $('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');   
  25.             }   
  26.         });   
  27.         return false;   
  28.     });   
  29. </script>   
  30. <?php   
  31. }else{   
  32.     echo "对不起暂时不开放注册,请以后再试.";   
  33. }  

第五步:验证提交的数据,创建用户
第四步中的代码中,我们通过ajax提交了数据,数据提交地址就是本页面,所以我们在本页面添加验证数据代码即可。
在第三步代码的注释位置添加以下代码(即if (!$user_ID) {的后面):

  1. if($_POST){   
  2.     //验证数据是否全部为空格   
  3.     $username = $wpdb->escape($_REQUEST['username']);   
  4.     if(empty($username)) {   
  5.         echo "用户名不能为空.";   
  6.         exit();   
  7.     }   
  8.     $email = $wpdb->escape($_REQUEST['email']);   
  9.     //验证邮箱格式   
  10.     if( !is_email($email) ) {   
  11.         echo "请输入有效的邮箱地址.";   
  12.         exit();   
  13.     }   
  14.        
  15.     //生成密码   
  16.     $random_password = wp_generate_password( 12, false );   
  17.     //创建用户   
  18.     $status = wp_create_user( $username$random_password$email );     
  19.     if ( is_wp_error($status) ) {   
  20.        echo $status->get_error_message();//输出错误信息  
  21.     }else{   
  22.         $from = get_option('admin_email');   
  23.         $headers = 'From: '.$from . "\r\n";   
  24.         $subject = "注册成功";   
  25.         $msg = "注册成功.\n你的登陆信息\n用户名: $username\n密码: $random_password";   
  26.         //发送邮件   
  27.         wp_mail( $email$subject$msg$headers );   
  28.         echo "请检查你电子邮件中的登陆信息。";   
  29.     }   
  30.        
  31.     exit();   
  32. }else{   
  33.     get_header(); //加载头部问及爱你   
  34.     ?>   
  35.     <!-- <script src="http://code.jquery.com/jquery-1.4.4.js"></script> --> <!-- 如果你的主题没有引入了jquery,请自己引入 -->   
  36.     <div id="container">   
  37.     <div id="content">   
  38.     <?php   
  39.     //将注册表单和ajax代码添加到这里   
  40.     ?>   
  41.     </div>   
  42.     </div>   
  43.     <?php   
  44.         get_footer(); //加载底部文件   
  45. }  

OK到这里自定义注册页面模板的代码已经全部完成。

 

懒人下载(本工作室编辑好的文件,该文件引入了jquery,请自行更改)

 

请注意第五步,代码中有一句引入jquery的,如果你的主题没有引入,请手动加上。

添加完上面的代码,在后台添加页面,然后选择对应的页面模板即可,再添加自定义的css,就可以创建一个完全自主的注册页面。

如果不通过添加页面来实现,我们也可以通过上一篇教程中讲的添加自定义url地址。

在主题的functions.php文件中添加以下代码。(详解请参考上一篇教程)

  1. add_action('generate_rewrite_rules', 'ashu_rewrite_rules' );   
  2. /**********重写规则************/  
  3. function ashu_rewrite_rules( $wp_rewrite ){   
  4.     $new_rules = array(   
  5.         'ashulogin/?$' => 'index.php?my_custom_page=ashu_login',   
  6.     ); //添加翻译规则   
  7.     $wp_rewrite->rules = $new_rules + $wp_rewrite->rules;   
  8.     //php数组相加   
  9. }   
  10.   
  11. /*******添加query_var变量***************/  
  12. add_action('query_vars', 'ashu_add_query_vars');   
  13. function ashu_add_query_vars($public_query_vars){     
  14.     $public_query_vars[] = 'my_custom_page';   
  15.        
  16.     return $public_query_vars;     
  17. }   
  18.   
  19.   
  20. //模板载入规则   
  21. add_action("template_redirect", 'ashu_template_redirect');   
  22. function ashu_template_redirect(){   
  23.     global $wp;   
  24.     global $wp_query$wp_rewrite;   
  25.        
  26.     //查询my_custom_page变量   
  27.     $reditect_page =  $wp_query->query_vars['my_custom_page'];   
  28.     if ($reditect_page == "ashu_login"){ 
  29.         include(TEMPLATEPATH.'/registration.php');   
  30.         die();   
  31.     }   
  32. }   
  33.   
  34. /***************激活主题更新重写规则***********************/  
  35. add_action( 'load-themes.php', 'frosty_flush_rewrite_rules' );   
  36. function frosty_flush_rewrite_rules() {   
  37.     global $pagenow$wp_rewrite;   
  38.     if ( 'themes.php' == $pagenow && isset( $_GET['activated'] ) )   
  39.         $wp_rewrite->flush_rules();   
  40. }  

已有15条评论

渡易歌进行回复 取消回复