Если вы хотите узнать, как создать шаблон почтовой рассылки с использованием WordPress, вы попали по адресу. Прежде чем мы начнем, давайте удостоверимся, что вы полностью понимаете, чему я пытаюсь научить. Конечные результаты предоставят вам шаблон страницы WordPress, который предназначен для использования в качестве шаблона почтовой рассылки путем импорта вашего URL-адреса с помощью программного обеспечения почтовой рассылки, такого как GroupMail, которое реагирует на почтовые клиенты, такие как Gmail или Outlook, на любом устройстве, например на мобильном или планшет, поэтому он будет отображаться красиво. Но подождите, это еще не все — этот шаблон отображает самые последние сообщения из любого RSS-канала, поэтому новостная рассылка уже завершена, просто ожидает отправки. Это объяснение очень важно, так что может быть лучше, если вы посмотрите на пример из жизни.
Если вы читаете это предложение, это означает, что вы готовы сделать шаблон парсера, отвечающего за рассылку новостей по электронной почте, так что давайте без лишних слов, начнем.
Создание шаблона страницы
- Откройте новый файл в текстовом редакторе по вашему выбору. Прежде чем начать, сохраните файл как page-responseive-rss-newsletter.php. Самое главное, чтобы имя файла начиналось с «page», чтобы оно хорошо организовывалось на вашей учетной записи хостинга и без перерывов, потому что серверы ненавидят это.
- Вверху нового файла началось с того, что WordPress назвал название нашего шаблона страницы, который будет отображаться в раскрывающемся меню шаблона страницы WordPress.
123<?php/* Template Name: Responsive RSS Newsletter */?>
- Затем добавьте метаэлемент viewport внутри
<head>чтобы браузер отображал страницу в более удобочитаемом масштабе. Просматривая веб-страницы на смартфоне, вы заметите, как веб-сайты масштабируются в соответствии с параметрами устройства, что значительно увеличивает и уменьшает масштаб. Это для удобства пользователя, так как большинство сайтов не имеют мобильного сайта. Итак, я использовал<meta name="viewport" content="width=device-width, initial-scale=1,">чтобы ширина устройства использовалась в качестве ширины области просмотра и отключала начальный масштаб. Поскольку автоматическое масштабирование действительно может испортить элементы макета, я использовалmaximum-scale=1, user-scalable=0что полностью исключит функцию масштабирования, поэтому пользователь не сможет изменить размер макета. Это позволит привязать дизайн к параметрам устройства. Когда вы комбинируете более читаемый метатег масштаба и заблокированный тэг автоматического масштабирования, вы получаете следующие результаты:1<meta name=»viewport» content=»width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0″> - Давайте сделаем так, чтобы у
<body>не было отступов / отступов по краям, для этого добавим поле свойстваmargin:0. Кроме того, WebKit (браузер, отображающий ваши электронные письма в формате HTML на iPhone, Android и других устройствах) имеет отличную функцию, которая автоматически настраивает размер текста при изменении области просмотра, чтобы обеспечить вам наилучшие впечатления от чтения, я рекомендую отключить изменение размера шрифта; для этого добавьте свойство-webkit-text-size-adjust:none.1<body style=»margin:0; -webkit-text-size-adjust:none;»> - Создайте изображение заголовка шириной 900 пикселей, чтобы на широкоэкранном мониторе изображение не выглядело пиксельным, а на мобильном устройстве — чистым. Но не забывайте сжимать графику настолько, насколько это возможно, чтобы пользователю не потребовалось много времени, чтобы отобразить изображения внутри почтового клиента. Кроме того, не добавляйте никакие свойства alt или title внутри
<img>иначе он будет отображаться как тизер в папке входящих сообщений подписчика. Чтобы убедиться, что заголовок хорошо отображается на любом устройстве, добавьте ширину 100%, как вы можете видеть в примере.1<img border=»0″ src=»images/header.jpg» width=»100%»><br> - Теперь давайте
fetch_feedвнешний канал и проанализируем его с помощью функции WordPressfetch_feed, вставив приведенный ниже код в ваш<body>. Это делает шаблон достойным труда. Синтаксический анализатор RSS будет отображать самые последние сообщения из любого канала RSS, поэтому, когда вы будете готовы отправить свою новостную рассылку, самые новые истории уже заполнены, поэтому для заполнения вашей новостной рассылки электронной почтой не требуется никакой дополнительной работы. Этот трюк достигается путем импорта вашего URL-адреса с помощью программного обеспечения для рассылки электронной почты, такого как GroupMail, но я вернусь к этому позже. То, что предлагает этот шаблон, похоже на Feedburner , оно создает для вас новостную рассылку по электронной почте с вашим новейшим контентом. Но вместо того, чтобы Feedburner отправлял его автоматически с возможными ошибками или контентом, который вам не нужен в информационном бюллетене, этот шаблон поможет вам быстро отправить свой электронный бюллетень с возможностью редактирования перед отправкой.0102030405060708091011121314151617181920212223242526272829<!— RSS Parser —><?phpif(function_exists(‘fetch_feed’)) {include_once(ABSPATH . WPINC . ‘/feed.php’);$feed = fetch_feed(‘http://rss1.smashingmagazine.com/feed/’);$limit = $feed->get_item_quantity(3);$items = $feed->get_items(0, $limit);}if ($limit == 0) {echo ‘<div>The feed is either empty or unavailable.</div>’;}else {foreach ($items as $item) : ?><!— How the RSS posts display —><table width=»100%» cellpadding=»0″ cellspacing=»0″ border=»0″><tr><td style=»border-bottom:#2591c7 solid 1px; border-top: #54b9ec solid 1px; background:#3ca7dd» width=»1%»> </td><td width=»90%» align=»left» style=»padding:12px; border-right: #e1e1e1 solid 1px; border-bottom:#CDCDCD solid 1px; border-top: #FCFCFC solid 1px; background: #f5f5f5;»><!— Title and hyperlink —><div style=»margin-top:0; margin-bottom:0px; padding-top:0; padding-bottom:0;»><a target=»_blank» href=»<?php echo $item->get_permalink(); ?>» alt=»<?php echo $item->get_title(); ?>» style=»color:#4E4946; text-decoration:none; font-size:100%; font-family:’Helvetica Neue’,Helvetica,Arial,sans-serif; font-weight:normal; font-weight:bold;»><?php echo $item->get_title();</td><td width=»9%» align=»center» style=»background: #eeeeee; display: table-cell; vertical-align: middle; border-bottom:#CDCDCD solid 1px; border-top: #FCFCFC solid 1px;»><a target=»_blank» href=»<?php echo $item->get_permalink(); ?>» alt=»<?php echo $item->get_title(); ?>»><img src=»images/mobile-open-button.gif» border=»0″ /></a></td></tr></table> <!— End of post display —><?phpendforeach;}?> <!— End of RSS Parser —>Чтобы приведенный выше код работал, убедитесь, что файл feed.php находится в правильном месте:
include_once(ABSPATH . WPINC . "/feed.php").Во-вторых, добавьте ваш канал RSS
$feed = fetch_feed("http://rss1.smashingmagazine.com/feed/").В-третьих, введите количество сообщений, которые вы хотите показать
$limit = $feed->get_item_quantity(3).Затем измените сообщение об ошибке,
if ($limit == 0) echo '<div>The feed is either empty or unavailable.</div>'.Теперь самое интересное — оформление постов. Поскольку этот шаблон предназначен для всех устройств, включая мобильные, важно придерживаться формата в один столбец для достижения наилучших результатов. Допустимы две колонки, но знайте, что будет труднее читать на меньшем устройстве, таком как iPhone.
Чтобы создать адаптивный дизайн, начните с
<table>с 3 столбцами общей шириной 100%.1234567<table width=»100%» cellpadding=»0″ cellspacing=»0″ border=»0″><tr><td width=»1%»></td><td width=»90%» align=»left»></td><td width=»9%» align=»center»></td></tr></table>Это просто, я знаю, но это работает. Пользователь может масштабировать свой браузер и получить приятный на вид адаптивный дизайн, основанный на ширине 100%. Слишком много почтовых клиентов (Gmail) не поддерживают медиазапросы CSS3 , поэтому вы можете применять различные таблицы стилей для адаптивного отображения, поэтому безопаснее иметь встроенные таблицы стилей вместо внешних. Помните о поддерживаемых HTML и CSS, которые работают в большинстве популярных почтовых клиентов. Таким образом, дизайн будет отзывчивым на всех устройствах и почтовых клиентах.
Первый столбец шириной 1% предназначен исключительно для целей проектирования. Добавление цвета фона и границы помогает создать красивый дизайн.
1<td style=»border-bottom:#2591c7 solid 1px; border-top: #54b9ec solid 1px; background:#3ca7dd» width=»1%»> </td>Во втором столбце находится заголовок, занимающий 90% ширины. Заголовок является гиперссылкой на оригинальное сообщение. Чтобы показать заголовок RSS-канала, используйте код PHP
<?php echo $item->get_title(); ?><?php echo $item->get_title(); ?>. Чтобы получить постоянную ссылку, используйте код PHP<?php echo $item->get_permalink(); ?><?php echo $item->get_permalink(); ?>.Вы можете отобразить описание из ленты
<?php echo substr($item->get_description(), 0, 100); ?><?php echo substr($item->get_description(), 0, 100); ?>, но имейте в виду, что макет может сломаться в зависимости от используемого канала RSS. И, к сожалению, вы не можете отображать изображения из своего канала, даже если ваш канал предлагает его. Решением может быть установка плагина WordPress.1<td width=»90%» align=»left» style=»padding:12px; border-right: #e1e1e1 solid 1px; border-bottom:#CDCDCD solid 1px; border-top: #FCFCFC solid 1px; background: #f5f5f5;»><div style=»margin-top:0; margin-bottom:0px; padding-top:0; padding-bottom:0;»><a target=»_blank» href=»<?php echo $item->get_permalink(); ?>» alt=»<?php echo $item->get_title(); ?>» style=»color:#4E4946; text-decoration:none; font-size:100%; font-family:’Helvetica Neue’,Helvetica,Arial,sans-serif; font-weight:normal; font-weight:bold;»><?php echo $item->get_title();В третьем столбце шириной 9% отображается кнопка 44×44, которая ссылается на исходное сообщение ( Apple утверждает, что среднее нажатие пальцем составляет 44×44 ). Это дает пользователю текущую тенденцию дизайна приложения с другим интерактивным вариантом, чтобы прочитать историю. Опять же, не забудьте сжать графику как можно больше.
1<td width=»9%» align=»center» style=»background: #eeeeee; display: table-cell; vertical-align: middle; border-bottom:#CDCDCD solid 1px; border-top: #FCFCFC solid 1px;»><a target=»_blank» href=»<?php echo $item->get_permalink(); ?>» alt=»<?php echo $item->get_title(); ?>»><img src=»images/mobile-open-button.gif» border=»0″ /></a></td>Вот и все, шаблон готов. Но не бойтесь идти дальше, добавив раздел нижнего колонтитула с социальными сетями, общей контактной информацией и ссылкой для отказа от подписки. Просто не забудьте сохранить ширину на 100%.
Загрузка вашего файла
Поскольку шаблон страницы закончен, загрузите файл на свой FTP-хост в папке установленной темы. Например: wp-content / themes / theme-folder .
Создание страницы WordPress
Войдите в WordPress и создайте страницу. При создании страницы не забудьте изменить шаблон на «Отзывчивый RSS-бюллетень» в раскрывающемся меню. Для заголовка не важно иметь SEO-дружественный заголовок, потому что шаблон разработан специально для новостной рассылки, но, поскольку шаблон отзывчив, он все равно будет хорошо выглядеть в Интернете. Нажмите «Опубликовать», чтобы активировать URL-адрес, чтобы вы могли скопировать и вставить URL-адрес в программное обеспечение своей рассылки.
Импорт вашего URL в вашу рассылку
Откройте почтовую рассылку программного обеспечения. Я использую GroupMail, чтобы выполнить работу, но почти любое другое программное обеспечение рассылки сделает свое дело. Создайте новое сообщение и найдите опцию импорта веб-URL. Это может сказать что-то другое в зависимости от программного обеспечения, но идея состоит в том, чтобы взять веб-сайт и превратить его в информационный бюллетень, просто импортировав URL.
Результаты дадут вам готовый к использованию информационный бюллетень, готовый для адаптивного контента, который будет работать на большинстве почтовых клиентов, что является отличной альтернативой Feedburner. Нет необходимости добавлять контент в рассылку, не нужно возиться с дизайном, он готов к работе. Но что приятно, прежде чем отправлять новостную рассылку, у вас есть возможность редактировать контент, поэтому в новостной рассылке нет ошибок или контента, который вам не нужен.
Теперь, когда вы закончите, проверьте, как реагирует дизайн, свернув браузер или просмотрев его в Responsinator .