Jak łatwo dodać skrypty jQuery do WordPressa

WordPress towarzyszy nam od ponad dekady. Mimo że platforma słynie z łatwości dostępu, dodanie jQuery do motywów i wtyczek WordPress jest problemem dla wielu programistów.

Wcześniej pisaliśmy przewodniki na temat rozwiązywania problemów, takich jak biały ekran śmierci WordPressa i przełączanie witryny WordPress w tryb konserwacji. W tym artykule wyjaśnimy, jak dodać jQuery do WordPressa, ale zanim zagłębimy się w to, oto krótki przegląd trybu zgodności jQuery.

Tryb zgodności jQuery

Równie ważne jest zrozumienie, jaki jest tryb zgodności jQuery przed rozpoczęciem korzystania z jQuery w WordPress.

jQuery w WordPressie jest wstępnie załadowane i możesz go użyć w swoim kodzie. Chodzi jednak o to, że jest on również wyposażony w tryb zgodności jQuery, który pozwala uniknąć konfliktów z innymi bibliotekami różnych języków programowania.

Chociaż może to brzmieć całkiem normalnie, istnieje niewielki problem z tym mechanizmem obronnym. Używając jQuery w WordPressie, będziesz musiał użyć terminu „ jQuery ” zamiast naszego starego dobrego znaku $ .

Spójrz na ten przykład.

/* Zwykłe jQuery */

$('.hideable').on('klik', function() {

$(to).ukryj();

})

/* Tryb zgodności */

jQuery('.hideable').on('klik', function() {

jQuery(to).ukryj();

})

Teraz problem nie jest duży, ale raczej nie jest zbyt przyjemny. Po pierwsze, za każdym razem musisz napisać „ jQuery ”, co zajmuje sporo czasu, a po drugie, sprawia to, że Twój skrypt wygląda na zagracony i trudniejszy do odczytania.

Ale nie martw się, dzięki kilku modyfikacjom możesz obejść problem ze zgodnością i używać starego, dobrego znaku $.

Dla porównania, $ jest aliasem do jQuery() i uchwytem do funkcji.

Oto jak wygląda podstawowa struktura.

$(selektor).akcja()

Tutaj znak $ odnosi się do jQuery, $(selector) znajduje elementy HTML, a action() definiuje akcję, która ma być wykonana na tych elementach.

Oto kilka technik, które możesz wykorzystać, aby obejść problem ze zgodnością jQuery.

Jak poradzić sobie z problemem kompatybilności jQuery?

1. Wejdź w tryb „jQuery Stealth”
2. Wejdź w tryb „Bez konfliktu”

Wejdź w tryb ukrycia jQuery

Źródło obrazu: Podfeet

Pierwszym i najczęstszym sposobem na obejście problemu ze zgodnością jest wejście w tryb ukrycia (ukrywanie się przy użyciu kodu).

Załóżmy, że próbujesz załadować skrypt w stopce. Zapakuj kod w funkcję anonimową, która ostatecznie zmapuje jQuery do $.

Zapoznaj się z tym przykładem

(funkcja($) {

$('.hideable').on('klik', function() {

$(to).ukryj();

})

})( jQuery );

Teraz, jeśli chcesz dodać skrypt w nagłówku, zapakuj wszystko w funkcję gotową do dokumentu i po drodze przekaż $.

Oto przykład.

jQuery(dokument).gotowy(funkcja($) {

$('.hideable').on('klik', function() {

$(to).ukryj();

})

});

Wejdź w tryb bez konfliktu

Teraz ten jest dość prostym sposobem na obejście problemów ze zgodnością. Wszystko, co musisz zrobić, to zadeklarować ten wiersz kodu na górze skryptu i możesz użyć $j zamiast domyślnego znaku $.

var $j = jQuery.noConflict();

Teraz, gdy już wiesz, jak korzystać z jQuery w WordPressie, przejdźmy do naszego głównego tematu – jak dodać skrypty jQuery do swojej witryny WordPress.

Jak dodać jQuery do witryn WordPress

Źródło obrazu: fl1digital.com

Dodanie jQuery do WordPressa można łatwo zrobić za pomocą procesu o nazwie Enqueueing .

Używamy elementu <link> do dodawania skryptów w zwykłych witrynach HTML. To samo możemy zrobić w WordPressie. Jednak musimy zagrać w niektóre specjalne funkcje WordPressa, aby się do tego dostać. Zauważ, że zrobienie tego obsłuży wszystkie zależności za Ciebie.

Załóżmy, że pracujesz nad motywem WordPress. Użyj tej funkcji w pliku functions.php .

wp_enqueue_script()

Oto jak to wygląda.

funkcja moje_skrypty_motywu() {

wp_enqueue_script( 'mój-świetny-skrypt', get_template_directory_uri() . '/js/mój-świetny-skrypt.js', array( 'jquery' ), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'moje_skrypty_motywu' );

Oto pięć argumentów, które przyjęłaby ta funkcja.

1. $handle: unikalny uchwyt, którego można użyć do odwoływania się do skryptu
2. $src: lokalizacja twojego pliku skryptu
3. $deps: używane do określenia tablicy zależności
4. $ver: numer wersji skryptu
5. $in_footer: aby poinstruować WordPressa, gdzie umieścić skrypt

Domyślnie skrypt byłby ładowany do nagłówka Twojej witryny, co nie jest zalecane, ponieważ znacząco wpływa na szybkość Twojej witryny.

Powiązane: Twój ostateczny przewodnik po tym, jak edytować WordPress – HTML, CSS, PHP, JavaScript

Jak dodać skrypty jQuery do WordPress Admin

Możesz dodać jQuery do administratora WordPressa za pomocą tych samych funkcji. Wszystko, co musisz tutaj zrobić, to użyć innego haka.

Oto przykład

funkcja moje_skrypty_admin() {

wp_enqueue_script( 'mój-świetny-skrypt', katalog_wtyczki_url( __FILE__) . '/js/mój-świetny-skrypt.js', array( 'jquery' ), '1.0.0', prawda );

}

add_action( 'admin_enqueue_scripts', 'moje_skrypty_admin' );

Teraz po prostu zamień wp_enqueue_scripts na admin_enqueue_scripts i gotowe.

Jak wyrejestrować jQuery w WordPress

Musisz wyrejestrować jQuery WordPressa, jeśli chcesz używać innej wersji jQuery niż wstępnie załadowane.

Oto przykład, jak możesz wyrejestrować jQuery w WordPress.

// dołącz niestandardowe jQuery

funkcja shapeSpace_include_custom_jquery() {

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 proste. Wszystko, co musisz zrobić, to wyrejestrować jQuery WordPressa za pomocą wp_deregister_script() i dołączyć żądany skrypt.

Należy pamiętać, że w tym przykładzie dodaliśmy bibliotekę jQuery hostowaną przez Google. Musisz zamienić go z własnym adresem URL skryptu.

Czy należy zarejestrować skrypty przed dodaniem do kolejki?

Możesz zarejestrować skrypt na wcześniejszym etapie procesu, jeśli chcesz, aby ładował się tylko wtedy, gdy jest to potrzebne na Twoich stronach.

Oto przykład

add_action( 'wp_loaded', 'register_all_scripts' );

funkcja register_all_scripts()

{

wp_register_script(…);

}

Gdy już to zrobisz, umieść skrypty w kolejce, kiedy ich potrzebujesz. Oto jak.

add_action( 'wp_enqueue_scripts', 'enqueue_front_scripts' );

add_action( 'admin_enqueue_scripts', 'enqueue_back_scripts' );

Używanie tagów warunkowych

Możesz także użyć tagów warunkowych, aby wczytać jQuery do WordPressa tylko wtedy, gdy jest to potrzebne.

Mimo że ta metoda jest zwykle używana w administracji, gdzie chcesz ją tylko na określonych stronach, oszczędza dużo przepustowości i czasu przetwarzania, ostatecznie zwiększając prędkość ładowania witryny.

Więcej informacji na temat korzystania z dodatkowych tagów można znaleźć w dokumentacji skryptów admin enqueuer WordPressa.

Jak dodać jQuery do WordPress za pomocą wtyczek

WordPress może pochwalić się katalogiem wtyczek zawierającym ponad 45000 wtyczek. Możesz znaleźć wtyczkę do dowolnej funkcjonalności na swojej stronie WordPress.

To samo dotyczy dodawania jQuery na stronach WordPress, motywach i postach itp.

Oto niektóre z najpopularniejszych wtyczek do dodawania jQuery do WordPressa.

• Zaawansowane pola niestandardowe
• Proste niestandardowe CSS i JS
• Skrypty N Style
• Czyszczenie zasobów

Wniosek

Więc proszę. Teraz wiesz, jak dodawać i używać WordPress jQuery.

Zastosowanie tej wiedzy w swoich projektach pomogłoby Ci w tworzeniu świetnych projektów. Możesz również przeczytać nasze najlepsze przewodniki na tematy takie jak JPG vs. JPEG i WordPress White Label, aby poszerzyć swoją wiedzę.