Подписка на рассылку новостей за 5 минут

Подписка на рассылку новостей WordPress
Подписка на рассылку новостей - важный функционал каждого сайта. Я расскажу о наиболее простом и бесплатном варианте установки формы подписки с помощью плагина Jetpack от WordPress

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

Подписка через E-mail

Если Вы создаёте интересный контент, устраиваете конкурсы, делаете подарки и скидки, то безусловно заинтересованы в мгновенном уведомлении своих читателей о новинках и акциях.

Для этого нужно дать возможность посетителям подписаться на обновления, что можно осуществить разными способами:

  • по E-mail (получать новости сайта на почту)
  • по RSS (получить доступ к RSS-ленте сайта)
  • через Push-уведомления

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

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

В любом случае придерживайтесь основных правил:

  • Форма должна выделяться на сайте, чтобы читателям не пришлось её искать среди рекламных блоков
  • Минимум полей для заполнения, отсутствие капчи увеличит количество желающих подписаться
  • Укажите, что именно получит читатель, подписавшись на сайт (новости, акции, подарки…)
  • Дайте возможность отписаться от рассылки, избегайте навязчивости

Как создать форму подписки на сайт через E-mail? Есть много сервисов, предоставляющих данную услугу, но для новичков я хочу предложить наиболее простой способ, к тому же бесплатный, к тому же имеющий много других плюшек.

Сегодня мы установим достаточно популярный плагин Jetpack от разработчиков WordPress (автор: Automattic). На сегодняшний день он имеет более 5 млн активных установок, над его разработкой трудится более 40 специалистов, а значит он заслуживает нашего внимания. Даже если в будущем Вы перейдёте на другой сервис (например, SendPulse) знание этого варианта лишним не будет.

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

Установка плагина Jetpack

Процедура установки плагина не совсем стандартная, поэтому давайте рассмотрим её подробно.

На боковой панели выберите раздел ПЛАГИНЫ, затем перейдите по ссылке «Добавить новый». Введите в поиске Jetpack и нажмите кнопку «Установить».

Установка плагина Jetpack
Шаги 1-3: Установка на сайт плагина Jetpack

После установки плагина появится кнопка «Активировать», нажмите на неё:

Активация плагина Jetpack
Шаг 4: Активация плагина Jetpack

После этого Вам будет предложено связаться с Вашим аккаунтом на сайте WordPress.com. Если Вы не зарегистрированы, создайте новую учётную запись, поскольку данный плагин использует облако WordPress.com. Ваш сайт заработает быстрее!

Настройка плагина Jetpack
Шаг 5: Создать/связать учётную запись на WordPress.com

Теперь нужно подключить бесплатный тариф, он находится в самом низу после всех платных вариантов:

Бесплатная версия Jetpack
Подключение бесплатной версии Jetpack

Если же Вы хотите использовать более расширенный функционал, выберите один из платных тарифов. Затем отметьте галочкой тип Вашего сайта:

Определение типа сайта
Шаг 7: Укажите тип Вашего сайта

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

Отключение рекомендуемых функций Jetpack
Шаг 8: Отключите рекомендуемые функции Jetpack

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

Завершение регистрации плагина Jetpack

Создание подписки на сайт от Jetpack

Установка формы подписки на блог достаточно простая и займёт не более 5 минут. В настройках плагина Jetpack откройте закладку Обсуждения и сместите три ползунка:

Подписка на сайт от Jetpack
Дайте возможность посетителям подписаться на обновления блога

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

Подписка на сайт в форме комментариев
Возможность подписаться на обновления сайта при написании комментария

Вывод формы подписки с помощью виджета

Для того чтобы вывести отдельную форму подписки в сайдбар или футер (подвал) нужно просто добавить виджет «Подписка на блог (Jetpack)» в соответствующее поле. Для этого в левой панели управления WordPress зайдите в раздел Внешний вид / Виджеты. Вам откроется окно сайдбара, нажмите кнопку «+» и в строке поиска введите «Подписка», выберите соответствующий виджет от Jetpack

Виджет Подписка от Jetpack
Добавьте виджет Подписка на блог (Jetpack)

Заполните на своё усмотрение поля в форме виджета

Виджет Подписка от Jetpack

При этом форма подписки будет выглядеть следующим образом:

Форма подписки на блог

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

Вот собственно и всё. Аналогично я добавляю форму подписки и в подвал сайта. Это тоже очень хорошее место, поскольку прочитав статью читателю не придётся прокручивать сайт, чтобы найти форму подписки, а доверие к сайту будет гораздо выше, чем на первых секундах, когда он только зашёл.

Вывод формы подписки с помощью шорткода

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

Для редактирования главной страницы переходим в визуальный редактор: Внешний вид / Настроить. Далее всё зависит от выбранной Вами темы и её возможностей. В теме Reboot от WPShop нужно зайти в закладку «Конструктор главной» и вставить шорткод от Jetpack:

Вывод формы подписки на главную страницу
Вывод формы подписки на главную страницу с помощью шорткода

Итак, теперь Вы знаете два способа вывода данного блока. А есть ли разница? Да, и достаточно большая.

При выводе с помощью виджета Вы заполняете специальную форму и соответственно можете редактировать надписи и количество подписчиков по своему усмотрению.

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

Если же Вам достаточно изменить в блоке только название / описание / кнопка, то можно просто добавить атрибуты title, subscribe_text и subscribe_ button соответственно. Кроме того, можно добавить и количество подписчиков.

Вместо стандартного шорткода

[jetpack_subscription_form]

Вы создаёте свой собственный, например:

[jetpack_subscription_form title="Подписаться на блог" subscribe_text="Получайте уведомления о новых записях в этом блоге" subscribe_button="Подписаться" show_subscribers_total="1"]

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

Выводы блока подписки с помощью виджета и шорткода
Выводы блока подписки с помощью виджета и шорткода

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

Проверка работы формы подписки

Давайте теперь проверим, как работает подписка: введите Email адрес и подпишитесь на блог. При этом должна появиться запись:

Выполнено. Вам было отправлено электронное письмо для подтверждения вашей подписки. Прочитайте письмо и нажмите кнопку «Активировать», чтобы подтвердить подписку.

На почту должно прийти такое письмо:

Письмо на почту: подтвердить подписку
Письмо на Email: подтвердить подписку

Форму письма можно отредактировать в разделе Настройки / Чтение, там же нужно указать всю статью отправлять на почту или отрывок.

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

Чтобы теперь посмотреть список подписчиков нужно вернуться в настройки плагина Jetpack и перейти по ссылке Посмотреть подписчиков по эл.почте:

Просмотр подписчиков блога
Ссылка на список подписчиков блога

Вас перебросит на сайт WordPress.com где и хранится вся информация

Подписчики блога по Email
Список подписчиков блога

Оформление блока подписки от WPShop

Форма подписки должна быть привлекательной. WPShop предлагает красивое оформление блока подписки своим пользователям.

Оформление подписки от WPShop
Оформление блока подписки

WPShop — магазин для тех, кто ценит качество и время! Премиум-шаблоны и плагины для WordPress. SiteFromZero рекомендует как новичкам, так и профессионалам.

Если Вы выбрали шаблон сайта от WPShop, то можете воспользоваться таким симпатичным блоком и подключить к нему обработчик. Процедура несложная, давайте покажу, как я это реализовала на своём блоге.

Снова зайдите в раздел Внешний вид / Виджеты и добавьте новый:

Блок подписки от WPShop
Блок подписки на сайт от WPShop

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

Виджет Подписка от WPShop
Ссылка на инструкцию по установке виджета

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

Инструкция по установке блока подписки от WPShop
Инструкция по подключению обработчика к форме подписки

Итак, Вам нужно скопировать из родительской темы в дочернюю файл subscribe-box.php сохраняя иерархию папок.

В дочерней теме reboot_child создайте папку template-parts, а в ней папку blocks. Из родительской темы Reboot скопируйте в эту папку файл subscribe-box.php. Откройте файл \template-parts\blocks\subscribe-box.php в дочерней теме и код

<input type=»text» placeholder=»Ваше имя»>

<input type=»text» placeholder=»Ваш e-mail»>

<button class=»btn»>Подписаться</button>

замените на код формы подписки, скопированный в сервисе рассылок.

Инструкция от разработчиков WPShop

С помощью FileZilla создайте соответствующие папки и скопируйте файл, должно получиться так:

Копия файла subscribe-box.php в дочерней теме
Скопируйте файл subscribe-box.php в дочернюю тему

Теперь нужно открыть скопированный файл subscribe-box.php в дочерней теме и заменить вышеуказанный код на шорткод:

<?php echo do_shortcode( '[jetpack_subscription_form]' ) ?>

Я решила укоротить стандартные тексты и в готовом виде мой код получился таким:

<?php echo do_shortcode( '[jetpack_subscription_form title="Подписаться на блог" subscribe_text="Получайте уведомления о новых записях в этом блоге"]' ) ?>

Готово! Теперь моя форма подписки от Jetpack в теме Reboot от WPShop выглядит вполне презентабельно:

Форма подписки от Jetpack в теме Reboot

Чтобы вывести форму подписки в таком оформлении на главную страницу или любое другое место Вашего сайта используйте шорткод от WPShop:

Шорткод блока подписки от WPShop
Шорткод формы подписки от WPShop

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

#subscribe-submit button {
border-radius: 4px;
border: 1px solid transparent;
padding: .375rem .75rem;
background: #569ba7;
color: #fff;
}

В данном обзоре мы рассмотрели что такое подписка на сайт через Email и для чего она нужна. Теперь Вы за 5 минут можете бесплатно установить данный блок и начать собирать подписную базу. Вы узнали какой бонус (красивое оформление) ждёт тех, кто выбрал шаблон сайта от WPShop.

Вы увидели, как легко можно изменить внешний вид блока, включая тексты и кнопку.

P.S. Посмотрите список всех доступных блоков на Вашем сайте, так я нашла целых (4!) формы подписки. Они отличаются по дизайну, но смысл работы с ними Вы уже поняли.

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

Поделиться с друзьями
Светлана Стецко

Буду рада помочь новичкам разобраться с базовыми понятиями и настройками. Предлагаю пошаговую инструкцию создания качественного блога без знания программирования.

Оцените автора
( Пока оценок нет )
SiteFromZero
А что Вы думаете о форме подписки от Jetpack?