如何利用WordPress建立自訂註冊表單外掛程式，wordpress表單

如何利用WordPress建立自訂註冊表單外掛程式，wordpress表單

來源：http://www.ido321.com/1031.html

原文：Creating a Custom WordPress Registration Form Plugin

譯文：建立一個定製的WordPress外掛程式註冊表單

譯者：dwqs

開門見山，WordPress提供了一個自訂的註冊表單供新使用者使用，或者當添加一個新使用者到已經存在的WordPress網站。但是如果你想實現一個自訂的註冊表單而沒有顯示WordPress儀錶盤的選項呢？

在這篇文章中，我們將學會怎麼使用標籤模板和短代碼模板的聯合體在WordPress中建立一個自訂的註冊表單。

WordPress預設的註冊表單僅由兩個欄位組成—-使用者名稱和郵箱。

這個僅有的使用者名稱和郵箱表單欄位使得註冊速度非常的簡單。首先，你輸入一個使用者名稱，然後輸入郵箱，這個郵箱就是用來接收密碼的。接下來，你使用郵箱接收到的密碼登陸網站，並且完成設定檔，把密碼修改成簡單易記得。

僅僅是在網站註冊，而不是讓使用者區經曆這些壓力，那為什麼除了使用者名稱和郵箱之外，不提供一個直接的、包含一些額外重要的表單欄位，例如密碼、個人的URL、簡歷、暱稱和他們的姓名的註冊表單供使用者使用呢？

這對於像Tuts+的多使用者網站是非常有用的。

在這篇文章中，我們將使用下列的表單欄位建立一個自訂的表單註冊外掛程式：

• username
• password
• email
• website URL
• first name
• last name
• nickname
• biography (or an about section)

這個自訂表格單外掛程式可以通過使用短代碼和聯絡模板整合到WordPress中。

利用短代碼模板，你可以在你的網站中建立一個正式的註冊頁面。你也可以再一篇發表的文章中是用短代碼模板，這樣使用者就可以在閱讀完你的文章之後進行註冊。

如果你想添加一個註冊表單在你網站側邊欄的某個具體位置，你可以對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 */

 

           接下來，我們建立一個包含註冊表單的HTML代碼的PHP函數：

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

if ( 4 > strlen( $username ) ) {    $reg_errors->add( 'username_length', 'Username too short. At least 4 characters is required' );}

 

5、檢查使用者名稱是否被註冊了

if ( username_exists( $username ) )    $reg_errors->add('user_name', 'Sorry, that username already exists!');

 

6、利用WordPress的validate_username函數確保使用者名稱是可用的

if ( ! validate_username( $username ) ) {    $reg_errors->add( 'username_invalid', 'Sorry, the username you entered is not valid' );}

 

7、確保使用者輸入的密碼的字元個數不小於5

if ( 5 > strlen( $password ) ) {        $reg_errors->add( 'password', 'Password length must be greater than 5' );    }

 

8、檢查電子郵件是否有效

if ( !is_email( $email ) ) {    $reg_errors->add( 'email_invalid', 'Email is not valid' );}

                         9、檢查電子郵件是否被註冊

if ( !is_email( $email ) ) {    $reg_errors->add( 'email_invalid', 'Email is not valid' );}

 

                        10.、如果使用者填寫了網站欄位，需要檢查其是否有效

if ( ! empty( $website ) ) {    if ( ! filter_var( $website, FILTER_VALIDATE_URL ) ) {        $reg_errors->add( 'website', 'Website is not a valid URL' );    }}

 

                        11、最後，我們在WP_Error執行個體中對錯誤進行迴圈，並顯示個別的錯誤

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函數， 使用者的資料作為資料儲存後可以作為此函數的參數。            


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>.';      }}

 

在上面的函數中，我們將$reg_errors作為WP_Error的執行個體，並將表單欄位作為全域變數以便於可以再全域範圍中使用。

我們需要檢查$reg_errors是否包含任何錯誤，如果沒有錯誤，則將使用者註冊資訊插入到WordPress的資料庫並用登陸連結來顯示註冊完成的資訊。

然後，把所有我們之前建立的函數全部放在全域函數custom_registration_function()之中

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()函數來顯示使用者註冊表單。

我之前提到過，我打算用短代碼模板來支援註冊外掛程式。下面就是短代碼模的支援代碼：

// 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();}

 

到這裡為止，我們已經完成了外掛程式，下面的一張圖片展示了註冊表單的外觀。

注意,你可能不會得到完全相同的外觀，因為WordPress網站的CSS樣式不同。

應用外掛程式

        為了在WordPress的文章頁或獨立頁面使用這個外掛程式，可以加入以下代碼：[cr_custom_registration]

也可以添加列出的模板標記<?php custom_registration_function(); ?>.，這樣可以讓表單外掛程式成

為WordPress主題的一個部分。你可以從這篇文章的附加代碼得到這個外掛程式。

 

總結

  在這篇文章中，我們一步步建立了一個自訂註冊表單並添加到WordPress網站。你可以添加額外欄位，進一

步擴充這個註冊表單，例如使用者角色，AOL IM 賬戶，但是確保資料時有效。

    如果你有任何問題或建議你，可以留下評論。

下一篇：如何在網站中添加音樂


自訂表格單外掛程式Wordpress Form Manager怎使用

category-6.php頁面有引入wp_head和wp_footer麼，外掛程式需要的資源檔需要這兩個來載入
 
一個可以自訂評論表單的wordpress外掛程式，增加輸入手機號，去掉email與網站填寫

這還要外掛程式？！我的wordpress基本上沒用外掛程式，這麼簡單的功能，花個把小時寫一個……
外掛程式越多越慢