即開即裝即用，WordPress 提供了一個自定義注冊表單，可用於建立一個新的用戶，或者將新用戶添加到已有的 WordPress 網站。但是，如果你想實現一個自定義的登記表單，不在WordPress控制面板中顯示的選項？
在本教程中，我們將學習如何使用模板標簽和簡碼的組合來創建WordPress的自定義登記表單。
默認的登記表格只包含兩個表單字段 - 用戶名和電子郵件：
只有用戶名和電子郵件表單字段的存在，使得注冊過程非常容易。首先，您可以輸入您的用戶名和電子郵件之后，密碼會被發送給您。接下來，您使用網站生成的密碼登錄，然后填寫您的個人資料和更改更加難忘的密碼。
與其讓用戶通過上面的流程來簡單注冊你的網站，為什么不提供一個直入主題的注冊表單，包含一些用戶名和郵箱以外的重要信息，比如密碼、他們的網址、簡介、昵稱以及姓名等等。
這個對於像 Tuts+ 這樣的做作者網站非常有用。
在本文中，我們將建立一個自定義的登記表單插件，具有以下表單字段：
- 用戶名
- 密碼
- 電子郵件
- 網址
- 名字
- 姓氏
- 昵稱
- 簡介
這個自定義注冊表單可以通過模板標簽或簡碼集成到 WordPress 網站中。使用這個簡碼，你可以創建一個頁面然后將它設置為你網站的官方注冊頁面。或者你還可以在文章中使用這個簡碼，讓用戶閱讀完文章以后注冊你的網站。如果你想添加注冊表單到側邊欄或者你網站的其他任意位置，你可以編輯主題文件，然后添加模板標簽到所需的位置。
在我們開始建立登記表單插件，值得注意的是，用戶名，密碼和郵箱字段是必需的。我們會根據這個規則來撰寫驗證功能。
構建插件
如上所說，讓我們開始插件的代碼。首先，包含插件頭。
<?php /* Plugin Name: Custom Registration Plugin URI: http://code.tutsplus.com Description: Updates user rating based on number of posts. Version: 1.0 Author: Agbonghama Collins Author URI: http://tech4sky.com */
接下來，我們創建一個PHP函數包含報名表單的HTML代碼。
function registration_form( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio ) {
echo '
<style>
div {
margin-bottom:2px;
}
input{
margin-bottom:4px;
}
</style>
';
echo '
<form action="' . $_SERVER['REQUEST_URI'] . '" method="post">
<div>
<label for="username">Username <strong>*</strong></label>
<input type="text" name="username" value="' . ( isset( $_POST['username'] ) ? $username : null ) . '">
</div>
<div>
<label for="password">Password <strong>*</strong></label>
<input type="password" name="password" value="' . ( isset( $_POST['password'] ) ? $password : null ) . '">
</div>
<div>
<label for="email">Email <strong>*</strong></label>
<input type="text" name="email" value="' . ( isset( $_POST['email']) ? $email : null ) . '">
</div>
<div>
<label for="website">Website</label>
<input type="text" name="website" value="' . ( isset( $_POST['website']) ? $website : null ) . '">
</div>
<div>
<label for="firstname">First Name</label>
<input type="text" name="fname" value="' . ( isset( $_POST['fname']) ? $first_name : null ) . '">
</div>
<div>
<label for="website">Last Name</label>
<input type="text" name="lname" value="' . ( isset( $_POST['lname']) ? $last_name : null ) . '">
</div>
<div>
<label for="nickname">Nickname</label>
<input type="text" name="nickname" value="' . ( isset( $_POST['nickname']) ? $nickname : null ) . '">
</div>
<div>
<label for="bio">About / Bio</label>
<textarea name="bio">' . ( isset( $_POST['bio']) ? $bio : null ) . '</textarea>
</div>
<input type="submit" name="submit" value="Register"/>
</form>
';
}
注意到注冊字段被傳遞給上述函數作為變量？在功能代碼，你會看到下面的代碼實例，例如：
( isset( $_POST['lname'] ) ? $last_name : null )
這個三元運算符會檢查 $_POST 這個全局數組的內容中是否包含一個值，如果包含，就賦予表單字段這個值，這樣就可以節約用戶重新輸入字段的時間。
一個注冊表單還沒有完成，直到你驗證和消毒用戶輸入的內容。因此，我們將創建一個名為 registration_validation 的驗證函數。
為了減輕負擔，我們直接使用 WordPress 的 WP_Error 類，下面一起來編寫驗證功能：
1.創建該函數，將注冊字段作為函數參數。
function registration_validation( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio ) {
2.實例化 WP_Error 類，將該實例設為全局變量，確保它可以在函數的范圍之外訪問。
global $reg_errors; $reg_errors = new WP_Error;
3.記住：我們剛才說的 用戶名、密碼和郵箱是必需的，不能留空的。要實施此規則，我們需要檢查這些字段是否為空。如果為空，我們就追加錯誤信息到全局 WP_Error 類。
if ( empty( $username ) || empty( $password ) || empty( $email ) ) {
$reg_errors->add('field', 'Required form field is missing');
}
4.我們還要檢查和確認用戶名的位數不少於 4
1 2 3 |
if ( 4 > strlen( $username ) ) {
$reg_errors->add( 'username_length', 'Username too short. At least 4 characters is required' );
} |
5.檢查用戶名是否已被注冊
1 2 |
if ( username_exists( $username ) )
$reg_errors->add('user_name', 'Sorry, that username already exists!'); |
6.使用 WordPress 的 validate_username 函數驗證用戶名是否有效
1 2 3 |
if ( ! validate_username( $username ) ) {
$reg_errors->add( 'username_invalid', 'Sorry, the username you entered is not valid' );
} |
7.確保用戶輸入的密碼位數不少於 5 個字符
1 2 3 |
if ( 5 > strlen( $password ) ) {
$reg_errors->add( 'password', 'Password length must be greater than 5' );
} |
8.檢查郵箱是否有效
1 2 3 |
if ( !is_email( $email ) ) {
$reg_errors->add( 'email_invalid', 'Email is not valid' );
} |
9.檢查郵箱是否已注冊
1 2 3 |
if ( email_exists( $email ) ) {
$reg_errors->add( 'email', 'Email Already in use' );
} |
10.如果網址字段已填寫，檢查是否有效
1 2 3 4 5 |
if ( ! empty( $website ) ) {
if ( ! filter_var( $website, FILTER_VALIDATE_URL ) ) {
$reg_errors->add( 'website', 'Website is not a valid URL' );
}
} |
11.最后，我們循環在 WP_Error 實例中的錯誤信息，並各自顯示
1 2 3 4 5 6 7 8 9 10 11 12 |
if ( is_wp_error( $reg_errors ) ) {
foreach ( $reg_errors->get_error_messages() as $error ) {
echo '<div>';
echo '<strong>ERROR</strong>:';
echo $error . '<br/>';
echo '</div>';
}
} |
到這里，我們已經完成了驗證函數。
下一步，創建 complete_registration() 函數來處理用戶注冊。
用戶注冊實際上由 wp_insert_user 函數完成，它可以接受用戶數據數組。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function complete_registration() {
global $reg_errors, $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio;
if ( 1 > count( $reg_errors->get_error_messages() ) ) {
$userdata = array(
'user_login' => $username,
'user_email' => $email,
'user_pass' => $password,
'user_url' => $website,
'first_name' => $first_name,
'last_name' => $last_name,
'nickname' => $nickname,
'description' => $bio,
);
$user = wp_insert_user( $userdata );
echo 'Registration complete. Goto <a href="' . get_site_url() . '/wp-login.php">login page</a>.';
}
} |
在上面的 complete_registration() 函數，我們將 $reg_errors 和 WP_Error 示例，以及表單字段設置為全局變量，以便我們可以在全局范圍中訪問。
然后我們檢查 $reg_errors 錯誤處理實例是否包含錯誤。如果沒有錯誤，我們就填充 $userdata 數組並將用戶注冊資料寫入 WordPress 數據庫，並且顯示注冊完成信息和鏈接到注冊頁面的地址。
回到上一層，custom_registration_function() 函數使我們上面創建的函數投入使用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
function custom_registration_function() {
if ( isset($_POST['submit'] ) ) {
registration_validation(
$_POST['username'],
$_POST['password'],
$_POST['email'],
$_POST['website'],
$_POST['fname'],
$_POST['lname'],
$_POST['nickname'],
$_POST['bio']
);
// sanitize user form input
global $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio;
$username = sanitize_user( $_POST['username'] );
$password = esc_attr( $_POST['password'] );
$email = sanitize_email( $_POST['email'] );
$website = esc_url( $_POST['website'] );
$first_name = sanitize_text_field( $_POST['fname'] );
$last_name = sanitize_text_field( $_POST['lname'] );
$nickname = sanitize_text_field( $_POST['nickname'] );
$bio = esc_textarea( $_POST['bio'] );
// call @function complete_registration to create the user
// only when no WP_error is found
complete_registration(
$username,
$password,
$email,
$website,
$first_name,
$last_name,
$nickname,
$bio
);
}
registration_form(
$username,
$password,
$email,
$website,
$first_name,
$last_name,
$nickname,
$bio
);
} |
讓我解釋一下 custom_registration_function() 函數的代碼。
首先，我們通過檢查 $_POST['submit'] 是否設置來判斷表單是否已提交。如果已提交，就調用 registration_validation 函數驗證用戶提交的數據。然后我們消毒表單數據，並為消毒好的數據設置變量名。最后調用 complete_registration 注冊用戶。
我們需要調用 registration_form 函數顯示注冊表單。
記得我提到過要為該插件提供簡碼支持，下面就是構建簡碼的代碼。
1 2 3 4 5 6 7 8 9 |
// Register a new shortcode: [cr_custom_registration]
add_shortcode( 'cr_custom_registration', 'custom_registration_shortcode' );
// The callback function that will replace [book]
function custom_registration_shortcode() {
ob_start();
custom_registration_function();
return ob_get_clean();
} |
到這里，我們就完成了整個插件的代碼啦！下面就是最終的效果，當然了，還需要你自己添加 css 樣式才能達到下面的顯示效果。
插件用法
要在 WordPress 文章或頁面中顯示這個注冊表單，可以使用下面的簡碼
1 |
[cr_custom_registration] |
要在你主題的特定位置顯示注冊表單，你可以添加下面的模板標簽進行調用
1 |
<?php custom_registration_function(); ?> |
你可以在這里下載本文制作好的插件：Custom Registration Form Plugin