WordPress jest w naszym życiu od ponad 16 lat, ale metoda dodawania skryptów do motywów i wtyczek nadal pozostaje tajemnicą dla wielu programistów. W tym artykule wreszcie zakończyliśmy zamieszanie.
Ponieważ jest to jedna z najczęściej używanych bibliotek Javascript, dziś omawiamy, jak dodać proste skrypty jQuery do motywów lub wtyczek WordPress.
Ale najpierw…
O trybie zgodności jQuery
Zanim zaczniemy dołączać skrypty do WordPress, ważne jest, aby zrozumieć tryb zgodności jQuery.
Jak zapewne wiesz, WordPress jest fabrycznie załadowany z jQuery, którego możesz użyć z kodem.
JQuery WordPress ma również “tryb zgodności”, który jest mechanizmem unikania konfliktów z innymi bibliotekami językowymi.
Część tego mechanizmu obronnego oznacza, że nie można użyj $ podpisz bezpośrednio, tak jak w innych projektach.
Zamiast tego, pisząc jQuery dla WordPressa, musisz użyć jQuery.
Sprawdź poniższy kod dla przykładu:
Problem polega na tym, że pisanie jQuery miliard razy zajmuje więcej czasu, utrudnia czytanie i może nadmuchać skrypt.
Dobre wieści?
Z kilkoma modyfikacjami możesz wrócić do korzystania z naszego uroczego małego znaku dolara po raz kolejny.
BTW, jeśli jesteś nowy w jQuery, znak $ jest tylko aliasem do jQuery (), a następnie aliasem do funkcji.
Podstawowa struktura wygląda następująco: $(selektor).akcja(). Znak dolara definiuje jQuery…” (selektor) “zapytuje lub znajduje elementy HTML … i wreszcie” akcja jQuery () ” jest akcją do wykonania na elementach.
Wracając do tego, jak możemy obejść nasz problem z kompatybilnością … oto kilka realnych opcji:
1.Wejdź w tryb jQuery Stealth
Pierwszym sposobem na obejście trybu zgodności jest ukrycie kodu.
Na przykład, jeśli ładujesz skrypt w stopce, możesz zawinąć kod w funkcję anonimową, która zmapuje jQuery do $.
Jak w poniższym przykładzie:
Jeśli chcesz dodać swój skrypt w nagłówku (czego powinieneś unikać, jeśli to możliwe, więcej o tym poniżej) możesz zawinąć wszystko w funkcję gotową do dokumentu, przekazując $ po drodze.
2.Wejdź W Tryb “Bez Konfliktu”
Innym prostym sposobem na uniknięcie pisowni jQuery jest wpisanie “no conflict” tryb i użyj innego skrótu.
W tym przypadku: $j zamiast domyślnego $.
Wszystko, co musisz zrobić, to zadeklarować to na górze skryptu:var $j = jQuery.noConflict ();
W porządku, teraz wiesz więcej o pisaniu poprawnego kodu jQuery dla WordPress, dodajmy go do naszej strony internetowej.
Kroki, aby dodać Skrypty jQuery do WordPress
- Dodaj Skrypty jQuery do WordPress poprzez enqueueing
- Dodaj skrypty do WordPress Admin
- De-Register WordPress ‘ jQuery
- Nie powinieneś rejestrować skryptów przed zapytaniem?
- Dodaj jQuery do WordPress za pomocą wtyczek
Jednym z najprostszych sposobów dodawania skryptów jQuery do WordPress jest proces o nazwie “enqueueing.”
Dla zwykłej strony HTML, użylibyśmy element do dodawania skryptów. WordPress kończy się tym samym, ale użyjemy specjalnych funkcji WP, aby to osiągnąć.
W ten sposób obsługuje wszystkie nasze zależności Dla NAS (dzięki WP!).
Jeśli pracujesz nad tematem, możesz użyć wp_enqueue_script() funkcjonuj w swoim funkcje.php plik.
Oto jak to wygląda:
Funkcja ta przyjmuje pięć argumentów:
- $handle-unikalny uchwyt, którego można użyć do odwołania się do skryptu.
- $src-lokalizacja pliku skryptu.
- $deps-określa tablicę zależności.
- $ver-numer wersji twojego skryptu.
- $in_footer-informuje WordPressa, gdzie umieścić skrypt.
* Coś na temat $in_footer domyślnie Skrypty zostaną załadowane do nagłówka.
Jest to zła praktyka i może drastycznie spowolnić Twoją witrynę. Dlatego, jeśli chcesz umieścić swój skrypt w stopce, upewnij się, że ten parametr jest ustawiony na true.
Dodawanie Skryptów Do Admina WordPress
Możesz także dodawać skrypty do administratora. Użyte funkcje są dokładnie takie same, wystarczy użyć innego Hooka.
Na przykład:
Zamiast podpinać się do wp_enqueue_scripts musimy użyć admin_enqueue_scripts.
To jest to!
Naprawdę.
Jak wyrejestrować WordPress ‘ jQuery
Ale co, jeśli chcesz użyć wersji jQuery innej niż ta, którą WordPress wstępnie ładuje?
Możesz to sprawdzić … ale to pozostawia dwie wersje JQ na stronie.
Aby tego uniknąć, musimy wyrejestrować wersję WP.
Oto jak to wygląda:
To tak proste, jak za pomocą wp_deregister_script (), aby wyrejestrować jQuery WP, a następnie w tym skrypt jQuery, który chcesz dodać.
W powyższym przykładzie użyliśmy hostowanej przez Google biblioteki jQuery, ale oczywiście zastąpisz ją adresem URL własnego skryptu.
Nie powinieneś rejestrować skryptów przed zapytaniem?
Jeśli chcesz załadować skrypty w razie potrzeby, zamiast bezpośrednio ładować je na swoich stronach – możesz zarejestrować skrypt wcześniej.
Na przykład na wp_loaded:
Gdy to zrobisz, możesz poprosić o Skrypty, gdy ich potrzebujesz:
Pamiętaj tylko, aby używać tych samych nazw, aby uniknąć kolizji z innymi skryptami.
Używanie Znaczników Warunkowych
Użyj znaczników warunkowych, aby załadować Skrypty tylko wtedy, gdy jest to konieczne.
Jest to częściej używane w adminie, gdzie chcesz użyć skryptu tylko na określonej stronie (nie na całym adminie). Oszczędza to również przepustowość i czas przetwarzania-co oznacza szybsze ładowanie witryny.
Aby uzyskać więcej informacji, zapoznaj się z dokumentacją skryptów admin enqueue w Kodeksie WordPress.
Dodaj jQuery do WordPress za pomocą wtyczek
Katalog wtyczek WP ma również wiele świetnych wtyczek, których możesz użyć do wstawiania skryptów do postów, stron lub motywów WordPress.
Niektóre dobrze znane przykłady wtyczek JavaScript / jQuery obejmują: zaawansowane Pola niestandardowe, proste niestandardowe CSS i JS, Skrypty n Style i czyszczenie zasobów.
Script Your Own jQuery Story
Uzyskanie lepszego zrozumienia jQuery tylko sprawi, że praca, którą wykonujesz, będzie miała większy wpływ. Niezależnie od tego, czy chodzi o własną stronę internetową, czy projekty klientów.
jQuery jest dobrze znany ze swojej prostoty i jak już (miejmy nadzieję) nauczył się w tym artykule, dodanie prostych skryptów jQuery do WordPress jest łatwe jak ciasto, gdy wiesz, jak.
Tak, jest trochę narzutu w porównaniu do używania vanilla HTML, ale jest też dodatkowa korzyść z zarządzania zależnościami i przejrzystości.
Nie tylko to, stosując małe sztuczki, takie jak omijanie domyślnej zgodności WP jQuery, zaoszczędzisz sobie dużo czasu, wysiłku i nadętego kodu.
