Чому плагін Newsletter перевершує MailChimp у 2026 році

Крок 1: Відкрийте меню плагінів

1. Увійдіть до панелі адміністратора WordPress
2. Перейдіть до Плагіни → Додати плагін

Крок 2: Знайдіть плагін Newsletter

1. У полі пошуку введіть: "Newsletter Send awesome emails from WordPress by Stefano Lissa". Або відвідайте офіційну сторінку плагіна Newsletter, щоб прочитати відгуки та перевірити сумісність з вашою версією WordPress.
2. Знайдіть плагін з понад 300 000 активних встановлень від Stefano Lissa

Крок 3: Встановіть та активуйте

1. Натисніть кнопку "Встановити"
2. Зачекайте завершення встановлення (5-10 секунд)
3. Натисніть кнопку "Активувати"

Крок 4: Початкове налаштування

Після активації ви побачите пункт меню Newsletter у бічній панелі WordPress.

Плагін встановлено та готовий до налаштування!

Крок 1: Відкрийте налаштування форми

1. Перейдіть до Newsletter → Форми
2. Натисніть Налаштувати (⚙️ іконка шестерні) поруч із "Стандартною формою"

Крок 2: Налаштуйте поля форми

Виберіть, які поля відображати:

• Email (Обов'язкове — не можна відключити)
• Ім'я (Рекомендовано)
• Прізвище (Необов'язково)
• Стать (Необов'язково)
• Прапорець конфіденційності (Обов'язково для GDPR)

Крок 3: Налаштуйте мітки

Відредагуйте текст, що відображається у вашій формі:

• Текст-підказка для Email (Ім'я) може бути: Enter your email
• Мітка кнопки: "Subscribe" (або "Join Our Newsletter")
• Мітка конфіденційності: "I accept the privacy policy"
• І фактично будь-яке поле, яке ви бачите у формі

Крок 4: Скопіюйте шорткод

У верхній частині сторінки налаштувань ви побачите:

[newsletter_form]

Скопіюйте цей шорткод — він знадобиться вам на наступному кроці.

Крок 5: Збережіть налаштування

Натисніть "Зберегти" внизу сторінки.

Вітаємо! Ви успішно створили та зберегли свою першу форму підписки.

Крок 1: Відкрийте налаштування привітального листа

1. Перейдіть до Newsletter → Підписка
2. Натисніть на вкладку Welcome
3. Відкрийте вкладку Email
4. Виберіть 1 з 3 варіантів:
   • Default — використовує стандартний шаблон листа. Проте ви ще можете Налаштувати його, натиснувши "Customize" нижче теми Welcome. А потім скористайтеся Візуальним редактором або вставте цей HTML-код:
     
     HTML-код для привітального листа (вкладка Code) Копіювати

     <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px;">
       <h2>Welcome, {name}!</h2>
       <p>Thank you for subscribing to our newsletter.</p>
       <p>You will receive updates directly in your inbox.</p>
       <a href="{profile_url}">Manage Subscription</a>
     </div>

   • Composer — дозволяє створити власний лист. Рекомендований варіант.
   • Do not send — вимикає привітальний лист

Крок 2: Напишіть тему листа

Напишіть тему, яка приверне увагу ваших підписників та заохотить їх відкрити лист. Приклад:

• Ласкаво просимо на [Назва вашого сайту]
• Дякуємо за підписку, {name}
• Ви вже з нами. Ось що вас очікує

Крок 3: Виберіть редактор листів

• Composer для візуального редагування з перетягуванням.
• Default → Customize → Visual / Code — вкладка для HTML-шаблонів
  

Крок 4: Використовуйте поштові теги

Незалежно від обраного редактора, ви можете використовувати поштові теги для персоналізації листів. Поштові теги — це заповнювачі, які замінюються реальними значеннями під час надсилання листа. Приклад:

• {name} — ім'я підписника
• {email} — email підписника
• {profile_url} — посилання для управління підпискою
• {unsubscription_url} — посилання для відписки

Більше тегів можна знайти на сайті документації плагіна Newsletter.

Крок 5: Збережіть та протестуйте

1. Натисніть Зберегти.
2. Перейдіть на сторінку вашого сайту з формою [newsletter_form] та підпишіться з тестовим email.
3. Перевірте пошту, перегляньте привітальний лист. За потреби повторіть.

Крок 1: Налаштуйте сторінку прощального повідомлення

1. Перейдіть до Newsletter → Підписка → Відписка
2. Натисніть на вкладку "Goodbye"
3. Натисніть "Customize" поруч із прощальним повідомленням
4. Натисніть на вкладку Code

Крок 2: Створіть прощальне повідомлення сторінки

Вставте цей HTML у вкладку Code прощального повідомлення:

<div style="padding-top: 40px; text-align: center;">
  <h1>Subscription canceled.</h1>
  <h2>One click to undo.</h2>
  <div style="margin: 30px 0;">
    [newsletter_resubscribe_button label="Undo unsubscribe" /]
  </div>
</div>

Натисніть "Зберегти". Ви можете протестувати, відписавшись від своєї розсилки. Ви побачите прощальну сторінку з кнопкою "Undo unsubscribe".

Крок 3: Створіть прощальний лист

1. Залишаючись у Newsletter → Підписка → Відписка → вкладці Goodbye
2. Виберіть Enable / Disable, а потім натисніть "Customize" поруч із прощальним листом
3. Напишіть Тему прощального листа
4. А потім напишіть своє повідомлення за допомогою Візуального редактора або натисніть на вкладку Code для написання HTML-коду

Крок 4: Оформіть прощальний лист

Email-клієнти відображають HTML інакше, ніж веббраузери. Дотримуючись найкращих практик HTML-листів MDN, цей шаблон використовує вбудовані стилі та макети на основі таблиць для максимальної сумісності з Gmail, Outlook та Apple Mail.

Скопіюйте та вставте цей красивий шаблон у вкладку Code прощального листа на вашому сайті:

<div
    style="background: #fff5f0;border: 1px solid #ffddd2;color: #4a3728;padding: 50px 20px;text-align: center;border-radius: 20px;margin: 20px auto;max-width: 600px;font-family: sans-serif">
    <span style="font-size: 40px">👋</span>
    <h1 style="color: #c2410c;margin-top: 10px">It's official.</h1>
    <h2 style="font-weight: 400;margin-bottom: 20px">Your subscription has been removed.</h2>

    <p style="font-size: 15px;line-height: 1.6;margin-bottom: 25px;color: #6b4f3a;padding: 0 20px">
      Changed your mind? You can subscribe again anytime! <br><br>
      To use our sign-up form again immediately, please <strong>use a different email address</strong>.
      If you want to reactivate <em>this</em> email, please
      <a href="mailto:{company_address}?subject=Subscribe me back please 🥹&body=I confirm I want to subscribe back"
        style="color: #c2410c;font-weight: bold;text-decoration: none;border-bottom: 1px solid #c2410c">
        click here to send us a message
      </a>
      and we will manually restore your status.
    </p>

    <div style="text-align: center;padding: 10px 0">
      <a href="{blog_url}/newsletter/"
        style="background-color: #c2410c;border-radius: 8px;color: #ffffff;font-size: 16px;font-weight: bold;text-decoration: none;padding: 15px 35px">
        Rejoin with a new email
      </a>
    </div>
  </div>

Крок 5: Збережіть

Натисніть "Зберегти" внизу.

Крок 1: Відкрийте налаштування повторної підписки

1. Перейдіть до Newsletter → Підписка → Відписка
2. Натисніть вкладку "Resubscribe"
3. Натисніть "Customize" поруч із повідомленням про реактивацію
4. А потім напишіть своє повідомлення "Ласкаво знову просимо!" за допомогою Візуального редактора або натисніть на вкладку Code для написання HTML-коду

Крок 2: Створіть повідомлення про реактивацію

Вставте це повідомлення про повернення:

<div style="padding-top: 40px; text-align: center;">
  <h2>Your subscription has been reactivated.</h2>
  <h3>Welcome Back! 🎉</h3>
  <p>We're happy to have you back with us!</p>
</div>

Крок 3: Збережіть

Натисніть "Зберегти"

Крок 1: Створіть нову розсилку

1. Перейдіть до Newsletter → Розсилки
2. Натисніть кнопку "Додати нову"

Крок 2: Виберіть шаблон

У вас є два варіанти:

• Використовувати шаблон — готові макети (10 варіантів)
• Почати з чистого аркуша — порожній холст

Крок 3: Напишіть свою розсилку

Тема листа:

Напишіть переконливу тему (найкращі практики):

• Тримайте до 50 символів
• Використовуйте персоналізацію: "Привіт, {name}, ось ваше оновлення"
• Створюйте інтригу: "Ви не повірите, що сталося..."
• Будьте чіткими: "Щотижнева розсилка — Січень 2025"

Тіло повідомлення:

• Додайте заголовок з вашим логотипом
• Пишіть контент у текстових блоках
• Додайте зображення (оптимізовані, менше 200 КБ кожне)
• Включіть кнопки заклику до дії
• Додайте посилання на соціальні мережі в підвалі

Крок 4: Натисніть Далі

Крок 5: Виберіть одержувачів

Виберіть свої списки:

• Збіг з усіма ними (надсилається всім)
• Або виберіть конкретні списки

Крок 6: Заплануйте або надішліть

Варіант А: Надіслати зараз

• Натисніть кнопку "Надіслати зараз"
• Розпочати реальну доставку? — Натисніть "OK"

Варіант Б: Запланувати на пізніше

• Натисніть "Запланувати"
• Виберіть дату та час
• Натисніть "Запланувати" знову, а потім підтвердіть кнопкою "OK"

Крок 7: Перевірте

1. Перевірте власну поштову скриньку
2. Переконайтеся, що розсилка надійшла
3. Перевірте форматування на комп'ютері та мобільному
4. Натисніть посилання, щоб переконатися, що вони працюють

Вітаємо! Ви надіслали свою першу розсилку за допомогою плагіна розсилки WordPress.

Крок 1: Відкрийте власний CSS вашої теми

Метод А: Через Customizer

1. Перейдіть до Зовнішній вигляд → Customize
2. Натисніть "Additional CSS"

Метод Б: Через налаштування теми

1. Деякі теми мають розділ "Custom CSS"
2. Перевірте документацію вашої теми

Крок 2: Стилізуйте кнопку надсилання

Вставте цей CSS для налаштування кнопки розсилки:

/* Newsletter Plugin Submit Button */
.tnp-submit {
  border: none !important;
  background: #FFD586 !important;
  color: #1C1C1C !important;
  padding: 12px 30px !important;
  border-radius: 5px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.tnp-submit:hover {
  background: #FFC556 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

Крок 3: Стилізуйте поля вводу

/* Newsletter Input Fields */
.tnp-field {
  padding: 12px 15px !important;
  border: 2px solid #ddd !important;
  border-radius: 5px !important;
  font-size: 15px !important;
  width: 100% !important;
  margin-bottom: 15px !important;
}

.tnp-field:focus {
  border-color: #FFD586 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,213,134,0.2) !important;
}

Крок 4: Стилізуйте контейнер форми

/* Newsletter Form Container */
.tnp-subscription {
  max-width: 500px !important;
  margin: 0 auto !important;
  padding: 30px !important;
  background: #f9f9f9 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

Крок 5: Збережіть та протестуйте

1. Натисніть "Опублікувати"
2. Відвідайте сторінку з формою підписки
3. Переконайтеся, що новий стиль відображається
4. Протестуйте на мобільних пристроях

Порада профі: Використовуйте кольори вашого бренду в CSS, замінивши:

• #FFD586 на ваш основний колір
• #1C1C1C на ваш колір тексту

Крок 1: Налаштуйте перенаправлення

1. Перейдіть до Сторінки → Newsletter → Редагувати
2. Натисніть ✚ Додати, щоб додати новий елемент на сторінку.
3. Знайдіть елемент HTML та натисніть на нього.
4. Скопіюйте та вставте цей код у елемент HTML:
   
   HTML-код автоперенаправлення Копіювати

   <div class="thank-you-message">
     <h2>Thank you for subscribing!</h2>
     <p>Redirecting in <span id="timer">5</span> seconds...</p>
   </div>
   
   <script>
     // Only run redirect if we're on the confirmation page
     const urlParams = new URLSearchParams(window.location.search);
     const isConfirmed = urlParams.get('nm') === 'confirmed';
   
     if (isConfirmed) {
       let seconds = 5;
       const timer = document.getElementById('timer');
       const countdown = setInterval(() => {
         seconds--;
         timer.textContent = seconds;
         if (seconds <= 0) {
           clearInterval(countdown);
           location.href = '/';
         }
       }, 1000);
     } else {
       // Hide the thank you message if we're not on the confirmation page
       document.querySelector('.thank-you-message').style.display = 'none';
     }
   </script>

5. Натисніть Зберегти.

Крок 2: Протестуйте

1. Відвідайте форму підписки.
2. Підпишіться з тестовим email.
3. Переконайтеся, що перенаправлення на головну сторінку працює.