Jak WordPress poprawnie wprowadza JavaScript?Niestandardowe ładowanie plików JS i CSS

用Witryna WordPressprogramiści, deweloperzyWtyczka WordPressLub podczas dostosowywania motywu WordPress odwołuje się do niektórych zasobów skryptów JavaScript i CSS.

• Zwykle ludzie używają linków, tagów skryptu bezpośrednio do HTML.
• W rzeczywistości WordPress ma wbudowane zaawansowane funkcje i metody odwoływania się do skryptów.
• Tak więc korzystanie z wbudowanych referencji do metod WordPressa jest bardziej profesjonalne i bardziej rozszerzalne.

Wadliwa metoda cytowania

Istnieją dwie popularne metody cytowania, w porządku, po prostu nie jest idealna ani rozsądna.

Typ 1:tagi linków odnoszą się do plików CSS

• Tagi skryptów stosują pliki JS.Nie wyszczególniono tutaj.

Typ 2:Użyj funkcji wp_head

• Funkcja wp_head służy do wyprowadzania zawartości niestandardowej lub zdefiniowanej przez system.
• Czasami używamy następującego kodu, aby odwołać się do tego pliku:

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• Skopiuj powyższy kod do pliku functions.php, aby odwołać się do odpowiednich plików.

Mechanizm zasobów WordPress Enqueue Scripts

Jak wszyscy wiemy, WordPress ma wiele wtyczek:

• Prawie każda wtyczka odwołuje się do jakiegoś pliku zasobów.
• Nieuchronnie wystąpią konflikty między zasobami, do których odwołują się dwie wtyczki, co stanie się niestabilne i może wpłynąć na wydajność.

Użyj funkcji wp_enqueue_script

• Aby odwołać się do zasobu w WordPress, powinieneś użyćwp_enqueue_scriptFunkcja, która ma słowo w kolejce w nazwie umieszczonej w kolejce lub posortowanej funkcji.
• Dzięki sposobowi kolejkowania zasobów WordPress (Skrypty Enqueue) referencje są oddzielone od odpowiednich plików i kodu rdzenia.
• Jeśli użytkownik chce wyłączyć zasób, może go usuwać, modyfikować i komentować bez modyfikowania go z kodu podstawowego.

Ponadto niektóre powszechnie używane biblioteki, takie jak jQuery, jQuery UI itp., są wbudowane w WordPress.

Możemy użyć funkcji wp_enqueue_script do bezpośredniego wywołania wbudowanej biblioteki, która zapisuje kod i czystszą specyfikację.

Jeśli używasz tej funkcji do odwoływania się do własnych plików JS i CSS, musisz użyćwp_register_scriptFunkcja rejestruje identyfikator (uchwyt), a następnie używawp_enqueue_scriptFunkcja wywołuje zasób odpowiadający tej flagi.

Jak poprawnie importować pliki JS i CSS w WordPressie?

WordPress zapewnia sensowne metody importu dla metod JS i CSS.

Możesz użyć poniższego kodu, aby zaimportować plik plugin.css do wtyczki ▼

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

Powyższe wykorzystuje funkcję wp_register_script do utworzenia zasobu o identyfikatorze plugin_stylesheet.

Następnie dodaj jego żądania w kolejce dowp_enqueue_scriptsdziałania są w toku.

Chociaż nazwa funkcji jest skryptem, nie ma ona nic wspólnego z typem pliku zasobów i jest prawidłowa zarówno dla CSS, jak i JS.

Funkcja wp_register_script naprawdę nie jest taka prosta, może mieć pięć parametrów:

1) uchwyt:Identyfikator zasobu.

• 由wp_enqueue_scriptprzenosić.

2) $src:Lokalizacja zasobu.

• Adresy względne lub bezwzględne wykorzystują wbudowane funkcje WordPressa do uzyskiwania adresów itp.
• WspólnyPozycjonowaniefunkcja maplugins_url,get_template_directory_uri等.

3) $głębokie:polegać.

• Jeśli odwołujesz się do wtyczki jQuery i musisz polegać na jQuery podczas budowania, musisz wypełnić jQuery.
• Zauważ, że jest ona przekazywana jako tablica.

4) $wer:Wersja zasobu, opcjonalna.

5) $in_footer:Czy umieszczasz to na dole?

• Zwykle pliki JS powinny być umieszczane na dole strony, możesz ustawić ten parametr na True, pozostawić puste lub False, aby wyprowadzić na górę.

Spójrzmy na pełniejszy przykład referencyjny pliku JavaScript ▼

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

Motywy WordPress używają wp_enqueue_script do importowania zasobów

Programiści w rozwoju motywów WordPress, użyjwp_enqueue_scriptImportuj zasoby.

• Powyższe przykłady są przykładami referencyjnych zasobów do tworzenia wtyczek WordPress.
• Metoda, o której mowa w temacie, jest podobna.

Główną różnicą jest użycie odpowiedniej funkcji, aby pobrać katalog motywu, aby uzyskać adres pliku zasobów w motywie.

możesz użyćget_template_directory_urifunkcja, aby uzyskać bieżący katalog motywów.

Jeśli używasz motywu potomnego, musisz użyćget_stylesheet_directory_uriFunkcja pobiera katalog motywu nadrzędnego, aby uzyskać odpowiednie zasoby.