PopUp окна в WordPress. Часть 1

Настройки

Однажды мой знакомый спросил:

  • А не мог бы ты написать что-нибудь на тему всплывающих окон в WordPress?
  • Мог бы, — ответил я. А смысл? Ведь об этом не писал, кажется только ленивый!
  • Ну так пора и тебе перестать лениться! — пошутил он.

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

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

Как и следовало ожидать, вариантов оказалось множество, но лучших не так много. Большинство экспертов в этой области отдают предпочтение плагину PopUp Maker. Ему и посвящена данная статья.

PopUp окна в WordPress. Часть 1

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

PopUp окна в WordPress. Часть 1

Механизм работы погранично прост: нажав ссылку «Добавить всплывающее окно», открываем интерфейс, в котором можем создать это самое окно. Здесь не должно возникнуть особенных трудностей, поскольку для его конструирования применяется все тот же Gutenberg со всеми его блоками, возможностью использования сторонних расширений и шорт кодов. Непосредственно под редактором располагается метабокс с настройками всплывающего окна, где:

  • В разделе «Триггеры» устанавливаем тип события, вызывающего появление всплывающего окна, подключение cookies и название CSS-селектора. За которым закрепляется данное событие. Что касается типов триггеров, то бесплатная версия плагина не блещет особым разнообразием, предлагая всего два: нажатие кнопки и авто открывание через определённый промежуток времени. Установив расширения от производителя плагина (естественно, не бесплатные) мы можем существенно пополнить этот список.
    PopUp окна в WordPress. Часть 1
    1. Установка триггера «Задержка времени / Автооткрытие» позволяет сделать окно, которое будет открываться само через указанный промежуток времени. (если нужно, чтобы оно появлялось при просмотре определённых страниц сайта, их необходимо указать в разделе «Нацеливание»).
    2. Триггер нажатия предусматривает показ только тогда, когда (и если) читатель нажмет определённую ссылку или кнопку. Привязка осуществляется при помощи CSS-селекторов.
  • Раздел «Нацеливание» позволяет установить условие для таргетинга всплывающего окна на конкретный контент или различные другие сегменты, а также определить, на каких типах устройств модельное окно будет отображаться, а на каких – нет.PopUp окна в WordPress. Часть 1
  • «Отображение» — позволяет установить дизайн всплывающего окна. При установке плагина нам предлагают набор из пяти тем оформления. Прямо скажем, внешний их вид оставляет желать лучшего. В качестве компенсации есть возможность сделать настройку основных ее элементов: отступов, стиля и цвета шрифта, размера окна степени прозрачности оверлея и кое-что еще. А настройка анимации и позиции окна и вовсе компенсирует этот недостаток.PopUp окна в WordPress. Часть 1
  • Раздел «Закрыть» позволяет настроить отображение кнопки закрытия окна также альтернативные методы (закрытие при щелчке по полю оверлея, клавишей ESC или F4).PopUp окна в WordPress. Часть 1

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

Теперь – к примерам.

Пример 1 Рекламное всплывающее окно, появляющееся само по себе

    1. Заходим в раздел PopUp Maker. Нажимаем ссылку «Добавить всплывающее окно»
    2. В открывшемся редакторе создаем само окно
      • Задаем название PopUp (нигде кроме административного раздела оно отображаться не будет, поэтому может быть любым)
      • Создаем контент (для примера разместил рекламу скидок к празднику).PopUp окна в WordPress. Часть 1
    3. Настраиваем условия отображения всплывающего окна:
      • В разделе «Триггеры» нажимаем «Добавить новый триггер». В появившемся окне выбираем «Задержка времени / Автооткрытие». В следующем шаге настройки устанавливаем время задержки появления окна. PopUp окна в WordPress. Часть 1
      • В разделе «Нацеливание» устанавливаем условие отображения. (чтобы окно не надоедало пользователю, я установил его показ только при просмотре главной страницы). Также можно установить отключение показа окна на мобильный устройствах. PopUp окна в WordPress. Часть 1
      • В пункте «Отображение» установим внешний вид на свое усмотрение (я выбрал Light box, как самый оптимальный для дальнейшей настройки). Размер – 40%. Тип анимации – движение. Начало анимации – справа. Позиция – Низ Право. Чтобы окно не прилипало к краям браузера, установим небольшие отступы от нижнего и от правого краев. PopUp окна в WordPress. Часть 1 PopUp окна в WordPress. Часть 1 PopUp окна в WordPress. Часть 1 PopUp окна в WordPress. Часть 1
      • Кнопку закрытия настраивать не буем и оставим как есть.
    4. Сохраняем настройки. Любуемся результатом.

PopUp окна в WordPress. Часть 1

Пример 2 Появление окна при щелчке по соответствующей кнопке (ссылке в статье).

Создание самого окна и большинство настроек осуществляются по предыдущей схеме. Отличие состоит в следующем:

  1. В странице или записи, при просмотре которой должен отображаться PopUp, создаем видимый и понятный читателю элемент (это может быть кнопка или картинка – не важно). Сохраняем внесённые изменения.
  2. Переходим к просмотру статьи во фронтальной части сайта.
  3. На панели администратора нажимаем кнопку PopUp Maker – Инструменты – Получить селектор. PopUp окна в WordPress. Часть 1
  4. Щелкаем левой кнопкой мыши по заготовленному заранее элементу и копируем CSS-селектор. PopUp окна в WordPress. Часть 1
  5. Возвращаемся в административную панель, открываем созданный ранее PopUp или создаем новый.
  6. Настраиваем условия отображения:
    • На этапе установки триггера выбираем «Нажатие». В поле «Дополнительные CSS-селекторы» вставляем скопированные ранее.PopUp окна в WordPress. Часть 1 PopUp окна в WordPress. Часть 1 PopUp окна в WordPress. Часть 1
    • Раздел «Нацеливание» не трогаем
    • Все остальное настраиваем на свой вкус.

В завершение следует отметить, что плагин PopUp Maker – довольно гибкая и мощная штука даже в бесплатной реализации. Если же дополнить его платным функционалом, то возможностей станет еще больше. О чем говорит его собственный репозиторий расширений.

PopUp окна в WordPress. Часть 1

Юрий
Оцените автора
Добавить комментарий

  1. Dan Zakirov

    Отличная статья, надо будет потом написать как это сделать без плагинов.

    Ответить
  2. Юрий автор

    это будет в третьей части!

    Ответить
  3. Роман

    Спасибо за статью!

    Ответить