Jak dodać lightbox do strony opartej na WordPressie?
W dzisiejszym poradnikowym wpisie przedstawię, w jaki sposób, bez użycia gotowych wtyczek, własnoręcznie dodałem do mojej witryny, opartej na WordPressie, lightbox, czyli efektowny i czytelny podgląd obrazków umieszczonych w treści wpisów.
Gotowych wtyczek dodających lightbox do wordpressowych witryn jest zapewne mnóstwo, jednak ja opiszę, w jaki sposób stworzyć własną, skrojoną na miarę.
Najpierw musimy przyjąć pewne założenia.
- Sam podgląd obrazków zrealizujemy za pomocą znanego klasycznego skryptu JavaScript „Lightbox”, którego autorem jest Lokesh Dhakar.
- Podgląd obrazków będziemy wczytywać tylko na stronach wpisów, nie na stronach z listą wpisów, na stronie głównej czy na stronach statycznych — unikniemy w ten sposób zbędnych żądań HTTP.
- Nie będziemy brudzić plików motywu, wrzucając do nich skrypty JavaScript wraz w kodem PHP dla WordPressa. Zamiast tego, stworzymy własną małą wtyczkę.
Skoro już wiemy, co chcemy osiągnąć, zaczynajmy!
Najpierw stwórzmy strukturę katalogów. W folderze wp-content/plugins tworzymy folder o nazwie, na przykład, my-lightbox. Następnie w środku folderu tworzymy plik o tej samej nazwie, ale z rozszerzeniem .php, tak więc w tym przykładzie będzie to my-lightbox.php.
Ze strony lokeshdhakar.com pobieramy skrypt JavaScript, który najważniejszą robotę — dodanie efektu lightbox — wykona w dużej mierze za nas. W pobranym archiwum ZIP znajdziemy folder dist. Zawartość tego folderu, to znaczy foldery css, images i js, wrzucamy do folderu naszej wtyczki.
Teraz naszym zadaniem będzie podpiąć pliki skryptu Lightbox do WordPressa. Musimy w tym celu naskrobać parę linii kodu PHP, które umieścimy w pliku my-lightbox.php.
<?php
/*
Plugin Name: My Lightbox
*/
add_action('wp_enqueue_scripts', function(){
if (!is_single()) {
return;
}
$setup = <<< JAVASCRIPT
document.addEventListener('DOMContentLoaded', function(){
lightbox.option({
'fadeDuration': 300,
'resizeDuration': 200,
'imageFadeDuration': 300,
'showImageNumberLabel': false
});
document.querySelectorAll('a[href$=".png"], a[href$=".jpg"], a[href$=".jpeg"]').forEach(function(anchor){
if (anchor.children.length && anchor.children[0].tagName == 'IMG') {
anchor.setAttribute('data-lightbox', 'preview');
}
});
});
JAVASCRIPT;
wp_enqueue_style('lightbox-styles', plugin_dir_url(__FILE__) . 'css/lightbox.min.css');
wp_enqueue_script('lightbox', plugin_dir_url(__FILE__) . 'js/lightbox.min.js', ['jquery'], null, true);
wp_add_inline_script('lightbox', $setup, 'before');
});
Co się tutaj dzieje? Przekornie zacznijmy od końca, na końcu bowiem dodajemy najważniejsze — skrypt Lightbox wraz z dołączonym do niego arkuszem stylów CSS. Zauważmy, że wywołując funkcję wp_enqueue_script(), dodałem argument true na końcu, dzięki czemu skrypt zostanie dodany do stopki witryny, nie do nagłówka <head>.
Dołączamy także niewielki skrypt JavaScript inline zapisany w PHP-owej zmiennej $setup przy użyciu składni heredoc. Zapewniamy, by został on umieszczony po skrypcie Lighbox (określając dla niego zaczepienie lightbox tak jak dla głównego pliku skryptu). Owy skrypt inline zajmuje się dwiema sprawami.
Po pierwsze, za pomocą konstrukcji lightbox.option([...]) określamy ustawienia skryptu Lightbox — na przykład szybkość animacji podglądu. Zachęcam do zapoznania się z dokumentacją ustawień skryptu.
Oprócz tego wszystkim linkom do obrazków (czyli linkom, których adres docelowy kończy się na .png, .jpg bądź .jpeg) dodajemy dodatkowy atrybut data-lightbox o jakiejś wartości, na przykład preview. Skrypt Lightbox generuje podgląd tylko dla tych obrazków, których odnośnik <a> posiada taki dodatkowy atrybut.
Zastanawiać może też dodatkowe kryterium anchor.children[0].tagName == 'IMG'. Chodzi tutaj o to, by podgląd generowany był tylko dla tych linków, które zawierają obrazek w środku. Jeśli link w środku nie zawiera znacznika <img>, nie zostanie do niego dodany atrybut data-lightbox, jego kliknięcie nie będzie więc generować podglądu.
Na samym początku funkcji za pomocą składni if (!is_single()) { return; } sprawdzamy, czy aktualnie obsługiwana strona serwisu jest stroną wpisu i kontynuujemy tylko wtedy, jeśli właśnie tak jest. Dzięki temu skrypt nie wczyta się na innych stronach serwisu.
No i to właściwie wszystko. Teraz wystarczy tylko włączyć naszą prostą wtyczkę w panelu administracyjnym WordPressa.
Co można w powyższym kodzie poprawić?
- Jeśli nie używasz nigdzie jQuery, możesz zmniejszyć liczbę żądań HTTP. Autor skryptu Lightbox dostarczył plik JavaScript z wbudowaną biblioteką jQuery. Jeśli zechcesz, linijkę wywołującą funkcję
wp_enqueue_script()możesz zmodyfikować w taki sposób:wp_enqueue_script('lightbox', plugin_dir_url(__FILE__) . 'js/lightbox-plus-jquery.min.js', [], null, true); - Wykorzystana powyżej metoda
document.querySelectorAll()zwraca instancję klasyNodeList. Internet Explorer nie wspiera metodyforEach()dla tej klasy, dlatego podgląd obrazka nie pokaże się w IE. Aby to naprawić, należy po obiekcieNodeListprzelecieć pętlą. - Jeżeli rozszerzenie w nazwie pliku graficznego zapisane jest dużymi literami, w obecnej formie skrypt inline nie doda do niego podglądu lightbox. Aby to naprawić, składnię typu
a[href$=".png"]musimy zastąpić zapisema[href$=".png" i]wykorzystującym niewspierany przez przeglądarki Microsoftu modyfikatori. - Jeśli efektu lightbox chcesz używać również na stronach statycznych, usuń wspomniany kod
if (!is_single()) { return; }lub określ warunek jako!is_single() and !is_page(). Odsyłam tutaj do dokumentacji funkcji warunkowych systemu WordPress.
Dodaj komentarz