为wordpress添加联系页面

为wordpress添加联系页面可以有两种方式，一种使用插件形式，如：

contact form 7
intouch

另外一种方式就是自己添加代码的方式。

第一、创建联系页面模板

首先创建一个contact.php的文件，然后将page.php文件里的代码复制到这个新建的文件里。

为了确保WordPress能够将它当作一个页面模板来看待，我们需要在contact.php文件的开头添加下面的注释：

1
<?php
2
/*
3
Template Name: Contact
4
*/
5
?>
也就是说contact.php文件应该是下面这样子的：

1
<?php
2
/*
3
Template Name: Contact
4
*/
5
?>
6
<?php get_header() ?>
7
<div id="container">
8
<div id="content">
9
<?php the_post() ?>
10
<div id="post-<?php the_ID() ?>" class="post">
11
<div class="entry-content">
12
</div><!– .entry-content ->
13
</div><!– .post–>
14
</div><!– #content –>
15
</div><!– #container –>
16
<?php get_sidebar() ?>
17
<?php get_footer() ?>
第二、创建表单

现在，我们需要创建一个简单的联系表单，只要将下面的代码粘贴到div entry-content内部即可。

1
<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
2
<ul>
3
<li>
4
<label for="contactName">Name:</label>
5
<input type="text" name="contactName" id="contactName" value="" />
6
</li>
7
<li>
8
<label for="email">Email</label>
9
<input type="text" name="email" id="email" value="" />
10
</li>
11
<li>
12
<label for="commentsText">Message:</label>
13
<textarea name="comments" id="commentsText" rows="20" cols="30"></textarea>
14
</li>
15
<li>
16
<button type="submit">Send email</button>
17
</li>
18
</ul>
19
<input type="hidden" name="submitted" id="submitted" value="true" />
20
</form>
这个html代码相当明了，不过要注意下第19行的 input type=”hidden”，我们后面会用它来检查表单是否提交。

第三、数据的处理和错误的应对

表单看起来已经不错了，但是此刻它仍然是无效的因为它没有发送任何邮件。我们需要做的是验证表单是否提交，然后再验证表单的字段填写是否正确。如果填写都是正确的，就会收到博客管理员的邮件并向他们发送邮件。否则，就无法发送邮件，错误提示就会显示给用户。将下面的代码粘贴在页面模板声明和get_header()函数之间：

1
<?php
2
if(isset($_POST[‘submitted’])) {
3
if(trim($_POST[‘contactName’]) === '') {
4
$nameError = 'Please enter your name.';
5
$hasError = true;
6
} else {
7
$name = trim($_POST[‘contactName’]);
8
}
9
if(trim($_POST[’email’]) === '') {
10
$emailError = 'Please enter your email address.';
11
$hasError = true;
12
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$”, trim($_POST[’email’]))) {
13
$emailError = 'You entered an invalid email address.';
14
$hasError = true;
15
} else {
16
$email = trim($_POST[’email’]);
17
}
18
if(trim($_POST[‘comments’]) === '') {
19
$commentError = 'Please enter a message.';
20
$hasError = true;
21
} else {
22
if(function_exists('stripslashes')) {
23
$comments = stripslashes(trim($_POST[‘comments’]));
24
} else {
25
$comments = trim($_POST[‘comments’]);
26
}
27
}
28
if(!isset($hasError)) {
29
$emailTo = get_option('tz_email');
30
if (!isset($emailTo) || ($emailTo == '') ){
31
$emailTo = get_option('admin_email');
32
}
33
$subject = '[PHP Snippets] From '.$name;
34
$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
35
$headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
36

37
mail($emailTo, $subject, $body, $headers);
38
$emailSent = true;
39
}
40
} ?>
这段代码确认表单是否提交，是否正确填写。如果发生错误，比如，一个字段是空的，或者邮箱地址不正确，就会返回错误提示的信息，表单就无法提交。接着就是显示错误提示的信息，例如，“请输入你的姓名”。下面是完整的表单页面模板，如果喜欢的话你可以原封不动地使用。

1
<?php
2
/*
3
Template Name: Contact
4
*/
5
?>
6

7
<?php
8
if(isset($_POST[‘submitted’])) {
9
if(trim($_POST[‘contactName’]) === '') {
10
$nameError = 'Please enter your name.';
11
$hasError = true;
12
} else {
13
$name = trim($_POST[‘contactName’]);
14
}
15

16
if(trim($_POST[’email’]) === '') {
17
$emailError = 'Please enter your email address.';
18
$hasError = true;
19
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$”, trim($_POST[’email’]))) {
20
$emailError = 'You entered an invalid email address.';
21
$hasError = true;
22
} else {
23
$email = trim($_POST[’email’]);
24
}
25

26
if(trim($_POST[‘comments’]) === '') {
27
$commentError = 'Please enter a message.';
28
$hasError = true;
29
} else {
30
if(function_exists('stripslashes')) {
31
$comments = stripslashes(trim($_POST[‘comments’]));
32
} else {
33
$comments = trim($_POST[‘comments’]);
34
}
35
}
36

37
if(!isset($hasError)) {
38
$emailTo = get_option('tz_email');
39
if (!isset($emailTo) || ($emailTo == '') ){
40
$emailTo = get_option('admin_email');
41
}
42
$subject = '[PHP Snippets] From '.$name;
43
$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
44
$headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
45

46
mail($emailTo, $subject, $body, $headers);
47
$emailSent = true;
48
}
49

50
} ?>
51
<?php get_header(); ?>
52
<div id="container">
53
<div id="content">
54

55
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
56
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
57
<h1 class="entry-title"><?php the_title(); ?></h1>
58
<div class="entry-content">
59
<?php if(isset($emailSent) && $emailSent == true) { ?>
60
<div class="thanks">
61
<p>Thanks, your email was sent successfully.</p>
62
</div>
63
<?php } else { ?>
64
<?php the_content(); ?>
65
<?php if(isset($hasError) || isset($captchaError)) { ?>
66
<p class="error">Sorry, an error occured.<p>
67
<?php } ?>
68

69
<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
70
<ul class="contactform">
71
<li>
72
<label for="contactName">Name:</label>
73
<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST[‘contactName’])) echo $_POST[‘contactName’];?>" class="required requiredField" />
74
<?php if($nameError != '') { ?>
75
<span class="error"><?=$nameError;?></span>
76
<?php } ?>
77
</li>
78

79
<li>
80
<label for="email">Email</label>
81
<input type="text" name="email" id="email" value="<?php if(isset($_POST[’email’])) echo $_POST[’email’];?>" class="required requiredField email" />
82
<?php if($emailError != '') { ?>
83
<span class="error"><?=$emailError;?></span>
84
<?php } ?>
85
</li>
86

87
<li><label for="commentsText">Message:</label>
88
<textarea 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>
89
<?php if($commentError != '') { ?>
90
<span class="error"><?=$commentError;?></span>
91
<?php } ?>
92
</li>
93

94
<li>
95
<input type="submit">Send email</input>
96
</li>
97
</ul>
98
<input type="hidden" name="submitted" id="submitted" value="true" />
99
</form>
100
<?php } ?>
101
</div><!– .entry-content –>
102
</div><!– .post –>
103

104
<?php endwhile; endif; ?>
105
</div><!– #content –>
106
</div><!– #container –>
107

108
<?php get_sidebar(); ?>
109
<?php get_footer(); ?>
第四、添加jQuery验证

到此为止，我们的表达已经能够非常完美的运作了。不过你还可以通过添加一个客户端验证来改善它。为此，我们打算使用jQuery和validate jQuery插件，这个插件非常强大，通过它你可以正确、快速、轻松地验证表单。

首先是下载验证插件jQuery validate plugin然后将它上传到你的主题文件里，完成之后，将下面的代码粘贴到一个新的文件里：

1
$(document).ready(function(){
2
$("#contactForm").validate();
3
});
将这个文件命名为verif.js并保存至你的主题文件目录里。

现在就需要将这个javascript文件链接到主题里，打开你的header.php文件，把下面的代码粘贴到head标签之间：

1
<?php if( is_page('contact') ){ ?>
2
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.7.2.min.js"></script>
3
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/verif.js"></script>
4
<?php }?>
大功告成！现在在后台新建一个联系页面，模版选择Contact，内容可写可不写，试试看吧！

More from my site

分享到：

More from my site

留言 取消

留言取消