Przejdź do głównej treści

Jak poprawnie dodać kod jQuery na WordPress

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 701.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

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, dziś dyskutujemy, jak dodać skrypty jQuery do motywów lub wtyczek WordPress.

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:

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

( 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();

OK, teraz, gdy wiesz więcej o pisaniu prawidłowego kodu jQuery dla WordPress, dodajmy go do naszej strony internetowej.

Jak dodać skrypty jQuery do WordPress

Jednym z najłatwiejszych sposobów dodawania skryptów jQuery do WordPress jest proces zwany „ustawieniem” linia oczekiwania ".

W przypadku klasycznej witryny HTML używalibyśmy rozszerzenia  <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:

  1. $ handle - unikalny uchwyt, którego możesz użyć do odniesienia się do skryptu.
  2. $ src - lokalizacja pliku skryptu.
  3. $ deps - określa tablicę zależności.
  4. $ ver - numer wersji twojego skryptu.
  5. $ 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.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

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 częściej używane w administracji, gdzie chcesz użyć skryptu tylko na określonej stronie (a nie w całej administracji). Oszczędza również przepustowość i czas przetwarzania, co oznacza szybsze ładowanie witryny.

Spójrz na dokumentacja skryptów kolejkowania  w Kodeksie WordPress, aby uzyskać więcej informacji.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Dodaj jQuery do WordPress za pomocą wtyczek

Katalog wtyczek WP zawiera również wiele interesujących wtyczek, których można używać do wstawiania skryptów w publikacjach, stronach lub motywach 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.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
2 akcji
udział2
ćwierkanie
Enregistrer