Wyskakujące okienko przy opuszczaniu strony na WordPressie

Wyskakujące okienko (tzw. exit popup), pojawi się na naszej stronie tylko wtedy kiedy użytkownik będzie chciał ją opuścić i tylko jeden raz. Jest to bardzo popularne zastosowanie.

Kategorie:
Poradnik WordPress

Data publikacji: 31 października 2022

Nasz mechanizm wykonamy na WordPressie. Można je zrobić poprzez zainstalowanie pluginu, ale jak wiemy każda instalacja wtyczki wiąże się także z konsekwencjami dla naszego serwisu. Aby nie zaciągać dodatkowych javascriptów i cssów do naszego motywu (a tym samym nie obciążać dodatkowo naszej witryny) oraz po to, aby mieć pełną kontrolę nad naszym rozwiązaniem w postaci wyskakującego okienka zrobimy je customowo. Rozwiązanie można zrobić na wiele sposobów – napisać własny plugin lub własny widget, ale my wykorzystamy najprostszy sposób.

Czego potrzebujemy aby zrobić exit popup na WP?

Wykorzystamy lekką bibliotekę javascriptową o nazwie ouibounce. Bibliotekę można pobrać stąd: https://github.com/carlsednaoui/ouibounce.
Kod html oraz style napiszemy już samodzielnie po stronie naszego motywu. Również funkcję inicjującą wyskakujące okienko napiszemy w naszym własnym pliku ze skryptami. Cały proces implementowania exit popupu jest szybki i prosty.

My już wrzuciliśmy bibliotekę javascriptową ouibounce. Po pobraniu plików z wyżej wymienionego konta github i przejrzeniu ich okazuje się, że potrzebujemy wykorzystać tylko dwa pliki: z folderu build potrzebujemy pliku ouibounce.min.js, a z katalogu test potrzebujemy pliku ouibounce.min.css. Reszta plików i folderów są to np. przykłady podane przez autora biblioteki – one nam nie są potrzebne.
W katalogu swojego motywu WP do katalogu script wrzucamy plik ze skryptami ouibounce.min.js, a do katalogu ze stylami plik ouibounce.min.css.
Następnie musimy w pliku z funkcjami naszego motywu tj. functions.php podpiąć te pliki, tak aby WordPress nam je ładował.

Podpięcie styli i skryptów biblioteki pod WordPressa

W pliku functions.php naszego motywu dodaje następujący kod (należy pamiętać o odpowiednim usytuowaniu kodu między znacznikami php oraz o podaniu prawidłowej ścieżki do wpisów).

 
<?php function register_exit_popup() {
 wp_enqueue_style('ouibounce.min.css', get_template_directory_uri() . '/styles/ouibounce.min.css', array(), '1', 'all'); 
 wp_enqueue_script('ouibounce.min.js', get_template_directory_uri() . '/scripts/ouibounce.min.js', array('jquery'), false, true);
}
 add_action('wp_enqueue_scripts', 'register_exit_popup'); ?>

Teraz dodajmy w stopce naszej witryny kod html, który będzie treścią naszego okienka. Kod html wrzucamy do stopki, ponieważ stopka podpinana jest funkcją get_footer() do każdej templatki naszej strony. Dzięki temu okienko będzie się pojawiało na każdej podstronie naszej witryny. W naszym przypadku będzie to okienko, w którym będzie informacja oraz przycisk przenoszący do najpopularniejszego wpisu. Treść html:

<div id="ouibounce-modal">
  <div class="underlay"></div>
  <div class="modal">
        <div class="modal-header">
		      <img src="<?php echo get_template_directory_uri(); ?>/images/twoje-logo.png" alt="Logotyp Twojego serwisu">
        </div>
        <div class="modal-body">
		    <h3>Już opuszczasz moją stronę?</h3>
          <p>Może masz ochotę przeczytać najpopularniejszy wpis na blogu? </p>
          <div class="modal-button"><a href="<?php get_permalink(126); ?>">Przejdź do wpisu</a></div>
        </div>
        <div class="modal-footer">
          <p>Nie, dziękuję.</p>
        </div>
      </div>
  </div>

Dzięki podpiętej bibliotece, wszystko co znajduję się w divie o ID ouibounce-modal będzie naszym wyskakującym okienkiem. Treść możemy dobrać sobie dowolnie. Potrzebujemy jeszcze dopisać trochę styli, ponieważ wcześniej dołączyliśmy style domyślne od biblioteki. Dzięki temu, że w pliku functions.php najpierw podpinamy style od biblioteki, a potem nasze własne nadpisują nam się one automatycznie.
Nie musimy używać w cssie importantów. Przykładowo nasze style wyglądają tak:

/*modal */
#ouibounce-modal {
  font-family:'Raleway',sans-serif;
}
#ouibounce-modal .modal-header {
  background:#1e2361;
  padding: 14px 0 8px 0;
}
#ouibounce-modal .modal {
  text-align:center;
  height:300px;
}
#ouibounce-modal h3 {
  color:#1e2361;
  font-size:28px;
}
#ouibounce-modal p {
  font-size:15px;
}
.modal-button a {
  width: 200px;
  background: #1e2361;
  height: 45px;
  line-height: 45px;
  border-radius: 10px;
  color: #FFF;
  display: block;
  margin: 10px auto;
}
.modal-button a {
  color:#FFF;
}
.modal-button a:hover {
  background:#fb0462;
}
@media screen and (max-width:1000px) {
  #ouibounce-modal {
    display: none !important;
  }
}

Mamy podpiętą bibliotekę, mamy kod html i style więc okienko jest gotowe.
Teraz wywołujemy je w naszym pliku ze skryptami i dorobimy jeszcze funkcję, aby nasze okienko dało się zamknąć zarówno po kliknięciu poza jego powierzchnię, jak i po kliknięciu w przycisk „Nie, dziękuję”. Kod JS:

jQuery(document).ready(function($) {
  /* exit popup WordPress */
  var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
    aggressive: true,
    timer: 0,
  });
  $('body, #ouibounce-modal .modal-footer').on('click', function() {
    $('#ouibounce-modal').hide();
  });
  $('#ouibounce-modal .modal').on('click', function(e) {
    e.stopPropagation();
  });
});

Jeśli chodzi o responsywność wyskakującego okienka to jak widać w powyższym kodzie poniżej 1000 pikseli okienka już nie wyświetlamy.
Dla testów można oczywiście popróbować jak zachowuje się ta biblioteka na telefonie czy tablecie.

Sprawdź również

Poradnik WordPress Wtyczki WP

Optymalizacja zdjęć WordPress - konwersja jpg i png do webp

Testujemy automatyczny konwerter zdjęć z formatu jpg do webp na platformę WordPress.

Czytaj całość
Poradnik WordPress Wtyczki WP

Wtyczka Yoast SEO - opis i konfiguracja

Meta title, meta description, generowanie sitemapy i wiele innych funkcji w akcji, czyli testy Yoast SEO dla WordPress.

Czytaj całość
Poradnik WordPress Wtyczki WP

Wtyczka do przekierowań na WordPressie

Przegląd funkcji prostego narzędzia umożliwiającego dodawanie przekierowań z poziomu kokpitu WordPressa.

Czytaj całość
Zobacz wszystkie artykuły

Kontakt

Napisz do nas

    *Pola oznaczone gwiazdką są niezbędne do złożenia zapytania.