Istnieje określony sposób dodawania Javascript do motywu WordPress, aby zapobiec konfliktom z wtyczkami lub nadrzędnymi motywami WordPress. Problem polega na tym, że wielu „programistów” wywołuje swoje pliki javascript bezpośrednio w pliku header.php lub footer.php, co jest niewłaściwym sposobem.


W tym przewodniku pokażę, jak poprawnie wywoływać pliki javascript za pomocą pliku functions.php, aby ładowały się bezpośrednio do tagu head lub footer Twojej witryny. W ten sposób, jeśli tworzysz motyw do dystrybucji, a użytkownik końcowy chce zmodyfikować skrypty za pomocą motywu podrzędnego, który może, lub jeśli używa minimalizacji / buforowania lub innych wtyczek optymalizacyjnych, będzie działać poprawnie. A jeśli pracujesz z motywem podrzędnym, twoje skrypty są dodawane we właściwy sposób, bez kopiowania plików header.php lub footer.php do motywu podrzędnego, które nie powinny być nigdy konieczne (podczas pracy z dobrze zakodowanym motywem)

Niepoprawny sposób dodawania Javascript do motywów WordPress

Wywoływanie javascript w pliku header.php lub footer.php, jak pokazano poniżej, NIE jest poprawnym sposobem i zdecydowanie go odradzam, często powoduje konflikty z innymi wtyczkami i robienie rzeczy ręcznie podczas pracy z CMS nigdy nie jest dobry pomysł.

Właściwy sposób dodawania Javascript do motywów WordPress

Lepszym sposobem dodania javascript do motywu WordPress jest zrobienie tego za pomocą pliku functions.php wp_enqueue_script. Użycie akcji wp_enqueue_scripts do załadowania javascript pomoże uniknąć problemów z motywem.

Przykład

wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array (), true);

Powyższy kod załaduje plik my-script.js do Twojej witryny. Jak widać, zawarłem tylko uchwyt $, ale możesz również dodać zależności dla skryptu, numeru wersji i tego, czy załadować go w nagłówku lub stopce (domyślnie jest to nagłówek).

Funkcji wp_enqueue_script () można technicznie użyć w dowolnym pliku szablonu kompozycji lub wtyczki, ale jeśli ładujesz globalne skrypty, będziesz chciał umieścić je w pliku function.php kompozycji lub w osobnym pliku przeznaczonym do ładowania skryptów na teren. Ale jeśli chcesz tylko załadować skrypt do określonego pliku szablonu (na przykład na postach w galerii), możesz umieścić funkcję bezpośrednio w pliku szablonu, jednak osobiście zalecamy trzymanie wszystkich skryptów w jednym miejscu i ładowanie warunkowe skrypty w razie potrzeby.

Skrypty hostowane WordPress

Jedną fajną rzeczą w WordPress jest to, że istnieje już wiele skryptów hostowanych i zarejestrowanych, które można wykorzystać w tworzeniu motywów. Na przykład jQuery, które jest używane w prawie każdym projekcie, ZAWSZE powinno być ładowane z WordPressa i nigdy nie hostowane w witrynach zewnętrznych, takich jak Google. Zanim dodasz niestandardowy skrypt do swojego projektu, sprawdź listę zarejestrowane skrypty aby upewnić się, że nie jest on już uwzględniony w WordPress, a jeśli tak, należy go załadować zamiast rejestrować własny.

Korzystanie z haka w kolejce WordPress

Wcześniej wspominaliśmy o funkcji potrzebnej do załadowania skryptu na twojej stronie, jednak podczas pracy z plikami innymi niż szablony, takimi jak plik functions.php, powinieneś dodawać tę funkcję w innej funkcji zaczepionej w odpowiednich zaczepach WordPress, w ten sposób twoje skrypty dostają się zarejestrowany wraz ze wszystkimi innymi skryptami zarejestrowanymi przez WordPress, wtyczki innych firm i motyw nadrzędny podczas korzystania z motywu podrzędnego.

WordPress ma dwa różne zaczepy akcji, których można używać do wywoływania skryptów.

  1. wp_enqueue_scripts – akcja używana do ładowania skryptów w interfejsie
  2. admin_enqueue_scripts – akcja używana do ładowania skryptów w admin WP

Oto przykład (który zostałby dodany do pliku functions.php), jak utworzyć funkcję, a następnie użyć haka WordPress do wywołania skryptów.

/ **
* Kolejkuj skrypt
* /
funkcja myprefix_enqueue_scripts () {
wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array (), true);
}
add Działalności („wp_enqueue_scripts”, „myprefix_enqueue_scripts”);

Uwaga: Zobacz, jak korzystamy z funkcji „get_template_directory_uri” podczas definiowania położenia skryptu? Ta funkcja tworzy adres URL do folderu motywu. Jeśli pracujesz z motywem podrzędnym, zamiast tego chcesz użyć „get_stylesheet_directory_uri”, aby wskazywał na motyw podrzędny, a nie nadrzędny.

Dodawanie wbudowanego kodu JavaScript

Chociaż możesz łatwo wkleić wbudowany javascript do dowolnego pliku szablonu za pomocą znacznika script, dobrym pomysłem może być również użycie haków WordPress do dodania kodu wbudowanego, zwłaszcza gdy jest to podstawowa wtyczka lub kod motywu. Poniżej znajduje się przykład dodawania skryptów wbudowanych do witryny:

funkcja myprefix_add_inline_script () {
wp_add_inline_script („my-script”, „alert („ hello world ”);”, „after”);
}
działanie dodatkowe („wp_enqueue_scripts”, „myprefix_add_inline_script”);

W ten sposób dodasz wbudowany javascript po wcześniej zarejestrowanym skrypcie „my-script”. Korzystając ze skryptu wp_add_inline_script, można dodawać kod wbudowany tylko przed lub po już zarejestrowanym skrypcie, więc jeśli próbujesz zmodyfikować kod określonego skryptu, upewnij się, że jest on ładowany po nim lub jeśli potrzebujesz tylko dodać niestandardowy kod, możesz podpiąć go do skryptu jquery, który jest generalnie ładowany przez większość motywów WordPress, a jeśli nie, można użyć skryptu wp_enqueue_script do załadowania wersji jQuery obsługiwanej przez WordPress.

Korzystając z tej metody, ludzie mogą łatwo usunąć skrypty wbudowane za pomocą motywu potomnego lub dodatku plug-in, dzięki czemu wszystkie niestandardowe javascript są uporządkowane i są analizowane przez WordPress, co może być bezpieczniejsze. A jeśli używasz motywu podrzędnego, możesz załadować skrypty za pomocą pliku functions.php zamiast kopiować pliki head.php lub footer.php do motywu podrzędnego.

To powiedziawszy, jeśli pracujesz w motywie potomnym, nie musisz tego robić, możesz po prostu zrzucić swój kod do nagłówka, używając haczyków wp_head lub wp_footer, takich jak poniższy przykład:

add Działalności („wp_footer”, function () {?>  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me