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

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

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

第一步：创建文件。

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

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

   //get_option('users_can_register')获取是否允许注册    if(get_option('users_can_register')) {    ?>    注册    用户名   
    Email     
        $("#submitbtn").click(function() {            $('#result').html('<img src="/images/loader.gif" class="loader" />').fadeIn();            var input_data = $('#wp_signup_form').serialize();            $.ajax({                type: "POST",                url:  "",                data: input_data,                success: function(msg){                    $('.loader').remove();                    $('').html(msg).appendTo('div#result').hide().fadeIn('slow');                }            });            return false;        });    escape($_REQUEST['username']);        if(empty($username)) {            echo "用户名不能为空.";            exit();        }        $email = $wpdb->escape($_REQUEST['email']);        //验证邮箱格式        if( !is_email($email) ) {            echo "请输入有效的邮箱地址.";            exit();        }        //生成密码        $random_password = wp_generate_password( 12, false );        //创建用户        $status = wp_create_user( $username, $random_password, $email );          if ( is_wp_error($status) ) {           echo $status->get_error_message();//输出错误信息       }else{            $from = get_option('admin_email');            $headers = 'From: '.$from . "rn";            $subject = "注册成功";            $msg = "注册成功.n你的登陆信息n用户名: $usernamen密码: $random_password";            //发送邮件            wp_mail( $email, $subject, $msg, $headers );            echo "请检查你电子邮件中的登陆信息。";        }        exit();    }else{        get_header(); //加载头部问及爱你        ?>        <!--  -->          'index.php?my_custom_page=ashu_login',        ); //添加翻译规则        $wp_rewrite->rules = $new_rules + $wp_rewrite->rules;        //php数组相加    }    /*******添加query_var变量***************/   add_action('query_vars', 'ashu_add_query_vars');    function ashu_add_query_vars($public_query_vars){          $public_query_vars[] = 'my_custom_page';        return $public_query_vars;      }    //模板载入规则    add_action("template_redirect", 'ashu_template_redirect');    function ashu_template_redirect(){        global $wp;        global $wp_query, $wp_rewrite;        //查询my_custom_page变量        $reditect_page =  $wp_query->query_vars['my_custom_page'];        if ($reditect_page == "ashu_login"){          include(TEMPLATEPATH.'/registration.php');            die();        }    }    /***************激活主题更新重写规则***********************/   add_action( 'load-themes.php', 'frosty_flush_rewrite_rules' );    function frosty_flush_rewrite_rules() {        global $pagenow, $wp_rewrite;        if ( 'themes.php' == $pagenow && isset( $_GET['activated'] ) )            $wp_rewrite->flush_rules();    }

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

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

   //get_option('users_can_register')获取是否允许注册    if(get_option('users_can_register')) {    ?>    注册    用户名   
    Email     
        $("#submitbtn").click(function() {            $('#result').html('<img src="/images/loader.gif" class="loader" />').fadeIn();            var input_data = $('#wp_signup_form').serialize();            $.ajax({                type: "POST",                url:  "",                data: input_data,                success: function(msg){                    $('.loader').remove();                    $('').html(msg).appendTo('div#result').hide().fadeIn('slow');                }            });            return false;        });    escape($_REQUEST['username']);        if(empty($username)) {            echo "用户名不能为空.";            exit();        }        $email = $wpdb->escape($_REQUEST['email']);        //验证邮箱格式        if( !is_email($email) ) {            echo "请输入有效的邮箱地址.";            exit();        }        //生成密码        $random_password = wp_generate_password( 12, false );        //创建用户        $status = wp_create_user( $username, $random_password, $email );          if ( is_wp_error($status) ) {           echo $status->get_error_message();//输出错误信息       }else{            $from = get_option('admin_email');            $headers = 'From: '.$from . "rn";            $subject = "注册成功";            $msg = "注册成功.n你的登陆信息n用户名: $usernamen密码: $random_password";            //发送邮件            wp_mail( $email, $subject, $msg, $headers );            echo "请检查你电子邮件中的登陆信息。";        }        exit();    }else{        get_header(); //加载头部问及爱你        ?>        <!--  -->          'index.php?my_custom_page=ashu_login',        ); //添加翻译规则        $wp_rewrite->rules = $new_rules + $wp_rewrite->rules;        //php数组相加    }    /*******添加query_var变量***************/   add_action('query_vars', 'ashu_add_query_vars');    function ashu_add_query_vars($public_query_vars){          $public_query_vars[] = 'my_custom_page';        return $public_query_vars;      }    //模板载入规则    add_action("template_redirect", 'ashu_template_redirect');    function ashu_template_redirect(){        global $wp;        global $wp_query, $wp_rewrite;        //查询my_custom_page变量        $reditect_page =  $wp_query->query_vars['my_custom_page'];        if ($reditect_page == "ashu_login"){          include(TEMPLATEPATH.'/registration.php');            die();        }    }    /***************激活主题更新重写规则***********************/   add_action( 'load-themes.php', 'frosty_flush_rewrite_rules' );    function frosty_flush_rewrite_rules() {        global $pagenow, $wp_rewrite;        if ( 'themes.php' == $pagenow && isset( $_GET['activated'] ) )            $wp_rewrite->flush_rules();    }

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

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

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

   //get_option('users_can_register')获取是否允许注册    if(get_option('users_can_register')) {    ?>    注册    用户名   
    Email     
        $("#submitbtn").click(function() {            $('#result').html('<img src="/images/loader.gif" class="loader" />').fadeIn();            var input_data = $('#wp_signup_form').serialize();            $.ajax({                type: "POST",                url:  "",                data: input_data,                success: function(msg){                    $('.loader').remove();                    $('').html(msg).appendTo('div#result').hide().fadeIn('slow');                }            });            return false;        });    escape($_REQUEST['username']);        if(empty($username)) {            echo "用户名不能为空.";            exit();        }        $email = $wpdb->escape($_REQUEST['email']);        //验证邮箱格式        if( !is_email($email) ) {            echo "请输入有效的邮箱地址.";            exit();        }        //生成密码        $random_password = wp_generate_password( 12, false );        //创建用户        $status = wp_create_user( $username, $random_password, $email );          if ( is_wp_error($status) ) {           echo $status->get_error_message();//输出错误信息       }else{            $from = get_option('admin_email');            $headers = 'From: '.$from . "rn";            $subject = "注册成功";            $msg = "注册成功.n你的登陆信息n用户名: $usernamen密码: $random_password";            //发送邮件            wp_mail( $email, $subject, $msg, $headers );            echo "请检查你电子邮件中的登陆信息。";        }        exit();    }else{        get_header(); //加载头部问及爱你        ?>        <!--  -->          'index.php?my_custom_page=ashu_login',        ); //添加翻译规则        $wp_rewrite->rules = $new_rules + $wp_rewrite->rules;        //php数组相加    }    /*******添加query_var变量***************/   add_action('query_vars', 'ashu_add_query_vars');    function ashu_add_query_vars($public_query_vars){          $public_query_vars[] = 'my_custom_page';        return $public_query_vars;      }    //模板载入规则    add_action("template_redirect", 'ashu_template_redirect');    function ashu_template_redirect(){        global $wp;        global $wp_query, $wp_rewrite;        //查询my_custom_page变量        $reditect_page =  $wp_query->query_vars['my_custom_page'];        if ($reditect_page == "ashu_login"){          include(TEMPLATEPATH.'/registration.php');            die();        }    }    /***************激活主题更新重写规则***********************/   add_action( 'load-themes.php', 'frosty_flush_rewrite_rules' );    function frosty_flush_rewrite_rules() {        global $pagenow, $wp_rewrite;        if ( 'themes.php' == $pagenow && isset( $_GET['activated'] ) )            $wp_rewrite->flush_rules();    }

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

   //get_option('users_can_register')获取是否允许注册    if(get_option('users_can_register')) {    ?>    注册    用户名   
    Email     
        $("#submitbtn").click(function() {            $('#result').html('<img src="/images/loader.gif" class="loader" />').fadeIn();            var input_data = $('#wp_signup_form').serialize();            $.ajax({                type: "POST",                url:  "",                data: input_data,                success: function(msg){                    $('.loader').remove();                    $('').html(msg).appendTo('div#result').hide().fadeIn('slow');                }            });            return false;        });    escape($_REQUEST['username']);        if(empty($username)) {            echo "用户名不能为空.";            exit();        }        $email = $wpdb->escape($_REQUEST['email']);        //验证邮箱格式        if( !is_email($email) ) {            echo "请输入有效的邮箱地址.";            exit();        }        //生成密码        $random_password = wp_generate_password( 12, false );        //创建用户        $status = wp_create_user( $username, $random_password, $email );          if ( is_wp_error($status) ) {           echo $status->get_error_message();//输出错误信息       }else{            $from = get_option('admin_email');            $headers = 'From: '.$from . "rn";            $subject = "注册成功";            $msg = "注册成功.n你的登陆信息n用户名: $usernamen密码: $random_password";            //发送邮件            wp_mail( $email, $subject, $msg, $headers );            echo "请检查你电子邮件中的登陆信息。";        }        exit();    }else{        get_header(); //加载头部问及爱你        ?>        <!--  -->          'index.php?my_custom_page=ashu_login',        ); //添加翻译规则        $wp_rewrite->rules = $new_rules + $wp_rewrite->rules;        //php数组相加    }    /*******添加query_var变量***************/   add_action('query_vars', 'ashu_add_query_vars');    function ashu_add_query_vars($public_query_vars){          $public_query_vars[] = 'my_custom_page';        return $public_query_vars;      }    //模板载入规则    add_action("template_redirect", 'ashu_template_redirect');    function ashu_template_redirect(){        global $wp;        global $wp_query, $wp_rewrite;        //查询my_custom_page变量        $reditect_page =  $wp_query->query_vars['my_custom_page'];        if ($reditect_page == "ashu_login"){          include(TEMPLATEPATH.'/registration.php');            die();        }    }    /***************激活主题更新重写规则***********************/   add_action( 'load-themes.php', 'frosty_flush_rewrite_rules' );    function frosty_flush_rewrite_rules() {        global $pagenow, $wp_rewrite;        if ( 'themes.php' == $pagenow && isset( $_GET['activated'] ) )            $wp_rewrite->flush_rules();    }

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

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

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

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

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

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

   //get_option('users_can_register')获取是否允许注册    if(get_option('users_can_register')) {    ?>    注册    用户名   
    Email     
        $("#submitbtn").click(function() {            $('#result').html('<img src="/images/loader.gif" class="loader" />').fadeIn();            var input_data = $('#wp_signup_form').serialize();            $.ajax({                type: "POST",                url:  "",                data: input_data,                success: function(msg){                    $('.loader').remove();                    $('').html(msg).appendTo('div#result').hide().fadeIn('slow');                }            });            return false;        });    escape($_REQUEST['username']);        if(empty($username)) {            echo "用户名不能为空.";            exit();        }        $email = $wpdb->escape($_REQUEST['email']);        //验证邮箱格式        if( !is_email($email) ) {            echo "请输入有效的邮箱地址.";            exit();        }        //生成密码        $random_password = wp_generate_password( 12, false );        //创建用户        $status = wp_create_user( $username, $random_password, $email );          if ( is_wp_error($status) ) {           echo $status->get_error_message();//输出错误信息       }else{            $from = get_option('admin_email');            $headers = 'From: '.$from . "rn";            $subject = "注册成功";            $msg = "注册成功.n你的登陆信息n用户名: $usernamen密码: $random_password";            //发送邮件            wp_mail( $email, $subject, $msg, $headers );            echo "请检查你电子邮件中的登陆信息。";        }        exit();    }else{        get_header(); //加载头部问及爱你        ?>        <!--  -->          'index.php?my_custom_page=ashu_login',        ); //添加翻译规则        $wp_rewrite->rules = $new_rules + $wp_rewrite->rules;        //php数组相加    }    /*******添加query_var变量***************/   add_action('query_vars', 'ashu_add_query_vars');    function ashu_add_query_vars($public_query_vars){          $public_query_vars[] = 'my_custom_page';        return $public_query_vars;      }    //模板载入规则    add_action("template_redirect", 'ashu_template_redirect');    function ashu_template_redirect(){        global $wp;        global $wp_query, $wp_rewrite;        //查询my_custom_page变量        $reditect_page =  $wp_query->query_vars['my_custom_page'];        if ($reditect_page == "ashu_login"){          include(TEMPLATEPATH.'/registration.php');            die();        }    }    /***************激活主题更新重写规则***********************/   add_action( 'load-themes.php', 'frosty_flush_rewrite_rules' );    function frosty_flush_rewrite_rules() {        global $pagenow, $wp_rewrite;        if ( 'themes.php' == $pagenow && isset( $_GET['activated'] ) )            $wp_rewrite->flush_rules();    }

wordpress进阶教程(十六):添加一个重写规则，构建新页面初试