我相信大多数站长使用wordpress时不喜欢让用户使用默认的注册/登陆页面来让用户注册或者登陆。大家都希望让这个页面看起来能配合站点的样式。这一篇教程我们将创建一个自定义的注册页面。
原文使用的是自定义的页面模板，我们在文章结尾将讲述使用我们上一篇教程说到的自定义url重写功能来添加这样一个页面。
第一步：创建文件。
我们还是以默认的twenty ten主题为例，在主题文件夹下面创建一个custom-register.php。
第二步：给页面模板命名。
在custom-register.php的开头添加下面代码，提示：注意文件编码哦
<?php
/*
Template Name: 自定义注册页面模板
*/
?>
<?php
require_once(ABSPATH . WPINC . '/registration.php'); //宝航registration.php文件
global $wpdb, $user_ID; //glocal全局变量
if (!$user_ID) { //如果存在$user_ID变量，则用户已经登录
//接下来的代码都添加在这里.
}else{
wp_redirect( home_url() ); exit; //如果已经登录，重定向到站点首页
}
?>
//get_option('users_can_register')获取是否允许注册
if(get_option('users_can_register')) {
?>
<h1>注册</h1>
<div id="result"></div> <!-- 为ajax返回结果做准备 -->
<form id="wp_signup_form" action="" method="post"> <!--注册表单-->
<label>用户名</label>
<input type="text" name="username" class="text" value="" /><br />
<label>Email</label>
<input type="text" name="email" class="text" value="" /> <br />
<input type="submit" id="submitbtn" name="submit" value="注册" />
</form>
<script type="text/javascript">
$("#submitbtn").click(function() {
$('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loader.gif" class="loader" />').fadeIn();
var input_data = $('#wp_signup_form').serialize();
$.ajax({
type: "POST",
url: "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
data: input_data,
success: function(msg){
$('.loader').remove();
$('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
}
});
return false;
});
</script>
<?php
}else{
echo "对不起暂时不开放注册，请以后再试.";
}
if($_POST){
//验证数据是否全部为空格
$username = $wpdb->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 . "\r\n";
$subject = "注册成功";
$msg = "注册成功.\n你的登陆信息\n用户名: $username\n密码: $random_password";
//发送邮件
wp_mail( $email, $subject, $msg, $headers );
echo "请检查你电子邮件中的登陆信息。";
}
exit();
}else{
get_header(); //加载头部问及爱你
?>
<!-- <script src="http://code.jquery.com/jquery-1.4.4.js"></script> --> <!-- 如果你的主题没有引入了jquery，请自己引入 -->
<div id="container">
<div id="content">
<?php
//将注册表单和ajax代码添加到这里
?>
</div>
</div>
<?php
get_footer(); //加载底部文件
}
add_action('generate_rewrite_rules', 'ashu_rewrite_rules' );
/**********重写规则************/
function ashu_rewrite_rules( $wp_rewrite ){
$new_rules = array(
'ashulogin/?$' => '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文件，以便我们创建一个新的用户。继续添加以下代码
<?php
/*
Template Name: 自定义注册页面模板
*/
?>
<?php
require_once(ABSPATH . WPINC . '/registration.php'); //宝航registration.php文件
global $wpdb, $user_ID; //glocal全局变量
if (!$user_ID) { //如果存在$user_ID变量，则用户已经登录
//接下来的代码都添加在这里.
}else{
wp_redirect( home_url() ); exit; //如果已经登录，重定向到站点首页
}
?>
//get_option('users_can_register')获取是否允许注册
if(get_option('users_can_register')) {
?>
<h1>注册</h1>
<div id="result"></div> <!-- 为ajax返回结果做准备 -->
<form id="wp_signup_form" action="" method="post"> <!--注册表单-->
<label>用户名</label>
<input type="text" name="username" class="text" value="" /><br />
<label>Email</label>
<input type="text" name="email" class="text" value="" /> <br />
<input type="submit" id="submitbtn" name="submit" value="注册" />
</form>
<script type="text/javascript">
$("#submitbtn").click(function() {
$('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loader.gif" class="loader" />').fadeIn();
var input_data = $('#wp_signup_form').serialize();
$.ajax({
type: "POST",
url: "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
data: input_data,
success: function(msg){
$('.loader').remove();
$('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
}
});
return false;
});
</script>
<?php
}else{
echo "对不起暂时不开放注册，请以后再试.";
}
if($_POST){
//验证数据是否全部为空格
$username = $wpdb->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 . "\r\n";
$subject = "注册成功";
$msg = "注册成功.\n你的登陆信息\n用户名: $username\n密码: $random_password";
//发送邮件
wp_mail( $email, $subject, $msg, $headers );
echo "请检查你电子邮件中的登陆信息。";
}
exit();
}else{
get_header(); //加载头部问及爱你
?>
<!-- <script src="http://code.jquery.com/jquery-1.4.4.js"></script> --> <!-- 如果你的主题没有引入了jquery，请自己引入 -->
<div id="container">
<div id="content">
<?php
//将注册表单和ajax代码添加到这里
?>
</div>
</div>
<?php
get_footer(); //加载底部文件
}
add_action('generate_rewrite_rules', 'ashu_rewrite_rules' );
/**********重写规则************/
function ashu_rewrite_rules( $wp_rewrite ){
$new_rules = array(
'ashulogin/?$' => '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代码。
在我们显示注册表单之前，我们要先获取后台设置选项的值：是否允许注册，如果后台设置了不允许注册，那就不显示注册表单。
虽然下面贴出了代码，但是请先不要在文件中添加下面的代码。
<?php
/*
Template Name: 自定义注册页面模板
*/
?>
<?php
require_once(ABSPATH . WPINC . '/registration.php'); //宝航registration.php文件
global $wpdb, $user_ID; //glocal全局变量
if (!$user_ID) { //如果存在$user_ID变量，则用户已经登录
//接下来的代码都添加在这里.
}else{
wp_redirect( home_url() ); exit; //如果已经登录，重定向到站点首页
}
?>
//get_option('users_can_register')获取是否允许注册
if(get_option('users_can_register')) {
?>
<h1>注册</h1>
<div id="result"></div> <!-- 为ajax返回结果做准备 -->
<form id="wp_signup_form" action="" method="post"> <!--注册表单-->
<label>用户名</label>
<input type="text" name="username" class="text" value="" /><br />
<label>Email</label>
<input type="text" name="email" class="text" value="" /> <br />
<input type="submit" id="submitbtn" name="submit" value="注册" />
</form>
<script type="text/javascript">
$("#submitbtn").click(function() {
$('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loader.gif" class="loader" />').fadeIn();
var input_data = $('#wp_signup_form').serialize();
$.ajax({
type: "POST",
url: "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
data: input_data,
success: function(msg){
$('.loader').remove();
$('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
}
});
return false;
});
</script>
<?php
}else{
echo "对不起暂时不开放注册，请以后再试.";
}
if($_POST){
//验证数据是否全部为空格
$username = $wpdb->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 . "\r\n";
$subject = "注册成功";
$msg = "注册成功.\n你的登陆信息\n用户名: $username\n密码: $random_password";
//发送邮件
wp_mail( $email, $subject, $msg, $headers );
echo "请检查你电子邮件中的登陆信息。";
}
exit();
}else{
get_header(); //加载头部问及爱你
?>
<!-- <script src="http://code.jquery.com/jquery-1.4.4.js"></script> --> <!-- 如果你的主题没有引入了jquery，请自己引入 -->
<div id="container">
<div id="content">
<?php
//将注册表单和ajax代码添加到这里
?>
</div>
</div>
<?php
get_footer(); //加载底部文件
}
add_action('generate_rewrite_rules', 'ashu_rewrite_rules' );
/**********重写规则************/
function ashu_rewrite_rules( $wp_rewrite ){
$new_rules = array(
'ashulogin/?$' => '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) {的后面):
<?php
/*
Template Name: 自定义注册页面模板
*/
?>
<?php
require_once(ABSPATH . WPINC . '/registration.php'); //宝航registration.php文件
global $wpdb, $user_ID; //glocal全局变量
if (!$user_ID) { //如果存在$user_ID变量，则用户已经登录
//接下来的代码都添加在这里.
}else{
wp_redirect( home_url() ); exit; //如果已经登录，重定向到站点首页
}
?>
//get_option('users_can_register')获取是否允许注册
if(get_option('users_can_register')) {
?>
<h1>注册</h1>
<div id="result"></div> <!-- 为ajax返回结果做准备 -->
<form id="wp_signup_form" action="" method="post"> <!--注册表单-->
<label>用户名</label>
<input type="text" name="username" class="text" value="" /><br />
<label>Email</label>
<input type="text" name="email" class="text" value="" /> <br />
<input type="submit" id="submitbtn" name="submit" value="注册" />
</form>
<script type="text/javascript">
$("#submitbtn").click(function() {
$('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loader.gif" class="loader" />').fadeIn();
var input_data = $('#wp_signup_form').serialize();
$.ajax({
type: "POST",
url: "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
data: input_data,
success: function(msg){
$('.loader').remove();
$('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
}
});
return false;
});
</script>
<?php
}else{
echo "对不起暂时不开放注册，请以后再试.";
}
if($_POST){
//验证数据是否全部为空格
$username = $wpdb->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 . "\r\n";
$subject = "注册成功";
$msg = "注册成功.\n你的登陆信息\n用户名: $username\n密码: $random_password";
//发送邮件
wp_mail( $email, $subject, $msg, $headers );
echo "请检查你电子邮件中的登陆信息。";
}
exit();
}else{
get_header(); //加载头部问及爱你
?>
<!-- <script src="http://code.jquery.com/jquery-1.4.4.js"></script> --> <!-- 如果你的主题没有引入了jquery，请自己引入 -->
<div id="container">
<div id="content">
<?php
//将注册表单和ajax代码添加到这里
?>
</div>
</div>
<?php
get_footer(); //加载底部文件
}
add_action('generate_rewrite_rules', 'ashu_rewrite_rules' );
/**********重写规则************/
function ashu_rewrite_rules( $wp_rewrite ){
$new_rules = array(
'ashulogin/?$' => '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文件中添加以下代码。(详解请参考上一篇教程)
<?php
/*
Template Name: 自定义注册页面模板
*/
?>
<?php
require_once(ABSPATH . WPINC . '/registration.php'); //宝航registration.php文件
global $wpdb, $user_ID; //glocal全局变量
if (!$user_ID) { //如果存在$user_ID变量，则用户已经登录
//接下来的代码都添加在这里.
}else{
wp_redirect( home_url() ); exit; //如果已经登录，重定向到站点首页
}
?>
//get_option('users_can_register')获取是否允许注册
if(get_option('users_can_register')) {
?>
<h1>注册</h1>
<div id="result"></div> <!-- 为ajax返回结果做准备 -->
<form id="wp_signup_form" action="" method="post"> <!--注册表单-->
<label>用户名</label>
<input type="text" name="username" class="text" value="" /><br />
<label>Email</label>
<input type="text" name="email" class="text" value="" /> <br />
<input type="submit" id="submitbtn" name="submit" value="注册" />
</form>
<script type="text/javascript">
$("#submitbtn").click(function() {
$('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loader.gif" class="loader" />').fadeIn();
var input_data = $('#wp_signup_form').serialize();
$.ajax({
type: "POST",
url: "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
data: input_data,
success: function(msg){
$('.loader').remove();
$('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
}
});
return false;
});
</script>
<?php
}else{
echo "对不起暂时不开放注册，请以后再试.";
}
if($_POST){
//验证数据是否全部为空格
$username = $wpdb->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 . "\r\n";
$subject = "注册成功";
$msg = "注册成功.\n你的登陆信息\n用户名: $username\n密码: $random_password";
//发送邮件
wp_mail( $email, $subject, $msg, $headers );
echo "请检查你电子邮件中的登陆信息。";
}
exit();
}else{
get_header(); //加载头部问及爱你
?>
<!-- <script src="http://code.jquery.com/jquery-1.4.4.js"></script> --> <!-- 如果你的主题没有引入了jquery，请自己引入 -->
<div id="container">
<div id="content">
<?php
//将注册表单和ajax代码添加到这里
?>
</div>
</div>
<?php
get_footer(); //加载底部文件
}
add_action('generate_rewrite_rules', 'ashu_rewrite_rules' );
/**********重写规则************/
function ashu_rewrite_rules( $wp_rewrite ){
$new_rules = array(
'ashulogin/?$' => '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();
}