Co to jest WP Enqueue i jak z niego korzystać?

Opublikowany: 2017-10-28

Kiedy po raz pierwszy uczysz się języka HTML, jedynym sposobem, w jaki wiesz, jak wstawić jakikolwiek rodzaj interaktywności, jest użycie tagów skryptu w nagłówku lub stopce strony, aby ustawić typ i źródło zewnętrznego pliku JavaScript. (Lub, jeśli naprawdę dopiero się uczysz, cała funkcja JS między znacznikami skryptu znajduje się w samym ciele. To jest dobre do nauki, ale to całkiem zła praktyka, gdy przejdziesz do zaawansowanego programowania WordPress. Wprowadź funkcję kolejkowania .

Gdy miniesz proste, jednostronicowe witryny, te praktyki dla początkujących mogą stworzyć naprawdę trudne sytuacje. Gdy zaczniesz dodawać coraz więcej JavaScriptu, Twoja strona internetowa staje się coraz wolniejsza. Aktualizacja trwa dłużej. W końcu stworzyłeś duży stos JavaScript-getti i bez względu na to, jak bardzo się starasz, ten stos makaronu się nie rozplątuje.

Na szczęście możesz użyć funkcji enqueue w WordPressie, aby dodać style i skrypty, którymi opiekuje się CMS. Cały bałagan jest załatwiany za Ciebie. Chociaż nie jest to tak proste, jak bezpośrednie wklejanie skryptu lub stylów, które chcesz w nagłówku lub stopce każdej strony, jest to właściwy sposób na wykonanie tego. WordPress nie jest zbyt uparty, na pewno istnieje szereg najlepszych praktyk, o których powinieneś wiedzieć

A wp_enqueue_scripts stoi na czele tych praktyk.

O co tyle szumu?

Głównym powodem, dla którego będziesz chciał używać wp_enqueue, jest zapewnienie płynnego i szybkiego działania witryny. Szybkość strony jest ważna i ciągłe używanie tych samych skryptów i stylów nie pomaga. W ogóle.

Na szczęście wp_enqueue jest przykładem programowania funkcyjnego. Wszystko to oznacza, że ​​piszesz pojedynczy fragment kodu do wykonania (snippet JavaScript) i używasz wp_enqueue do wywołania go zamiast przepisywania/wklejania całości za każdym razem, gdy tego potrzebujesz.

Jest to. Niesamowite.

Co jeszcze bardziej niesamowite, użycie metody enqueue sprawia, że ​​WordPress sam wstawia tagi _script_ do nagłówka i stopki, do których należą, automatycznie, ładując je bez konieczności wprowadzania ich na każdej stronie osobno.

Składnia i parametry WP Enqueue

Kolejkowanie skryptów naprawdę nie jest takie trudne. Jeśli jesteś wystarczająco bystry, aby pracować z JavaScriptem, funkcje PHP, których używasz do kolejkowania, będą bardzo proste.

W typowym tagu skryptu bezpośrednio importujesz zewnętrzny plik .js lub wklejasz cały, długi fragment kodu między same tagi. (To jest również to, co robisz, jeśli wkleisz coś do modułu kodu Divi lub widżetów WP Custom HTML lub Text).

Wystarczy znać kilka podstawowych parametrów i składni.

Kodeks podaje to jako podstawowy kod kolejki: 

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Podsumowując, podział na użyteczne bity według parametrów jest dość prosty.

  • wp_enqueue_script() to funkcja, która umieści cały kod na stronie, na której się znajduje.
  • $handle to unikalna nazwa samego skryptu.
  • $src reprezentuje adres URL rzeczywistego pliku .js, który dodajesz do kolejki.
  • $deps to $uchwyty wszystkich wymaganych przez to zależności.
  • $ver będzie numerem wersji. Jeśli nie określono żadnej, automatycznie dodana zostanie wersja instalacyjna WP.
  • $in_footer lub $in_header mówi WordPressowi, gdzie umieścić swój skrypt.

Pełną dokumentację dotyczącą umieszczania skryptów w kolejce można znaleźć w Kodeksie.

Uwaga, studenci: rejestracja WP rozpoczyna się teraz!

Oprócz _wp_enqueue__, WP ma również poręczną metodę o nazwie _wp_register__. Obie metody używają tych samych parametrów i składni, więc naprawdę otrzymujesz umowę dwa do jednego z ich parą. Zasadniczo rejestracja skryptu jest tym samym, co nazywanie funkcji w JavaScript.

Chociaż nie jest to konieczne, rejestracja skryptów może znacznie ułatwić Ci życie, ponieważ nie będziesz musiał później deklarować ich jako zależności. Będą już zarejestrowani. Stąd…_wp_register__. Po zarejestrowaniu skryptu możesz wywołać go z powrotem przez jego $handle , jak zobaczysz w poniższym przykładzie.

Zarejestrujesz swój kod w ten sposób: 

wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, $in_footer);

Następnie, gdy tylko będziesz tego potrzebować, zawsze możesz oddzwonić w ten sposób:

wp_enqueue_script( 'jquery' );

Dodatkowo rejestracja oznacza, że ​​nie musisz ładować skryptu, nawet jeśli nie jest on potrzebny. WPMU ma niesamowity przykład tworzenia krótkiego kodu: jeśli zarejestrujesz skrypt do krótkiego kodu, który używa _wp_enqueue__, będzie on używany tylko wtedy, gdy jest krótki kod. Jeśli jednak wywołasz go tylko przez umieszczenie go w kolejce, zostanie on załadowany nawet wtedy, gdy krótki kod nie jest używany.

Możesz przeczytać wszystko o metodzie w Kodeksie.

Dodatkowo, autorzy wtyczek są zobowiązani do umieszczania skryptów w kolejce, jeśli chcą, aby znalazły się w repozytorium WordPress.org, więc jeśli masz to na swoim talerzu… lepiej do kolejki.

Łączenie w całość

Implementacja kodu jest łatwa. Po prostu wrzuć fragment, taki jak ten poniżej, do pliku functions.php . a WordPress zajmuje się resztą. To znaczy, to jest naprawdę podstawowy fragment do wywołania jQuery, ale możesz zobaczyć, jak to wszystko działa.

Normalnie użyjesz czegoś, co wygląda tak: 

<script type="text/javascript" src="jquery.js"></script>

Gdy nauczysz się, jak używać enqueue_scripts_ , zobaczysz coś podobnego do tego: 

add_action('wp_enqueue_scripts', 'add_scripts');
function add_scripts(){
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, true);
    wp_enqueue_script( 'jquery' ); 
}

Teraz zauważ w powyższym kodzie, w jaki sposób używa funkcji add_scripts()_, która jest już częścią WordPressa, aby określić kolejność kilku następnych kroków. Najpierw funkcja wp_register_ pobiera wszystkie określone szczegóły i umieszcza skrypt w stopce strony, a następnie używa wp_enqueue, aby w końcu wywołać go, gdy wszystko jest skonfigurowane.

Zawijanie

To naprawdę wszystko. Cóż, to nieprawda – kolejka jest dość zakorzenioną częścią WP. Ale to są podstawy, które sprawiają, że zaczynasz robić więcej z WordPressem niż kiedykolwiek wcześniej.

Podstawy, których wszyscy nauczyliśmy się umieszczając skrypty, kiedy zaczynaliśmy tworzenie stron internetowych, nadal działają, ale nie zawsze są najlepszym sposobem na robienie rzeczy. Częścią piękna WordPressa zbudowanego na PHP jest to, że możesz wprowadzić tego rodzaju logikę do swojej pracy, zachowując jednocześnie tę samą podstawową strukturę i przepływ pracy, jakie i tak miałbyś.

Obraz miniatury artykułu autorstwa hanss / shutterstock.com