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?
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:
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. ?>
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"]
$_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; }
return $info . $email_form;
.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; }
$label_submit
). 🎜
[contact subject="Job application"]
🎜
🎜
返回简码的
最后一点非常简单:如果电子邮件已发送,则显示成功消息,或者显示电子邮件表单和错误消息(如果有)。代码如下:
if ( $sent == true ) { return $info; } else { return $info . $email_form; }
如果电子邮件已发送,我们不会再次显示该表单,但如果您仍想显示该表单,可以使用以下简单的行:
return $info . $email_form;
当然,代码本身看起来不太好。通过一些化妆、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!