💡 Jak dodać wyskakujące okienko w WordPress

• Wybierz sposób: wtyczka Popup Maker dla szybkiego startu lub kod niestandardowy dla pełnej kontroli
• Zainstaluj Popup Maker przez „Wtyczki → Dodaj nową" i aktywuj ją
• Utwórz nowy pop-up, zdefiniuj treść wpisu lub strony i skonfiguruj wyzwalacz (kliknięcie, timer lub przewinięcie)
• Dla rozwiązania niestandardowego dodaj style CSS okna modalnego do pliku motywu lub w customizerze
• Podłącz skrypt JavaScript przez wp_enqueue_script() z zależnością od jquery, sprawdzając kolejność ładowania
• Otwórz stronę i przetestuj wyskakujące okienko w przeglądarce, monitorując konsolę pod kątem błędów

Czym są okna modalne i do czego służą na stronie WordPress

Okno modalne to wyskakujący blok z treścią, który otwiera się na wierzchu strony, przyciemniając tło. Użytkownik nie opuszcza bieżącego adresu URL, ale widzi dodatkowe informacje: tekst wpisu, formularz, wideo lub galerię.

Dla strony WordPress okna modalne rozwiązują trzy konkretne zadania. Po pierwsze, panel klienta: zamiast osobnej strony profilu pokazują Państwo ustawienia, zamówienia lub wiadomości w wyskakującym bloku. Po drugie, szybki podgląd treści: odwiedzający klika kartę produktu lub zapowiedź artykułu i widzi pełną zawartość bez przeładowania. Po trzecie, formularze przechwytywania: subskrypcja, rejestracja, kontakt wyskakują dokładnie wtedy, gdy odwiedzający jest gotowy do działania.

Kluczowa przewaga okna modalnego nad osobną stroną to szybkość. Nie trzeba czekać na pełne załadowanie nowej strony z jej nagłówkiem, paskiem bocznym i stopką. Ładują Państwo tylko the_content(), czystą treść. Oszczędza to zarówno czas użytkownika, jak i zasoby serwera.

WP Post Popup: dlaczego wtyczka-weteran zeszła ze sceny

Do 2023 roku jednym z najpopularniejszych rozwiązań dla okien modalnych w WordPress była wtyczka WP Post Popup (wp-post-modal). Potrafiła przekształcić dowolny wpis, stronę lub niestandardowy typ postu w wyskakujące okienko, wystarczyło podać URL z parametrem. Wtyczka współpracowała z shortcode'ami, Contact Form 7, BuddyPress, pozwalała ładować zewnętrzne strony, a nawet selektywnie pokazywać konkretny div z cudzej witryny.

W październiku 2023 roku wtyczkę zamknięto. Powodem jest luka w zabezpieczeniach. Strona na WordPress.org pokazuje teraz status „This plugin has been closed… Reason: Security Issue". Od tego czasu nie jest dostępna do pobrania, a aktywne instalacje wyzerowano.

Ale idee leżące u podstaw WP Post Popup nie zniknęły. Zadanie pokazywania treści w wyskakującym okienku bez przeładowania jest rozwiązywane również dzisiaj. Co więcej, na dwa sposoby: nowoczesnymi wtyczkami i czystym kodem.

3 Nowoczesne sposoby dodania okna modalnego w WordPress

Oto aktualne opcje na rok 2026, od gotowych wtyczek po w pełni niestandardowe rozwiązanie.

Popup Maker to najpopularniejsza bezpłatna wtyczka do wyskakujących okienek: 700 000+ aktywnych instalacji i ocena 4.9 na WordPress.org. Tworzy dowolne typy pop-upów, od okien modalnych z treścią po panele wysuwane i banery. Wyzwalacze na kliknięcie, timer, przewinięcie lub wyjście kursora. Jeśli potrzebują Państwo szybkiego rozwiązania bez kodu, to najlepszy start.

Bootstrap 5 jest wbudowany w wiele nowoczesnych motywów. Jego natywny komponent Modal działa od ręki: responsywność, animacja, zamykanie po Escape i kliknięciu poza oknem. Wystarczy podłączyć Bootstrap do motywu i użyć gotowego znacznika z atrybutami data.

Czysty kod to ścieżka dla tych, którzy potrzebują pełnej kontroli nad każdym pikselem i zachowaniem okna. Żadnych zbędnych skryptów, zależności i konfliktów z innymi wtyczkami. Właśnie ten sposób przeanalizujemy dalej krok po kroku.

Powyższe wideo to poglądowy tutorial tworzenia niestandardowego okna modalnego w WordPress od podstaw. 12 minut czystego kodu i od razu gotowy rezultat.

Instrukcja krok po kroku: okno modalne własnymi rękami

Ta metoda pasuje do każdej strony WordPress niezależnie od motywu. Napiszemy framework CSS do stylizacji wyskakującego bloku, przeanalizujemy typowy błąd JavaScript i dodamy inteligentny preloader, treść będzie pojawiać się płynnie, bez szarpnięć.

Krok 1: Framework CSS dla okna modalnego

Podstawowa stylizacja rozwiązuje trzy rzeczy: unieruchamia okno na środku ekranu, przyciemnia tło i dostosowuje tabele wewnątrz bloku modalnego. Oto działający kod dla pliku style.css Państwa motywu lub zakładki „Dodatkowy CSS" w customizerze:

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
}

Kluczowy moment: selektor .modal.show gwarantuje, że style są stosowane tylko wtedy, gdy okno modalne jest aktywne. W stanie zwiniętym blok nie wpływa na układ strony. Tabele wewnątrz bloku modalnego otrzymują osobną obsługę, zaokrąglone rogi nagłówków, kropkowane separatory wierszy i responsywne przewijanie.

Krok 2: Błędy JavaScript i jak je naprawiać

Najczęstszy problem podczas pracy z oknami modalnymi w WordPress to błąd Uncaught ReferenceError: wp is not defined. Pojawia się, gdy wtyczka lub niestandardowy skrypt próbuje użyć obiektu wp (WordPress JavaScript API) zanim rdzeń go załaduje.

W przypadku WP Post Popup problem krył się w funkcji modalCustomizer(), która pobierała ustawienia z panelu administracyjnego przez wp.customize. Oto jak to wyglądało w kodzie wtyczki:

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

Poprawka jest elementarna: zakomentować wywołanie, jeśli stylizują Państwo okno przez własny CSS:

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

Ogólna zasada dla wszelkich skryptów modalnych w WordPress: zawsze sprawdzajcie Państwo kolejność ładowania zależności. Podłączajcie swoje skrypty przez wp_enqueue_script() z jawnym wskazaniem zależności od jquery i wp-util. I nigdy nie wstawiajcie <script> bezpośrednio w treść postu, to prosta droga do błędów typu $ is not defined i wp is not defined.

Krok 3: Inteligentny preloader na jQuery

Zadaniem preloadera jest pokazanie wskaźnika ładowania, podczas gdy treść wpisu jest pobierana przez AJAX. Gdy tylko dane dotrą, preloader płynnie znika. Do śledzenia zmian DOM używamy mikro-biblioteki jquery-watch (25 linii kodu, monitoruje zmiany atrybutów i właściwości elementu).

CSS dla preloadera, gif w tle jako wskaźnik na środku bloku modalnego:

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
}

Logika działania: najpierw treść jest ukryta (opacity: 0), zamiast niej, preloader w tle. Gdy dane są załadowane, jQuery dodaje klasę .load, treść płynnie się pojawia, preloader jest usuwany. Oto kod 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
});

Ważne ostrzeżenie. Powyższy kod używa jQuery i wtyczki jquery-watch. Przed wstawieniem upewnijcie się Państwo, że jQuery jest podłączone i ładuje się przed Państwa skryptem. Na nowoczesnych stronach WordPress jQuery jest w pakiecie rdzenia, nie trzeba nic dodatkowo podłączać. Skrypt dodawajcie przez wp_enqueue_script() w functions.php, a nie bezpośrednio w treść postu.

Co robić, jeśli okno modalne się nie ładuje

Przez 6 lat pracy z modalnymi oknami WordPress zebrałem listę typowych przyczyn, od banalnych po nietrywialne. Oto checklista do diagnostyki:

• jQuery nie jest załadowane lub występuje konflikt. Sprawdźcie konsolę przeglądarki (F12 → Console). Błąd $ is not defined oznacza, że jQuery albo nie jest podłączone, albo Państwa skrypt wykonał się wcześniej. Rozwiązanie: wp_enqueue_script('my-modal', ..., array('jquery')).
• Szablon strony nie zwraca the_content(). Niektóre niestandardowe szablony page-modal.php używają get_the_content() zamiast the_content(). Pierwszy nie stosuje filtrów, shortcode'y i formatowanie się psują.
• Konflikt z wtyczkami cache. Jeśli ładują Państwo treść AJAX, a na stronie jest WP Rocket lub LiteSpeed Cache, wyłączcie cache dla URL-i, które wywołuje okno modalne.
• Błąd CORS podczas ładowania zewnętrznej strony. Przeglądarka blokuje żądanie do obcej domeny. Rozwiązuje się to przez proxy przez WordPress REST API lub konfigurację nagłówków CORS na serwerze docelowym.
• Punkt breakpoint. Na urządzeniach mobilnych okno modalne często zastępuje się bezpośrednim linkiem, użytkownik po prostu przechodzi na stronę. Sprawdźcie @media w Państwa CSS: poniżej 768px okno może celowo nie być pokazywane.

⁉️🤔 Często zadawane pytania

Wtyczka czy czysty kod, co wybrać do okna modalnego?

Jeśli potrzebują Państwo gotowego rozwiązania w 5 minut, instalujcie Popup Maker. Pokrywa on większość typowych scenariuszy: formularze subskrypcji, szybki podgląd, powiadomienia. Jeśli mają Państwo niestandardowy design, złożoną logikę AJAX lub wymagania wydajnościowe (ani jednego zbędnego kilobajta), piszcie ręcznie. Czysty kod daje pełną kontrolę kosztem kilku godzin pracy. Popup Maker dodaje około 40-60 KB skryptów i stylów na stronę. Niestandardowe rozwiązanie mieści się w 2-5 KB, różnica 10-30 razy. Dla witryny o dużym obciążeniu jest to odczuwalne.

Czy można otworzyć zewnętrzną stronę w wyskakującym okienku?

Tak, ale z ograniczeniami. WordPress domyślnie nie potrafi proxyować cudzej treści. Jeśli docelowa witryna nie wystawia nagłówka CORS Access-Control-Allow-Origin: *, przeglądarka zablokuje żądanie AJAX. Obejście to napisanie własnej warstwy serwerowej na wp_remote_get() lub skonfigurowanie endpointu REST API, który pobiera treść i oddaje ją Państwa frontendowi. Dla publicznych API i zaufanych źródeł CORS z reguły jest już skonfigurowany. GitHub API i WordPress.org API są otwarte do odczytu z dowolnej domeny.

Jak wpłynąć na SEO przy użyciu okien modalnych?

Treść wewnątrz okna modalnego, załadowana przez AJAX, jest widziana przez wyszukiwarki gorzej niż statyczny HTML na osobnej stronie. Zasada jest prosta: jeśli treść jest ważna dla rankingu, powinna mieć swoją kanoniczną stronę z bezpośrednim adresem URL. Okna modalnego używajcie jako dodatkowego punktu wejścia, a nie jako zamiennika strony. Googlebot wykonuje JavaScript od 2019 roku, ale indeksacja dynamicznie ładowanej treści wciąż jest niestabilna. Lepiej dmuchać na zimne i mieć wersję statyczną.

Dlaczego WP Post Popup zamknięto i czym go zastąpić?

Wtyczka wp-post-modal została zamknięta w październiku 2023 roku z powodu nieusuniętej luki w zabezpieczeniach. Jeśli wciąż jest na Państwa stronie, usuńcie ją natychmiast. Jako zamiennik rozważcie Popup Maker (bezpłatny, uniwersalny) lub niestandardowe rozwiązanie opisane w tym artykule. Obie opcje są bezpieczne i wspierane w 2026 roku.

Czy jQuery jest obowiązkowe do okna modalnego w WordPress?

Nie, nie jest obowiązkowe. Nowoczesny natywny JavaScript (ES6+) pokrywa wszystkie potrzebne operacje: fetch() dla AJAX, classList do przełączania klas CSS, addEventListener do obsługi kliknięć. Jednak jQuery wciąż jest głęboko zintegrowane z rdzeniem WordPress i większością motywów, prościej jest użyć tego, co już załadowane, niż podłączać kolejny framework.

Okna modalne w 2026: co stosować i jak robić

Jeśli dotarli Państwo do tej sekcji, mają Państwo trzy gotowe ścieżki. Popup Maker dla tych, którzy potrzebują „zainstalować i zapomnieć". 700 tysięcy aktywnych instalacji nie kłamie: wtyczka jest stabilna, elastyczna i bezpłatna w wersji podstawowej. Bootstrap 5 Modal, jeśli Państwa motyw jest już na Bootstrapie, użyjcie natywnego komponentu, nie twórzcie zbędnych zależności. Czysty kod dla perfekcjonistów i tych, którzy chcą kontrolować każdą linijkę.

Osobiście w 2026 roku wybieram drugą lub trzecią ścieżkę. Wtyczki do okien modalnych rozwiązują problem tu i teraz, ale niestandardowy kod rozwiązuje go na zawsze, bez aktualizacji, luk i konfliktów. A 2-5 KB zamiast 40-60 KB na stronę to argument, który trudno zignorować.

Wypróbujcie oba podejścia na testowej subdomenie i porównajcie. WordPress po to żyje 20 lat, że daje swobodę wyboru, od zera kodu do gotowej wtyczki w minutę.