Tworząc skórkę do WordPressa warto wzbogacić ją o ciekawe efekty. Najłatwiej osiągnąć je za pomocą skryptów JavaScript np. tworząc rotator zdjęć przy użyciu Tiny Carousel. Może się jednak zrodzić pytanie czy można tak wprost dołączać własne skrypty do WP? Zwłaszcza, że np. wyżej wymieniony rotator wymaga biblioteki jQuery która jest często, choć nie zawsze automatycznie dołączana przez WordPressa. W tym poradniku wyjaśnimy tą kwestię.

Podstawy dołączania skryptów

Aby dołączyć zewnętrzny skrypt do naszego WP musimy w w skórce naszej witryny odszukać intrukcję wp_head(). Najczęściej można ją odnaleźć w pliku header.php. Tuż przed nią trzeba dopisać dwie funkcję: pierwszą która zarejestruje nowy skrypt, drugą która go dołączy do strony. Schamtycznie wygląda to tak:

wp_register_script($nazwa, $sciezka, $biblioteki, $wersja);
wp_enqueue_script($nazwa);
wp_head();

Teraz wyjaśnię pokrótce co należy wstawiać w miejsce kolejnych zmiennych. $nazwa to wewnętrzna nazwa dołączanego skryptu. Nie ma znaczenia co tam wpiszemy. Ważne tylko by w obu miejscach, przy rejestracji i dołączaniu skryptu, wpisany wyraz był taki sam. $sciezka to jak łatwo się domyślić adres do pliku z naszym kodem. Można tu wykorzystać funkcję get_bloginfo() aby WP sam wstawił aktualny adres strony lub ścieżkę do folderu z skórką. $biblioteki to parametr który musi być tablicą zawierającą listę bibliotek wykorzystywanych przez nasz kod. Dzięki temu WordPress kontroluje kiedy i jakie skrypty są podpinane do strony i nigdy nie zdarzy się, że np. jQuery będzie ładowane dwa razy. Listę dostępnych bibliotek i ich nazw kodowych można sprawdzić tutaj. Ostatni parametr to zmienna $wersja. Po każdorazowej modyfikacji skryptu musimy obowiązkowo zmienić tą liczbę by wymusić na przeglądarkach ponowne pobranie pliku zamiast korzystania z starej wersji z cachu.

Przykładowy pełny kod wygląda tak:

wp_register_script('tinycarousel', get_bloginfo('template_directory') . '/js/jquery.tinycarousel.min.js', array('jquery'), '1.0' );
wp_enqueue_script('tinycarousel');

W powyższym przykładzie zarejestrowaliśmy wtyczkę tinycarousel której plik znajduje się w folderze z skórką i która wymaga biblioteki jQuery. Następnie dołączyliśmy ją do kodu.

Dołączanie warunkowe

Jeśli z naszego skryptu korzystamy tylko na niektórych stronach to nie ma potrzeby dołączania plików przy każdym wyświetleniu witryny. Warto więc dopisać instrukcję warunkową która spowoduje, że nasz kod będzie dołączany jedynie na wybranych stronach. Poniższy przykłąd będzie dołączał dodatkowe pliki tylko na stronie głównej:

if(is_home){
   wp_register_script('tinycarousel', get_bloginfo('template_directory') . '/js/jquery.tinycarousel.min.js', array('jquery'), '1.0' );
   wp_enqueue_script('tinycarousel');
}

Zaś ten kod spowoduje załadowanie skryptu JS jedynie na stronie z id równym 29:

if(is_page('29')){
   wp_register_script('tinycarousel', get_bloginfo('template_directory') . '/js/jquery.tinycarousel.min.js', array('jquery'), '1.0' );
   wp_enqueue_script('tinycarousel');
}

Jako argument w funkcji if podajemy odpowiedni tag warunkowy. Więcej informacji o nich można znaleźć pod tym linkiem.