W WordPressie, zamiast po prostu dodawać je do nagłówka, powinieneś użyć metody zwanej enqueueing, która jest znormalizowanym sposobem obsługi twoich aktywów z dodatkową premią zarządzania zależnościami. Dowiedz się, jak to zrobić poniżej, używając wp_enqueue_scripts.

• Jak działa enqueueing
• Podstawy enqueueing z wp_enqueue_scripts
• Zarządzanie zależnościami
• Załaduj skrypty w Footer
• Specifying Media for Styles

How Enqueueing Works

Podczas enqueueing skryptu lub stylu podejmowane są dwa kroki. Najpierw go rejestrujesz – mówisz WordPressowi, że tam jest – a następnie faktycznie go wysyłasz, co ostatecznie powoduje wysłanie go do nagłówka lub tuż przed zamykającym znacznikiem ciała.

Powód posiadania dwóch kroków ma związek z modułowością. Czasami będziesz chciał dać znać WordPressowi o atucie, ale możesz nie chcieć używać go na każdej stronie. Na przykład: Jeśli budujesz niestandardowy shortcode galerii, który używa Javascript, musisz tylko faktycznie załadować JS, gdy shortcode jest używany – prawdopodobnie nie na każdej stronie.

Sposób, aby tak się stało, to najpierw zarejestrować skrypt i tylko faktycznie enqueue go, gdy shortcode jest wyświetlany (sugerowana lektura: The Ultimate Guide to WordPress Shortcodes).

Enqueueing Basics With wp_enqueue_scripts

Aby enqueue skryptów i stylów we front-endzie, musisz użyć haka wp_enqueue_scripts. W ramach tej funkcji możesz użyć funkcji wp_register_script(), wp_enqueue_script(), wp_register_style() i wp_enqueue_style().

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) ); wp_enqueue_style( 'custom-gallery' ); wp_enqueue_script( 'custom-gallery' );}

W powyższym przykładzie zarejestrowałem i wysłałem zasoby w ramach tej samej funkcji, co jest trochę zbędne. W rzeczywistości możesz użyć funkcji enqueue do rejestracji i enqueue od razu, używając tych samych argumentów, co w funkcjach register:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );}

Gdybym miał rozdzielić te dwie funkcje, zrobiłbym to poprzez użycie ich w różnych hakach. W rzeczywistym przykładzie moglibyśmy użyć haka wp_enqueue_scripts do zarejestrowania aktywów i funkcji shortcode do ich enqueue.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );}add_shortcode( 'custom_gallery', 'custom_gallery' );function custom_gallery( $atts ){ wp_enqueue_style( 'custom-gallery' ); wp_enqueue_script( 'custom-gallery' ); // Gallery code here}

Zarządzanie zależnościami

Mechanizm enqueueing WordPressa ma wbudowaną obsługę zarządzania zależnościami, używając trzeciego argumentu zarówno funkcji wp_register_style(), jak i wp_register_script(). Możesz również użyć funkcji enqueuing od razu, jeśli nie musisz ich oddzielać.

Trzeci parametr to tablica zarejestrowanych skryptów/styli, które muszą zostać załadowane przed enqueued bieżącego zasobu. Nasz powyższy przykład najprawdopodobniej opierałby się na jQuery, więc określmy to teraz:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );}

Nie musimy rejestrować ani enqueue jQuery, ponieważ jest to już część WordPressa. Możesz znaleźć listę skryptów i stylów dostępnych w WordPressie w Codex.

Jeśli masz własne zależności, będziesz musiał je zarejestrować, w przeciwnym razie twoje skrypty nie będą się ładować. Oto przykład:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) ); wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery' ) );}

Załóżmy, że pierwszy skrypt jest galerią, a drugi jest jej rozszerzeniem, które sprawia, że obrazy otwierają się w lightboxie. Zauważ, że nawet jeśli nasz drugi skrypt opiera się na jQuery, nie musimy tego określać, ponieważ nasz pierwszy skrypt już załaduje jQuery. To powiedziawszy, dobrym pomysłem może być podanie wszystkich zależności, tylko po to, aby upewnić się, że nic nie może się zepsuć, jeśli zapomnisz uwzględnić zależność.

WordPress wie teraz, których skryptów potrzebujemy i może obliczyć, w jakiej kolejności należy je dodać do strony.

Load Scripts In The Footer

Gdy tylko możesz uciec od ładowania skryptów w stopce, powinieneś. Zwiększa to pozorny czas ładowania strony i może zapobiec zawieszaniu się witryny podczas ładowania skryptów, zwłaszcza jeśli zawierają one wywołania AJAX.

Mechanizm enqueuing może dodawać skrypty do stopki za pomocą piątego parametru (czwarty to opcjonalny numer wersji). Nasz powyższy przykład załadowałby skrypty do stopki, gdybyśmy go nieco zmodyfikowali.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ), '1.0', true ); wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery', 'jquery' ), '1.0', true );}

Podanie true jako piątego parametru spowoduje umieszczenie skryptów w stopce, użycie false lub pominięcie parametru spowoduje załadowanie rzeczy do nagłówka. Jak wspomniałem wcześniej, kiedy to tylko możliwe, ładuj skrypty w stopce.

Specifying Media For Styles

Używając piątego parametru funkcji style register/enqueue możesz kontrolować typ mediów, dla których skrypt został zdefiniowany (print, screen, handheld, itd.). Używając tego parametru możesz ograniczyć ładowanie stylów do określonego typu mediów, co jest przydatną, małą sztuczką optymalizacyjną.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery-print', plugins_url( '/css/gallery.css' , __FILE__ ), array(), '1.0', 'print' );}

Aby uzyskać pełną listę typów mediów, które mogą być użyte, spójrz na specyfikacje CSS.

Podsumowanie

Przywracanie zasobów do kolejki jest potężnym sposobem ich obsługi. Daje tobie i innym twórcom wtyczek/tematów większą kontrolę nad całym systemem i usuwa zarządzanie zależnościami z twoich rąk.

Jeśli to nie wystarczy, jest to sposób na dodanie twoich aktywów, wiele rynków motywów i samo repozytorium WordPress nie zatwierdzi twojej pracy, jeśli nie użyjesz tej metody.