當(dāng)然第一步是要?jiǎng)?chuàng)建一個(gè)頁面模板。先創(chuàng)建一個(gè) page-contact.php的文件，然后將page.php文件里的代碼復(fù)制到這個(gè)新建的文件里。為了確保WordPress能夠?qū)⑺?dāng)作一個(gè)頁面模板來看待，我們需要在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)在，我們需要?jiǎng)?chuàng)建一個(gè)簡單的聯(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 這個(gè)html代碼相當(dāng)明了，不過要注意下第19行的 input type=”hidden”，我們后面會(huì)用它來檢查表單是否提交。步驟三: 數(shù)據(jù)的處理和錯(cuò)誤的應(yīng)對(duì) 表單看起來已經(jīng)不錯(cuò)了，但是此刻它仍然是無效的因?yàn)樗鼪]有發(fā)送任何郵件。我們需要做的是驗(yàn)證表單是否提交，然后再驗(yàn)證表單的字段填寫是否正確。如果填寫都是正確的，就會(huì)收到博客管理員的郵件并向他們發(fā)送郵件。否則，就無法發(fā)送郵件，錯(cuò)誤提示就會(huì)顯示給用戶。將下面的代碼粘貼在頁面模板聲明和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;}} ? 這段代碼確認(rèn)表單是否提交，是否正確填寫。如果發(fā)生錯(cuò)誤，比如，一個(gè)字段是空的，或者郵箱地址不正確，就會(huì)返回錯(cuò)誤提示的信息，表單就無法提交。接著就是顯示錯(cuò)誤提示的信息，例如，“請(qǐng)輸入你的姓名”。 下面是完整的表單頁面模板，如果喜歡的話你可以原封不動(dòng)地使用。?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驗(yàn)證 到此為止，我們的表達(dá)已經(jīng)能夠非常完美的運(yùn)作了。不過你還可以通過添加一個(gè)客戶端驗(yàn)證來改善它。為此，我打算使用jQuery和 validate jQuery插件，這個(gè)插件非常強(qiáng)大，通過它你可以正確、快速、輕松地驗(yàn)證表單。首先是下載驗(yàn)證插件 然后將它上傳到你的主題文件里，完成之后，將下面的代碼粘貼到一個(gè)新的文件里：$(document).ready(function(){$("#contactForm").validate();}); 將這個(gè)文件命名為verif.js并保存至你的主題文件目錄里?，F(xiàn)在就需要將這個(gè)javascript文件鏈接到主題里，打開你的header.php文件，把下面的代碼粘貼到head和/head這兩個(gè)標(biāo)簽之間：?php if( is_page('contact') ){ ?
創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括梁園網(wǎng)站建設(shè)、梁園網(wǎng)站制作、梁園網(wǎng)頁制作以及梁園網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，梁園網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到梁園省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
如果要在文章內(nèi)加入表單，切換編輯模式為 html 直接添加表單代碼。
如果是在頁面內(nèi)添加，可以建立頁面模板，直接在模板內(nèi)添加表單。
WordPress默認(rèn)的注冊(cè)表單僅由兩個(gè)字段組成—-用戶名和郵箱。
這個(gè)僅有的用戶名和郵箱表單字段使得注冊(cè)速度非常的簡單。首先，你輸入一個(gè)用戶名，然后輸入郵箱，這個(gè)郵箱就是用來接收密碼的。接下來，你使用郵箱接收到的密碼登陸站點(diǎn)，并且完成個(gè)人資料，把密碼修改成簡單易記得。
僅僅是在站點(diǎn)注冊(cè)，而不是讓用戶區(qū)經(jīng)歷這些壓力，那為什么除了用戶名和郵箱之外，不提供一個(gè)直接的、包含一些額外重要的表單字段，例如密碼、個(gè)人的URL、個(gè)人簡介、昵稱和他們的姓名的注冊(cè)表單供用戶使用呢？
這對(duì)于像Tuts+的多用戶網(wǎng)站是非常有用的。
在這篇文章中，我們將使用下列的表單字段建立一個(gè)自定義的表單注冊(cè)插件：
username
password
website URL
first name
last name
nickname
biography (or an about section)
這個(gè)自定義表單插件可以通過使用短代碼和聯(lián)系模板整合到WordPress中。
利用短代碼模板，你可以在你的站點(diǎn)中創(chuàng)建一個(gè)正式的注冊(cè)頁面。你也可以再一篇發(fā)表的文章中是用短代碼模板，這樣用戶就可以在閱讀完你的文章之后進(jìn)行注冊(cè)。
如果你想添加一個(gè)注冊(cè)表單在你網(wǎng)站側(cè)邊欄的某個(gè)具體位置，你可以對(duì)WordPress主題中僅僅期望放置標(biāo)簽?zāi)０宓奈恢眠M(jìn)行編輯，來創(chuàng)建需要的注冊(cè)表單。
在創(chuàng)建之前，需要注意的是，用戶名、密碼和電子郵件字段是必需的。
當(dāng)我們編寫驗(yàn)證函數(shù)時(shí)，我們將強(qiáng)制執(zhí)行這些規(guī)則。
構(gòu)建插件
正如說的那樣，我們開始對(duì)插件編碼。首先，包含插件的頭部：
?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)建一個(gè)包含注冊(cè)表單的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
';
}
請(qǐng)注意注冊(cè)字段是作為變量傳遞給上面的函數(shù)。在函數(shù)中，你會(huì)看到下面代碼的示例：
( isset( $_POST['lname'] ) ? $last_name : null )
這個(gè)三元操作符是檢查全局變量數(shù)組$_POST是否包含數(shù)據(jù)，如果有數(shù)據(jù)，就把填充的表單字段值保存以便進(jìn)入下一個(gè)字段。
除非你驗(yàn)證了表單數(shù)據(jù)并且清空了表單數(shù)據(jù)，一個(gè)注冊(cè)表單才能算完成，否則就不算。因此，我們要?jiǎng)?chuàng)建一個(gè)名為 registration_validation的表單驗(yàn)證函數(shù)。
為了簡化驗(yàn)證的”痛苦”,我們可以使用WordPress中的 WP_Error 類。跟著我編寫驗(yàn)證函數(shù)：
1、創(chuàng)建函數(shù)，并將注冊(cè)表單的字段值作為函數(shù)的參數(shù)傳遞進(jìn)來
function registration_validation( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio ) {
2、實(shí)例化 WP_Error 類，并把實(shí)例作為全局變量，以便于我們可以再函數(shù)的作用域之外使用。
global $reg_errors;
$reg_errors = new WP_Error;
3、記?。何覀冋f的用戶名、密碼和電子郵件是必填的，不要忽略了。為了執(zhí)行這個(gè)規(guī)則，我們需要檢查它們中任何一個(gè)是否為空。如果為空，我們就將錯(cuò)誤信息追加給WP_Error 類的實(shí)例。
if ( empty( $username ) || empty( $password ) || empty( $email ) ) {
$reg_errors-add('field', 'Required form field is missing');
}
4、我們也可以確保用戶名的字符個(gè)數(shù)不小于4
if ( 4 strlen( $username ) ) {
$reg_errors-add( 'username_length', 'Username too short. At least 4 characters is required' );
}
5、檢查用戶名是否被注冊(cè)了
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、確保用戶輸入的密碼的字符個(gè)數(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、檢查電子郵件是否被注冊(cè)
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、最后，我們?cè)赪P_Error實(shí)例中對(duì)錯(cuò)誤進(jìn)行循環(huán)，并顯示個(gè)別的錯(cuò)誤
if ( is_wp_error( $reg_errors ) ) {
foreach ( $reg_errors-get_error_messages() as $error ) {
echo 'div';
echo 'strongERROR/strong:';
echo $error . 'br/';
echo '/div';
}
}
這樣，驗(yàn)證函數(shù)就完成了。接下來是 complete_registration()函數(shù)，用于處理用戶注冊(cè)。用戶的注冊(cè)真正完成是通過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的實(shí)例，并將表單字段作為全局變量以便于可以再全局作用域中使用。
我們需要檢查$reg_errors是否包含任何錯(cuò)誤，如果沒有錯(cuò)誤，則將用戶注冊(cè)信息插入到WordPress的數(shù)據(jù)庫并用登陸鏈接來顯示注冊(cè)完成的信息。
然后，把所有我們之前創(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ù)來驗(yàn)證用戶提交的表單.
然后，確保表單數(shù)據(jù)的有效性并將有效的數(shù)據(jù)在表單字段域之后用一個(gè)變量命名。最后，調(diào)用
complete_registration()函數(shù)保存用戶。我需要調(diào)用registration_form()函數(shù)來顯示用戶注冊(cè)表單。
我之前提到過，我打算用短代碼模板來支持注冊(cè)插件。下面就是短代碼模的支持代碼：
// 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)完成了插件，下面的一張圖片展示了注冊(cè)表單的外觀。
注意,你可能不會(huì)得到完全相同的外觀，因?yàn)閃ordPress站點(diǎn)的CSS樣式不同。
應(yīng)用插件
為了在WordPress的文章頁或獨(dú)立頁面使用這個(gè)插件，可以加入以下代碼：[cr_custom_registration]
也可以添加列出的模板標(biāo)記?php custom_registration_function(); ?.，這樣可以讓表單插件成
為WordPress主題的一個(gè)部分。你可以從這篇文章的附加代碼得到這個(gè)插件。
總結(jié)
在這篇文章中，我們一步步創(chuàng)建了一個(gè)自定義注冊(cè)表單并添加到WordPress站點(diǎn)。你可以添加額外字段，進(jìn)一
步擴(kuò)展這個(gè)注冊(cè)表單，例如用戶角色，AOL IM 賬戶，但是確保數(shù)據(jù)時(shí)有效的。
重慶分公司
重慶分公司
