Wyskakujące okienko przy opuszczaniu strony na WordPressie

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.

Logujemy się na nasz hosting/serwer i rozpoczynamy pracę. Zacznijmy od wrzucenia biblioteki ouibounce do naszego motywu i podpięcie jej w funkcjach skórki. Generalnie rzecz biorąc fajnie jest jeśli w katalogach i plikach naszego WordPressa mamy porządek. Dzięki temu kiedyś przy kolejnych modyfikacjach łatwiej jest nam znaleźć potrzebną rzecz. Najlepiej wszystkie skrypty naszej witryny trzymać w katalogu ze skryptami, zdjęcia ze zdjęciami i analogicznie tak samo ze stylami.

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.