Jak dodać skrypty do WordPress?

jak dodac skrypt 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?

jak dodac skrypty 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.

jak dodac skrypty do wordpress

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.