Standardowy sposób włączenia JavaScript i CSS w WordPress

Jeśli jesteś programistą WordPress, słyszałeś o słowach takich jak wp_enqueue_script, wp_enqueue_style i wp_enqueue_scripts. Oto metody, których powinniśmy użyć, aby włączyć JavaScript i CSS do WordPressa.

Jeśli chodzi o WordPress, nie należy używać tagów skryptów i linków do dodawania plików JavaScript i CSS.

Korzyści z używania standardowych metod

W przypadku witryny internetowej często stosuje się różnego rodzaju efekty, animacje, aby poprawić wrażenia użytkownika. W internecie dostępnych jest wiele gotowych wtyczek, które pozwalają nam dodawać slidery, formularze kontaktowe, karuzelę itp. na Twojej stronie. Kiedy korzystamy z tych zewnętrznych zasobów, musimy korzystać z dostarczonych przez nie plików JS i CSS. Korzystając z metod dostarczonych przez WordPress, możemy kontrolować strony, na których tylko takie wtyczki mogą korzystać. Na przykład, jeśli wyświetlamy slider na stronie głównej, nie ma potrzeby umieszczania plików JS i CSS slidera na innej stronie. Dobrą praktyką jest zawsze dołączanie JS i CSS tylko wtedy, gdy jest to konieczne. Jest to dobra praktyka, która służyła do poprawy wydajności witryny i przyspieszenia jej ładowania.

Rzeczywisty kod zawierający JavaScript i CSS

Załóżmy, że mamy pliki custom.js i custom.css, które należy dodać na naszej stronie. W tym celu musimy umieścić poniżej kod.

add_action('wp_enqueue_scripts', 'include_js_css');
function include_js_css() {
    wp_register_script('my-custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true);
    wp_enqueue_script('my-custom-script');
 
    wp_register_style( "my-custom-style", get_stylesheet_directory_uri(). "/css/custom.css", array(), false, "all" );
    wp_enqueue_style( "my-custom-style" );
}

Uwaga: Trzeci parametr w funkcji wp_register_script. Przekazaliśmy array(‘jquery’), co oznacza, że ​​nasz custom.js jest zależny od pliku jquery.js. Możesz tutaj tablicę emapy, jeśli twój skrypt nie ma zależności.

Ostatni parametr ma wartość true, co oznacza dołączenie pliku custom.js w stopce (przed końcem tagu body).

Wyjaśnienie parametrów funkcji wp_register_script()

$handle (wymagane): Nazwa skryptu. Powinien być wyjątkowy.
$src (Wymagane): Pełny adres URL skryptu lub ścieżka skryptu względem katalogu głównego WordPress.
$deps (Opcjonalnie): Tablica zarejestrowanych skryptów, od których zależy ten skrypt.
Wartość domyślna: array()
$ver (Opcjonalnie): Ciąg określający numer wersji skryptu, jeśli taki istnieje, który jest dodawany do adresu URL jako ciąg zapytania w celu pomijania pamięci podręcznej. Jeśli wersja jest ustawiona na fałsz, automatycznie dodawany jest numer wersji równy aktualnie zainstalowanej wersji WordPress. Jeśli ustawiono na null, żadna wersja nie zostanie dodana. Wartość domyślna to false
$in_footer (opcjonalnie): określa, czy umieścić skrypt w kolejce przed zamknięciem tagu body zamiast w nagłówku. Domyślnie „fałsz".

Wyjaśnienie parametrów funkcji wp_register_style()

$handle (Wymagane): Nazwa arkusza stylów. Powinien być wyjątkowy.
$src (Wymagane): Pełny adres URL arkusza stylów lub ścieżka arkusza stylów względem katalogu głównego WordPress.
$deps (Opcjonalnie): Tablica zarejestrowanych arkuszy stylów obsługuje ten arkusz stylów.
Wartość domyślna: array()
$ver (Opcjonalnie): Ciąg określający numer wersji arkusza stylów, jeśli taki istnieje, który jest dodawany do adresu URL jako ciąg zapytania w celu pomijania pamięci podręcznej. Jeśli wersja jest ustawiona na fałsz, automatycznie dodawany jest numer wersji równy aktualnie zainstalowanej wersji WordPress. Jeśli ustawiono na null, żadna wersja nie zostanie dodana. Wartość domyślna: false
$media(Opcjonalnie): nośnik, dla którego zdefiniowano ten arkusz stylów. Akceptuje typy mediów, takie jak „wszystkie”, „druk” i „ekran”, lub zapytania o media, takie jak „(orientacja: pionowa)” i „(maks. szerokość: 640px)”. Wartość domyślna: „wszystkie”.

Chodzi o to, jak włączyć JavaScript i CSS do WordPressa. Jeśli masz jakieś pytania lub sugestie, zostaw komentarz poniżej.