• HOME
  • Wordpress
  • WordPress自制邮件页面，【高速】异步处理实现，无画面转换，无需使用插件

WordPress自制邮件页面，【高速】异步处理实现，无画面转换，无需使用插件

Wordpress

在 WordPress 中安装[联系我们]，或者是[电子邮件]的咨询页面，最简单方法是安装插件。最常用的两个是：

这些插件专为一般用途而设计。您可以设置输入项，例如文本框、单选按钮和下拉菜单。但是有很多不必要功能，我们无法轻松安装。

此外，当引入这些插件时，将加载额外的 jquery文件。我们最希望的情况是，不添加任何插件来发送邮件。

因此，我们将通过示例程序介绍如何在不使用插件的情况下自行安装一个简单的邮件页面。

创建邮件页面

虽然是很普通的邮件形式，但最大的特点就是不进行画面转换。换句话说，如果您按下屏幕上的“发送”按钮，处理结果会在没有屏幕转换的情况下显示出来。通过这种异步处理，无需准备多个画面即可通过简单的配置实现。

实施所需的屏幕和文件

  • 带有邮件表单的固定页面
  • 用于发送电子邮件的 PHP 文件

这就是您需要准备的全部内容。现在看源代码。

邮件页面的源代码

制作模板 (HTML/CSS/JavaScript)

在你的wordpress服务器中添加下面的模板。

文件名可以随便定义一个：我们用了mailform.php。

样式表和 JavaScript 可能包含在主题文件中。但是由于使用了jQuery的Ajax处理，所以需要加载jQuery库。在我们一下的模板中，Javascript文件是从 Google 的 CDN 加载的。

<?php
/**
Template Name: form-mail
*/
get_header();
?>
	<div class="content-sidebar-wrap c-wrap">
		<main id="primary" class="site-main">
		<h2>欢迎您的咨询，我们很高兴能够为您服务。</h2>
<form id="mailform">
  <div>
    <label for="nameval">姓名<span>(必填)</span></label> <input
    type="text" name="nameval" id="nameval" required />
  </div>
  <div>
    <label for="mailval">Email<span>(必填)</span></label> <input
    type="email" name="mailval" id="mailval" required />
  </div>
  <div>
    <label for="urlval">网址</label> <input
    type="text" name="urlval" id="urlval" />
  </div>
  <div>
    <label for="textval">咨询内容<span>(必填)</span></label> <textarea
    name="textval" id="textval" rows="12" required></textarea>
  </div>
  <p class="contact-submit">
    <input type="submit" value="发送»" id="submit"> <input
    id="referrer" type="hidden" name="referrer" />
  </p>
</form>
<div id="dispmsg"></div>
 
<!-- stylesheet-->

<style>
#mailform input[type='text'],
#mailform input[type='email'] {
  font-size: 1em;
  width: 300px;
  max-width: 100%;
  margin-bottom: 13px;
  box-sizing: border-box;
}
#mailform input,
#mailform button {
  height: 40px;
  padding: 0 10px;
}
#mailform textarea {
  font-size: 1em;
  margin-bottom: 13px;
  padding: 2px 5px;
  width:100%;
  box-sizing: border-box;
}
#mailform label {
  margin-bottom: 3px;
  font-weight: bold;
  display: block;
}
#mailform label span {
  color: #aaa;
  margin-left: 4px;
  font-weight: normal;
}
#submit{
  width:200px;
}
#dispmsg > p{
  border: 3px solid #ffe3b3;
  background: #ffffeb;
  border-radius: 7px;
  padding: 15px;
  margin: 30px 0;
  text-align: center;
  font-weight: bold;
}
#dispmsg blockquote {
  margin: 30px 0;
  padding: 15px;
  background-color: #f3f3f3
}
#dispmsg pre {
  font-family: -apple-system,BlinkMacSystemFont,Meiryo,Verdana,sans-serif;
  line-height: 1.7;
  white-space: pre-wrap;
  background: #fafafa;
  margin: 15px 0 0;
  padding: 10px;
}
#dispmsg #errmsg{
  background: #fff5f5;
  border: 3px solid #fcc;
  color: #e1536a;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>  
<!-- JavaScript -->
<div>
<script>
jQuery(function ($) {
  $("#referrer").val(document.referrer);
  $("#mailform").submit(function(){ 
    $.ajax({
      url : '/sendmail.php',//PHP源代码路径，请改为您自己的路径
      type: 'POST',
      dataType: 'json',
      data: $(this).serialize()
    })
    .done( function(data){
      $("#dispmsg").empty();
      $("#dispmsg").html(data.dispmsg);
      if(data.errflg != 1){
        $("#mailform").remove();
      }
    })
    .fail( function(data){
      alert('发送邮件失败');
    })
    return false;
  });
});
</script>
		</main><!-- #primary -->

		<?php get_sidebar(); ?> 
	</div><!-- .content-sidebar-wrap -->

<?php
get_footer();

样式表和 JavaScript 可能包含在主题文件中。但是由于使用了jQuery的Ajax处理，所以需要加载jQuery库。此处，脚本文件是添加了<script src = “https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js” ></script> ，是从 Google 的 CDN 加载的。

JavaScript 程序必须在加载 jQuery 库之后编写。如果在 WordPress 设置中加载了 jQuery，如果它恰好在 </body> 标记之前加载，将会发生错误。如上所示，在处理之前写入它。jQuery文件读取两次也没问题。

由于处理脚本和样式表仅在该邮件表中使用，因此建议在屏幕内定义它们，而不是将它们写入主题内的文件中。

CSS 可能与您当前设置的内容重叠。请根据需要进行更改。

【重要】将第PHP源代码路径行的“PHP源代码路径”替换为后面创建的PHP文件路径。

用于发送电子邮件的 PHP 文件

邮件发送部分是用PHP实现的。

<?php
// json 的数据形式
header('Content-type: application/json');
// PHP5.1.0以上必须设定timezone
date_default_timezone_set('Asia/Beijing');

// --------------------------
// 项目的设定
// --------------------------
// To：email
$to =  'xxxx@xxxx.com';// 目标电子邮件地址
// title of email
$subject = 'From the inquiry form';//邮件标题
// 自己的域名
$domain = 'xxxxx.com';//自己的域名

//变量的初始化
$errflg =0;    // judge error
$dispmsg ='';  // 向屏幕输出内容

// 输入项目
$nameval = '';   // name
$mailval = '';   // email-address
$urlval = '';    // website
$textval = '';   // content
$referrer = '';  // 跳到环面

// 从画面上取得内容
if(isset($_POST['nameval'])){ $nameval = $_POST['nameval']; }
if(isset($_POST['mailval'])){ $mailval = $_POST['mailval']; }
if(isset($_POST['urlval'])){ $urlval = $_POST['urlval']; }
if(isset($_POST['textval'])){ $textval = $_POST['textval']; }
if(isset($_POST['referrer'])){ $referrer = $_POST['referrer']; }

if(strpos($_SERVER['HTTP_REFERER'], $domain) === false){
  // 域名检测
  $dispmsg = '<p id="errmsg">【域名错误】咨询的发送域名出现错误，请重新操作</p>';
  $errflg = 1;
}
else if($nameval == '' || $mailval == '' || $textval == ''){
  //必填事项的检测
  $dispmsg = '<p id="errmsg">【输入错误】姓名和邮箱是必填内容</p>';
  $errflg = 1;
}
else if(!preg_match("/^[\.!#%&\-_0-9a-zA-Z\?\/\+]+\@[!#%&\-_0-9a-z]+(\.[!#%&\-_0-9a-z]+)+$/", $mailval) || count( explode('@',$mailval) ) !=2){
  //检查Email
  $dispmsg .= '<p id="errmsg">【邮箱地址错误】邮箱地址不正确，请检查。</p>';
  $errflg = 1;
}
else{
  // 生成Email
  $subject = "=?GBK?B?".base64_encode(mb_convert_encoding($subject,'GBK','UTF-8'))."?=";
  $message= 'Name：'.$nameval."\n";
  $message.='Email：'.$mailval."\n";
  $message.='WebSite：'.$urlval."\n";
  $message.="\n――――――――――――――――――――――――――――――\n\n";
  $message.=$textval;
  $message.="\n\n――――――――――――――――――――――――――――――\n";
  $message.='SendDate：'.date( "Y/m/d (D) H:i:s", time() )."\n";
  $message.='SendIPAddress：'.@$_SERVER["REMOTE_ADDR"]."\n";
  $message.='SendHost：'.getHostByAddr(getenv('REMOTE_ADDR'))."\n";
  $message.='RelatedURL：'.$referrer."\n";
  $message.='InquiryScreen：'.@$_SERVER['HTTP_REFERER']."\n";
  $message= mb_convert_encoding($message,'GBK','UTF-8');
  $fromName = mb_encode_mimeheader(mb_convert_encoding($nameval,'GBK','UTF-8'));
  $header ='From: '.$fromName.'<wordpress@'.$domain.'>'."\n";
  $header.='Reply-To: '.$mailval."\n";
  //$header.='Content-Type:text/plain;charset=iso-2022-jp\nX-Mailer: PHP/'.phpversion();
  $header.='Content-Type:text/plain;charset=GBK\nX-Mailer: PHP/'.phpversion();
  // 发送邮件
  $retmail = mail($to,$subject,$message,$header);
 //$retmail = mb_send_mail($to,$subject,$message,$header);
  // 发送结果
  if( $retmail ){
    $dispmsg ='<p class="success">suceeful,邮件发送完毕，谢谢您。我们会即使回复。</p>';
    $dispmsg.='<blockquote><p>姓名： '.hsc_utf8($nameval).'<br />';
    $dispmsg.= 'メール： '.hsc_utf8($mailval).'<br />';
    $dispmsg.= '网址： '.hsc_utf8($urlval).'</p>';
    $dispmsg.= '<pre>'.hsc_utf8($textval).'</pre></blockquote>';
  }else{
    $dispmsg .= '<p id="errmsg">【出现错误】邮件发送失败。。</p>';
    $errflg = 1;
  }
}

// 返回处理结果的页面
$result = array('errflg'=>$errflg, 'dispmsg'=>$dispmsg);
echo json_encode( $result );

// HTML处理
function hsc_utf8($str) {
  return htmlspecialchars($str, ENT_QUOTES,'UTF-8');
}
?>

请将此文件放到你的wordpress域名的下面，我们一般在域名之后会有一个[public_html/]文件夹。
我们就把上面的[PHP源代码路径]改为[/sendmail.php]

安装

  • ①在【页面】的菜单中，单击【新建页面】
  • ②单击【模板】
  • ③单击【模板】的向下的三角按钮【◆】
  • ④选择模板的名称【form-mail】(这个名称是我们在上面的mailform.php中设定的名称）

安装之后的图像

如果直接使用上面的源代码，屏幕图像将如下所示。

邮件发送成功时的画面

如果您在邮件表单中输入正确的信息并发送，输入表单将从屏幕上消失，发送的信息将显示在屏幕上。此时后台发送邮件后切换画面显示，无画面转换。

邮件表单从屏幕上消失，发送的信息显示在屏幕上。

电子邮件传输错误屏幕

如果出现错误，邮件表单中的信息将保持原样，并在发送按钮底部显示错误消息。

有4个地方需要改

复制上面的整个源代码无法正常工作。请务必根据您的环境重写以下项目。

1）请检测，是否运行了JQuery.

2）请检测是否将PHP源代码路径，改为了您自己的路径

3）请检测下面三个项目是否已经改为了您自己。

  • “$to = ‘xxxx@xxxx.com’;” —-目标电子邮件地址
  • “$subject = ‘From the inquiry form’;”—- 邮件标题
  • “$domain = ‘xxxx.xxxxxxxx.com’;”——自己的域名

由于标题是固定的，所以它是在PHP上定义的。对于域定义，请定义安装 WordPress 的顶级域或子域。（将字符串设置为下一个斜线，不包括 WordPress URL 中的 http://。）

在 PHP 上实现 referrer 检查

if( strpos ( $_SERVER [ 'HTTP_REFERER' ], $domain ) === false ){  
  // 检测域名是否正确
  $dispmsg = '<p id="errmsg"> [Referrer check error] 电子邮件无法发送，因为它没有输入到查询表中。</p>' ; 
  $errflg = 1 ; 
}

它受到控制，因此不会从安装电子邮件表单的页面以外的任何页面发送电子邮件。这是一个防止邮件发送程序被外部非法调用的过程。这时候就用上一节中描述的域变量来进行检查。

本来希望控制.htaccess设置，让发送邮件的PHP文件无法被外域访问。

PHP中的简单地址检查

else if (! preg_match ( "/^[.!#%&-_0-9a-zA-Z?/+]+@[!#%&-_0-9a-z]+(.[!#%&- _0-9a-z]+)+$/" , $mailval ) || count ( explode ( '@' , $mailval ) ) != 2 ){    
  // 检查电子邮件地址
  $dispmsg .= '<p id="errmsg"> [错误] 电子邮件地址格式不正确。</p>' ; 
  $errflg = 1 ; 
}

使用正则表达式来检测邮箱是否正确，我们在这里实施的是一个不完美的检查。请注意，完美的检查需要写一段很长的代码，所以请理解我们只检查最少的部分。

输入的发件人显示名称

 $fromName = mb_encode_mimeheader ( mb_convert_encoding ( $nameval , 'GBK' , 'UTF-8' ));
 $header = 'From: ' . $fromName . '<wordpress@' . $domain . ' > ' .
 $header .= '回复：' . $mailval . "n" ;

输入的“姓名”项显示在收到邮件的发件人栏中。但是，发件人的电子邮件地址设置为“ wordpress@domain name ”。

当然，还有一种方法是使用输入的电子邮件地址。但是，根据邮件程序（例如 Gmail）的不同，使用输入的地址可能会自动将其归类为垃圾邮件，因此在这里实现时就好像它是从您自己的域发送的一样。

信息输出到邮箱

底部的referrer URL 设置打开查询页面之前访问的页面信息。由于它是无法通过插件获取的信息，因此它被实现为一个原始的便利功能。

实现异步高速处理

正如我在开头所解释的，这种邮件形式最大的特点是异步处理。

通过Ajax实现，所有处理都在一屏内完成。由于邮件发送过程是一个简单的程序，所以在按下发送按钮后会在瞬间显示处理结果。

在一般的邮件形式中，有很多东西会转移到发送完成屏幕，并且会发生屏幕的重新加载。您可能会对这种异步电子邮件表单的速度感到惊讶，因为从提交到呈现完成屏幕至少需要几秒钟。

最后，我想告诉你一些使用这个邮件表格的注意事项。

很重要的一点

  • 需要 JavaScript 运行的环境
  • 没有实施反垃圾邮件措施

使用Wordpress的邮件插件，经常会有大量的垃圾邮件被发送过来。我们自制的这个邮件页面，也有同样的缺点，就是容易从外面大量送来垃圾邮件。

关联内容

Wordpress
操作简介：禁用评论
Wordpress
single.php 和 page.php 之间的区别
Wordpress
如何制作自己的面包屑
Wordpress
[图像的蓬松显示] Easy FancyBox的使用和设置方法
Wordpress
在 WinSCP 中显示隐藏文件
Wordpress
如果 WordPress 中没有 .htaccess 文件怎么办