WordPress 進階教程 (十七): 建立自定義的註冊頁面

本文翻譯自 http://www.tutorialstag.com/create-custom-WordPress-registration-page.html 謝謝 (有改動) 。

我相信大多數站長使用 WordPress 時不喜歡讓使用者使用預設的註冊/登陸頁面來讓使用者註冊或者登陸。大家都希望讓這個頁面看起來能配合站點的樣式。這一篇教程我們將建立一個自定義的註冊頁面。

原文使用的是自定義的頁面模板，我們在文章結尾將講述使用我們上一篇教程說到的自定義 url 重寫功能來新增這樣一個頁面。

第一步：建立檔案。

我們還是以預設的 twenty ten 主題為例，在主題資料夾下面建立一個 custom-register.php 。

第二步：給頁面模板命名。
在 custom-register.php 的開頭新增下面程式碼，提示：注意檔案編碼哦

第三步：檢查使用者是否已經登入

我們首先應該檢車使用者是否已經登入，如果登入了，還註冊啥？所以只有未注登入使用者才能註冊。我們需要包含 WordPress 的 wp-includes 資料夾裡面的 registration.php 檔案，以便我們建立一個新的使用者。繼續新增以下程式碼

第四步：新增登入檔單和 ajax 程式碼。

在我們顯示登入檔單之前，我們要先獲取後臺設定選項的值：是否允許註冊，如果後臺設定了不允許註冊，那就不顯示登入檔單。

雖然下面貼出了程式碼，但是請先不要在檔案中新增下面的程式碼。

//get_option('users_can_register') 獲取是否允許註冊
if(get_option('users_can_register')) {
?>
<h1> 註冊</h1>
<div id="result"></div>
<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 "對不起暫時不開放註冊，請以後再試.";
}

第五步：驗證提交的資料，建立使用者
第四步中的程式碼中，我們透過 ajax 提交了資料，資料提交地址就是本頁面，所以我們在本頁面新增驗證資料程式碼即可。
在第三步程式碼的註釋位置新增以下程式碼 (即 if (!$user_ID) {的後面):

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 . "
";
$subject = "註冊成功";
$msg = "註冊成功.
你的登陸資訊
使用者名稱: $username
密碼: $random_password";
//傳送郵件
wp_mail( $email, $subject, $msg, $headers );
echo "請檢查你電子郵件中的登陸資訊。";
}
exit();
}else{
get_header(); //載入頭部問及愛你
?>
<div id="container">
<div id="content">
<?php
//將登入檔單和 ajax 程式碼新增到這裡
?>
</div>
</div>
<?php
get_footer(); //載入底部檔案
}

OK 到這裡自定義註冊頁面模板的程式碼已經全部完成。

懶人下載 (本工作室編輯好的檔案，該檔案引入了 jquery，請自行更改)

請注意第五步，程式碼中有一句引入 jquery 的，如果你的主題沒有引入，請手動加上。

新增完上面的程式碼，在後臺新增頁面，然後選擇對應的頁面模板即可，再新增自定義的 css，就可以建立一個完全自主的註冊頁面。

如果不透過新增頁面來實現，我們也可以透過上一篇教程中講的新增自定義 url 地址。

在主題的 functions.php 檔案中新增以下程式碼。 (詳解請參考上一篇教程)