Jak dodawać i używać skryptów jQuery w WordPress

Interaktywne elementy strony, takie jak dynamiczne paski wyszukiwania, zaawansowane filtry produktów i suwaki, mogą uczynić witrynę bardziej przyjazną dla użytkownika i bardziej atrakcyjną. Ale nie można utworzyć żadnej z tych funkcji bez użycia JavaScript lub instalowania wtyczek WordPress.

Na szczęście możesz łatwo tworzyć elementy projektu JavaScript za pomocą jQuery w WordPress. Możesz to zrobić ręcznie lub użyć wtyczki, aby przyspieszyć ten proces.

W tym poście przedstawimy Ci jQuery i omówimy, dlaczego możesz chcieć go używać. Następnie pokażemy Ci dwa sposoby dodawania niestandardowych skryptów jQuery do witryny WordPress i przejrzymy często zadawane pytania.

Co to jest jQuery? (i dlaczego możesz chcieć go użyć)

Zanim nauczysz się dodawać skrypty jQuery w WordPressie, będziesz potrzebować podstawowej wiedzy na temat samego jQuery.

Krótko mówiąc, jQuery to lekka biblioteka JavaScript typu open source, która upraszcza sposób pisania i używania tego języka kodowania.

Umożliwia łatwe modyfikowanie i ulepszanie motywów i wtyczek WordPress za pomocą JavaScript. Ta funkcja może być niezwykle pomocna, ponieważ JavaScript jest niezbędny dla wielu funkcji.

Na przykład potrzebujesz JavaScript dla Ajax, obsługi zdarzeń i przekrojowej/manipulacji DOM. W szczególności funkcjonalność Ajax jest praktyczna i popularna. Twórcy stron internetowych używają go do tworzenia natychmiastowego ładowania wyszukiwania i zaawansowanego filtrowania produktów e-commerce.

Działanie użytkownika, takie jak kliknięcie lub wyszukiwanie, często uruchamia te funkcje JavaScript. Potrzebujesz również jQuery do tworzenia dodatkowych funkcji po stronie klienta, takich jak suwaki, wyskakujące okienka lightbox i inne.

Czy jQuery jest domyślnie zawarte w WordPressie?

jQuery jest tak przydatnym i popularnym zasobem, który jest domyślnie dołączany do instalacji WordPress. Trzeba tylko wiedzieć, jak go używać! W następnych sekcjach nauczymy Cię, jak to zrobić.

Co zrobić przed dodaniem skryptów jQuery do WordPressa

Wkrótce wyjaśnimy, jak możesz dodawać skrypty jQuery w WordPress. Ale najpierw powinieneś zrobić kilka rzeczy, aby zabezpieczyć swoją witrynę przed próbą modyfikacji jej podstawowych plików.

Co najważniejsze, zawsze zaleca się utworzenie kopii zapasowej witryny. To dlatego, że nawet najmniejszy błąd w kodowaniu krytycznych plików witryny może wyrządzić poważne szkody. Tworząc kopie zapasowe, możesz łatwo przywrócić witrynę do poprzedniego stanu w sytuacji awaryjnej.

Jeśli nie masz pewności, jak wykonać kopię zapasową witryny WordPress lub po prostu szukasz narzędzia usprawniającego ten proces, Jetpack VaultPress Backup to doskonała opcja.

Jetpack VaultPress Backup automatycznie zapisuje każdą zmianę w Twojej witrynie. Następnie możesz użyć przywracania jednym kliknięciem, aby szybko odzyskać zawartość. Jetpack pozwala nawet przywrócić witrynę z aplikacji mobilnej Jetpack. Ponadto, jeśli napotkasz jakiekolwiek problemy, możesz uzyskać pomoc od najlepszej w swojej klasie obsługi klienta — inżynierów szczęścia!

Aby dodatkowo chronić swoją witrynę, warto również utworzyć witrynę pomostową WordPress. Następnie możesz przetestować zmiany, zanim je opublikujesz.

Jak dodać niestandardowe skrypty jQuery do WordPress

Teraz, gdy wiesz więcej o jQuery i przygotowujesz witrynę do poważnych zmian, omówmy dwa sposoby dodawania niestandardowych skryptów jQuery do WordPress!

Metoda 1: Dodaj ręcznie jQuery

Najpierw pokażemy, jak ręcznie dodać jQuery do WordPress. Ta metoda może być dla Ciebie, jeśli masz doświadczenie w programowaniu i chcesz mieć pełną kontrolę nad procesem.

Warto użyć motywu potomnego, aby wszelkie wprowadzone zmiany nie zostały nadpisane podczas aktualizacji motywu.

Krok 1: Przejdź do trybu zgodności

Jedną z największych zalet jQuery jest to, że umożliwia korzystanie ze znanych skrótów podczas kodowania. Przede wszystkim możesz użyć symbolu $ do reprezentowania jQuery. Może to zaoszczędzić dużo czasu, ale niektóre inne biblioteki używają tego skrótu do reprezentowania czegoś innego.

Dlatego będziesz chciał przejść do trybu zgodności i utworzyć unikalny alias dla jQuery. W ten sposób unikniesz konfliktów z innymi bibliotekami.

Możesz to zrobić za pomocą następującego kodu:

 <!-- Putting jQuery into no-conflict mode. --> http://prototype.js http://jquery.js <script> var $j = jQuery.noConflict(); // $j is now an alias to the jQuery function; creating the new alias is optional. $j(document).ready(function() {    $j( "div" ).hide(); }); // The $ variable now has the prototype meaning, which is a shortcut for // document.getElementById(). mainDiv below is a DOM element, not a jQuery object. window.onload = function() {    var mainDiv = $( "main" ); } </script>

Gdy wykonasz powyższy skrypt, będziesz mógł użyć $j jako skrótu zamiast $. Alternatywnie możesz użyć następujących:

 <!-- Loading jQuery before other libraries. --> http://jquery.js http://prototype.js <script> // Use full jQuery function name to reference jQuery. jQuery( document ).ready(function() {    jQuery( "div" ).hide(); }); // Use the $ variable as defined in prototype.js window.onload = function() {    var mainDiv = $( "main" ); }; </script>

Ten fragment kodu po prostu zapobiegnie wszelkim konfliktom. Mimo to będziesz musiał użyć pełnej nazwy, jQuery, zamiast skrótu.

Krok 2: Utwórz plik skryptu

Teraz, gdy masz już potrzebny kod, możesz przystąpić do tworzenia pliku skryptu. Utwórz plik i nadaj mu opisową nazwę, na przykład „my_new_script_file.js”. Upewnij się, że używasz rozszerzenia .js i dodaj preferowany fragment kodu zgodności na górze.

W tym momencie będziesz musiał uzyskać dostęp i edytować pliki motywów, które mają swoje unikalne foldery w plikach Twojej witryny.

Zacznij od połączenia się ze swoją witryną za pomocą menedżera plików lub darmowego klienta FTP (File Transfer Protocol), takiego jak FileZilla.

Następnie otwórz katalog główny. Powinno to mieć nazwę public_html lub po prostu public . Alternatywnie może to być po prostu nazwa Twojej witryny.

Następnie zlokalizuj folder aktywnego motywu i utwórz nowy podfolder. Nazwij to /js/ .  

Na koniec dodaj nowy plik skryptu do tego podfolderu. Jego zawartość będzie się różnić w zależności od funkcji, którą próbujesz zaimplementować.

Krok 3: Dodaj skrypt jQuery do swojego pliku functions.php

Następnie musisz zlokalizować plik functions.php motywu. Zarówno motyw nadrzędny, jak i podrzędny powinny mieć jeden. Tutaj odbywają się wszystkie ręczne dostosowania.

Ponieważ JavaScript wymaga kolejkowania, musisz użyć funkcji wp_enqueue_script(). Twój kod może wyglądać mniej więcej tak:

 function my_theme_scripts() {    wp_enqueue_script( 'my_new_script_file', get_template_directory_uri() . '/js/my_new_script_file.js', array( 'jquery' ), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Pamiętaj, aby zastąpić nazwę unikalnego pliku skryptu i dodać go do functions.php . Spowoduje to, że plik motywu użyje pliku skryptu utworzonego w poprzednim kroku.

Metoda 2: Dodaj jQuery za pomocą wtyczki WordPress

Jak właśnie widzieliśmy, ręczne dodawanie jQuery może być czasochłonne i nieco ryzykowne, zwłaszcza jeśli nie jesteś zaznajomiony z edycją kodu w WordPress. Teraz pokażemy Ci, jak dodać jQuery za pomocą wtyczki WordPress.

Krok 1: Zainstaluj wtyczkę jQuery

Najpierw musisz wybrać wtyczkę jQuery. Dwie najpopularniejsze opcje to Simple Custom CSS i JS oraz Advanced Custom Fields.

W tym samouczku użyjemy zaawansowanych pól niestandardowych. To narzędzie pomaga tworzyć atrakcyjne, interaktywne funkcje z niestandardowymi typami bloków.

Darmowa wersja ma wiele przydatnych typów bloków do dodawania elementów, takich jak grupy przycisków, Mapy Google, próbniki kolorów, oEmbed i wiele innych. Jeśli jednak chcesz mieć wszystkie 30 niestandardowych bloków, musisz przejść na płatną wersję Advanced Custom Fields.

Po wybraniu preferowanego planu po prostu zainstaluj i aktywuj wtyczkę w zwykły sposób. Dodaj dowolne klucze licencyjne w ustawieniach wtyczki.

Krok 2: Utwórz nowe pole niestandardowe

Po zainstalowaniu i aktywacji wtyczki przejdź do Pola niestandardowe → Dodaj nowe .

Tutaj musisz utworzyć pierwszą grupę pól. Nadaj mu tytuł obok opcji Dodaj nową grupę pól . Następnie kliknij Zapisz zmiany .

Teraz możesz rozpocząć edycję nowego pola. Możesz rozwinąć opcje, klikając Edytuj pod etykietą.

Najpierw otwórz menu rozwijane Typ pola i wybierz jeden.

Następnie wypełnij Etykietę pola , Nazwę pola itp. Kontynuując przewijanie w dół, możesz zmodyfikować dodatkowe ustawienia, takie jak Reguły dotyczące lokalizacji i Prezentacja .

W zależności od wybranej lokalizacji będziesz mógł tam zobaczyć swój nowy niestandardowy blok. W Edytorze bloku można zidentyfikować blok za pomocą etykiety wyznaczonej w polu Etykieta pola .

Kiedy skończysz, kliknij Zapisz zmiany . Możesz wybrać przycisk + Dodaj pole i powtórzyć ten proces. Następnie po prostu przejdź do jednej z lokalizacji, które wybrałeś dla swojego pola i zacznij je dostosowywać!

Jak odroczyć jQuery w WordPress

Jak omówiliśmy, istnieje wiele powodów, aby używać JavaScript i jQuery w WordPress. W rzeczywistości są one kluczowe dla niektórych funkcji interaktywnych, które wielu użytkowników uważa za oczywiste.

Ale wadą jest to, że te wyrafinowane elementy po stronie klienta mogą spowolnić Twoją witrynę. Możesz więc chcieć automatycznie odroczyć JavaScript (a co za tym idzie, jQuery) podczas ładowania witryny WordPress.

Odkładając JavaScript, wszystkie główne elementy Twojej witryny zostaną załadowane przed mniej krytycznymi funkcjami JavaScript. Oczywiście odwiedzający Twoją witrynę prawdopodobnie tego nie zauważą, ale prawdopodobnie poprawi to ich komfort użytkowania (UX), ponieważ strona będzie się ładować szybciej.

Jeśli chcesz automatycznie odroczyć jQuery na swojej stronie internetowej, możesz do tego użyć Jetpack Boost.

Ta wtyczka może radykalnie poprawić ogólną wydajność Twojej witryny. W rezultacie będziesz w stanie zachować wszystkie preferowane funkcje JavaScript bez obniżania szybkości strony.

Oprócz odroczenia nieistotnego kodu JavaScript, Jetpack Boost może zoptymalizować ładowanie CSS i zastosować leniwe ładowanie obrazu (między innymi optymalizacje wydajności). Korzystając z tego narzędzia, możesz poprawić wyniki Core Web Vitals i zwiększyć widoczność swojej witryny w wynikach wyszukiwania.

Często zadawane pytania dotyczące jQuery w WordPress

Mamy nadzieję, że wyjaśniliśmy większość Twoich wątpliwości dotyczących jQuery w WordPress. Jeśli jednak coś przeoczyliśmy, oto kilka najczęściej zadawanych pytań!

Czy możesz zmienić wersję jQuery używaną w WordPress?

Czasami motywy i wtyczki mogą zastępować lub dodawać wersje jQuery do Twojej witryny. Dlatego ważne jest, aby Twoja wersja była zawsze aktualna. Możesz to łatwo zrobić za pomocą wtyczki, takiej jak jQuery Updater lub Kontrola wersji dla jQuery.

Gdzie mogę sprawdzić wersję jQuery na mojej stronie WordPress?

Zwykle możesz sprawdzić swoją wersję jQuery w przeglądarce. W przeglądarce Google Chrome po prostu przejdź do swojej witryny w interfejsie użytkownika. Następnie przejdź do Widok → Deweloper → Konsola JavaScript.

Wpisz jQuery.fn.jquery, a konsola powinna zwrócić aktualną wersję Twojej witryny.

Czy możesz całkowicie usunąć jQuery z WordPress?

Krótka odpowiedź brzmi: tak. Jeśli odkryjesz, że używanie JavaScript w Twojej witrynie negatywnie wpływa na jej wydajność, możesz usunąć lub „wyrejestrować” jQuery.

Aby to zrobić, po prostu dodaj następujący kod do swojego pliku functions.php :

 // Remove jQuery function vpsb_remove_jquery() {    if (!is_admin()) {        wp_deregister_script('jquery');        wp_register_script('jquery', false);    } } add_action('init', 'vpsb_remove_jquery');

Pamiętaj, że powinieneś całkowicie usunąć jQuery ze swojej witryny tylko wtedy, gdy drastycznie spowalnia ona Twoje strony. Prawdopodobnie tak się jednak nie stanie, ponieważ jQuery już optymalizuje cięższy kod JavaScript.

Jeśli prędkość Twojej witryny pogorszyła się po dodaniu jQuery, lepszą alternatywą byłoby skorzystanie z rozwiązania takiego jak Jetpack Boost. Może odroczyć nieistotny JavaScript.

Czy możesz zastąpić jQuery waniliowym JavaScriptem?

Możliwe jest zastąpienie jQuery waniliowym JavaScriptem. Ale może to okazać się trudne, jeśli nie masz dużego doświadczenia w programowaniu. Dlatego powinieneś rozważyć zatrudnienie programisty, jeśli musisz to zrobić.

Jeszcze raz warto zauważyć, że zastępowanie jQuery przez waniliowy JavaScript jest prawdopodobnie niepotrzebne, ponieważ jQuery już zapewnia optymalny kod JavaScript. W większości przypadków niewielki wpływ jQuery na wydajność jest zwykle wart zachodu, a odroczenie jest zazwyczaj lepszą opcją.

Jeśli zdecydujesz się pójść tą drogą, warto zapoznać się z tym przewodnikiem po dodaniu JavaScript do WordPress. Może ci pomóc w tym procesie.

Korzystanie z jQuery w WordPressie

Używanie złożonego JavaScript do angażowania funkcji w Twojej witrynie może drastycznie poprawić UX i przyspieszyć Twoje cele. Niestety, możesz nie mieć czasu lub umiejętności programistycznych, aby stworzyć te interaktywne elementy od podstaw. Dobrą wiadomością jest to, że możesz użyć skryptów jQuery, aby ułatwić ten proces.

Podsumowując, istnieją dwa sposoby dodania jQuery do WordPress. Po pierwsze, możesz to zrobić ręcznie, przechodząc do trybu zgodności i tworząc plik skryptu. Następnie dodaj nowy skrypt do pliku functions.php . Alternatywnie możesz użyć wtyczki, takiej jak Advanced Custom Fields, aby przyspieszyć proces i wyeliminować potrzebę ręcznego kodowania.

Kiedy używasz jQuery do dodawania wyrafinowanych elementów projektu do swojej witryny, możesz poprawić UX i zaimponować odwiedzającym. Jednak wiele interaktywnych funkcji może negatywnie wpłynąć na wydajność Twoich stron internetowych. Na szczęście Jetpack Boost może pomóc zoptymalizować szybkość Twojej witryny.