WordPress jest częścią naszego życia od ponad 16 lat, ale metoda dodawania skryptów do motywów i wtyczek pozostaje tajemnicą dla wielu programistów. W tym artykule w końcu położyliśmy kres zamieszaniu.
Ponieważ jest to jedna z najczęściej używanych bibliotek JavaScript, dzisiaj omawiamy, jak dodać skrypty jQuery do swoich motywów lub WordPress wtyczki.
Informacje o trybie zgodności z jQuery
Zanim zaczniesz dodawać skrypty do WordPress, ważne jest, aby zrozumieć tryb zgodności jQuery.
Jak zapewne wiesz, WordPress zawiera jQuery już dołączone.
Wersja jQuery na WordPress ma również „ tryb zgodności Który jest mechanizmem pozwalającym uniknąć konfliktów z innymi bibliotekami javascript.
Część tego mechanizmu obrony oznacza, że ty nie mogę użyj $podpisz się bezpośrednio, tak jak w przypadku innych projektów.
Zamiast tego, pisząc kod jQuery dla WordPress, powinieneś użyć jQuery.
Oto przykład tego kodu:
/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})
Problem polega na tym, że pisanie jQuery milion razy trwa dłużej, utrudnia czytanie i może obciążyć skrypt.
Dobra wiadomość?
Po kilku modyfikacjach możesz ponownie użyć naszego uroczego małego symbolu dolara.
Nawiasem mówiąc, jeśli tak nowość w jQuery , znak $ to tylko alias dla jQuery (), a następnie alias dla funkcji.
Podstawowa struktura wygląda następująco: $(selector).action(). Znak dolara definiuje jQuery… „(selector)” wysyła zapytanie lub wyszukuje elementy HTML… a na koniec „akcja jQuery ()” to akcja, która ma zostać wykonana na elementach.
Wróć do tego, jak możemy obejść nasz problem ze zgodnością… oto kilka realnych opcji:
1. Wprowadź tryb ukrycia jQuery
Pierwszym sposobem na obejście trybu zgodności jest wkradnięcie się do kodu.
Na przykład, jeśli załadujesz skrypt w stopce, możesz owinąć swój kod anonimową funkcją, która zmapuje jQuery $.
Jak w poniższym przykładzie:
( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);
Jeśli chcesz dodać swój skrypt w nagłówku (którego powinieneś unikać, jeśli to możliwe, więcej na ten temat poniżej), możesz zawinąć wszystko w funkcję gotową do dokumentu, przekazując $po drodze.
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2. Wejdź w tryb „Brak konfliktu”
Innym prostym sposobem uniknięcia literowania jQuery jest przełączenie się w tryb „Bez konfliktów” i użyj innego skrótu.
W takim przypadku: $jzamiast domyślnego $.
Wszystko, co musisz zrobić, to zadeklarować to u góry skryptu:var $j = jQuery.noConflict();
Dobra, teraz wiesz więcej o pisaniu poprawnego kodu jQuery dla WordPressa, dodajmy go do naszego Witryna internetowa.
Jak dodać skrypty jQuery do WordPress
Jednym z najłatwiejszych sposobów dodawania skryptów jQuery do WordPress jest proces zwany „ustawieniem” linia oczekiwania ".
Dla a Witryna internetowa Klasyczny HTML, użyjemy <link> element do dodania skryptów. WordPress robi to samo, ale w tym celu użyjemy specjalnych funkcji WP.
W ten sposób zarządza wszystkimi naszymi zależnościami (dzięki WP!).
Jeśli pracujesz nad motywem, możesz użyć tej funkcji wp_enqueue_script() w Twoim functions.php plik.
Oto jak to wygląda:
function my_theme_scripts () {
wp_enqueue_script('mon-grand-script', get_template_directory_uri(). '/js/my-great-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
Ta funkcja trwa pięć argumentów:
- $ handle - unikalny uchwyt, którego możesz użyć do odniesienia się do skryptu.
- $src – lokalizacja pliku skryptu.
- $ deps - określa tablicę zależności.
- $ ver - numer wersji twojego skryptu.
- $ in_footer - pozwala WordPress wiedzieć, gdzie umieścić skrypt.
* Należy zwrócić uwagę na jedną rzecz $in_footer oznacza, że domyślnie skrypty będą ładowane w nagłówku.
To zła praktyka i może znacznie spowolnić Twoją witrynę. Dlatego jeśli chcesz umieścić swój skrypt w stopce, upewnij się, że ten parametr ma wartość true.
Dodawanie skryptów do administratora WordPress
Możesz także dodać skrypty do administratora. Używane funkcje są dokładnie takie same, wystarczy użyć innego zaczepu.
Na przykład:
funkcja my_admin_scripts () {
wp_enqueue_script ('mój-wielki-skrypt', plugin_dir_url (__FILE__). „/js/my-great-script.js”, tablica („jquery”), „1.0.0”, prawda);
}
add_action („admin_enqueue_scripts”, „my_admin_scripts”);
Zamiast się logować, wp_enqueue_scriptsmusimy użyć admin_enqueue_scripts.
Jak wypisać się z jQuery z WordPress
Ale co, jeśli chcesz użyć innej wersji jQuery niż ta wstępnie załadowana przez WordPress?
Możesz go ustawić w kolejce… ale to oznacza, że na stronie będą dwie wersje jQuery.
Aby temu zapobiec, musimy wyrejestrować wersję WP.
Oto jak to wygląda:
// zawiera niestandardowe jQuery
shapeSpace_include_custom_jquery () funkcja {
wp_deregister_script ('jquery');
wp_enqueue_script(
'jquery',
'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js',
array(),
null,
true);
}
add_action ('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');To tak proste, jak używanie wp_deregister_script () dla wyrejestrować jQuery z WP, a następnie skrypt jQuery, który chcesz dodać.
W powyższym przykładzie użyliśmy Biblioteka jQuery hostowana przez Google , ale oczywiście zastąpisz go adresem URL własnego skryptu.
Nie powinieneś zapisywać skryptów przed umieszczeniem ich w kolejce?
Jeśli chcesz ładować swoje skrypty w razie potrzeby, zamiast ładować je bezpośrednio na swoje strony - możesz zapisać skrypt wcześniej.
Na przykład na wp_loaded:
add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}
Gdy to zrobisz, możesz umieścić skrypty w kolejce, kiedy ich potrzebujesz:
| add_action („wp_enqueue_scripts”, „enqueue_front_scripts”); |
| add_action („admin_enqueue_scripts”, „enqueue_back_scripts”); |
Pamiętaj, aby używać tych samych nazw, aby uniknąć kolizji z innymi skryptami.
Używanie tagów warunkowych
Używaj tagów warunkowych, aby ładować skrypty tylko wtedy, gdy są potrzebne.
Jest to używane częściej w panelu administracyjnym, gdzie chcesz użyć skryptu tylko na określonej stronie (a nie w całym panelu administracyjnym). Oszczędza również przepustowość i czas przetwarzania, co oznacza szybsze ładowanie Witryna internetowa.
Spójrz na dokumentacja skryptów kolejkowania w Kodeksie WordPress, aby uzyskać więcej informacji.
Dodaj jQuery do WordPress za pomocą wtyczek
Katalog wtyczek WP zawiera również wiele interesujących wtyczek, których możesz użyć do wstawienia skryptów do swoich postów, stron lub Motywy WordPress.
Oto kilka przykładów dobrze znanych wtyczek JavaScript / jQuery: zaawansowane pola niestandardowe , Proste niestandardowe CSS i JS , style skryptów n et czyszczenie zasobów.
Stwórz własny projekt jQuery
Lepsze zrozumienie jQuery sprawi, że Twoja praca będzie miała większy wpływ. Niezależnie od tego, czy chodzi o własną stronę internetową, czy o projekty klientów.
jQuery jest dobrze znany ze swojej prostoty i jak (miejmy nadzieję) dowiedziałeś się z tego artykułu, dodawanie prostych skryptów jQuery do WordPressa jest dziecinnie proste, gdy wiesz, jak to zrobić.
Tak, istnieje trochę narzutów w porównaniu z używaniem zwykłego HTML, ale jest też dodatkowa korzyść w postaci zarządzania zależnościami i przejrzystości.
Co więcej, stosując małe sztuczki, takie jak obejście domyślnej kompatybilności jQuery WP, zaoszczędzisz sobie dużo czasu, wysiłku i nadęty kod.
