前段时间客户提需求,需要在前端做个寻求合作的输入框,商户输入内容后以发邮件的方式将网店地址发送给管理员邮箱,再从邮箱里审核链接,从而避开因公开联系方式而导致经常收到垃圾电话或微信的烦恼
安装 WP Mail SMTP 插件
WordPress 默认是使用 PHP 的 mail() 功能发送邮件,但需要主机开启这一功能否则无法使用,使用网上其他大佬的方法,调用 mail() 发送都没有正常收到邮件,并且即使是以这种方式发送成功,邮件也很可能被当做垃圾邮件。
解决这个问题就是安装 WP Mail SMTP 插件,根据这个插件的描述:
WP Mail SMTP 通过重新配置 WordPress 在发送电子邮件时使用适当的 SMTP 程序来修复您的电子邮件可传递性,正确的 SMTP 配置通过身份验证有助于提高电子邮件的可传递性,通过改进和更改 WordPress 网站发送电子邮件方式,轻松解决电子邮件传递问题。我们重新配置函数以使用正确的 SMTP 主机凭据或利用内置的 SMTP 邮件提供程序。使用我们的内置 SMTP 邮件提供商集成(推荐)之一时,使用提供商的直接 API 发送电子邮件。这意味着即使您的 Web 主机阻止 SMTP 端口,您的电子邮件仍会成功发送。
直接在插件安装节目搜索 WP Mail SMTP 安装并启用
配置 WP Mail SMTP
插件基础配置
进入 WP Mail SMTP 配置界面 一般 标签页,进行以下配置
- 发件人:输入要用于发送邮件的地址,支持自己发送给自己,所以这里我配置了要接受邮件的邮箱
- 发件人名词:输入发件人名称即可
- 邮件程序:默认给出了10个选项,因为使用的是 163 邮箱,选项里没有,所以选择最后的 其他 SMTP
邮件设置
这时候需要登录到你的邮箱,进入邮箱设置,这里以 163 邮箱为例:
- 进入设置
- 点击左侧菜单的 POP3/SMTP/IMAP
- 开启 IMAP/SMTP 服务
- 授权密码管理,点击 新增授权密码 按钮,会在小窗口自动生成密码,记住保留这个密码,因为小窗口关闭后就不会再显示,只能再次生成
- 复制最下方提示的 SMTP 服务器:smtp.163.com
- 可以看到最下方显示:POP3/SMTP/IMAP 服务全部支持 SSL 连接
插件 SMTP 配置
这时候需要回到插件设置界面 一般 标签页下方
- SMTP 主机:输入 邮件设置 第5点的 smtp.163.com
- 加密:因为 163 邮箱支持 SSL 连接,所以选择 SSL
- SMTP 端口:163 邮箱设置里并没有看到端口,不过可以通过搜索引擎找到,输入 465
- 自动 TLS:启用
- 认证:启用
- SMTP 用户名:输入邮箱地址
- SMTP 密码:输入 邮件设置 第4点的密码
最后保存设置,并点击设置界面顶部的 电邮测试 按钮 进入测试页面,点击 发送电子邮件 按钮即可测试是否配置成功,若成功则可以在邮箱收到一封 WP Mail SMTP 的测试邮件
自定义发送内容
这里只提供大概思路并不会展示全部代码,各自使用时以实际情况进行修改和补全
编写 JavaScript 获取输入
在前端要发送内容的输入框里,调用 JavaScript 函数,使用 Ajax 异步方式发送:
// 指定处理发送邮件的 php 文件
var send_store_url_email_php = "/wp-content/themes/someonetheme/send_store_url_eamil.php";
// 校验 url
function isValidURL(url){
var urlRegExp=/^((https|http)?:\/\/)+[A-Za-z0-9]+.[A-Za-z0-9]+[\/=\?%-&_~`@[]\':+!]([^<>\"\"])$/;
if(urlRegExp.test(url)){
return true;
}else{
return false;
}
}
// Ajax 发送邮件
function send_store_url() {
var store_url = document.getElementById("store_url").value;
var xmlhttp = new XMLHttpRequest();
var popup_advance_send_result = document.getElementsByClassName("popup_advance_send_result")[0];
if(isValidURL(store_url)) {
xmlhttp.open("POST", send_store_url_email_php, true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("store_url=" + store_url);
popup_advance_send_result.innerText = "发送成功!";
} else {
popup_advance_send_result.innerText = "网址格式不正确!";
}
}
处理邮件发送
在主题根目录下创建文件:send_store_url_eamil.php,并编辑:
<?php
require_once("../../../wp-load.php");
$store_url = $_POST["store_url"];
$to = "xxxx@163.com";
$subject = "您有一条新消息!";
$img_url = "https://xxx.com/logo.png";
$warming_text = "请注意域名地址,小心病毒链接:";
$body = '这里输入邮件要显示的内容,支持 HTML 代码';
$headers = array("Content-Type: text/html; charset=UTF-8");
$attachments = array();
wp_mail( $to, $subject, $body, $headers, $attachments );
完成
此时在输入框发送即可在邮箱查看新邮件