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.