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

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

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

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

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

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

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

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

  • В разделе «Триггеры» устанавливаем тип события, вызывающего появление всплывающего окна, подключение cookies и название CSS-селектора. За которым закрепляется данное событие. Что касается типов триггеров, то бесплатная версия плагина не блещет особым разнообразием, предлагая всего два: нажатие кнопки и авто открывание через определённый промежуток времени. Установив расширения от производителя плагина (естественно, не бесплатные) мы можем существенно пополнить этот список.

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

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

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

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

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

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

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

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

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

Автор Юрий 16 статей
Администратор блога n-wp.ru

3 комментария

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*