Как создать совершенные электронные письма для вашего вебсайта WordPress

Независимо от типа веб-сайта вы работаете, его успех, вероятно, зависит от вашего взаимодействия с аудиторией. Если выполнено хорошо, одним из наиболее эффективных инструментов может быть простой электронной почты.

WordPress пользователи в удачу, так как WordPress уже имеет простой в использовании и расширяемые функции, чтобы дать вам много власти и гибкости в обработке электронной почты вашего сайта.

Для того, чтобы создать нашу собственную систему, мы будем делать четыре вещи. Во-первых, мы создадим хороший шаблон электронной почты для использования. Затем мы изменим функцию почтового рассылки, чтобы она использует наш новый пользовательский шаблон. Затем мы изменим фактический текст некоторых встроенных писем. После этого мы выйдябудем зацепить наши собственные электронные почты в различные случаи для того чтобы послать некоторые изготовленные на заказ электронные почты. Начнем!

Как WordPress отправляет электронные письма

WordPress имеет удобную функцию, встроенную в называется wp_mail() , который обрабатывает вшивый-грязный отправки электронной почты. Он способен обрабатывать почти все, что вы бросаете на него, от пользовательских писем HTML к изменениям в поле “От”.

WordPress сам использует эту функцию, и вы можете, тоже, с помощью Крючки WordPress. Вы можете прочитать все о том, как крючки работы в WordPress, но вот версия скорлупы, и мы будем работать с ними в этой статье так много, что вы узнаете его к концу.

Крючки позволяют добавлять свои собственные функции в WordPress без изменения основных файлов. Без крючков, если вы хотите отправить уведомление о публикации автору поста, вам придется найти функцию, которая опубликовала сообщение и добавить свой собственный код непосредственно к нему. С крючками, вы пишете функцию для отправки электронной почты, а затем подключить его в функцию, которая публикует сообщение. В основном, вы говорите WordPress для запуска пользовательской функции всякий раз, когда функция для публикации сообщений работает.

Настройка магазина

Первое, что нам нужно сделать, это создать плагин. Мы смогли получить прочь без его и как раз использовать архив функций нашей темы, но это стало бы clunky in the long run. Не волнуйтесь: настройка плагина супер-легко.

Перейти к папке плагинов вашего сайта, которые можно найти под wp-content . Создайте новую папку с именем my_awesome_email_plugin . Если вы хотите другое имя, используйте что-то уникальное, нет email или email_plugin ; в противном случае, конфликты могут возникнуть с другими плагинами.

Создайте файл под названием my’awesome-email-plugin.php в новой папке. Имя файла (без расширения) должно быть таким же, как и название папки.

Изналивайте содержимое моего письма-плагина.php, копируя и вставляя приведенный ниже код и изменяя его в случае необходимости. Это всего лишь некоторая информация по умолчанию, что WordPress использует, чтобы показать плагин в меню плагинов в области админ.

<?php
/*
Plugin Name: My Awesome Email Plugin
Plugin URI: http://myawesomewebsite.com
description: >-
  I created this plugin to rule the world via awesome WordPress email goodness
Version: 1.0
Author: Me
Author URI: http://myself.me
*/

?>

Как только это будет сделано, сохранить файл, перейдите в раздел WordPress админ, и активировать новый плагин. Если вы новичок в этом, то поздравления! Вы только что создали свой первый рабочий плагин WordPress! Он действительно не делает что-нибыдь пока, но не препятствуйте тому докучать вам. Просто читайте дальше, потому что мы будем добавлять некоторые функциональные возможности после следующего раздела.

Создание шаблона электронной почты

Создание хороших шаблонов электронной почты стоит статьи по своей собственной. Я просто поделюсь методом, который я использую, что не означает, что делать это по-другому не допускается. Не стесняйтесь экспериментировать!

Я не большой поклонник использования изображений в электронной почте, поэтому мы будем строить HTML шаблон, используя только CSS. Наша цель состоит в том, чтобы придумать шаблон, к которому мы можем добавить заголовок и колонтитул разделе. Мы пошлем наши электронные почты в WordPress путем вытягивать в заголовок, кладя текст электронной почты под тем и после этого вытягивать в колонтитул. Таким образом, вы можете изменить дизайн ваших писем очень легко, просто изменяя шаблоны.

Без дальнейших ado, вот код для шаблона электронной почты, который я сделал. Или вы можете скачать его в виде HTML-файла (справа щелчка, а затем выберите “Сохранить как”). Если вы хотите быстрый предварительный просмотр того, что он выглядит, просто нажмите на ссылку.

<html>
    <head>

        <title>The Subject of My Email</title>

    </head>
    <body>
        <div id="email_container" style="background:#444">
            <div style="width:570px; padding:0 0 0 20px; margin:50px auto 12px auto" id="email_header">
                <span style="background:#585858; color:#fff; padding:12px;font-family:trebuchet ms; letter-spacing:1px; 
                    -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; 
                    border-top-left-radius:5px;moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; 
                    border-top-right-radius:5px;">
                    MyAwesomeWebsite.com
                </div>
            </div>

            <div style="width:550px; padding:0 20px 20px 20px; background:#fff; margin:0 auto; border:3px #000 solid;
                moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; color:#454545;line-height:1.5em; " id="email_content">

                <h1 style="padding:5px 0 0 0; font-family:georgia;font-weight:500;font-size:24px;color:#000;border-bottom:1px solid #bbb">
                    The subject of this email
                </h1>

                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing 
                    elit. Aenean commodo ligula eget dolor. Aenean massa 
                    <strong>strong</strong>. Cum sociis natoque penatibus 
                    et magnis dis parturient montes, nascetur ridiculus 
                    mus. Donec quam felis, ultricies nec, pellentesque 
                    eu, pretium quis, sem. Nulla consequat massa quis 
                    enim. Donec pede justo, fringilla vel, aliquet nec, 
                    vulputate eget, arcu. In enim justo, rhoncus ut.
                </p>
                <p>
                    Imperdiet a, venenatis vitae, justo. Nullam dictum 
                    felis eu pede <a style="color:#bd5426" href="#">link</a> 
                    mollis pretium. Integer tincidunt. Cras dapibus.

            Vivamus elementum semper nisi. Aenean vulputate 
                    eleifend tellus. Aenean leo ligula, porttitor eu, 
                    consequat vitae, eleifend ac, enim. Aliquam lorem ante, 
                    dapibus in, viverra quis, feugiat a, tellus. Phasellus 
                    viverra nulla ut metus varius laoreet. Quisque rutrum.

            Aenean imperdiet. Etiam ultricies nisi vel augue.

            Curabitur ullamcorper ultricies nisi.
                </p> 

                <p style="">
                    Warm regards,<br>
                    The MyAwesomeWebsite Editor
                </p>

                <div style="text-align:center; border-top:1px solid #eee;padding:5px 0 0 0;" id="email_footer"> 
                    <small style="font-size:11px; color:#999; line-height:14px;">
                        You have received this email because you are a member of MyAwesomeSite.com.
                        If you would like to stop receiving emails from us, feel free to 
                        <a href="" style="color:#666">unregister</a> from our mailing list
                    </small>
                </div>

            </div>
        </div>
    </body>
</html>

Помните, что это письмо, так что HTML не будет красивым. Самый безопасный метод укладки является внестровым, так что чем меньше оборк вы можете уйти с, тем лучше.

Давайте разделим это на две части. Заголовок часть электронной почты все, от верхнего права до и в том числе h1 заголовок на строке 23 (т.е. линии 01 до 23). Скопируйте этот бит и вставьте его в новый файл в my_email_plugin папке, и назовите его по электронной почте. Колонтитул часть письма все, от пункта тега до “Теплые отношения” право до конца (т.е. линии 48 до 64). Текст между заголовком и колонтитул просто заполнитель, так что вы можете увидеть, что готовый продукт будет выглядеть. Мы заполним его любым контентом, который нам нужно отправить в то время.

Подготовка системы WordPress для наших электронных писем

По умолчанию, WordPress отправляет простые текстовые письма. Для того, чтобы разместить нашу причудливую электронную почту HTML, мы должны сказать wp_mail() функцию для использования формата HTML. Мы также навеяем пользовательский “От” имя и “От” адрес в этом процессе, так что электронная почта выглядит хорошо в папке “Входящие” каждого. Для этого мы будем использовать ранее упомянутые крючки. Давайте посмотрим на код; объяснение следующим образом.

add_filter ("wp_mail_content_type", "my_awesome_mail_content_type");
function my_awesome_mail_content_type() {
    return "text/html";
}

add_filter ("wp_mail_from", "my_awesome_mail_from");
function my_awesome_mail_from() {
    return "hithere@myawesomesite.com";
}

add_filter ("wp_mail_from_name", "my_awesome_mail_from_name");
function my_awesome_email_from_name() {
    return "MyAwesomeSite";
}

На линии 01, мы определили, что мы добавляем фильтр для функции WordPress wp_mail_content_type() . Наш фильтр будет называться my_awesome_mail_content_type . Фильтр является не более чем функцией, поэтому нам нужно создать my_awesome_mail_content_type() функцию.

Помните, что действия являются функциями, вызванными из других функций? Мы добавляем действие в wp_insert_user() функцию, и действие выполняется всякий раз, когда wp_insert_user() выполняется. Фильтры указаны во многом таким же образом; но вместо того, чтобы работать рядом с функцией, из которую она называется, она изменяет значение сущности, на которую она призвана.

В нашем случае это означает, что где-то внутри wp_mail() функции находится переменная, которая удерживает тип электронной почты, который по text/plain умолчанию. На этой переменной вызывается крюк фильтра, что wp_mail_content_type означает, что все прикрепленные фильтры будут запущены. Мы, случается, прикрепили фильтр к нему на линии 01, так что наша функция будет выполнять свою задачу. Все, что нам нужно сделать, это вернуть text/html значение, которое изменит значение переменной в wp_mail text/html функции.

Логика остального кода точно такая же. Добавление фильтра wp_mail_from позволяет нам изменить адрес отправителя hithere@myawesomewebsite.com на, и добавление фильтра, wp_mail_from_name чтобы мы могли изменить имя отправителя.

Изменение существующих WordPress системы электронной почты

Приветствие новых пользователей

Это содержание по умолчанию WordPress электронной почты.

Как уже упоминалось, WordPress имеет кучу встроенных писем, которые можно легко контролировать (с помощью крючков, конечно). Давайте изменим поздравительную электронную почту по умолчанию, которую WordPress отправляет новым пользователям. Это письмо рассылается с использованием так называемой “функции pluggable”. Эта функция поставляется WordPress, но, в отличие от обычных основных функций, вы можете перезаписать его с вашим собственным кодом.

Функция, о котором идет речь, называется wp_new_user_notification() . Чтобы изменить его, все, что нам нужно сделать, это создать функцию с тем же именем. Из-за метода, с помощью которого WordPress вызывает подключаемые функции, не будет никакого конфликта, даже если вы создаете функцию с тем же именем. Ниже приведена функция, которую я написал. Смотрите объяснение и предварительный просмотр его ниже.

function wp_new_user_notification($user_id, $plaintext_pass) {
    $user = new WP_User($user_id);

    $user_login = stripslashes($user->user_login);
    $user_email = stripslashes($user->user_email);

    $email_subject = "Welcome to MyAwesomeSite ".$user_login."!";

    ob_start();

    include("email_header.php");

    ?>

    <p>A very special welcome to you, <?php echo $user_login ?>. Thank you for joining MyAwesomeSite.com!</p>

    <p>
        Your password is <strong style="color:orange"><?php echo $plaintext_pass ?></strong> <br>
        Please keep it secret and keep it safe!
    </p>

    <p>
        We hope you enjoy your stay at MyAwesomeSite.com. If you have any problems, questions, opinions, praise, 
        comments, suggestions, please feel free to contact us at any time
    </p>

    <?php
    include("email_footer.php");

    $message = ob_get_contents();
    ob_end_clean();

    wp_mail($user_email, $email_subject, $message);

Как вы можете видеть, функция передается два аргумента: идентификатор нового пользователя и генерируемый пароль. Мы будем использовать их для генерации переменных частей нашего сообщения. На линии 2 мы создали пользовательский объект, который будет содержать данные пользователя. На линии 7 мы создали объект электронной почты с помощью $email_subject переменной.

Прежде чем двигаться дальше, давайте вернемся к нашему файлу электронной почты. Заменить “Тема моей электронной почты” и “Тема этого письма” (линии 04 и 22, если вы смотрите на код здесь) с <?php echo $email_subject ?> . Мы не хотим, чтобы все наши предметы, чтобы быть “Субъект моей электронной почты”, поэтому мы должны вытащить эти данные из электронной почты, что мы строим.

От строк 09 до 31 мы используем удобную технику под названием “буферизация выходов”. Поскольку содержимое электронной почты не хранится внутри переменной, оно включено непосредственно; это приведет к тому, что он будет напечатан сразу, и мы не сможем использовать его в нашей функции. Чтобы обойти эту проблему, мы выходбуферизируют буферизируя. При включении (использовании) ob_start() выход из скрипта не отправляется; вместо этого он хранится во внутреннем буфере.

Итак, сначала мы включаем заголовок, затем мы пишем наше содержание сообщения, а затем включить колонтитул. Поскольку мы буферизации содержания, мы можем просто закрыть наши теги PHP и использовать регулярные HTML для нашего сообщения, которое я нахожу гораздо чище, чем хранение все это в переменной. На линии 30 мы тянем содержимое буфера в переменную; и на линии 31 мы отбрасываем содержимое буфера, так как он нам больше не нужен.

С этим сделано, у нас есть вся информация, необходимая для использования wp_mail() . Итак, на линии 33, мы отправляем нашу электронную почту пользователю, которая должна выглядеть примерно так:

Поиск паролей emails

По некоторым причинам, WordPress не использует те же функции pluggable для обработки всех писем. Например, чтобы изменить внешний вид письма для поиска паролей, мы должны прибегнуть к крючкам. Давайте взглянем.

add_filter ("retrieve_password_title", "my_awesome_retrieve_password_title");

function my_awesome_retrieve_password_title() {
    return "Password Reset for MyAwesomeWebsite";
}

add_filter ("retrieve_password_message", "my_awesome_retrieve_password_message");
function my_awesome_retrieve_password_message($content, $key) {
    global $wpdb;
    $user_login = $wpdb->get_var("SELECT user_login FROM $wpdb-<users WHERE user_activation_key = '$key'");

    ob_start();

    $email_subject = imp_retrieve_password_title();

    include("email_header.php");
    ?>

    <p>
        It likes like you (hopefully) want to reset your password for your MyAwesomeWebsite.com account.
    </p>

    <p>
        To reset your password, visit the following address, otherwise just ignore this email and nothing will happen.
        <br>
        <?php echo wp_login_url("url") ?>?action=rp&key=<?php echo $key ?>&login=<?php echo $user_login ?>            
    <p>

    ?>

    include("email_footer.php");

    $message = ob_get_contents();

    ob_end_clean();

    return $message;
}

Во-первых, мы добавили retrieve_password_title фильтр, который изменит значение по умолчанию названия письма к нашим собственным. Затем мы добавили retrieve_password_message фильтр, который изменит содержимое сообщения.

На строке 10 мы использовали $wpdb объект для запроса базы данных для имени пользователя на основе ключа, который был создан при инициировании поиска. Затем мы делаем то же самое, что и раньше: мы начинаем буферизации контента, потяните заголовок электронной почты, добавляем содержимое сообщений и тянем нашу электронную колонтитул.

Одна фантастическая часть об использовании крючков можно увидеть на линии 14. Наша заголовок паролей должна быть “Паролей перезагрузки для MyAwesomeWebsite”. Мы вполне могли бы набрали, что в, но вместо этого мы создали функцию ( imp_retrieve_password_title() ), что выводит точно то же самое. Это должно быть ясно, что теперь все, что мы делаем с этими крючками является создание регулярных ПР ‘функции, которые могут быть просто подключены к WordPress как действия (которые работают, когда инициировано что-то) или фильтры (которые работают и изменять данные, когда они инициируются).

На этот раз, вместо того, чтобы wp_mail() использовать, все, что нам нужно сделать, это вернуть содержимое сообщения. Это потому, что мы создаем фильтр, который изменяет содержимое паролей поиска электронной почты, ничего больше. WordPress будет делать все, что он обычно делает, чтобы отправить это письмо, но теперь он будет использовать наше содержание.

Pluggable функция и крючки

На этот вопрос ответить нетак просто, так как это еще не слишком хорошо задокументировано. Лучше всего смотреть в файл pluggable.phpwp-includes папке), чтобы увидеть, какие письма контролируются оттуда. Помните, что не следует отсылать этот файл; использовать плагин мы создаем здесь. Вы можете сканировать список фильтров WordPress, чтобы найти фильтры, которые контролируют содержимое электронной почты.

Прямо сейчас, большинство писем обрабатываются через подключаемые функции; только пароль поиска электронной почты и некоторые WordPress MU письма обрабатываются с помощью крючков. Это может измениться, так как разработка довольно активна, но я думаю, что если какие-либо новые письма будут добавлены, вы сможете использовать функции pluggable.

Вот список писем, которые можно изменить с помощью подключаемых функций:

  • Уведомить авторов комментариев:wp_notify_postauthor()
  • Сообщите модератору о комментариях, ожидающих утверждения:wp_notify_moderator()
  • Сообщите администратору об изменениях паролей на веб-сайте:wp_password_change_notification()
  • Уведомить администратора о новых регистрациях:wp_new_user_notification()

Добавление новых электронных писем в систему

До сих пор мы только что изменяли то, что WordPress может предложить. Теперь пришло время добавить несколько писем наших собственных! Давайте реализуем электронную почту, которая уведомит автора, когда вы опубликовали свой пост.

Для достижения этой цели, мы должны найти WordPress действий крюк, который публикует сообщение, когда мы нажимаем кнопку “Публикация”. Затем мы должны подключить нашу собственную функцию в том, что, который будет выполнять задачу отправки электронной почты.

Глядя на список действий крючки,мы видим, что крючок мы ищем называется {$new_status}_{$post->post_type} . Это выглядит немного иначе, чем то, к чему мы привыкли, но на самом деле это очень просто. Сообщение может пройти через многочисленные статусы. Это может быть проект, он может быть частным, опубликованным и так далее. Есть также много потенциальных типов сообщений, таких как “Почта” и “Страница”, не говоря уже о том, что вы можете создавать пользовательские типы сообщений. Этот крюк просто позволяет нам поставить статус и тип поста вместе, а затем получить крюк, который работает, когда тип этого поста изменяется в указанном статусе. Итак, наш крючок будет называться publish_post .

add_action("publish_post", "my_awesome_publication_notification");

function my_awesome_publication_notification($post_id) {
    $post = get_post($post_id);
    $author = get_userdata($post->post_author);

    $author_email = $author->user_email;
    $email_subject = "Your article has been published!";

    ob_start();

    include("email_header.php");

    ?>

    <p>
        Hi, <?php echo $author->display_name ?>. I've just published one of your articles 
        (<?php echo $post->post_title ?>) on MyAwesomeWebsite!
    </p>

    <p>
        If you'd like to take a look, <a href="<?php echo get_permalink($post->ID) ?>">click here</a>.

  I would appreciate it if you could come back now and again to respond to some comments.
    </p>

    <?php

    include("email_footer.php");

    $message = ob_get_contents();

    ob_end_clean();

    wp_mail($author_email, $email_subject, $message);

}

К настоящему времени, это должно быть второй натурой для вас. Единственная реальная разница здесь заключается в том, что мы должны получить данные поста, и данные автора на линиях 4 и 5, так что у нас есть необходимые данные для электронной почты.

Одна вещь, вы можете быть удивлены, как я знаю, что моя функция принимает ID этого поста в качестве аргумента. Я не могу свободно выбрать это значение, конечно; это продиктовано тем, как WordPress построен. Каждый крючок поставляет различные аргументы; некоторые даже поставляют больше, чем один. Чтобы узнать, какие аргументы в вашем распоряжении, вам придется перейти в некоторые основные файлы.

Я предлагаю просмотра базы данных крючков, нажав на крючок, что вам нужно, а затем нажав на “Посмотреть крючок в источнике” рядом с вашей версией WordPress (желательно последний). Оказавшись там, прокрутите вниз, и найти выделенную линию, которая является, где крючок называется. Это будет в виде do_action( $tag, $arg_a, $arg_b, $etc ) или apply_filters( $tag, $arg_a, $arg_b, $etc ) .

Расширение наших функций

Интересно, что wp_mail() сама функция является pluggable функции, так что вы можете полностью переопределить, как она работает. Это может быть немного сверху, но если вам нужно несколько серьезных отправки электронной почты власти (например, вы хотите систему, которая уведомляет ваши 120000 зарегистрированных пользователей о новых должностях), вы можете полностью изменить его для использования вашего приложения масс-почты.

Поскольку мы используем шаблон для заголовков электронной почты и колонтитулов, многое можно сделать для расширения нашей электронной почты. Мы можем различать электронные письма сотрудникам и электронные письма пользователям с помощью различных файлов заголовка; мы можем добавить последние три сообщения в нижней части каждого письма с помощью шаблонов колонтитул; и так далее.

Мы можем добавить таблицу в нашу базу данных, которая содержит информацию о том, какие пользователи по электронной почте больше всего, кто отвечает на электронные письма, и так далее. Всякий раз, когда вы подключаете функцию во что-то, она может содержать любой код, который вы хотите. Можно включить код для увеличения количества электронной почты для пользователей #112 внутри функции, которая отправляет им письмо, например. Это не очень хорошая практика (вы должны создавать отдельные функции и подключить их обоих), но добраться до ручки с огромной мощности, что эта методология предлагает важно.

Предупреждение

Хотя метод, описанный здесь велик, я не эксперт в создании HTML писем. Код для HTML электронной почты выше, проверяется для работы в Gmail и некоторых других приложений, но каждое приложение электронной почты обрабатывает электронную почту по-разному. Некоторые полосы из всех CSS, некоторые полосы только фон цвета, и так далее.

Прежде чем использовать шаблон, пожалуйста, проверьте его с наиболее распространенными приложениями (Gmail, Yahoo Mail, Apple Mail, Outlook, Entourage, Thunderbird и т.д.), чтобы убедиться, что он работает, как ожидалось.

Заключение

Многообещающе теперь вы выучили как доработать электронные почты которые WordPress посылает вне, как создать ваши собственные электронные почты, и как соединить их в по-разному действия.

Я также надеюсь, что ваши знания WordPress крючки расширилась, потому что они являются инструментом для создания больших плагинов и дополнений для WordPress, и мышление за ними заглянуть в мир объектно-ориентированного программирования.

Если у вас есть какие-либо вопросы или комментарии, дайте мне знать: я в вашем распоряжении. Кроме того, если вы создали аналогичную систему, поделиться своими мыслями, я был бы рад услышать, как вы сделали то же самое, или лучше!

Дальнейшее чтение на SmashingMag:

Источник: smashingmagazine.com

Великолепный Журнал

Великолепный, сокрушительный, разящий (см. перевод smashing) независимый журнал о веб-разработке. Основан в 2006 году в Германии. Имеет няшный дизайн и кучу крутых авторов, которых читают 2 млн человек в месяц.

Добавить комментарий

%d такие блоггеры, как: