WordPress oferuje wiele metod dodawania stylów i skryptów dla frontendu i administratora, zarówno do dodawania plików, jak i bezpośredniego wyprowadzania zmiennych / danych wyjściowych. Ten post zawiera szczegółowe informacje z przykładami kodu, jak prawidłowo dodawać skrypty i style do WordPressa.
Skrypty i style można rejestrować i umieszczać w kolejce, definiując unikalne uchwyty (identyfikatory przypominające ślimaka), dzięki czemu WordPress może wyeliminować duplikaty, takie jak wiele bibliotek jQuery, oraz obsługiwać zależności (który styl lub skrypt należy załadować przed tym i innym) .
Jeśli nie ma szczególnej potrzeby rejestrowania stylów lub skryptów, możesz je od razu umieścić w kolejce, pomijając rejestrację. Możliwe jest również wyrejestrowanie lub usunięcie z kolejki stylów i skryptów (wp_dequeue_scripti wp_dequeue_style) poprzez odwołanie się do uchwytu. Zwykle pomaga dodanie wyższej liczby w priorytecie haka (sprawiając, że będzie on uruchamiany po haku, w którym elementy zostały umieszczone w kolejce).
PS: Dodawanie stylów i skryptów do Gutenberga (zarówno bloków administratora, jak i frontendu) jest wyjaśnione w moim poście Gutenberg: Podstawy.
Dodawanie skryptów i stylów do frontendu
Aby dodać style i skrypty tylko do frontendu, użyj hooka wp_enqueue_scripts. Pomimo nazwy haka, jest on używany zarówno do skryptów, jak i stylów. Oto przykład kolejkowania arkusza stylów i pliku javascript w motywie:
add_action('wp_enqueue_scripts', function() {
// Styles
wp_enqueue_style('main-style', get_stylesheet_directory_uri().'/style.css', [], '1.0');
// Scripts
wp_enqueue_script('main-script', get_stylesheet_directory_uri().'/assets/js/main.js', ['jquery'], '', true);
});Trzecim argumentem zarówno stylów, jak i skryptów jest tablica z zależnościami. Np. w przypadku skryptów możesz chcieć załadować bibliotekę jQuery przed plikiem skryptu. Uwaga: Instalacje WordPress zawierają kilka popularnych bibliotek skryptów (na przykład jQuery, jQuery UI, Backbone i Underscore). Dopóki dodasz którykolwiek z tych uchwytów jako zależność w swoim enqueue_script, WordPress będzie je umieszczał w kolejce, więc nie musisz dodawać własnych plików dla tych bibliotek.
Piątym argumentem dla skryptów jest to, czy skrypt powinien być ładowany na końcu <body>(w stopce), a nie wewnątrz <head>tagu.
Aby użyć we wtyczce, musisz użyć innych metod, aby uzyskać adres URL do pliku lokalnego, na przykład plugin_dir_url(__FILE__).
Dodawanie skryptów i stylów do administratora
WordPress oferuje kolejny haczyk, admin_enqueue_scripts, do dodawania stylów i skryptów tylko dla administratora. Użyj tych samych metod, co powyżej, aby zarejestrować, umieścić w kolejce i zlokalizować skrypty i style:
add_action('admin_enqueue_scripts', function() {
global $pagenow, $post_type;
// Example: $hook == 'edit.php'
// Example: $post_type == 'post'
// wp_enqueue_style or wp_enqueue_script
});Dodawanie skryptów i stylów do strony logowania
Ponieważ żaden z powyższych zaczepów nie pojawia się na ekranie logowania administratora, WordPress oferuje w tym celu osobny zaczep, login_enqueue_scripts.
add_action('login_enqueue_scripts', function() {
// wp_enqueue_style or wp_enqueue_script
});Wyprowadzanie zmiennych JavaScript
Do wyprowadzania zmiennych JavaScript (np. pobierania ścieżek, przetłumaczonych łańcuchów lub innych zmiennych można użyć wp_localize_script. Ta funkcja wymaga uchwytu skryptu umieszczonego w kolejce. Drugim parametrem byłaby nazwa zmiennej, a trzecim jej wartość. Wartość może być tablicą, tak jak :
Wewnątrz skryptu masz dostęp do przekazywanych zmiennych, na przykład:
jQuery(document).ready(function($) {
console.log(Theme_Variables.ajax_url);
});W tym haczyku możesz uzyskać dostęp do zmiennych globalnych $pagenowi $post_typedokładniej określić, gdzie chcesz umieścić swoje style i skrypty w kolejce.
Wyprowadzanie stylów wbudowanych
Jeśli chcesz wyprowadzić style wbudowane, na przykład dla zmiennych motywu skonfigurowanych w programie Customizer (np. za pomocą get_theme_mod), możesz je wyprowadzić za pomocą wp_add_inline_stylefunkcji. Działa bardzo podobnie do wyprowadzania zmiennych JavaScript, w których musisz podać uchwyt stylu umieszczonego w kolejce:
add_action('wp_enqueue_scripts', function() {
// wp_enqueue_style('main-style'); // Must exist!
$color = get_theme_mod('my-custom-color'); // e.g. #FF0000
$custom_css = "
body {
background: {$color};
}";
wp_add_inline_style('main-style', $custom_css);
});Dodawanie tagów asynchronicznych do skryptów
Niestety nie ma bezpośredniej funkcji ani filtra, który można by dodać asyncdo tagów skryptu, ale możemy to osiągnąć, manipulując ciągiem znaków, którego WordPress używa do wyprowadzania tagów skryptu dla wszystkich umieszczonych w kolejce skryptów, tak jak to (pamiętaj, aby określić swój skrypt za pomocą jego uchwytu):
Przydatne linki do dokumentacji
- wp_enqueue_scripts (hak)
- admin_enqueue_scripts (hak)
- login_enqueue_scripts (hak)
- wp_enqueue_style
- wp_dequeue_style
- wp_enqueue_script
- wp_dequeue_script
- wp_localize_script
- wp_add_inline_style