wordpress自定義表單 wordpress自定義函數(shù)

如何利用WordPress創(chuàng)建自定義注冊表單插件

WordPress默認的注冊表單僅由兩個字段組成—-用戶名和郵箱。

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、網(wǎng)站制作、衛(wèi)東網(wǎng)絡(luò)推廣、小程序開發(fā)、衛(wèi)東網(wǎng)絡(luò)營銷、衛(wèi)東企業(yè)策劃、衛(wèi)東品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)公司為所有大學生創(chuàng)業(yè)者提供衛(wèi)東建站搭建服務(wù)，24小時服務(wù)熱線：13518219792，官方網(wǎng)址：muchs.cn

這個僅有的用戶名和郵箱表單字段使得注冊速度非常的簡單。首先，你輸入一個用戶名，然后輸入郵箱，這個郵箱就是用來接收密碼的。接下來，你使用郵箱接收到的密碼登陸站點，并且完成個人資料，把密碼修改成簡單易記得。

僅僅是在站點注冊，而不是讓用戶區(qū)經(jīng)歷這些壓力，那為什么除了用戶名和郵箱之外，不提供一個直接的、包含一些額外重要的表單字段，例如密碼、個人的URL、個人簡介、昵稱和他們的姓名的注冊表單供用戶使用呢？

這對于像Tuts+的多用戶網(wǎng)站是非常有用的。

在這篇文章中，我們將使用下列的表單字段建立一個自定義的表單注冊插件：

username

password

email

website URL

first name

last name

nickname

biography (or an about section)

這個自定義表單插件可以通過使用短代碼和聯(lián)系模板整合到WordPress中。

利用短代碼模板，你可以在你的站點中創(chuàng)建一個正式的注冊頁面。你也可以再一篇發(fā)表的文章中是用短代碼模板，這樣用戶就可以在閱讀完你的文章之后進行注冊。

如果你想添加一個注冊表單在你網(wǎng)站側(cè)邊欄的某個具體位置，你可以對WordPress主題中僅僅期望放置標簽?zāi)０宓奈恢眠M行編輯，來創(chuàng)建需要的注冊表單。

在創(chuàng)建之前，需要注意的是，用戶名、密碼和電子郵件字段是必需的。

當我們編寫驗證函數(shù)時，我們將強制執(zhí)行這些規(guī)則。

構(gòu)建插件

正如說的那樣，我們開始對插件編碼。首先，包含插件的頭部：

?php

/*

Plugin Name: Custom Registration

Plugin URI:

Description: Updates user rating based on number of posts.

Version: 1.0

Author: Agbonghama Collins

Author URI:

*/

接下來，我們創(chuàng)建一個包含注冊表單的HTML代碼的PHP函數(shù)：

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

';

}

請注意注冊字段是作為變量傳遞給上面的函數(shù)。在函數(shù)中，你會看到下面代碼的示例：

( isset( $_POST['lname'] ) ? $last_name : null )

這個三元操作符是檢查全局變量數(shù)組$_POST是否包含數(shù)據(jù)，如果有數(shù)據(jù)，就把填充的表單字段值保存以便進入下一個字段。

除非你驗證了表單數(shù)據(jù)并且清空了表單數(shù)據(jù)，一個注冊表單才能算完成，否則就不算。因此，我們要創(chuàng)建一個名為 registration_validation的表單驗證函數(shù)。

為了簡化驗證的”痛苦”,我們可以使用WordPress中的 WP_Error 類。跟著我編寫驗證函數(shù)：

1、創(chuàng)建函數(shù)，并將注冊表單的字段值作為函數(shù)的參數(shù)傳遞進來

function registration_validation( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio ) {

2、實例化 WP_Error 類，并把實例作為全局變量，以便于我們可以再函數(shù)的作用域之外使用。

global $reg_errors;

$reg_errors = new WP_Error;

3、記住：我們說的用戶名、密碼和電子郵件是必填的，不要忽略了。為了執(zhí)行這個規(guī)則，我們需要檢查它們中任何一個是否為空。如果為空，我們就將錯誤信息追加給WP_Error 類的實例。

if ( empty( $username ) || empty( $password ) || empty( $email ) ) {

$reg_errors-add('field', 'Required form field is missing');

}

4、我們也可以確保用戶名的字符個數(shù)不小于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 函數(shù)確保用戶名是可用的

if ( ! validate_username( $username ) ) {

$reg_errors-add( 'username_invalid', 'Sorry, the username you entered is not valid' );

}

7、確保用戶輸入的密碼的字符個數(shù)不小于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.、如果用戶填寫了網(wǎng)站字段，需要檢查其是否有效

if ( ! empty( $website ) ) {

if ( ! filter_var( $website, FILTER_VALIDATE_URL ) ) {

$reg_errors-add( 'website', 'Website is not a valid URL' );

}

}

11、最后，我們在WP_Error實例中對錯誤進行循環(huán)，并顯示個別的錯誤

if ( is_wp_error( $reg_errors ) ) {

foreach ( $reg_errors-get_error_messages() as $error ) {

echo 'div';

echo 'strongERROR/strong:';

echo $error . 'br/';

echo '/div';

}

}

這樣，驗證函數(shù)就完成了。接下來是 complete_registration()函數(shù)，用于處理用戶注冊。用戶的注冊真正完成是通過wp_insert_user函數(shù)，

用戶的數(shù)據(jù)作為數(shù)據(jù)保存后可以作為此函數(shù)的參數(shù)。

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

}

}

在上面的函數(shù)中，我們將$reg_errors作為WP_Error的實例，并將表單字段作為全局變量以便于可以再全局作用域中使用。

我們需要檢查$reg_errors是否包含任何錯誤，如果沒有錯誤，則將用戶注冊信息插入到WordPress的數(shù)據(jù)庫并用登陸鏈接來顯示注冊完成的信息。

然后，把所有我們之前創(chuàng)建的函數(shù)全部放在全局函數(shù)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

);

}

我需要說明一下全局函數(shù) custom_registration_function()中有哪些代碼。

首先，我通過檢查$_POST['submit']是否是空來確定表單是否提交。如果提交了，我就調(diào)用

registration_validation()函數(shù)來驗證用戶提交的表單.

然后，確保表單數(shù)據(jù)的有效性并將有效的數(shù)據(jù)在表單字段域之后用一個變量命名。最后，調(diào)用

complete_registration()函數(shù)保存用戶。我需要調(diào)用registration_form()函數(shù)來顯示用戶注冊表單。

我之前提到過，我打算用短代碼模板來支持注冊插件。下面就是短代碼模的支持代碼：

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

}

到這里為止，我們已經(jīng)完成了插件，下面的一張圖片展示了注冊表單的外觀。

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

應(yīng)用插件

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

也可以添加列出的模板標記?php custom_registration_function(); ?.，這樣可以讓表單插件成

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

總結(jié)

在這篇文章中，我們一步步創(chuàng)建了一個自定義注冊表單并添加到WordPress站點。你可以添加額外字段，進一

步擴展這個注冊表單，例如用戶角色，AOL IM 賬戶，但是確保數(shù)據(jù)時有效的。

wordpress上如何添加表單

如果要在文章內(nèi)加入表單，切換編輯模式為 html 直接添加表單代碼。

如果是在頁面內(nèi)添加，可以建立頁面模板，直接在模板內(nèi)添加表單。

怎樣利用WordPress創(chuàng)建自己定義注冊表單插件

默認的登記表格只包含兩個表單字段 – 用戶名和電子郵件：

register-form_wpdaxue_com

只有用戶名和電子郵件表單字段的存在，使得注冊過程非常容易。首先，您可以輸入您的用戶名和電子郵件之后，密碼會被發(fā)送給您。接下來，您使用網(wǎng)站生成的密碼登錄，然后填寫您的個人資料和更改更加難忘的密碼。

與其讓用戶通過上面的流程來簡單注冊你的網(wǎng)站，為什么不提供一個直入主題的注冊表單，包含一些用戶名和郵箱以外的重要信息，比如密碼、他們的網(wǎng)址、簡介、昵稱以及姓名等等。

如何給WordPress主題創(chuàng)建內(nèi)置聯(lián)系表單 ？

當然第一步是要創(chuàng)建一個頁面模板。先創(chuàng)建一個 page-contact.php的文件，然后將page.php文件里的代碼復(fù)制到這個新建的文件里。為了確保WordPress能夠?qū)⑺斪饕粋€頁面模板來看待，我們需要在contact.php文件的開頭添加下面的注釋?php/*Template Name: Contact*/?也就是說contact.php文件應(yīng)該是下面這樣子的:?php/*Template Name: Contact*/??php get_header() ?div id="container"div id="content"?php the_post() ?div id="post-?php the_ID() ?" class="post"div class="entry-content"/div!-- .entry-content -/div!-- .post--/div!-- #content --/div!-- #container --?php get_sidebar() ??php get_footer() ?步驟二: 創(chuàng)建表單 現(xiàn)在，我們需要創(chuàng)建一個簡單的聯(lián)系表單，只要將下面的代碼粘貼到 entry-content div內(nèi)部即可。form action="?php the_permalink(); ?" id="contactForm" method="post"ullilabel for="contactName"Name:/labelinput type="text" name="contactName" id="contactName" value="" //lililabel for="email"Email/labelinput type="text" name="email" id="email" value="" //lililabel for="commentsText"Message:/labeltextarea name="comments" id="commentsText" rows="20" cols="30"/textarea/lilibutton type="submit"Send email/button/li/ulinput type="hidden" name="submitted" id="submitted" value="true" //form 這個html代碼相當明了，不過要注意下第19行的 input type=”hidden”，我們后面會用它來檢查表單是否提交。步驟三: 數(shù)據(jù)的處理和錯誤的應(yīng)對 表單看起來已經(jīng)不錯了，但是此刻它仍然是無效的因為它沒有發(fā)送任何郵件。我們需要做的是驗證表單是否提交，然后再驗證表單的字段填寫是否正確。如果填寫都是正確的，就會收到博客管理員的郵件并向他們發(fā)送郵件。否則，就無法發(fā)送郵件，錯誤提示就會顯示給用戶。將下面的代碼粘貼在頁面模板聲明和get_header()函數(shù)之間：?phpif(isset($_POST['submitted'])) {if(trim($_POST['contactName']) === '') {$nameError = 'Please enter your name.';$hasError = true;} else {$name = trim($_POST['contactName']);}if(trim($_POST['email']) === '') {$emailError = 'Please enter your email address.';$hasError = true;} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {$emailError = 'You entered an invalid email address.';$hasError = true;} else {$email = trim($_POST['email']);}if(trim($_POST['comments']) === '') {$commentError = 'Please enter a message.';$hasError = true;} else {if(function_exists('stripslashes')) {$comments = stripslashes(trim($_POST['comments']));} else {$comments = trim($_POST['comments']);}}if(!isset($hasError)) {$emailTo = get_option('tz_email');if (!isset($emailTo) || ($emailTo == '') ){$emailTo = get_option('admin_email');}$subject = '[PHP Snippets] From '.$name;$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";$headers = 'From: '.$name.' '.$emailTo.'' . "\r\n" . 'Reply-To: ' . $email;mail($emailTo, $subject, $body, $headers);$emailSent = true;}} ? 這段代碼確認表單是否提交，是否正確填寫。如果發(fā)生錯誤，比如，一個字段是空的，或者郵箱地址不正確，就會返回錯誤提示的信息，表單就無法提交。接著就是顯示錯誤提示的信息，例如，“請輸入你的姓名”。 下面是完整的表單頁面模板，如果喜歡的話你可以原封不動地使用。?php/*Template Name: Contact*/??phpif(isset($_POST['submitted'])) {if(trim($_POST['contactName']) === '') {$nameError = 'Please enter your name.';$hasError = true;} else {$name = trim($_POST['contactName']);}if(trim($_POST['email']) === '') {$emailError = 'Please enter your email address.';$hasError = true;} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {$emailError = 'You entered an invalid email address.';$hasError = true;} else {$email = trim($_POST['email']);}if(trim($_POST['comments']) === '') {$commentError = 'Please enter a message.';$hasError = true;} else {if(function_exists('stripslashes')) {$comments = stripslashes(trim($_POST['comments']));} else {$comments = trim($_POST['comments']);}}if(!isset($hasError)) {$emailTo = get_option('tz_email');if (!isset($emailTo) || ($emailTo == '') ){$emailTo = get_option('admin_email');}$subject = '[PHP Snippets] From '.$name;$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";$headers = 'From: '.$name.' '.$emailTo.'' . "\r\n" . 'Reply-To: ' . $email;mail($emailTo, $subject, $body, $headers);$emailSent = true;}} ??php get_header(); ?div id="container"div id="content"?php if (have_posts()) : while (have_posts()) : the_post(); ?div ?php post_class() ? id="post-?php the_ID(); ?"h1 class="entry-title"?php the_title(); ?/h1div class="entry-content"?php if(isset($emailSent) $emailSent == true) { ?div class="thanks"pThanks, your email was sent successfully./p/div?php } else { ??php the_content(); ??php if(isset($hasError) || isset($captchaError)) { ?p class="error"Sorry, an error occured.p?php } ?form action="?php the_permalink(); ?" id="contactForm" method="post"ul class="contactform"lilabel for="contactName"Name:/labelinput type="text" name="contactName" id="contactName" value="?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?" class="required requiredField" /?php if($nameError != '') { ?span class="error"?=$nameError;?/span?php } ?/lililabel for="email"Email/labelinput type="text" name="email" id="email" value="?php if(isset($_POST['email'])) echo $_POST['email'];?" class="required requiredField email" /?php if($emailError != '') { ?span class="error"?=$emailError;?/span?php } ?/lililabel for="commentsText"Message:/labeltextarea name="comments" id="commentsText" rows="20" cols="30" class="required requiredField"?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?/textarea?php if($commentError != '') { ?span class="error"?=$commentError;?/span?php } ?/liliinput type="submit"Send email/input/li/ulinput type="hidden" name="submitted" id="submitted" value="true" //form?php } ?/div!-- .entry-content --/div!-- .post --?php endwhile; endif; ?/div!-- #content --/div!-- #container --?php get_sidebar(); ??php get_footer(); ?第四步驟: 添加jQuery驗證 到此為止，我們的表達已經(jīng)能夠非常完美的運作了。不過你還可以通過添加一個客戶端驗證來改善它。為此，我打算使用jQuery和 validate jQuery插件，這個插件非常強大，通過它你可以正確、快速、輕松地驗證表單。首先是下載驗證插件 然后將它上傳到你的主題文件里，完成之后，將下面的代碼粘貼到一個新的文件里：$(document).ready(function(){$("#contactForm").validate();}); 將這個文件命名為verif.js并保存至你的主題文件目錄里?，F(xiàn)在就需要將這個javascript文件鏈接到主題里，打開你的header.php文件，把下面的代碼粘貼到head和/head這兩個標簽之間：?php if( is_page('contact') ){ ?

文章題目：wordpress自定義表單 wordpress自定義函數(shù)
分享URL：http://muchs.cn/article20/ddippco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、App開發(fā)、搜索引擎優(yōu)化、定制網(wǎng)站、品牌網(wǎng)站設(shè)計、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)