Smart Popup Manager — Менеджер всплывающих окон

Установка и активация

1. Установка плагина:
   • Скачайте файл плагина

   • В админке WordPress перейдите: Плагины → Добавить новый → Загрузить плагин

   • Выберите файл и нажмите "Установить"

   • После установки нажмите "Активировать"

2. Проверка работы:
   • После активации в левом меню появится пункт "Smart Popup"

   • По умолчанию создан один попап "Основной попап"

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

1. Добавление нового попапа:

• Перейдите: Smart Popup → Добавить попап

• Заполните основные настройки:
  • Название попапа - для идентификации в списке

  • Статус - включить/выключить попап

  • Режим тестирования - показывать только администраторам

2. Настройка триггера показа:

Выберите один из трех вариантов:

• С задержкой - показ через указанное время (мс)

• При прокрутке - показ при достижении определенного процента прокрутки

• При уходе - показ при движении курсора к верхнему краю окна

3. Настройка контента:

• Заголовок - основной заголовок попапа

• Текст - используйте визуальный редактор для форматирования

• Текст кнопки - текст на основной кнопке

• Ссылка кнопки - URL, на который ведет кнопка

4. Внешний вид:

• Цвета - фон, текст, кнопки

• Размеры - ширина, скругления, отступы

• Оверлей - цвет затемнения фона

• Мобильная версия - включить/выключить показ на телефонах

5. Дополнительные настройки:

• Кнопка закрытия - показывать/скрыть крестик

• Закрытие по ESC - закрывать попап клавишей Esc

• Закрытие по клику - закрывать при клике на оверлей

• Автозакрытие - автоматическое закрытие через время

• Один раз за сессию - показывать только один раз пользователю

6. Таргетинг по страницам:

Выберите где показывать попап:

• Все страницы - на всем сайте

• Только главная - только на главной странице

• Только записи - только на страницах записей (постов)

• Только страницы - только на статических страницах

• Конкретные URL - перечислите адреса через запятую

👨‍💻 Управление попапами

Основная панель управления:

• Перейдите: Smart Popup → Управление попапами

• Видите список всех созданных попапов

• Для каждого попапа доступны:
  • 📝 Редактировать - переход к настройкам

  • 🧪 Тест - открытие в тестовом окне

  • ❌ Удалить - удаление попапа

Быстрые действия:

• Сортировка - попапы отображаются в порядке создания

• Статус - визуальная индикация активности

• ID попапа - используется для шорткодов

🔗 Использование шорткодов

Основной шорткод:

[smart_popup id="popup_1" text="Открыть попап"]

Параметры шорткода:

• id - обязательный, ID попапа (указывается в настройках)

• text - текст на кнопке (по умолчанию: "Открыть попап")

• trigger - тип триггера (по умолчанию: "manual")

• class - CSS класс для стилизации

• style - inline стили для кнопки

Примеры использования:

<!-- Простая кнопка --> [smart_popup id="popup_1" text="Получить скидку"] <!-- Стилизованная кнопка --> [smart_popup id="popup_2" text="Подписаться" class="primary-button" style="background: #ff0000; color: white;"] <!-- Внутри текста --> <p>Хотите узнать больше? [smart_popup id="popup_3" text="Нажмите здесь"] для получения деталей.</p>

📱 Позиционирование на страницах

Где размещать шорткоды:

1. В записях/статьях - через редактор WordPress

2. Виджеты - через настройки виджетов

3. Шаблоны тем - через файлы темы

4. Блоки Gutenberg - через блок "Шорткод"

Рекомендации по размещению:

• Форма подписки - в конце поста

• Акционные предложения - в сайдбаре

• Веб-запись - на странице услуг

• Обратный звонок - в шапке сайта

⚙️ Расширенные настройки

Интеграция с формами:

Плагин поддерживает HTML формы внутри попапа:

<!-- В редакторе содержимого --> <form action="/subscribe" method="post"> <input type="email" name="email" placeholder="Ваш email" required> <button type="submit">Подписаться</button> </form>

CSS кастомизация:

Добавьте в тему или через "Дополнительный CSS":

/* Стилизация кнопки шорткода */ .smart-popup-trigger { background: linear-gradient(45deg, #ff3366, #ff6633); border: none; padding: 15px 30px; border-radius: 25px; font-weight: bold; transition: all 0.3s ease; } .smart-popup-trigger:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(255, 51, 102, 0.3); } /* Адаптация под тему */ .smart-popup-overlay { z-index: 999999; } @media (max-width: 480px) { .smart-popup-container { width: 95% !important; } }