Skip to content

Instantly share code, notes, and snippets.

@psaikali psaikali/0usage.php
Last active Apr 2, 2017

Embed
What would you like to do?
Utiliser des jolis templates d'e-mails dans WordPress et remplacer des mots par des variables
<?php
/*
* Usage de la fonction msk_send_mail
*/
$destinataire = 'pierre@mosaika.fr';
$data = array(
'prenom' => 'Bruce',
'nom' => 'Willis',
'email' => 'bruce.willis@laposte.net',
'url' => 'https://mosaika.fr'
);
$retour = msk_send_mail('template_when_this_happens', $destinataire, $data);
if (isset($retour['error']) && $retour['error'] == 0) {
// L'e-mail a été envoyé
} else {
// Erreur, vérifiez $retour['message'] pour en savoir plus
}
<?php
/**
* Envoyer un e-mail : on se base sur un template et on remplace des "placeholders" par des variables dynamiques
*/
function msk_send_mail($template = '', $to = '', $data = array()) {
// Définissez ici les différents modèles d'e-mail à suivre
$available_templates = array(
// Le template d'un premier e-mail
'template_when_this_happens' => array(
'subject' => __('Le sujet de l\'email s\'affiche ici', 'mosaika'),
'content' => __('<p>Bonjour {{ prenom }} {{ nom }} !</p><p>Une nouvelle inscription sur notre site a été faite avec l\'e-mail {{ email }}. Pour vous connecter, <a href="{{ url }}">rendez-vous sur cette page</a>.</p>', 'mosaika')
),
// Le template d'un autre e-mail
'another_template_when_that_happens' => array(
'subject' => __('Le sujet de l\'email s\'affiche ici', 'mosaika'),
'content' => __('<p>Bonjour {{ prenom }} {{ nom }} !</p><p>Une nouvelle inscription sur notre site a été faite avec l\'e-mail {{ email }}. Pour vous connecter, <a href="{{ url }}">rendez-vous sur cette page</a>.</p>', 'mosaika')
),
);
if ($to == '') {
$error = 'Erreur d\'envoi d\'un e-mail : destinataire vide.';
} else if ($template == '') {
$error = 'Erreur d\'envoi d\'un e-mail : template vide.';
} else if (!array_key_exists($template, $available_templates)) {
$error = 'Erreur d\'envoi d\'un e-mail : template inexistant.';
} else {
if (!is_array($to)) $to = array($to);
// Si le site est en développement, on envoie l'e-mail à l'administrateur du site
if (WP_DEBUG) $to = array(get_option('admin_email'));
// On récupère le tableau correspondant au template à analyser/transformer
$template_data = $available_templates[$template];
$mail_subject_template = $template_data['subject'];
$mail_content_template = $template_data['content'];
// On transforme les {{ placeholders }} par les variables fournies dans $data (pour le sujet et le corps du mail)
// Par exemple, {{ email }} est remplacé par la valeur de $data['email'], {{ prenom }} par la valeur de $data['prenom']
$mail_subject = msk_transform_vars_to_value($mail_subject_template, $data);
$mail_content = msk_transform_vars_to_value($mail_content_template, $data);
// On intègre le corps/contenu de notre e-mail à la place de {{ body }} dans le fichier /emails/base.tpl
$mail_html = msk_parse_email_body_content_in_template(array('body' => wpautop($mail_content)));
// On s'assure que l'e-mail envoyé est au format HTML
$mail_headers = array('Content-Type: text/html; charset=UTF-8');
// On envoie l'email
if (!wp_mail($to, $mail_subject, $mail_html, $mail_headers)) {
$error = 'Erreur durant l\'envoi de l\'e-mail.';
}
if ($error) {
return array('error' => 1, 'message' => $error);
} else {
return array('error' => 0);
}
}
}
/**
* Transforme {{ variable }} en sa valeur correspondante dans le tableau fourni
*/
function msk_transform_vars_to_value($template, $vars) {
$output = $template;
foreach ($vars as $key => $value) {
$tag_to_replace = "{{ $key }}";
$output = str_replace($tag_to_replace, $value, $output);
}
return $output;
}
/**
* Permet de récupérer tout le contenu HTML de l'e-mail à envoyer, avec tous les {{ placeholders }} remplacés par les valeurs fournies
*/
function msk_parse_email_body_content_in_template($data) {
require_once(get_stylesheet_directory() . '/emails/emailTemplate.php');
$defaults = array(
'preheader' => 'Cet e-mail vous est envoyé par XYZ. <a href="http://mosaika.fr">Cliquez-ici</a> pour visiter notre site.',
'logo' => get_stylesheet_directory_uri() . '/emails/logo.png',
'body' => '',
'footer' => 'Copyright 2017 XYZ.',
);
$tags = wp_parse_args($data, $defaults);
$email_content = new MailTemplate(get_stylesheet_directory() . '/emails/base.tpl');
foreach ($tags as $tag_name => $tag_value) {
$email_content->set($tag_name, $tag_value);
}
return $email_content->output();
}
<?php
/**
* Simple template engine class (use [@tag] tags in your templates).
* (merci à http://www.broculos.net/2008/03/how-to-make-simple-html-template-engine.html#.WODf9N-YFhE pour le code)
*
* @link http://www.broculos.net/ Broculos.net Programming Tutorials
* @author Nuno Freitas <nunofreitas@gmail.com>
* @version 1.0
*/
class MailTemplate {
/**
* The filename of the template to load.
*
* @access protected
* @var string
*/
protected $file;
/**
* An array of values for replacing each tag on the template (the key for each value is its corresponding tag).
*
* @access protected
* @var array
*/
protected $values = array();
/**
* Creates a new Template object and sets its associated file.
*
* @param string $file the filename of the template to load
*/
public function __construct($file) {
$this->file = $file;
}
/**
* Sets a value for replacing a specific tag.
*
* @param string $key the name of the tag to replace
* @param string $value the value to replace
*/
public function set($key, $value) {
$this->values[$key] = $value;
}
/**
* Outputs the content of the template, replacing the keys for its respective values.
*
* @return string
*/
public function output() {
/**
* Tries to verify if the file exists.
* If it doesn't return with an error message.
* Anything else loads the file contents and loops through the array replacing every key for its value.
*/
if (!file_exists($this->file)) {
return "Error loading template file ($this->file).<br />";
}
$output = file_get_contents($this->file);
foreach ($this->values as $key => $value) {
$tagToReplace = "{{ $key }}";
$output = str_replace($tagToReplace, $value, $output);
}
return $output;
}
/**
* Merges the content from an array of templates and separates it with $separator.
*
* @param array $templates an array of Template objects to merge
* @param string $separator the string that is used between each Template object
* @return string
*/
static public function merge($templates, $separator = "\n") {
/**
* Loops through the array concatenating the outputs from each template, separating with $separator.
* If a type different from Template is found we provide an error message.
*/
$output = "";
foreach ($templates as $template) {
$content = (get_class($template) !== "Template")
? "Error, incorrect type - expected Template."
: $template->output();
$output .= $content . $separator;
}
return $output;
}
}
?>
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mon super e-mail grâce à www.mosaika.fr</title>
<style>
/* -------------------------------------
GLOBAL RESETS
------------------------------------- */
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%; }
body {
background-color: #f6f6f6;
font-family: "Helvetica Neue", "Helvetica", Tahoma, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; }
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%; }
table td {
font-family: "Helvetica Neue", "Helvetica", Tahoma, sans-serif;
vertical-align: middle; }
/* -------------------------------------
BODY & CONTAINER
------------------------------------- */
.body {
background-color: #f6f6f6;
width: 100%; }
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block;
Margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: auto !important;
width: 580px; }
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
box-sizing: border-box;
display: block;
Margin: 0 auto;
max-width: 580px;
padding: 10px; }
/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.main {
background: #fff;
border-radius: 3px;
width: 100%; }
.wrapper {
box-sizing: border-box;
padding: 20px; }
.footer {
clear: both;
padding-top: 10px;
text-align: center;
width: 100%; }
.footer td,
.footer p,
.footer span,
.footer a {
color: #999999;
font-size: 12px;
text-align: center; }
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4 {
font-weight:bold;
color:#00578f;
margin-top:20px;
margin-bottom:10px;
font-family: "Helvetica Neue", "Helvetica", Tahoma, sans-serif;
line-height: 1.4;
margin: 0;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 20px;
}
h5 {
font-size: 17px;
}
blockquote {
border-left:3px solid #DADADA;
margin-left: 20px;
padding-left: 20px;
font-style: italic;
}
p,
ul,
ol {
font-family: "Helvetica Neue", "Helvetica", Tahoma, sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0;
Margin-bottom: 15px; }
p li,
ul li,
ol li {
list-style-position: inside;
margin-left: 5px; }
a {
color: #3498db;
text-decoration: underline; }
/* -------------------------------------
BUTTONS
------------------------------------- */
.btn {
box-sizing: border-box;
width: 100%; }
.btn > tbody > tr > td {
padding-bottom: 15px; }
.btn table {
width: auto; }
.btn table td {
background-color: #ffffff;
border-radius: 5px;
text-align: center; }
.btn a {
background-color: #ffffff;
border: solid 1px #3498db;
border-radius: 5px;
box-sizing: border-box;
color: #3498db;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 12px 25px;
text-decoration: none;
text-transform: capitalize; }
.btn-primary table td {
background-color: #3498db; }
.btn-primary a {
background-color: #3498db;
border-color: #3498db;
color: #ffffff; }
/* -------------------------------------
OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
margin-bottom: 0; }
.first {
margin-top: 0; }
.align-center {
text-align: center; }
.align-right {
text-align: right; }
.align-left {
text-align: left; }
.clear {
clear: both; }
.mt0 {
margin-top: 0; }
.mb0 {
margin-bottom: 0; }
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0; }
.powered-by a {
text-decoration: none; }
hr {
border: 0;
border-bottom: 1px solid #e6e6e6;
Margin: 16px 0; }
.logo {
text-align: center;
}
.logo a {
display:block;
text-align: center;
}
.logo a img {
margin:0 auto;
}
.logo hr {
border: 0;
border-bottom: 2px solid #e6e6e6;
margin: 12px 0 0; }
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
@media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important; }
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important; }
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important; }
table[class=body] .content {
padding: 0 !important; }
table[class=body] .container {
padding: 0 !important;
width: 100% !important; }
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important; }
table[class=body] .btn table {
width: 100% !important; }
table[class=body] .btn a {
width: 100% !important; }
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important; }}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
@media all {
.ExternalClass {
width: 100%; }
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%; }
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important; }
.btn-primary table td:hover {
background-color: #34495e !important; }
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important; } }
</style>
</head>
<body class="">
<table border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td>&nbsp;</td>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<span class="preheader">{{ preheader }}</span>
<table class="main">
<tr>
<td class="wrapper logo">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://www.mosaika.fr/"><img src="{{ logo }}" width="221" height="86" /></a>
<hr>
</td>
</tr>
</table>
</td>
</tr>
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
{{ body }}
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- START FOOTER -->
<div class="footer">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block">
<span class="apple-link">{{ footer }}</span>
</td>
</tr>
</table>
</div>
</div>
</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.