表單wordpress 表單如何制作

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

當然第一步是要創(chuàng)建一個頁面模板。先創(chuàng)建一個 page-contact.php的文件，然后將page.php文件里的代碼復制到這個新建的文件里。為了確保WordPress能夠將它當作一個頁面模板來看待，我們需要在contact.php文件的開頭添加下面的注釋?php/*Template Name: Contact*/?也就是說contact.php文件應該是下面這樣子的:?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內部即可。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ù)據的處理和錯誤的應對 表單看起來已經不錯了，但是此刻它仍然是無效的因為它沒有發(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驗證 到此為止，我們的表達已經能夠非常完美的運作了。不過你還可以通過添加一個客戶端驗證來改善它。為此，我打算使用jQuery和 validate jQuery插件，這個插件非常強大，通過它你可以正確、快速、輕松地驗證表單。首先是下載驗證插件 然后將它上傳到你的主題文件里，完成之后，將下面的代碼粘貼到一個新的文件里：$(document).ready(function(){$("#contactForm").validate();}); 將這個文件命名為verif.js并保存至你的主題文件目錄里?，F(xiàn)在就需要將這個javascript文件鏈接到主題里，打開你的header.php文件，把下面的代碼粘貼到head和/head這兩個標簽之間：?php if( is_page('contact') ){ ?

網站建設哪家好，找成都創(chuàng)新互聯(lián)！專注于網頁設計、網站建設、微信開發(fā)、微信小程序開發(fā)、集團企業(yè)網站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了鞍山免費建站歡迎大家使用！

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

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

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

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

這對于像Tuts+的多用戶網站是非常有用的。

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

username

password

email

website URL

first name

last name

nickname

biography (or an about section)

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

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

如果你想添加一個注冊表單在你網站側邊欄的某個具體位置，你可以對WordPress主題中僅僅期望放置標簽模板的位置進行編輯，來創(chuàng)建需要的注冊表單。

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

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

構建插件

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

?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ù)據，如果有數(shù)據，就把填充的表單字段值保存以便進入下一個字段。

除非你驗證了表單數(shù)據并且清空了表單數(shù)據，一個注冊表單才能算完成，否則就不算。因此，我們要創(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、記?。何覀冋f的用戶名、密碼和電子郵件是必填的，不要忽略了。為了執(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.、如果用戶填寫了網站字段，需要檢查其是否有效

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ù)據作為數(shù)據保存后可以作為此函數(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ù)據庫并用登陸鏈接來顯示注冊完成的信息。

然后，把所有我們之前創(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']是否是空來確定表單是否提交。如果提交了，我就調用

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

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

complete_registration()函數(shù)保存用戶。我需要調用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();

}

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

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

應用插件

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

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

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

總結

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

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

WordPress網站評論表單如何修改？

表單可以主題源代碼里修改，進入WP后臺，主題 - 編輯 找到comments.php，找到label/label標簽

網站欄目：表單wordpress 表單如何制作
URL標題：http://bm7419.com/article4/ddejcoe.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、做網站、品牌網站制作、外貿建站、Google、網站制作

廣告

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