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

Настройки
👍 Научим создавать сайты на WordPress бесплатно за 19 уроков. Подробнее →

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

  • А не мог бы ты написать что-нибудь на тему всплывающих окон в 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

Создай свой первый сайт на WordPress

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

  1. Dan Zakirov

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

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

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

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

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

    Ответить