Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem
WebHelp.pl Warsztat Artykuły WordPress: jak poprawnie dodawać skrypty JavaScript i arkusze stylów CSS

Warsztat / Artykuły i tutoriale

WordPress: jak poprawnie dodawać skrypty JavaScript i arkusze stylów CSS

Bartosz Romanowski 27 grudnia 2010 komentarze ()

Podczas tworzenia wtyczki lub szablonu dla WordPressa często zachodzi potrzeba dołączenia dodatkowych skryptów JavaScript lub arkuszy stylów CSS. Dobrze jest robić to w prawidłowy sposób, dzięki czemu unikniemy niepotrzebnych kłopotów.

WordPress posiada specjalne funkcje służące do umieszczania w nagłówkach szablonu odpowiednich znaczników do osadzania zewnętrznych plików JS i CSS. Korzystanie z nich pozwala uniknąć wielu problemów, takich jak na przykład wielokrotne dodanie tego samego pliku. Wymagane jest również przez niektóry pluginy, takie jak na przykład JS & CSS Script Optimizer (opisany na naszym blogu), do poprawnego działania.

Dodawanie skryptów JavaScript

Do dodawania skryptów JavaScript służą funkcje wp_register_script() i wp_enqueue_script(). Pierwsza z nich "rejestruje" skrypt na naszym blogu, tak aby później można było się do niego odwoływać bez konieczności podawania pełnego adresu. Druga natomiast wstawia kod ładujący skrypt w odpowiednie miejsce w szablonie.

Pełna lista parametrów funkcji wp_register_script() wygląda następująco:

Kod: Zaznacz cały
wp_register_script($handle, $src, $deps, $ver, $in_footer);

$handle - nazwa skryptu. Powinna być unikalna, ponieważ będziemy jej używać w wywołaniu funkcji wp_enqueue_script().

$src - pełny adres URL pliku ze skryptem. Jeśli skrypt znajduje się w katalogu bloga lub wtyczki, należy skorzystać z funkcji get_bloginfo() lub plugins_url() aby otrzymać adres, w którym znajduje się nasz skrypt.

$deps (opcjonalny) - lista w postaci tablicy (Array), zawierająca nazwy skryptów, które muszą zostać załadowane przed naszym skryptem.

$ver (opcjonalny) - wersja skryptu. Dzięki temu możemy zarejestrować, a następnie dołączyć konkretną wersję danego skryptu. Przydatne w przypadku różnego rodzaju bibliotek (na przykład jQuery), kiedy chcemy mieć pewność, że zostanie dołączona konkretna, potrzebna nam wersja skryptu. Domyślnie: false

$in_footer (opcjonalny) - domyślnie skrypty są umieszczane w sekcji <head> szablonu. Przekazanie w tym parametrze wartości true spowoduje, że skrypt zostanie umieszczony w stopce szablonu, generowanej przez funkcję wp_footer(). Domyślnie: false

Warto dodać, że nie ma obowiązku rejestrowania skryptu funkcją wp_register_script() - równie dobrze możemy podać wszystkie informacje, takie jak URL skryptu czy jego zależności, w parametrach funkcji wp_enqueue_script().

Pełna lista parametrów funkcji wp_enqueue_script() wygląda następująco:

Kod: Zaznacz cały
wp_enqueue_script($handle, $src, $deps, $ver, $in_footer);

Jak nietrudno zauważyć, jest ona taka sama jak w przypadku funkcji wp_register_script(). Różnica polega jedynie na tym, że parametr $src jest opcjonalny.

Do naszej dyspozycji mamy również funkcję wp_deregister_script(), która jako parametr przyjmuje nazwę skryptu. Jej działania nie trzeba jakoś specjalnie objaśniać - wyrejestrowuje ona wybrany skrypt, czyniąc go tym samym niedostępnym dla funkcji wp_enqueue_script().

Bardzo istotną kwestią, o której trzeba pamiętać dodając własne skrypty, jest konieczność wywoływania obu opisanych wyżej funkcji w akcji init. Jeśli nie zrobimy tego w ten sposób, to mogą (aczkolwiek wcale nie muszą) spotkać nas problemy, na przykład z lokalizacją WordPressa.

Zobaczmy więc jak może wyglądać dodawanie własnych skryptów na przykładzie Fancybox.

Kod: Zaznacz cały
function fancybox_init()
{
    // zakładamy, że Fancybox znajduje się w katalogu 'fancybox' wewnątrz katalogu naszej wtyczki
    wp_register_script('fancybox', plugins_url('/fancybox/jquery.fancybox-1.3.4.pack.js', __FILE__), array('jquery'));
    wp_register_script('easing', plugins_url('/fancybox/jquery.easing-1.4.pack.js', __FILE__), array('jquery'));
    wp_enqueue_script('fancybox');
    wp_enqueue_script('easing');
}    
// podpinamy naszą funkcję do akcji 'init'
add_action('init', 'fancybox_init');

Warto wiedzieć, że WordPress jest instalowany ze sporą ilością gotowych do użycia skryptów, których lista znajduje się w dokumentacji.

Dodawanie arkuszy stylów CSS

Do dodawania własnych arkuszy stylów CSS służą funkcje wp_register_style() i wp_enqueue_style(), które działają na podobnej zasadzie co opisane wyżej funkcje do dodawania skryptów. Posiadają jednak nieco inny zestaw parametrów:

Kod: Zaznacz cały
wp_register_style($handle, $src, $deps, $ver, $media);
wp_enqueue_style($handle, $src, $deps, $ver, $media);

Parametry $handle, $src, $deps i $ver mają takie samo znaczenie jak w analogicznych funkcjach do ładowania skryptów. Nowy (opcjonalny) parametr $media określa rodzaj mediów (media type), dla których przeznaczony jest dołączany arkusz stylów (wszystkie dozwolone wartości znajdują się na stronie W3C).

Kontynuując zamieszczony powyżej przykład, dołączymy używany przez Fancybox arkusz stylów dodając następujący kod do naszej funkcji fancybox_init():

Kod: Zaznacz cały
    wp_register_style('fancybox', plugins_url('/fancybox/jquery.fancybox-1.3.4.css', __FILE__));
    wp_enqueue_style('fancybox');

Jeśli dodajemy arkusze stylów w szablonie, można skorzystać z funkcji get_bloginfo() do wyciągnięcia katalogu, w którym nasz szablon się znajduje, na przykład tak:

Kod: Zaznacz cały
wp_register_style('fancybox', get_bloginfo('stylesheet_directory').'/jquery.fancybox-1.3.4.css'));

Warto również pamiętać, że w przypadku szablonu kod osadzający skrypty i arkusze stylów możemy umieścić w pliku functions.php, znajdującym się w katalogu naszego szablonu.

Wynikiem działania naszego kodu będzie dodanie do szablonu odpowiednich znaczników w sekcji <head>. Nie musimy się martwić tym, czy jQuery jest już załadowane albo czy inny skrypt nie korzysta już przypadkiem z tej biblioteki, mamy również pewność, że wtyczki służące do łączenia wielu plików ze skryptami JavaScript lub arkuszami stylów wezmą pod uwagę nasze nowo dodane pliki.

Masz pytania lub wątpliwości? Odwiedź nasze forum dyskusyjne.

Bartosz Romanowski

Programista, gadżeciarz, krytyczny miłośnik produktów Apple, fan ciężkich brzmień i niepoprawny pesymista.


Komentarze


HTML CSS JavaScript PHP bazy danych MySQL Flash grafika framework hosting domeny pozycjonowanie wordpress Facebook