Всплывающее окно WordPress без плагина: простая пошаговая инструкция

В этой статье я покажу, как сделать собственное всплывающее окно прямо в теме WordPress, без установки дополнительных расширений. Такой подход дает контроль над производительностью, дизайном и поведением модального окна, а ещё избавляет сайт от лишнего кода плагинов. Я буду сопровождать объяснение рабочими фрагментами HTML, CSS, JavaScript и PHP — вы сможете вставить их в тему и адаптировать под свои задачи.

Почему стоит сделать всплывающее окно самостоятельно

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

Контроль над разметкой и скриптами повышает безопасность и доступность. Вы решаете, как обрабатывать клавиши, фокус и поведение на мобильных устройствах.

Лично я однажды заменил популярный плагин кастомным модальным окном и сократил время загрузки главной страницы почти на 200 мс. Это заметно улучшило пользовательский опыт и поведение в PageSpeed.

Базовая структура модального окна (HTML)

Нам нужна простая, семантичная разметка: оверлей, окно и кнопка закрытия. Важно добавить aria-атрибуты для экранных читалок и role=”dialog”.

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

<div id="site-modal" class="site-modal" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
  <div class="site-modal__overlay" data-modal-close></div>
  <div class="site-modal__content" role="document">
    <button class="site-modal__close" data-modal-close aria-label="Закрыть">&times;</button>
    <h2 id="modal-title">Заголовок модального окна</h2><img width="1536" height="1024" src="https://zitwork.ru/wp-content/uploads/2026/06/319246d036b16c0ceaa81f6d9f3e0a2d.jpg" class="size-full wp-image-4158 aligncenter" alt="Как создать всплывающее окно на WordPress без плагина. Заголовок модального окна" title="Как создать всплывающее окно на WordPress без плагина. Заголовок модального окна" loading="lazy" />
    <p>Текст сообщения или форма подписки. Здесь можно разместить любой HTML.</p>
  </div>
</div>

Разметка разделена на слой оверлея и содержимое, чтобы было удобно управлять кликами и фокусом. Кнопке закрытия назначен атрибут data-modal-close — это удобно в JS.

Далее добавим стили и скрипты, чтобы окно выглядело и работало корректно.

Стилизация с помощью CSS

CSS должен скрывать окно по умолчанию и плавно отображать его при активации. Обратите внимание на адаптивность: ширина окна и отступы должны подстраиваться под мобильные экраны.

.site-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .25s ease}
.site-modal[aria-hidden="false"]{pointer-events:auto;opacity:1}
.site-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.site-modal__content{position:relative;z-index:2;background:#fff;padding:24px;border-radius:8px;max-width:520px;width:90%;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.site-modal__close{position:absolute;top:8px;right:8px;background:transparent;border:none;font-size:24px;cursor:pointer}
@media (max-width:480px){.site-modal__content{padding:16px;width:94%}}

Стили держат окно центрированным и добавляют плавность появления. Если вы используете CSS из дочерней темы, соберите эти правила в отдельный файл или добавьте в основной стиль.

Важно: не забудьте обеспечить контраст и фокусные состояния для кнопок, это повышает доступность и удобство на клавиатуре.

Подключение скрипта и регистрация в теме

Скрипт должен управлять открытием, закрытием, обработкой клавиши Escape и сохранением фокуса. Лучше всего подключать его через functions.php, чтобы он загружался только при необходимости.

function theme_enqueue_modal_assets() {
  wp_enqueue_style('theme-modal-style', get_stylesheet_directory_uri() . '/css/modal.css', array(), '1.0');
  wp_enqueue_script('theme-modal-script', get_stylesheet_directory_uri() . '/js/modal.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_modal_assets');

Если вы хотите загружать ресурсы лишь на страницах с модальным окном, можно вызывать wp_enqueue_* внутри шорткода — так файлы будут подключены только при выводе модалки.

Примерный JS минимально необходим для работы: открытие/закрытие по селекторам, закрытие по оверлею и Escape. Разумно реализовать простую ловушку фокуса, чтобы экранные читалки не теряли ориентацию.

Создание шорткода для удобного использования

Шорткод позволяет вставлять модальное окно в контент постов, виджетов и шаблонов. Внутри шорткода зарегистрируем скрипты, если они ещё не подключены.

function modal_shortcode($atts, $content = '') {
  wp_enqueue_style('theme-modal-style');
  wp_enqueue_script('theme-modal-script');
  $modal = '<div id="site-modal" class="site-modal" role="dialog" aria-hidden="true">';
  $modal .= '<div class="site-modal__overlay" data-modal-close></div>';
  $modal .= '<div class="site-modal__content"><button class="site-modal__close" data-modal-close aria-label="Закрыть">&times;</button>';
  $modal .= do_shortcode($content);
  $modal .= '</div></div>';
  return $modal;
}
add_shortcode('site_modal', 'modal_shortcode');

Теперь в редакторе Gutenberg или Classic можно вставлять [site_modal]Ваш контент[/site_modal] и окно появится вместе с нужными стилями и скриптом. Это удобно для маркетинговых блоков или всплывающих форм.

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

Триггеры: показ по клику, по таймеру и по прокрутке

Триггеров несколько: при клике по кнопке, автоматически через N секунд после загрузки, при достижении определённой позиции страницы или при попытке покинуть вкладку. У каждого варианта свои плюсы и минусы.

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

Триггер	Плюсы	Минусы
По клику	Контроль пользователя, не надо агрессировать	Меньше показов
По таймеру	Простой вариант для промо	Может раздражать, если слишком быстро
По прокрутке	Показывается заинтересованным пользователям	Сложнее настроить корректно

В JS вы легко добавите логику: показать один раз в сессию через cookie или localStorage, или не показывать повторно пользователям, закрывшим окно. Это важно для уважения к посетителям.

Доступность, оптимизация и советы

Важно: Всегда давайте модальному окну aria-hidden=”true” при скрытом состоянии и менять на false при показе — это существенно для экранных читалок.

Обрабатывайте клавишу Escape для закрытия и переводите фокус на первый интерактивный элемент внутри модалки при её открытии. После закрытия возвращайте фокус на элемент, который открыл окно.

Не перегружайте окно тяжёлыми изображениями или внешними виджетами, грузите их лениво или только после открытия. Это сохранит скорость рендера страницы.

Важно: Не показывайте модалки на мобильных устройствах слишком рано — мелкие экраны и пальцы пользователей плохо реагируют на навязчивые попапы.

Если в окне есть форма, валидируйте данные на сервере и защищайте от XSS/CSRF. Для безопасности используйте wp_nonce_field при отправке через AJAX.

Тестирование и отладка

После внедрения проверьте работу на разных браузерах и устройствах. Особое внимание уделите клавиатурной навигации и чтению экранными читалками.

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

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

Если вы выполните описанные шаги — от разметки до регистрации шорткода и корректной обработки фокуса — получите лёгкое, быстрое и контролируемое всплывающее окно без плагинов. Такой подход даёт гибкость в дизайне и ускоряет сайт, а ещё помогает держать код чистым и понятным.