Popup Maker: настраиваем всплывающие окна без JS на WordPress

Дневник разработчика

Подводочка

Я разрабатываю веб-сайты на потоке. Это значит, что при всём желании, неизбежно возникает необходимость в ускорении процессов разработки сайта, так как время — это деньги.

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

Я очень люблю веб-разработку и реально залипаю часами на чистые, семантичные, доступные и лаконичные решения в html-разметке, css-стилизации карточек и прочем, но порой нужно ускориться.

Сегодня расскажу об одном из множества способов ускорить разработку сайта. Совсем не важно что за сайт, вы разрабатываете. Пусть это будет одностраничный лендинг или сайт-каталог с отдельными карточками товаров. так или иначе, на ВСЕХ САЙТАХ есть модальные окна — это всплывающие окошки, которые появляются если кликнуть на кнопку или ссылку на странице.

Как обычно программируют модальные окна на Js

Чаще всего модальные кона используются для показа дополнительной информации или формы обратной связи. Для реализации такого функционала традиционно используется JS.

В коде JS мы описываем программу, которая проходится по DOM-дереву и находит элементы:

которые отвечают за показ модальных окон, если произойдёт событие КЛИК,

сами модальные окна со всем содержимым (которые по умолчанию скрыты и не отображаются на странице, но присутствуют в html-разметке),

ну и кнопки которые закрывают модальное окно, если оно стало видимым и показывается на странице.

Все найденные элементы DOM-дерева обычно сохраняются в переменные и в дальнейшем используются для описания программы по следующей схеме:

Если на определённый элемент на странице кликнули, то показываем определённое модальное окно.

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

К чему я это все пишу? К тому, что для реализации функционала работающих модальных окон нужны базовые знания JS, время и желание писать программу на js с нуля или хотя бы какие то заготовки.

Мне это нравится. я не раз это делал, НО! Когда таких окошек надо много — работа превращается в рутину и это начинает напрягать. Сжирает время и подрывает энтузиазм.

А так как в таких ситуациях мы можем автоматизировать или упростить рабочие процессы — мы это обязательно сделаем.

Как упростить процесс реализации модальных окон для сайта

Вся описанная ниже информация будет полезна вам только при условии, что вы используете в разработке сайтов CMS WordPress, так как мы будем рассматривать кейсы именно для Вордпресс и сайтов на его основе.

Начнём с того что почти что все сайты после вёрски я переношу на CMS WordPress. Мне очень нравится этот движок и в последние пару лет он становится всё круче и круче, даже в сравнении с гавнобитриксом и всякими адовыми джумлами.

В ходе работы над сайтами, я неизбежно подмечаю «Людоедов» — так я именую рабочие процессы, которые сжирают моё время. Всё что подмечаю беру на карандаш и в дальнейшем думаю над тем, как это упростить, автоматизировать или исключить в дальнейшем.

Аналогично было и с работой над модальными окнами. При их разработке я трачу кучу времени на:

  1. Верстка модальных окон
  2. Стилизация модальных окон
  3. Программирование функционала для показа и скрытия модальных окон
  4. Тестирование работы модалок и отладка
  5. Настройка анимации и прочих наворотов
  6. Наполнение модальных форм информацией из текстовых прототипов или дизайн-макета
  7. Перенос модальных форм из вёрстки на CMS WordPress

Проще говоря — беда-беда. Знатный людоед у нас нарисовался, коллеги. Нужно было что то с этим делать.

Простое и эффективное решение для реализации модальных форм где угодно на сайте

На этапе вёрстки я вообще не касаюсь модальных форм и информации в них. Это происходит только на этапе переноса верстки на Вордпресс.

Подготовительная часть — анализ

Последовательно прохожусь по странице и выписываю для себя все элементы, которые вызывают показ модальных окон. (для лучшего пример я буду использовать один из своих работ — сайт торговой компании «Сибирский лес», которая занимается продажей пиломатериалов и отделочных материалов из Сибирской сосны и Лиственницы).

Popup Maker: настраиваем всплывающие окна без JS на WordPress
Шапка сайта — одно модальное окно с формой заказа звонка
Popup Maker: настраиваем всплывающие окна без JS на WordPress
Первый экран на главной — показ модального окна с калькулятором расчёта стоимости.
Popup Maker: настраиваем всплывающие окна без JS на WordPress
Логическая секция с анонсами карточек различных интерьерных решений, с дополнительной кнопкой для показа деталей в модальном окне.

Из этого следует что нам нужно добавить на сайте две модалки с формами и шесть штук с текстами и фотками. С этим разобрались. Теперь давайте поговорим про расширения, которые нам понадобятся для реализации модальных окон.

Установка расширения = плагина

Из всего что я использовал, больше всего нравится плагин под названием Popup Maker. Он прост в освоении, интуитивно понятен и не требует каких то существенных временных затрат во время наполнения.

В сочетании с ним я обычно использую дополнительное расширение Duplicate Page, которое позволяет мне КОПИРОВАТЬ = клонировать готовую модалку. Это оч помогает когда тебе нужно сделать такое же модальное окошко, НО с другими данными. Вот к примеру в анонсах карточек — самое то.

По настройке плагина и модальных форм я писал в отдельной статье, которую можно почитать тут, но вкратце алгоритм следующий:

создаёте модальное окно через плагин Popup Marker

Задаёте ему название, что бы можно было потом найти нужное окно в списке всех созданных окон,

Задаете ему заголовок, который отображается в модальном окне на сайте,

Добавляете контент модального окна (форма или текст с картинками),

Настраиваете внешний вид окна используя стандартную тему, или стилизуете полностью с нуля под стиль своего сайта,

Настраиваете условия показа модального окна и сохраняетесь

после сохранения модалки, ей будет присвоен идентификатор, который нужно прописать ссылке или кнопке.

Popup Maker: настраиваем всплывающие окна без JS на WordPress
Идентификатор модального окна, который используется для настройки ссылки или кнопки на сайте, которая вызывает модальное окно.
Popup Maker: настраиваем всплывающие окна без JS на WordPress
В параметрах атрибута href=»» у нужной ссылки указываем ID модального окна. После этого при клике по ссылке — показывается модалка.
Popup Maker: настраиваем всплывающие окна без JS на WordPress

Таким образом без каких либо программ на JS вы создаете, стилизуете и подключаете на своем сайте столько модальных окон, сколько захотите.

В дальнейшем все эти окна легко редактируются из административной панели, клонируются, переносятся на другой сайт и прочие штуки-дрюки.

Юрий Ронин