🪟 Спливаючі вікна на WordPress без плагінів: покроковий посібник 2026

Q: Чому WP Post Popup закрили і чим його замінити?

Плагін wp-post-modal закритий у жовтні 2023 року через неусунуту вразливість безпеки. Якщо він досі стоїть на вашому сайті, видаліть негайно. Як заміну розгляньте Popup Maker (безкоштовний, універсальний) або кастомне рішення, описане в цій статті. Обидва варіанти безпечні й підтримуються у 2026 році.

💡 Як додати спливне вікно в WordPress

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

Що таке модальні вікна і навіщо вони WordPress-сайту

Модальне вікно — це спливний блок із контентом, який відкривається поверх сторінки, затемнюючи фон. Користувач не залишає поточну URL-адресу, але бачить додаткову інформацію: текст запису, форму, відео чи галерею.

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

Ключова перевага модального вікна перед окремою сторінкою, швидкість. Не потрібно чекати повного завантаження нової сторінки з її шапкою, сайдбаром і футером. Ви підвантажуєте лише the_content(), чистий контент. Це економить і час користувача, і ресурси сервера.

Приклад модального вікна з контентом запису WordPress

До 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	Низька	Середня	Безкоштовно (базова версія)
Модальне вікно на Bootstrap 5	Середня	Висока	Безкоштовно
Чистий CSS + JavaScript (DIY)	Висока	Максимальна	Безкоштовно

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-помилки та як їх лагодити

Помилка Uncaught ReferenceError у консолі браузера

Найчастіша проблема під час роботи з модальними вікнами в 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 років, що дає свободу вибору, від нуля коду до готового плагіна за хвилину.