Jak stworzyć WordPress popup bez wtyczki?

WordPress popup bez wtyczki możesz stworzyć, łącząc strukturę HTML, style CSS i prosty JavaScript. Takie rozwiązanie daje kontrolę nad kodem i nie dodaje kolejnego dużego pakietu do strony, ale wymaga samodzielnej konfiguracji oraz późniejszego utrzymania.

Jak działa popup bez wtyczki?

Okno modalne składa się z trzech warstw. HTML definiuje zawartość i przyciski, CSS odpowiada za wygląd, pozycjonowanie oraz ukrywanie elementu, a JavaScript reaguje na kliknięcia i zmienia stan okna. W praktyce skrypt dodaje lub usuwa klasę CSS, zamiast ładować rozbudowany kreator.

Jak dodać popup w WordPressie krok po kroku?

Przykład poniżej tworzy popup otwierany przyciskiem i zamykany ikoną, kliknięciem w tło oraz klawiszem Escape.

1. Przygotuj motyw potomny – dodaj kod do Child Theme, a nie bezpośrednio do motywu głównego. Aktualizacja motywu nadrzędnego może usunąć ręczne zmiany. Przed edycją wykonaj kopię zapasową plików.
2. Dodaj strukturę HTML – wstaw przycisk wywołujący oraz modal do szablonu, na przykład do pliku footer.php motywu potomnego, tuż przed znacznikiem zamykającym </body>:

<button class="popup-open" type="button" aria-haspopup="dialog">
  Pokaż informacje
</button>

<div class="popup" id="site-popup" role="dialog" aria-modal="true"
     aria-labelledby="popup-title" hidden>
  <div class="popup__content">
    <button class="popup__close" type="button" aria-label="Zamknij okno">
      &times;
    </button>

    <h2 id="popup-title">Ważna informacja</h2>
    <p>Tutaj umieść treść komunikatu.</p>
  </div>
</div>

3. Dodaj style CSS – wklej kod do style.css motywu potomnego. Atrybut hidden ukrywa okno przed otwarciem, a klasa is-open pozwala kontrolować jego widoczność:

.popup[hidden] {
  display: none;
}

.popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.6);
}

.popup__content {
  position: relative;
  width: min(100%, 32rem);
  max-height: 90vh;
  overflow: auto;
  padding: 2rem;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
}

.popup__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  border: 0;
  background: transparent;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

body.popup-is-open {
  overflow: hidden;
}

@media (max-width: 480px) {
  .popup__content {
    padding: 1.5rem;
  }
}

4. Dodaj JavaScript – utwórz w motywie potomnym plik, na przykład popup.js, i wklej do niego obsługę zdarzeń:

document.addEventListener('DOMContentLoaded', function () {
  const popup = document.querySelector('#site-popup');
  const openButton = document.querySelector('.popup-open');
  const closeButton = popup?.querySelector('.popup__close');

  if (!popup || !openButton || !closeButton) {
    return;
  }

  const openPopup = function () {
    popup.hidden = false;
    document.body.classList.add('popup-is-open');
    closeButton.focus();
  };

  const closePopup = function () {
    popup.hidden = true;
    document.body.classList.remove('popup-is-open');
    openButton.focus();
  };

  openButton.addEventListener('click', openPopup);
  closeButton.addEventListener('click', closePopup);

  popup.addEventListener('click', function (event) {
    if (event.target === popup) {
      closePopup();
    }
  });

  document.addEventListener('keydown', function (event) {
    if (event.key === 'Escape' && !popup.hidden) {
      closePopup();
    }
  });
});

Skrypt korzysta z addEventListener, czyli nasłuchuje kliknięć i naciśnięcia klawisza. Dzięki temu nie trzeba dodawać kodu bezpośrednio do atrybutów HTML.

Sam plik JavaScript załaduj przez functions.php motywu potomnego. Funkcja wp_enqueue_script pozwala WordPressowi prawidłowo dołączyć skrypt:

function my_child_theme_assets() {
    wp_enqueue_script(
        'site-popup',
        get_stylesheet_directory_uri() . '/popup.js',
        array(),
        null,
        true
    );
}
add_action('wp_enqueue_scripts', 'my_child_theme_assets');

Po zapisaniu zmian wyczyść pamięć podręczną, otwórz stronę i sprawdź działanie przycisku. Jeśli używasz motywu blokowego albo niestandardowej struktury szablonów, miejsce wstawienia HTML może się różnić. Najważniejsze jest zachowanie jednej, wspólnej struktury klas i identyfikatorów.

Na co zwrócić uwagę przy projektowaniu popupu?

Popup powinien przekazywać konkretną informację i nie utrudniać korzystania ze strony. Przed publikacją sprawdź następujące elementy:

• Przycisk zamykania – powinien mieć zrozumiałą etykietę dla czytników ekranu i być dostępny bez precyzyjnego kliknięcia.
• Responsywność – ogranicz szerokość okna, dodaj marginesy i pozwól przewijać dłuższą treść na małym ekranie.
• Warstwa nad stroną – wysoki z-index zapobiega przykrywaniu modalu przez nagłówki, banery lub inne elementy.
• Umiarkowane wyświetlanie – nie otwieraj okna przy każdej wizycie i nie zasłaniaj użytkownikowi treści bez wyraźnej potrzeby.
• Krótki komunikat – im prostsza treść i działanie, tym łatwiej użytkownik oceni, czy chce pozostać w oknie.

Przed uruchomieniem sprawdź popup w kilku warunkach:

1. Otwórz go kliknięciem myszy oraz klawiszem Tab.
2. Zamknij go przyciskiem, kliknięciem w tło i klawiszem Escape.
3. Sprawdź widok na telefonie, zwłaszcza przy dłuższej treści.
4. Przetestuj stronę po aktualizacji motywu potomnego, buforowaniu i włączeniu innych skryptów.

Ręczny WordPress popup dobrze sprawdza się przy prostym komunikacie, formularzu lub krótkiej ofercie. Gdy potrzebujesz reguł opartych na zamiarze opuszczenia strony, rozbudowanego targetowania, statystyk i testów wariantów, samodzielne utrzymanie kodu staje się znacznie trudniejsze. W takim przypadku wybór rozwiązania powinien wynikać z zakresu funkcji, a nie tylko z liczby zainstalowanych dodatków.