Jak dodać skrypty do WordPress?

WordPress jak każda inna strona wymaga plików JavaScript oraz styli CSS, aby była działała i wyglądała zgodnie z założeniami projektu. Najczęściej wykorzystuje się dostępne biblioteki Open Source, które pozwalają rozszerzać funkcjonalności strony internetowej. W przypadku zwykłej, statycznej strony, wystarczy dodać odpowiednie tagi w plikach HTML i mamy pewność, że strona będzie działać poprawnie. W przypadku systemów CMS jest to bardziej złożona kwestia, ponieważ pliki html są renderowane przez serwer z języka PHP. Język ten jest najczęściej wykorzystywanym językiem w programowaniu stron internetowych. Aktualnie około 80% stron internetowych wykorzystuje ten język.

PHP jest relatywnie łatwym do nauki językiem, wystarczy nauczyć się podstaw, aby samemu pisać proste strony www. Jest wykorzystywany w WordPress, Drupal, Joomla, Magento, Prestashop, Woocommerce oraz w pluginach.

Wielokrotnie spotkałem się z sytuacją kiedy w szablonie lub w pluginie pliki były dodane bezpośrednio w head pliku HTML. Jaki jest problem z takim podejściem?

Problemów jest kilka, najważniejsze z nich to:

1. Brak możliwości kontroli gdzie mają być podpinane skrypty i style CSS. WordPress ma wbudowany system hooków, pozwalający na kontrolę w którym momencie i gdzie ma być dodany dany plik, funkcja itd.
2. WordPress posiada wytyczne opisane w WordPress Codex jak mają być podpinane skrypty i style. Posiada wbudowane funkcje przeznaczone do tego i należy z nich korzystać.
3. WordPress jest rozbudowanym ekosystemem i może zdarzyć się sytuacja, że plugin dodany do naszej strony korzysta już z biblioteki javascript i w związku z tym nie ma potrzeby tworzenia kolejnej instancji.

Jak więc powinniśmy dodać skrypt do WordPress?

Wracam do WordPress Codex, jest tam wygodna wyszukiwarka pozwalająca na odnalezienie wytycznych związanych z obsługą skryptów javascript oraz styli css. Jest tam napisane, że należy wykorzystać funkcje wp_enqueue_script() oraz wp_enqueue_style().

W wp_enqueue_script należy podać parametry: $handle, $src, $deps, $ver, $in_footer, gdzie:

$handle – jest to nazwa skryptu

$src – źródło skryptu, np. adres do CDN (Content Delivery Network), lub ścieżka do pliku na serwerze.

$desp – zależności, np. jeśli skrypt korzysta z biblioteki jQuery

$ver – wersja

$in_footer – podaje się parametr true, jeśli chcemy żeby skrypt był dodany w stopce

Warto wszystkie skrypty Javascript zgrupować w jednej funkcji np. nazwijmy ją my_js_scripts , a następnie dodać za pomocą hooka w WordPressie, takim hookiem jest:

add_action(‘wp_enqueue_scripts’, ‘example_js_scripts’);

Podobne działania należy podjąć w stosunku do styli CSS. Wykorzystujemy do tego funkcję wp_enqueue_style(). Funkcja ta posiada również kilka parametrów: $handle, $src, $deps, $ver, $media, gdzie:

$handle – jest to nazwa skryptu

$src – podobnie jak w przypadku skryptu Javascript jest to adres prowadzący do pliku

$deps – zależności

$ver – wersja styli CSS

$media – media dla których został napisane style, np. ‘all’, lub dla ‘screen’, ‘handheld’, ‘print’

Następnie opakowujemy style w funkcję np. my_css_tyles, a następnie dodajemy do wp_enqueue_scripts, jak w przypadku plików Javascript.

Jak wspomniałem wcześniej WordPress posiada wbudowane mechanizmy kontroli gdzie mają być ładowane skrypty.

Ponieważ mamy do czynienia z CMS, to ważnym elementem oprócz widoków na froncie, jest panel administracyjny, który zarządza ustawieniami oraz treścią i wieloma innymi aspektami strony internetowej. W przypadku panelu admina jeśli chcemy zmienić wygląd zaplecza, możemy wykorzystać do tego specjalne hooki, admin_enqueue_scripts oraz np. login_enqueue_scripts w przypadku panelu logowania. W momencie kiedy gotowe skrypty podepniemy pod hooki to tylko one będą działać pod adminem i panelem logowania.