Permudahkan pembuatan borang hubungan dengan keperluan asas

Sama ada anda memulakan blog ringkas, mencipta laman web korporat atau membina portfolio kreatif dengan WordPress, halaman Hubungi Kami (hampir) sentiasa diperlukan dan mempunyai borang hubungan (hampir) sentiasa lebih baik Daripada berkongsi alamat e-mel anda secara terbuka (walaupun bot spam menyukainya). Sudah tentu, terdapat banyak pemalam borang hubungan yang hebat untuk WordPress, tetapi mengapa perlu menambahkan tapak dengan pemalam yang berat dengan banyak pertanyaan pangkalan data apabila kita boleh menggunakan pemalam kod pendek tersuai yang cantik dan ringkas?

---

Faedah membina borang hubungan anda sendiri

Pemalam adalah hebat, tetapi terlalu banyak daripada mereka mempunyai ciri yang anda tidak perlukan dan boleh mengembang tapak anda dengan menggunakan sambungan pangkalan data, menjalankan kod PHP tambahan, menambah helaian gaya CSS dan fail JS pada pengepala.. ....Jadi, pada satu ketika, anda hanya mahu menjauhkan diri daripada pemalam sedia ada, tidak kira betapa hebatnya pemalam yang anda ingin gunakan.

Jika anda tidak tahu bagaimana untuk membuat kod, saya mesti mengakui bahawa tangan anda (agak) terikat dan anda perlu menggunakan plugin. Walau bagaimanapun, jika anda sudah biasa dengan pembangunan WordPress di mana-mana peringkat (dan saya andaikan anda begitu, kerana anda masih bersama saya), maka anda harus mempertimbangkan faedah menggodam tema anda sendiri atau menulis pemalam anda sendiri. Berikut adalah kelebihan pada pendapat saya:

• Pengoptimuman - Menggunakan terlalu banyak kod, terutamanya kod tambahan yang anda tidak perlukan, malah dalam sesetengah kes melebihi had pelan pengehosan anda. Tetapi walaupun anda mempunyai sumber yang mencukupi pada pelayan anda, pengoptimuman sentiasa memberi manfaat kepada kesihatan tapak anda.
• Kebersihan - Selain kesihatan pelayan anda, kod bersih mempunyai manfaat yang besar untuk kelajuan pemuatan dan penghuraian tapak web anda. Dengan mengekod/menggodamnya sendiri, anda hanya mempunyai apa yang anda perlukan untuk memanfaatkan ciri mudah di tapak anda tanpa perlu memuatkan satu tan kandungan. Anda tahu, ia juga bagus untuk SEO.
• The Joy of Control - Anda tidak boleh memandang rendah kuasa memberi pesanan. Mengambil kawalan ke atas tapak web anda pasti akan menjadikan anda seorang pereka/pembangun yang lebih bersemangat daripada menggunakan sekumpulan kod siap sedia. Itulah sebabnya, walaupun kami telah menyediakan kod lengkap untuk mereka yang tidak mahu, saya secara peribadi tidak fikir anda perlu menyalin / menampal kod di sini tetapi tulis sendiri. Walaupun anda memasukkan kod yang sama, anda boleh melihat cara pemalam berfungsi dan merasai kegembiraan mengawal. Serius.

---

Kod

Baiklah, sembang-sembang sudah cukup – mari dapatkan pengekodan! Kami tidak akan berurusan dengan satu tan kod atau apa-apa jenis kerja keras di sini, jadi walaupun anda seorang pemula di PHP dan/atau WordPress, anda boleh memahami kod tersebut dengan mengikuti panduan saya dan mempelajari mana-mana bahagian ia. Kod yang anda tidak kenali.

Anda boleh meletakkan kod ini terus ke dalam fail functions.php tema anda, tetapi cara yang lebih baik ialah menggunakannya sebagai pemalam. Dengan cara ini apabila anda menukar tema, anda tidak kehilangan fungsi dan akhirnya mencetak kod pendek dalam kandungan anda. Mari mulakan dengan maklumat pemalam standard:

<?php
/*
Plugin Name: Simple Contact Form Shortcode
Plugin URI: https://tutsplus.com/authors/Bar%C4%B1%C5%9F%20%C3%9Cnver
Description: A simple contact form for simple needs. Usage: <code>[contact email="your@email.address"]</code>
Version: 1.0
Author: Barış Ünver
Author URI: http://beyn.org/
*/

// This line of comment holds the place of the amazingly simple code we're going to write. So you don't really need to read this.

?>

---

Fungsi pembantu kecil: get_the_ip() get_the_ip()

正如您从函数名称中可以猜到的那样，即使用户通过代理服务器进行连接，我们也会获取用户的真实 IP 地址。当然，它并不是万无一失的，但我们无论如何都会将其用作用户的额外信息。

基本上，我们将尝试获取不同的 $_SERVER 变量：分别为 HTTP_X_FORWARDED_FOR、HTTP_CLIENT_IP 和 REMOTE_ADDR。代码如下：

function wptuts_get_the_ip() {
	if (isset($_SERVER["HTTP_X_FORWARDED_FOR"])) {
		return $_SERVER["HTTP_X_FORWARDED_FOR"];
	}
	elseif (isset($_SERVER["HTTP_CLIENT_IP"])) {
		return $_SERVER["HTTP_CLIENT_IP"];
	}
	else {
		return $_SERVER["REMOTE_ADDR"];
	}
}

---

简码

如果您在 Wptuts+ 上关注我的帖子，您就会知道我绝对喜欢 WordPress 的 Shortcode API。

我将把短代码分为 3 个部分，以便更好地解释它，但我们不要忘记首先打开和关闭短代码功能：

function wptuts_contact_form_sc( $atts ) {

	// This line of comment, too, holds the place of the brilliant yet simple shortcode that creates our contact form. And yet you're still wasting your time to read this comment. Bravo.

}
add_shortcode( 'contact', 'wptuts_contact_form_sc' );

我们的短代码的属性

我们需要设置一些属性，以便在保持轻量级的同时保持灵活性。这是十个：

extract( shortcode_atts( array(
	// if you don't provide an e-mail address, the shortcode will pick the e-mail address of the admin:
	"email" => get_bloginfo( 'admin_email' ),
	"subject" => "",
	"label_name" => "Your Name",
	"label_email" => "Your E-mail Address",
	"label_subject" => "Subject",
	"label_message" => "Your Message",
	"label_submit" => "Submit",
	// the error message when at least one of the required fields are empty:
	"error_empty" => "Please fill in all the required fields.",
	// the error message when the e-mail address is not valid:
	"error_noemail" => "Please enter a valid e-mail address.",
	// and the success message when the e-mail is sent:
	"success" => "Thanks for your e-mail! We'll get back to you as soon as we can."
), $atts ) );

请记住，我们将在代码中将它们作为带有属性名称的变量进行引用（例如 $label_submit）。

通过电子邮件发送电子邮件

这是该函数中最重要的部分，因此我将继续解释代码中的代码，并带有注释行：

// if the <form> element is POSTed, run the following code
if ( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
	$error = false;
	// set the "required fields" to check
	$required_fields = array( "your_name", "email", "message", "subject" );

	// this part fetches everything that has been POSTed, sanitizes them and lets us use them as $form_data['subject']
	foreach ( $_POST as $field => $value ) {
		if ( get_magic_quotes_gpc() ) {
			$value = stripslashes( $value );
		}
		$form_data[$field] = strip_tags( $value );
	}

	// if the required fields are empty, switch $error to TRUE and set the result text to the shortcode attribute named 'error_empty'
	foreach ( $required_fields as $required_field ) {
		$value = trim( $form_data[$required_field] );
		if ( empty( $value ) ) {
			$error = true;
			$result = $error_empty;
		}
	}

	// and if the e-mail is not valid, switch $error to TRUE and set the result text to the shortcode attribute named 'error_noemail'
	if ( ! is_email( $form_data['email'] ) ) {
		$error = true;
		$result = $error_noemail;
	}

	if ( $error == false ) {
		$email_subject = "[" . get_bloginfo( 'name' ) . "] " . $form_data['subject'];
		$email_message = $form_data['message'] . "\n\nIP: " . wptuts_get_the_ip();
		$headers  = "From: " . $form_data['name'] . " <" . $form_data['email'] . ">\n";
		$headers .= "Content-Type: text/plain; charset=UTF-8\n";
		$headers .= "Content-Transfer-Encoding: 8bit\n";
		wp_mail( $email, $email_subject, $email_message, $headers );
		$result = $success;
		$sent = true;
	}
	// but if $error is still FALSE, put together the POSTed variables and send the e-mail!
	if ( $error == false ) {
		// get the website's name and puts it in front of the subject
		$email_subject = "[" . get_bloginfo( 'name' ) . "] " . $form_data['subject'];
		// get the message from the form and add the IP address of the user below it
		$email_message = $form_data['message'] . "\n\nIP: " . wptuts_get_the_ip();
		// set the e-mail headers with the user's name, e-mail address and character encoding
		$headers  = "From: " . $form_data['your_name'] . " <" . $form_data['email'] . ">\n";
		$headers .= "Content-Type: text/plain; charset=UTF-8\n";
		$headers .= "Content-Transfer-Encoding: 8bit\n";
		// send the e-mail with the shortcode attribute named 'email' and the POSTed data
		wp_mail( $email, $email_subject, $email_message, $headers );
		// and set the result text to the shortcode attribute named 'success'
		$result = $success;
		// ...and switch the $sent variable to TRUE
		$sent = true;
	}
}

联系表

这部分当然和前一部分一样重要。毕竟，如果没有联系表单，前面的代码如何发送电子邮件呢？ :)

// if there's no $result text (meaning there's no error or success, meaning the user just opened the page and did nothing) there's no need to show the $info variable
if ( $result != "" ) {
	$info = '<div class="info">' . $result . '</div>';
}
// anyways, let's build the form! (remember that we're using shortcode attributes as variables with their names)
$email_form = '<form class="contact-form" method="post" action="' . get_permalink() . '">
	<div>
		<label for="cf_name">' . $label_name . ':</label>
		<input type="text" name="your_name" id="cf_name" size="50" maxlength="50" value="' . $form_data['your_name'] . '" />
	</div>
	<div>
		<label for="cf_email">' . $label_email . ':</label>
		<input type="text" name="email" id="cf_email" size="50" maxlength="50" value="' . $form_data['email'] . '" />
	</div>
	<div>
		<label for="cf_subject">' . $label_subject . ':</label>
		<input type="text" name="subject" id="cf_subject" size="50" maxlength="50" value="' . $subject . $form_data['subject'] . '" />
	</div>
	<div>
		<label for="cf_message">' . $label_message . ':</label>
		<textarea name="message" id="cf_message" cols="50" rows="15">' . $form_data['message'] . '</textarea>
	</div>
	<div>
		<input type="submit" value="' . $label_submit . '" name="send" id="cf_send" />
	</div>
</form>';

提示：如果您仔细查看联系表单的 HTML 代码，您可能会看到额外的 $subject 变量。还记得没有默认值的简码属性“subject”吗？这意味着如果您想设置默认主题，您可以使用这样的短代码： [contact subject="Job application"]

Seperti yang anda boleh meneka daripada nama fungsi, kami mendapat alamat IP sebenar pengguna walaupun pengguna menyambung melalui pelayan proksi. Sudah tentu, ia tidak mudah, tetapi kami menggunakannya sebagai maklumat tambahan untuk pengguna.

🎜Pada asasnya, kami akan cuba mendapatkan pembolehubah $_SERVER yang berbeza: HTTP_X_FORWARDED_FOR, HTTP_CLIENT_IP dan REMOTE_ADDR masing-masing. Kodnya adalah seperti berikut: 🎜

if ( $sent == true ) {
	return $info;
} else {
	return $info . $email_form;
}

🎜 🎜Kod ringkas🎜 🎜Jika anda mengikuti siaran saya di Wptuts+, anda tahu bahawa saya benar-benarsuka API Kod Pendek untuk WordPress. 🎜 🎜Saya akan membahagikan kod pendek kepada 3 bahagian untuk menerangkannya dengan lebih baik, tetapi jangan lupa untuk menghidupkan dan mematikan ciri kod pendek dahulu: 🎜

return $info . $email_form;

Sifat kod pendek kami

🎜Kita perlu menetapkan beberapa sifat agar kekal fleksibel sambil kekal ringan. Berikut adalah sepuluh: 🎜

.contact-form label, .contact-form input, .contact-form textarea { display: block; margin: 10px 0; }
.contact-form label { font-size: larger; }
.contact-form input { padding: 5px; }
#cf_message { width: 90%; padding: 10px; }
#cf_send { padding: 5px 10px; }

🎜Ingat bahawa kami akan merujuknya dalam kod sebagai pembolehubah dengan nama atribut (cth. $label_submit). 🎜

Hantar e-mel melalui e-mel

🎜Ini adalah bahagian paling penting dalam fungsi, jadi saya akan terus menerangkan kod dalam kod, dengan baris komen: 🎜 rrreee

Borang hubungan

🎜Bahagian ini tentunya sama pentingnya dengan bahagian sebelumnya. Lagipun, bagaimana kod sebelumnya boleh menghantar e-mel tanpa borang hubungan? :)🎜 rrreee

🎜🎜Petua: 🎜Jika anda melihat dengan teliti pada kod HTML borang hubungan, anda mungkin melihat pembolehubah $subjek tambahan. Ingat atribut kod pendek "subjek" yang tidak mempunyai nilai lalai? Ini bermakna jika anda ingin menetapkan tema lalai anda boleh menggunakan kod pendek seperti ini: [contact subject="Job application"]🎜 🎜

返回简码的

最后一点非常简单：如果电子邮件已发送，则显示成功消息，或者显示电子邮件表单和错误消息（如果有）。代码如下：

if ( $sent == true ) {
	return $info;
} else {
	return $info . $email_form;
}

如果电子邮件已发送，我们不会再次显示该表单，但如果您仍想显示该表单，可以使用以下简单的行：

return $info . $email_form;

---

CSS

当然，代码本身看起来不太好。通过一些化妆、CSS，我们可以使我们的表单更漂亮。将这些 CSS 代码行添加到主题的 style.css 文件中：

.contact-form label, .contact-form input, .contact-form textarea { display: block; margin: 10px 0; }
.contact-form label { font-size: larger; }
.contact-form input { padding: 5px; }
#cf_message { width: 90%; padding: 10px; }
#cf_send { padding: 5px 10px; }

如果一切正确，您将看到类似于下图的内容：

恭喜，您刚刚构建了自己的联系表单短代码！

---

结论

这个简单的联系表单对于大多数网站来说已经足够了，但是如果您想向其中添加更多字段，您只需编辑表单并将 $form_data['name_of_the_new_field'] 变量添加到 $email_message 中变量（并且可能将字段名称添加到 $required_fields 数组中。

如果您对如何改进此代码或显示您使用该代码的网站页面有任何想法，请在下面与我们分享您的评论！

Atas ialah kandungan terperinci Permudahkan pembuatan borang hubungan dengan keperluan asas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!