Jak stworzyć popup w WordPress bez użycia wtyczki?

Popup w WordPressie można stworzyć bez instalowania wtyczki, używając własnego HTML, CSS i JavaScript. To lekkie rozwiązanie daje pełną kontrolę nad wyglądem i działaniem okna, ale wymaga podstawowej znajomości kodu. Możesz też wkleić skrypt zewnętrznej platformy, na przykład PopUpSmart, bez dodawania kolejnego rozszerzenia do WordPressa.

Własny kod czy zewnętrzny skrypt – co wybrać?

Własny popup jest zwykle lżejszy, ponieważ ładujesz tylko potrzebny kod. Zewnętrzny skrypt pozwala szybciej uruchomić bardziej rozbudowane funkcje, ale jego działanie zależy od dodatkowego serwera i sposobu, w jaki dostawca ładuje zasoby.

Jeżeli potrzebujesz jednego prostego okna informacyjnego, własny kod będzie wystarczający. Przy rozbudowanym targetowaniu, analityce lub integracji z systemem mailingowym wygodniejszy może być gotowy skrypt zewnętrzny. W obu przypadkach nadal nie instalujesz wtyczki do tworzenia popupu.

Jak zakodować popup w WordPressie?

Przykład poniżej tworzy okno otwierane po kliknięciu przycisku. Użytkownik może zamknąć je krzyżykiem, klikając tło albo naciskając klawisz Escape.

Zanim zaczniesz, przygotuj:

• dostęp do plików motywu potomnego lub panelu do edycji kodu,
• podstawową znajomość HTML, CSS i JavaScript,
• kopię zapasową strony przed zmianami,
• adres docelowy formularza lub przycisku, jeśli popup ma prowadzić do konkretnej akcji.

Nie edytuj bezpośrednio plików głównego motywu. Aktualizacja motywu może nadpisać zmiany. Kod dodaj w motywie potomnym albo za pomocą funkcji WordPressa, takich jak wp_enqueue_script() i hooki wp_footer.

1. Dodaj strukturę HTML

Strukturę okna możesz umieścić w szablonie motywu potomnego, najlepiej przed zamknięciem elementu body, albo dodać przez hook wp_footer w pliku functions.php. Poniższy fragment zawiera przycisk otwierający oraz samo okno:

<button type="button" id="open-popup">Pokaż więcej</button>

<div class="popup" id="site-popup" role="dialog" aria-modal="true" aria-labelledby="popup-title" hidden>
  <div class="popup__content">
    <button type="button" class="popup__close" id="close-popup" aria-label="Zamknij">
      &times;
    </button>
    <h2 id="popup-title">Zapisz się na newsletter</h2>
    <p>Odbierz informacje o nowych materiałach i ofertach.</p>
    <a class="popup__button" href="/kontakt/">Przejdź do formularza</a>
  </div>
</div>

2. Dodaj style CSS

CSS odpowiada za ukrycie okna, przyciemnienie tła i dopasowanie treści do małych ekranów. Kod możesz wkleić do sekcji „Dodatkowy CSS” w konfiguratorze WordPressa albo do arkusza stylów motywu potomnego:

.popup[hidden] {
  display: none;
}

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

.popup__content {
  position: relative;
  width: min(100%, 32rem);
  padding: 2rem;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 0.25);
}

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

.popup__button {
  display: inline-block;
  padding: 0.75rem 1rem;
  color: #fff;
  background: #1357d4;
  text-decoration: none;
  border-radius: 0.35rem;
}

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

3. Dodaj obsługę JavaScript

Skrypt steruje otwieraniem i zamykaniem okna. Umieść go w osobnym pliku, na przykład popup.js, i załaduj przez wp_enqueue_script(). Możesz też dodać go na końcu strony przez hook wp_footer.

document.addEventListener('DOMContentLoaded', function () {
  const popup = document.getElementById('site-popup');
  const openButton = document.getElementById('open-popup');
  const closeButton = document.getElementById('close-popup');

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

  function openPopup() {
    popup.hidden = false;
    closeButton.focus();
  }

  function closePopup() {
    popup.hidden = true;
    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();
  });
});

Jeżeli korzystasz z osobnego pliku JavaScript, dodaj go w functions.php motywu potomnego:

function mytheme_enqueue_popup_script() {
    wp_enqueue_script(
        'mytheme-popup',
        get_stylesheet_directory_uri() . '/assets/js/popup.js',
        array(),
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_popup_script');

Po zapisaniu zmian wyczyść pamięć podręczną strony i przeglądarki. Sprawdź też konsolę JavaScript, jeśli przycisk nie reaguje albo okno nie pojawia się na stronie.

Jak dodać zewnętrzny skrypt popupu?

Platformy zewnętrzne, takie jak PopUpSmart, zwykle generują gotowy fragment kodu. Nie tworzysz wtedy całego mechanizmu samodzielnie, ale nadal musisz prawidłowo osadzić skrypt w WordPressie.

1. Zarejestruj konto na wybranej platformie i skonfiguruj treść, wygląd oraz moment wyświetlania okna.
2. Skopiuj kod wygenerowany dla Twojej witryny.
3. Dodaj kod w sekcji nagłówka albo stopki, korzystając z opcji motywu, pliku motywu potomnego lub hooków WordPressa.
4. Wyczyść cache i sprawdź działanie skryptu na stronie opublikowanej, a nie tylko w podglądzie administratora.

Przy osadzaniu kodu przez functions.php nie wklejaj przypadkowego JavaScriptu bezpośrednio do pliku. Skrypt powinien być dodany w kontrolowanym miejscu, najlepiej przez wp_enqueue_script(). Kod w sekcji head lub footer dodawaj tylko wtedy, gdy pochodzi z zaufanego źródła i wiesz, jakie dane zbiera.

Na co uważać przy popupie?

Popup powinien wspierać użytkownika, a nie zasłaniać mu całą stronę. Przed publikacją sprawdź następujące zasady:

• Okno mieści się na ekranie telefonu bez poziomego przewijania.
• Przycisk zamknięcia jest widoczny i działa także na urządzeniu dotykowym.
• Treść ma jeden jasny cel i nie konkuruje z główną zawartością strony.
• Skrypt ładuje się tylko tam, gdzie popup jest potrzebny.
• Popup nie pojawia się ponownie przy każdej odsłonie tej samej strony.
• Formularz zawiera wymagane informacje o przetwarzaniu danych i właściwą zgodę, gdy jest ona potrzebna.

Przed publikacją wykonaj krótką kontrolę:

• Responsywność – sprawdź szerokość okna na telefonie i tablecie.
• Test mobilny – otwórz popup w kilku popularnych przeglądarkach i obróć ekran.
• Prędkość ładowania – porównaj stronę przed i po dodaniu kodu.
• RODO – zweryfikuj treść zgód, zakres danych i sposób ich przekazywania.

Nachalne okna mogą pogorszyć doświadczenie użytkownika, szczególnie na urządzeniach mobilnych, i utrudniać dostęp do treści. Dlatego lepiej uruchamiać popup po kliknięciu lub po wykonaniu konkretnej czynności niż wyświetlać go natychmiast po wejściu na każdej stronie.

Najprostszy popup bez wtyczki WordPressa składa się z trzech elementów: HTML odpowiada za strukturę, CSS za wygląd, a JavaScript za działanie. Jeśli zastosujesz motyw potomny, poprawnie załadujesz skrypt i przetestujesz okno na telefonie, otrzymasz lekkie rozwiązanie bez dodatkowego rozszerzenia.