💡 Как добавить всплывающее окно в WordPress

• Выберите способ: плагин Popup Maker для быстрого старта или кастомный код для полного контроля
• Установите Popup Maker через «Плагины → Добавить новый» и активируйте его
• Создайте новый попап, задайте контент записи или страницы и настройте триггер (клик, таймер или скролл)
• Для кастомного решения добавьте CSS-стили модального окна в файл темы или кастомайзер
• Подключите JavaScript-скрипт через wp_enqueue_script() с зависимостью от jquery, проверив порядок загрузки
• Откройте страницу и протестируйте всплывающее окно в браузере, отслеживая консоль на ошибки

Что такое модальные окна и зачем они WordPress-сайту

Модальное окно, это всплывающий блок с контентом, который открывается поверх страницы, затемняя фон. Пользователь не уходит с текущего URL, но видит дополнительную информацию: текст записи, форму, видео или галерею.

Для WordPress-сайта модальные окна решают три конкретные задачи. Первая, личный кабинет пользователя: вместо отдельной страницы профиля вы показываете настройки, заказы или сообщения во всплывающем блоке. Вторая, быстрый просмотр контента: посетитель кликает по карточке товара или анонсу статьи и видит полное содержимое без перезагрузки. Третья, формы захвата: подписка, регистрация, обратная связь всплывают именно в тот момент, когда посетитель готов к действию.

Ключевое преимущество модального окна перед отдельной страницей, скорость. Не нужно ждать полной загрузки новой страницы с её шапкой, сайдбаром и футером. Вы подгружаете только the_content(), чистый контент. Это экономит и время пользователя, и ресурсы сервера.

WP Post Popup: почему плагин-ветеран ушёл со сцены

До 2023 года одним из самых популярных решений для модальных окон в WordPress был плагин WP Post Popup (wp-post-modal). Он умел превращать любую запись, страницу или кастомный тип поста во всплывающее окно, достаточно было указать URL с параметром. Плагин работал с шорткодами, Contact Form 7, BuddyPress, позволял загружать внешние страницы и даже выборочно показывать конкретный div с чужого сайта.

В октябре 2023 года плагин закрыли. Причина, уязвимость безопасности. Страница на WordPress.org теперь показывает статус «This plugin has been closed… Reason: Security Issue». С тех пор он недоступен для скачивания, а активные установки обнулены.

Но идеи, заложенные в WP Post Popup, никуда не делись. Задача, показывать контент во всплывающем окне без перезагрузки, решается и сегодня. Причём двумя путями: современными плагинами и чистым кодом.

3 современных способа добавить модальное окно в WordPress

Вот актуальные варианты на 2026 год, от готовых плагинов до полностью кастомного решения.

Popup Maker, самый популярный бесплатный плагин для всплывающих окон: 700 000+ активных установок и рейтинг 4.9 на WordPress.org. Создаёт любые типы попапов, от модальных окон с контентом до slide-in панелей и баннеров. Триггеры по клику, таймеру, скроллу или выходу курсора. Если вам нужно быстрое решение без кода, это лучший старт.

Bootstrap 5 встроен во многие современные темы. Его нативный компонент Modal работает из коробки: адаптивность, анимация, закрытие по Escape и клику вне окна. Достаточно подключить Bootstrap к теме и использовать готовую разметку с data-атрибутами.

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

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

Пошаговое руководство: модальное окно своими руками

Этот метод подходит для любого WordPress-сайта независимо от темы. Мы напишем CSS-фреймворк для стилизации всплывающего блока, разберём типовую JavaScript-ошибку и добавим умный прелоадер, контент будет появляться плавно, без дёрганий.

Шаг 1: CSS-фреймворк для модального окна

Базовая стилизация решает три вещи: фиксирует окно по центру экрана, затемняет фон и адаптирует таблицы внутри модального блока. Вот рабочий код для файла style.css вашей темы или вкладки «Дополнительные стили» в кастомайзере:

1
/* Модальное окно — базовые стили */
2
.modal.show {
3
    max-width: 650px;
4
}
5
 
6
.modal.show .kk-star-ratings.bottom-right.rgt {
7
    display: none;
8
}
9
 
10
/* Таблицы внутри модального окна */
11
.modal.show table {
12
    border-collapse: separate;
13
    max-width: 100%;
14
    overflow: auto;
15
    table-layout: fixed;
16
    border: none;
17
    width: auto;
18
}
19
 
20
.modal.show table th {
21
    background: #F8F0F8;
22
    padding: 17px 10px;
23
    vertical-align: middle;
24
    color: #7F617E;
25
    font-size: 12px;
26
    text-align: left;
27
}
28
 
29
.modal.show table th:first-child {
30
    border-radius: 5px 0 0 5px;
31
}
32
 
33
.modal.show table th:last-child {
34
    border-radius: 0 5px 5px 0;
35
}
36
 
37
.modal.show table th.th-border {
38
    border-left: 1px solid #ECE1EC;
39
}
40
 
41
.modal.show table td {
42
    color: #424242;
43
    font-size: 13px;
44
    border-bottom: 1px dashed #E5E5E5;
45
    padding: 10px 5px 5px 4px;
46
    text-align: left;
47
}
48
 
49
.modal.show table tr:last-child td {
50
    border-bottom: none;
51
    padding-bottom: 20px;
52
}
53
 
54
.modal.show table td {
55
    border-right: 1px solid #F7F7F7;
56
}
57
 
58
.modal.show table td:last-child {
59
    border-right: none;
60
}
61
 
62
.modal.show table tr:first-child td {
63
    padding-top: 20px;
64
}

Ключевой момент: селектор .modal.show гарантирует, что стили применяются только когда модальное окно активно. В свёрнутом состоянии блок не влияет на вёрстку страницы. Таблицы внутри модального блока получают отдельную обработку, скруглённые углы у заголовков, пунктирные разделители строк и адаптивную прокрутку.

Шаг 2: JavaScript-ошибки и как их чинить

Самая частая проблема при работе с модальными окнами в WordPress, ошибка Uncaught ReferenceError: wp is not defined. Она возникает, когда плагин или кастомный скрипт пытается использовать объект wp (WordPress JavaScript API) до того, как ядро его загрузило.

В случае WP Post Popup проблема крылась в функции modalCustomizer(), которая дёргала настройки из админки через wp.customize. Вот как это выглядело в коде плагина:

1
// Window load
2
$(window).on('load', function () {
3
    modalCustomizer();
4
});

Исправление элементарное, закомментировать вызов, если вы стилизуете окно через собственный CSS:

1
// Window load
2
$(window).on('load', function () {
3
    // modalCustomizer();
4
});

Общее правило для любых модальных скриптов в WordPress: всегда проверяйте порядок загрузки зависимостей. Подключайте свои скрипты через wp_enqueue_script() с явным указанием зависимостей от jquery и wp-util. И никогда не вставляйте <script> напрямую в тело поста, это верный путь к ошибкам типа $ is not defined и wp is not defined.

Шаг 3: умный прелоадер на jQuery

Задача прелоадера, показать индикатор загрузки, пока контент записи подгружается через AJAX. Как только данные пришли, прелоадер плавно исчезает. Для отслеживания изменений DOM мы используем микро-библиотеку jquery-watch (25 строк кода, мониторит изменения атрибутов и свойств элемента).

CSS для прелоадера, фоновый gif-индикатор по центру модального блока:

1
/* Прелоадер модального окна */
2
.modal-wrapper.styled .modal {
3
    min-height: 385px;
4
    background-color: white;
5
    background-size: inherit;
6
}
7
 
8
div#modal-content {
9
    background-color: white;
10
}
11
 
12
.modal-wrapper.styled .modal {
13
    background: white url(/wp-content/uploads/2018/02/dollar-glass.gif) center center no-repeat scroll;
14
}
15
 
16
#single-post-meta-manager {
17
    opacity: 0;
18
}
19
 
20
div.modal-content-post-wrapped.load {
21
    opacity: 1;
22
}

Логика работы: изначально контент скрыт (opacity: 0), вместо него, фоновый прелоадер. Когда данные загружены, jQuery добавляет класс .load, контент плавно проявляется, прелоадер убирается. Вот JS-код:

1
jQuery(document).ready(function($) {
2
 
3
    // Плавное появление контента в модальном окне
4
    $("div#single-post-meta-manager").animate({ 'opacity': '1' }).fadeIn('slow');
5
 
6
    // Добавляем класс-информер «контент загружен»
7
    $("div.modal-content-post-wrapped").addClass("load");
8
 
9
    // Отслеживаем изменения модального окна через jquery-watch
10
    $(".modal-wrapper").watch({
11
        properties: "top,left,opacity,display,attr_class",
12
        watchChildren: true,
13
        callback: function (data, i) {
14
            // Ставим прелоадер как фоновое изображение
15
            $('.modal-wrapper.styled .modal').css(
16
                'background',
17
                'white url(/wp-content/uploads/2018/02/dollar-glass.gif) center center no-repeat scroll'
18
            );
19
            // Если контент загружен — убираем прелоадер
20
            if ($('.modal-content-post-wrapped').is('.load')) {
21
                $('.modal.show').css('background', 'white');
22
            }
23
        }
24
    });
25
 
26
});

Важное предупреждение. Код выше использует jQuery и плагин jquery-watch. Перед вставкой убедитесь, что jQuery подключён и загружается раньше вашего скрипта. На современных WordPress-сайтах jQuery идёт в комплекте ядра, дополнительно подключать ничего не нужно. Скрипт добавляйте через wp_enqueue_script() в functions.php, а не напрямую в тело поста.

Что делать, если модальное окно не загружается

За 6 лет работы с WordPress-модалками я собрал список типовых причин, от банальных до нетривиальных. Вот чек-лист для диагностики:

• jQuery не загружен или конфликтует. Проверьте консоль браузера (F12 → Console). Ошибка $ is not defined означает, что jQuery либо не подключён, либо ваш скрипт выполнился раньше. Решение, wp_enqueue_script('my-modal', ..., array('jquery')).
• Шаблон страницы не отдаёт the_content(). Некоторые кастомные шаблоны page-modal.php используют get_the_content() вместо the_content(). Первый не применяет фильтры, шорткоды и форматирование ломаются.
• Конфликт с плагинами кеширования. Если вы загружаете AJAX-контент, а на сайте стоит WP Rocket или LiteSpeed Cache, отключите кеширование для URL, которые дёргает модальное окно.
• CORS-ошибка при загрузке внешней страницы. Браузер блокирует запрос к чужому домену. Решается проксированием через WordPress REST API или настройкой CORS-заголовков на целевом сервере.
• Точка брейкпоинта. На мобильных устройствах модальное окно часто заменяют прямой ссылкой, пользователь просто переходит на страницу. Проверьте @media в вашем CSS: ниже 768px окно может не показываться намеренно.

⁉️🤔 Частые вопросы

Плагин или чистый код, что выбрать для модального окна?

Если вам нужно готовое решение за 5 минут, ставьте Popup Maker. Он покрывает большинство типовых сценариев: формы подписки, быстрый просмотр, уведомления. Если у вас нестандартный дизайн, сложная AJAX-логика или требования к производительности (ни одного лишнего килобайта), пишите руками. Чистый код даёт полный контроль ценой нескольких часов разработки. Popup Maker добавляет порядка 40-60 КБ скриптов и стилей на страницу. Кастомное решение укладывается в 2-5 КБ, разница в 10-30 раз. Для высоконагруженного сайта это ощутимо.

Можно ли открыть во всплывающем окне внешнюю страницу?

Да, но с ограничениями. WordPress по умолчанию не умеет проксировать чужой контент. Если целевой сайт не выставляет CORS-заголовок Access-Control-Allow-Origin: *, браузер заблокирует AJAX-запрос. Обходной путь, написать свою серверную прослойку на wp_remote_get() или настроить REST API endpoint, который забирает контент и отдаёт его вашему фронтенду. Для публичных API и доверенных источников CORS, как правило, уже настроен. GitHub API и WordPress.org API открыты для чтения с любого домена.

Как повлиять на SEO при использовании модальных окон?

Контент внутри модального окна, загруженный через AJAX, поисковики видят хуже, чем статический HTML на отдельной странице. Правило простое: если контент важен для ранжирования, у него должна быть своя каноническая страница с прямым URL. Модальное окно используйте как дополнительную точку входа, а не как замену странице. Googlebot выполняет JavaScript с 2019 года, но индексация динамически подгруженного контента всё ещё нестабильна. Лучше перестраховаться и иметь статическую версию.

Почему WP Post Popup закрыли и чем его заменить?

Плагин wp-post-modal закрыт в октябре 2023 года из-за неустранённой уязвимости безопасности. Если он до сих пор стоит на вашем сайте, удалите немедленно. В качестве замены рассмотрите Popup Maker (бесплатный, универсальный) или кастомное решение, описанное в этой статье. Оба варианта безопасны и поддерживаются в 2026 году.

Обязателен ли jQuery для модального окна в WordPress?

Нет, не обязателен. Современный нативный JavaScript (ES6+) покрывает все нужные операции: fetch() для AJAX, classList для переключения CSS-классов, addEventListener для обработки кликов. Однако jQuery всё ещё глубоко интегрирован в ядро WordPress и большинство тем, проще использовать то, что уже загружено, чем подключать ещё один фреймворк.

Модальные окна в 2026: что ставить и как делать

Если вы дошли до этого раздела, у вас есть три готовых пути. Popup Maker, для тех, кому нужно «поставил и забыл». 700 тысяч активных установок не врут: плагин стабилен, гибок и бесплатен в базовой версии. Bootstrap 5 Modal, если ваша тема уже на Bootstrap, используйте нативный компонент, не плодите лишние зависимости. Чистый код, для перфекционистов и тех, кто хочет контролировать каждую строчку.

Лично я в 2026 году выбираю второй или третий путь. Плагины для модальных окон решают проблему здесь и сейчас, но кастомный код решает её навсегда, без обновлений, уязвимостей и конфликтов. А 2-5 КБ вместо 40-60 КБ на страницу, это аргумент, который сложно игнорировать.

Попробуйте оба подхода на тестовом поддомене и сравните. WordPress потому и жив 20 лет, что даёт свободу выбора, от нуля кода до готового плагина за минуту.