Как создать ежедневную и еженедельную рассылку новостей в WordPress

Каждый так называемый «эксперт» подчеркивает о необходимости создания списка email-рассылки. «Создайте список» стало уже некоторым клише в своей области. Однако большая часть таких экспертов упускает из внимания важную деталь: список рассылки должен быть создан в соответствии с некоторыми правилами. Сегментация и группировка вашего списка являются необходимыми действиями, чтобы получить в итоге успешную кампанию. Сегментируя своих подписчиков, вы сможете убедиться в том, что ваши письма будут целевыми и релевантными. Зачастую пользователи хотят получать новости от вашего сайта, но не на ежедневной основе. Недельные обновления – прекрасный вариант в таком случае. Отлично, давайте посмотрим на то, как реализовать новостные рассылки.

Мы собираемся создать следующее:

list25optin

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

Войдите под своим аккаунтом и щелкните по пункту Lists. Вы увидите перечисление ваших списков. Щелкните по пункту «Groups» — «View Groups».

mailchimpgroup1

На данный момент, пока у вас нет групп, вы увидите следующий экран. На нем вы можете посмотреть видео об этой возможности. Вам понадобится создать группу – щелкните по кнопке Create Groups.

mailchimpgroup2

После щелчка по кнопке вы увидите следующий экран.

mailchimpgroup3

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

Теперь давайте перейдем к формам в нашем списке. Возвращаемся обратно на страницу Lists. Щелкаем по ссылке Forms.

mailchimpgroup4

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

mailchimpgroup5

Как только вы настроили форму, щелкните по вкладке «For your Website» и выберите пункт «Signup Form Embed Code».

mailchimpgroup6

Вы увидите настройку, позволяющую создать embed-код формы. Здесь есть много разных опций, но мы выберем лишь одну из них — Naked Form. Она позволит нам легко подогнать форму под свои задачи.

mailchimpgroup7

Возможно, вам не нужны разные подзаголовки и индикации обязательных полей в вашей форме. Щелкните по панели настроек и укажите настройки так, как это показано на скриншоте. Затем щелкните по ссылке Create Embed Code. Полученный embed-код будет отображен на той же самой странице чуть ниже кнопки.

mailchimpgroup8

Скопируйте и вставьте код в вашу тему. Расположение может быть разным – все зависит от того, где вы хотите выдавать форму для подписки на новости. В нашем случае форма должна находиться в сайдбаре, потому мы вставили код в файл sidebar.php. После того, как мы вставили код, нам понадобится удалить все блоки div со стилями. Оставим лишь базовые поля формы. Итоговый результат будет выглядеть примерно следующим образом:

<form action="http://list25.us1.list-manage.com/subscribe/post?u=549b83cc29ff23c36e5796c38&amp;id=184bf03dd3" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">

<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">

<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" />

<input type="checkbox" checked="checked" value="1" name="group[9][1]" id="mce-group[9]-9-0">

<label for="mce-group[9]-9-0">List25 Daily</label>

<input type="checkbox" checked="checked" value="2" name="group[9][2]" id="mce-group[9]-9-1">

<label for="mce-group[9]-9-1">List25 Weekly</label>

</form>

Заметьте, что мы поставили кнопку «Отправить» сразу после поля email. Мы также избавились от метки для поля email – таким образом, у нас есть просто чистое поле без какого-либо текста по умолчанию. Мы также избавились от полей для вывода ошибок, поскольку новое вкладочное разъяснение успешной отправки работает значительно лучше. Поскольку у наших пользователей нет подсказок, что нужно поместить в пустое поле ввода, предназначенное для email, мы поможем им понять это. Самый лучший способ сделать это – использовать значения onblur и onfocus.

Замените поле ввода email на что-то подобное:

<input type="text" value="Enter your email..." onblur="if (this.value == '') {this.value = 'Enter your email...';}"  onfocus="if (this.value == 'Enter your email...') {this.value = '';}" name="EMAIL" class="required email emailupdatesinput" id="mce-EMAIL" />

Указанный фрагмент кода добавит текст “Enter your email…” в поле ввода email. Однако когда пользователь щелкнет по полю для ввода email, этот текст автоматически пропадет.

Теперь, когда мы позаботились об этом, давайте добавим некоторые дополнительные классы для нашей формы:

<form action="http://list25.us1.list-manage.com/subscribe/post?u=549b83cc29ff23c36e5796c38&amp;id=184bf03dd3" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">

<div class="subscribe">

<input type="text" value="Enter your email..." onblur="if (this.value == '') {this.value = 'Enter your email...';}"  onfocus="if (this.value == 'Enter your email...') {this.value = '';}" name="EMAIL" class="required email emailupdatesinput" id="mce-EMAIL" />

<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button subscribesubmitbutton" />

<div class="clear"></div>

<div class="subscribecheckboxes">

<input type="checkbox" checked="checked" value="1" name="group[9][1]" id="mce-group[9]-9-0">

<label for="mce-group[9]-9-0">List25 Daily</label>

<input type="checkbox" checked="checked" value="2" name="group[9][2]" id="mce-group[9]-9-1" class="secondcheckbox">

<label for="mce-group[9]-9-1">List25 Weekly</label>

</div>

</div>

</form>

Заметьте, что мы добавили дополнительные блоки div. Мы также добавили дополнительный класс для второго чекбокса и кнопки «Отправить». Теперь, когда мы определили наши html-элементы, давайте перейдем к привязке CSS-стилей в файле style.css.

.subscribe { width: 296px; height: 38px; border: solid #bbbbbb 1px; margin: 0 0 60px 0;}

.subscribecheckboxes {margin: 20px 0 0 0; font-family: 'ProximaNovaRegular', sans-serif; font-size: 14px; color: #626262;}

.secondcheckbox {margin: 0 0 0 28px;}

.emailupdatesinput { width: 162px; height: 38px; border: none; font-family: Georgia, serif; font-size: 14px; font-style: italic; color: #949494; padding: 0 10px 0 10px; float: left;}

.subscribesubmitbutton { background: #ff370f; height: 40px; border: none; width: 115px; margin: -1px -60px 0 0; float: left; font-family: 'ProximaNovaRegular', sans-serif; font-size: 12px; color: #ffffff; text-transform: uppercase; padding: 0 1px 0 0; cursor: pointer;}

Единственная причина, по которой мы используем ProximaNovaRegular, состоит в том, что мы подключаем этот шрифт в font-face. Вы должны заменить этот шрифт на тот, который используется в вашей теме.

Как только вы загрузите CSS, вы увидите следующий результат:

list25optin44

Теперь, когда часть стилизации осталась позади, вам нужно создать кампании в панели управления MailChimp или Aweber для каждой определенной группы. Мы будем использовать кампании RSS to Email (RSS Driven Campaigns). Щелкаем по пункту Campaigns, после чего щелкаем по кнопке Create Campaign, чтобы увидеть пункт RSS Driven Campaigns. Он нам и нужен.

mailchimpgroup9

Дальше все уже интуитивно понятно. Вам понадобится ввести URL-адрес своего RSS-фида и задать время рассылки, после чего выбрать сегмент своего списка.

Источник: www.wpbeginner.com/wp-tutorials/how-to-create-a-daily-and-weekly-email-newsletter-in-wordpress/

Блог про WordPress
Добавить комментарий

Получать новые комментарии по электронной почте.