Jak dodać JavaScript do strony WordPress (+ wskazówki debugowania)

Opublikowany: 2025-06-20

Czy chcesz dodać JavaScript do strony WordPress, ale myślisz, że robisz to źle, czy nawet nie wiesz, od czego zacząć? A może już to zrobiłeś i widzisz komunikaty o błędach i/lub problemy z wydajnością, których nie wiesz, jak rozwiązywać problemy?

Tak czy inaczej, jesteś we właściwym miejscu.

Ten post będzie pierwszym rzędem, całkowitą edukacją na temat wszystkich rzeczy JavaScript i WordPress. Na koniec dowiesz się wszystkiego, czego potrzebujesz, dlaczego używanie JavaScript w WordPress jest dobrym pomysłem, jak dodać go do swoich stron i co robić, gdy nie działa poprawnie lub spowalnia witrynę.

Tl; dr

Czy jesteś zbyt zajęty, aby przeczytać cały post i chciałbyś szybkie podsumowanie? Ok, ale tylko dlatego, że to ty.

Dodanie JavaScript do stron WordPress może uczynić twoją witrynę bardziej interaktywną i umożliwia zintegrowanie jej z wieloma narzędziami innych firm. Jednocześnie wymaga starannego rozważenia, aby uniknąć złamania witryny.

Podejmij środki ostrożności, takie jak korzystanie z JavaScript z zaufanych źródeł, tworzenie kopii zapasowych witryny, korzystanie z motywu dziecka i najpierw testowanie zmian w środowisku inscenizacji lub programistycznym. Ponadto miej oko na wpływ wydajności dowolnego kodu dodanego do swojej witryny.

Istnieje kilka sposobów dodawania JavaScript do Twojej witryny - dzięki zaczepom WordPress, funkcjom. Php , osobnych plikach, edytora WordPress lub z wtyczkami.

Rozwiązywanie problemów za pomocą narzędzi do tworzenia przeglądarki, badanie konfliktów wtyczek i motywów oraz tryb debugowania WordPress.

Popraw wydajność JavaScript, łącząc, minimalizując, odkładając lub opóźniając skrypty. Możesz także zautomatyzować proces za pomocą wtyczki takiej jak WP Rocket.

Po co dodawać JavaScript do swoich stron WordPress?

JavaScript, często skrócone dla JS, jest popularnym językiem programowania. Jest to jedna z trzech głównych technologii używanych do tworzenia stron internetowych. Pozostałe dwa to HTML, który definiuje strukturę i treść strony, a także CSS, który jest odpowiedzialny za styl.

JavaScript to język po stronie klienta, co oznacza, że ​​działa w przeglądarce, a nie na serwerze. Z tego powodu możesz użyć go do modyfikacji i aktualizacji istniejących CSS i HTML nawet po zakończeniu ładowania strony.

Właśnie dlatego jednym z jego głównych zastosowań jest uczynienie stron internetowych bardziej interaktywnymi. Na przykład JavaScript często zasila elementy stron, takie jak:

  • Menu zjeżdżalni
  • Wyskakujące okienka
  • Animacje

Edytor bloków WordPress jest również napisany głównie w JavaScript.

Edytor bloków WordPress oparty na JavaScript

Oprócz interaktywności JavaScript jest również wspólnym sposobem na zintegrowanie usług stron trzecich z twoją witryną, takich jak śledzenie skryptów do analizy internetowej. Inne przykłady obejmują:

  • Czat na żywo
  • E-mail do formularzy opt-in i kontaktu
  • Wbudowane filmy
  • Interaktywne mapy
  • Karmy w mediach społecznościowych

Ważne rozważania

Jeśli zostanie wykonane nieprawidłowo, dodanie JavaScript do twoich stron WordPress może prowadzić do błędów i problemów. Podejmowanie środków ostrożności od samego początku może zaoszczędzić czas i frustrację później:

  • Użyj tylko JavaScript z zaufanych źródeł, aby zapewnić bezpieczeństwo i stabilne witrynie.
  • Przed wprowadzeniem zmian na wypadek, gdyby coś pójdzie nie tak.
  • Po dodaniu JavaScript bezpośrednio do plików motywów zawsze używaj motywu dziecięcego. Jeśli zmodyfikujesz główny motyw, stracisz swoje zmiany po jego aktualizacji.
  • Przed zastosowaniem ich do witryny na żywo testuj zmiany w środowisku inscenizacji lub programistycznym.
  • JavaScript dodaje dodatkowy kod do twoich stron WordPress, co może je spowolnić. Śledź wydajność, wprowadzając nowe funkcje na witrynie.

6 sposobów dodania JavaScript do strony w WordPress

Wystarczy teoria. Poniżej pokazujemy sześć sposobów dodawania JavaScript do WordPress, od większości do najmniej technicznych.

1. Użyj haczyków i funkcji WordPress

Haczyki to kawałki kodu umieszczone w procesie ładowania WordPress, w którym można dołączyć niestandardowy kod (tak zwane „funkcje”), aby wykonał on w określonym czasie lub miejscu.

Na przykład WP_HEAD () działa w sekcji <Head> u góry witryny. Jeśli chcesz go użyć do dodania JavaScript do strony WordPress, musisz to zrobić w pliku Funkctions.php swojego tematu (dziecko), na przykład:

 function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

Wprowadź swój kod JavaScript tam, gdzie mówi: „Umieść kod JavaScript tutaj”. Możesz także zmienić nazwę funkcji z „add_custom_script” na coś bardziej opisowego.

Ta metoda jest świetna dla mniejszych skryptów z bardzo wyraźnie określonymi celami, takimi jak prosty kod śledzenia analizy lub podstawowe elementy interaktywne. Działa również do ładowania JavaScript do stopki, co jest popularnym rozwiązaniem poprawy wydajności strony. Po prostu użyj wp_footer () zamiast WP_HEAD ().

Głowa strony i stopka są popularnymi lokalizacjami do ładowania skryptów, ponieważ zwykle pojawiają się wszędzie na stronie internetowej. To sprawia, że ​​są świetnym sposobem na dodanie JavaScript do wszystkich stron witryny WordPress.

Jeśli chcesz tylko załadować JavaScript na określonych stronach, możesz połączyć tę metodę z instrukcją warunkową:

 function add_custom_script() { if (is_page(123)) { ?> <script> // Place your JavaScript code here </script> <?php } } add_action('wp_head', 'add_custom_script');

Część, która ogranicza to do jednej strony, to is_page (123). „123” to identyfikator strony, który musisz zaktualizować do identyfikatora swojej strony, jeśli chcesz użyć tego kodu. Pojawia się na pasku przeglądarki po otwarciu strony w edytorze WordPress. Możesz także użyć is_page () do celowania stron według nazwy lub ślimaka URL.

Identyfikator strony WordPress w pasku przeglądarki
Dostępnych jest wiele innych znaczników warunkowych, takich jak is_single () dla postów na blogu, is_home () dla strony blogu, is_archive () dla stron archiwum i is_category () dla archiwów kategorii.

2. Załaduj JavaScript w osobnym pliku

Inną opcją jest umieszczenie JavaScript we własnym pliku. Jest to dobry pomysł, szczególnie w przypadku dużych skryptów, ale ma również sens, ponieważ pozwala ładować pliki za pomocą funkcji WP_Register_Script () i WP_enqueue_script ().

To preferowana metoda, ponieważ pomaga uniknąć konfliktów, ładowania skryptów we właściwej kolejności i zarządzania zależnościami. Oto, jak to wygląda:

 function enqueue_custom_script() { wp_register_script( 'my-custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0.0', true ); wp_enqueue_script('my-custom-script'); } add_action('wp_enqueue_scripts', 'enqueue_custom_script');

W tym przykładzie skrypt jest umieszczony w katalogu motywów, który celujemy za pomocą get_template_directory_uri () (w przypadku motywów dziecięcych użyj get_stylesheet_directory_uri ()). Tablica („JQuery”) wskazuje, że ten skrypt zależy od jQuery i powinien zostać załadowany po niej. „1.0.0” to numer wersji, a „prawdziwe” oznacza, że ​​WordPress powinien załadować skrypt do stopki.

Działa to również i jest właściwym sposobem załadowania JavaScript innych firm, takich jak kody śledzenia. Pamiętaj, aby zaktualizować kod do swojego przypadku użycia przed umieszczeniem go na swojej stronie.

3. Uwzględnij kod w plikach motywów

Haczyki to świetny sposób na uniesienie wszystkich scenariuszy JS z jednego miejsca, ale nie są jedynym sposobem na załadowanie ich w motyw.

Zamiast używać wp_head () do załadowania czegoś w sekcji Head, możesz osiągnąć to samo, publikując skrypt lub link do niego bezpośrednio do pliku motywu do pliku motywu nagłówka.

W klasycznych tematach jest to zwykle nagłówek . Php. Znajdź go w swoim motywie, zrób kopię i umieść w motywie dziecka, a następnie dołącz skrypt bezpośrednio gdzieś w sekcji <Head>.

Jeśli chcesz go załadować tylko na określonej stronie, możesz użyć instrukcji warunkowej jak poprzednio. Alternatywnie, dzięki hierarchii szablonów, możliwe jest również utworzenie niestandardowego pliku tylko dla tej strony, np. Page-contact.php .

Motywy Bloku WordPress nie używają już tych plików motywów. Jeśli twój motyw jest motywem blokowym, lepiej zaleca się wybrać jedną z innych wymienionych tutaj metod.

4. Utwórz niestandardową wtyczkę

Problem z dodawaniem JavaScript do stron WordPress za pomocą plików motywów polega na tym, że kod zależy od motywu. Kiedy zmienisz motywy, twój JavaScript również znika.

Możesz tego uniknąć za pomocą niestandardowej wtyczki. To sprawia, że ​​kod jest niezależny od motywu, a także pozwala aktywować i dezaktywować go w menu wtyczek WordPress.

Oto znacznik prostej wtyczki do dodania JavaScript do twoich stron WordPress:

 <?php /* Plugin Name: Custom JavaScript Loader Plugin URI: https://yourwebsite.com Description: A simple plugin to add custom JavaScript to WordPress pages. Author: Your Name Author URI: https://yourwebsite.com Version: 1.0 */ function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

Umieść ten kod w pliku PHP i upewnij się, że dostosuj nazwę wtyczki , URI wtyczki , opis , autora i autora URI do własnych informacji, ponieważ pojawia się w menu wtyczek WordPress.

Nazwij plik coś znaczącego, np. Custom-Tracking-Code-Plugin.php , a następnie prześlij go do katalogu o tej samej nazwie wewnątrz WP-Content/wtyczki w instalacji WordPress. Następnie powinien pojawić się w menu wtyczek .

5. Dodaj JavaScript w edytorze WordPress

Chociaż nie jest to najbardziej zalecana metoda, można również dodać JavaScript bezpośrednio do strony za pomocą edytora WordPress. Aby to zrobić, dodaj nowy blok (kliknij przycisk Plus lub użyj cięcia do przodu) i wybierz niestandardowy blok HTML .

Po prostu wstaw swój kod JavaScript, aby załadował prosto na stronie.

Pamiętaj tylko, aby użyć tagów otwierających <repript> i zamykania </script> i zapisz zmiany w edytorze, aby mogły one uwzględnić.

Możesz także dodać JavaScript do klasycznego edytora za pomocą karty kodu .

6. Użyj kodu wtyczki fragmentu

Nie byłoby to WordPress, gdyby nie było również rozwiązania wtyczki do dodania JavaScript do Twojej witryny. W rzeczywistości jest ich kilka, w tym:

  • WPCode
  • Menedżer kodu stopki nagłówka
  • Proste niestandardowe CSS i JS
  • Przybornik CSS i JavaScript

Wtyczki pozwalają lepiej zarządzać JavaScript. Możesz wymienić fragmenty, uporządkować je na kategorie, selektywnie włączać i wyłączać oraz skonfigurować reguły warunkowe. Ponadto, podobnie jak niestandardowe rozwiązanie wtyczki, sprawia, że ​​JavaScript jest niezależny od motywu.

Korzystanie z tych wtyczek jest również proste. Zazwyczaj dodają nowe menu do Twojej witryny, w której możesz zarządzać fragmentami JavaScript.

Po prostu utwórz nowy fragment, wstaw swój kod, a następnie skonfiguruj, gdzie chcesz się pojawić.

To właściwie to.

Rozwiązywanie problemów z problemami JavaScript w WordPress

Teraz wiesz, jak dodać JavaScript do swojej witryny i stron WordPress. Ale co, jeśli coś nie działa tak, jak powinno? Ostateczną część tego artykułu spędzimy, mówiąc o tym, jak zidentyfikować i rozwiązać problemy JavaScript, na które możesz się spotkać.

1. Sprawdź narzędzia programistów przeglądarki

Jednym ze sposobów sprawdzenia błędów JavaScript jest użycie narzędzi programistycznych przeglądarki. Pozwalają na sprawdzenie kodu witryny podstawowej, w tym wszelkich skryptów.

Możesz je otworzyć, klikając prawym przyciskiem myszy na dowolnej stronie internetowej i wybierając Inspekcję .

Alternatywnie, dostęp do nich za pośrednictwem menu przeglądarki, np. W Chrome znajdują się pod większą liczbą narzędzi> Narzędzia programistów .

Istnieją również skróty klawiatury, aby je otworzyć, w Chrome, Edge i Firefox It Ctrl/CMD+Shift+I , w Safari CMD+Opt+C.

Otwórz narzędzia Dev na swojej stronie, a następnie przejdź do zakładki konsoli . Powinieneś zobaczyć wszelkie błędy, w tym te spowodowane przez JavaScript tutaj.

Pamiętaj, że może być konieczne ponownie załadowanie strony, aby mogli się pokazać. Najczęstsze błędy JavaScript to:

  • ReferenceStror: Wskazuje brakującą lub niezdefiniowaną zmienną lub funkcję.
  • TypeError: sugeruje, że na przykład problem z operacją próbując użyć wartości niewłaściwego typu.
  • SkładniaSerorror: Często występuje z powodu literówki lub nieprawidłowego formatowania w kodzie, takich jak brakujące nawiasy, półkolony lub cytaty.

Chcesz dowiedzieć się, który skrypt, plik lub funkcja powoduje błąd, aby można go to naprawić. Pomaga użyć punktów przerwania na karcie źródeł , która pozwala zatrzymać wykonanie JavaScript i sprawdzić, co się dzieje.

Użyj swojej ulubionej wyszukiwarki lub sztucznej inteligencji, aby dowiedzieć się więcej o dowolnym komunikatie o błędzie. Ponadto możesz również sprawdzić kartę sieci , aby sprawdzić, czy twoje skrypty ładują się poprawnie.

2. Rozwiąż konflikty motywowe i wtyczki

Błędy JavaScript mogą również nastąpić z powodu konfliktów motywowych i wtyczek, na przykład przy użyciu niezgodnych bibliotek lub duplikatów funkcji.

Oto jak rozwiązywać problemy z tymi problemami JavaScript:

  • Zaktualizuj motywy i wtyczki: Twój motyw lub programista może już wiedzieć o problemie i poprawił je w najnowszej wersji.
  • Tymczasowo przełącz się na domyślny motyw: aktywuj domyślny motyw WordPress, taki jak dwadzieścia dwadzieścia pięć. Jeśli problem zniknie, twój motyw może być winny.
  • Dezaktywuj wtyczki: wyłącz wszystkie wtyczki w witrynie i włącz je jeden po drugim, aby zobaczyć, kiedy pojawi się problem. Zaktualizuj lub wymień wtyczkę, która ją powoduje.

Wtyczka kontroli zdrowia pozwala symulować wszystko, co wymienione powyżej z pulpitu WordPress (przejdź do karty rozwiązywania problemów ) i wróć za pomocą jednego kliknięcia.

Ma również znacznie więcej dodatkowych informacji na temat stanu Twojej witryny. Zaleca się przeprowadzenie tych testów na stronie programistycznej lub inscenizacji, a nie na witrynie na żywo.

3. Użyj trybu debugowania

WordPress ma wbudowany tryb debugowania, który pomoże Ci wykryć i rozwiązać problemy z witryną. Chociaż nie pokazuje bezpośrednio problemów z JavaScript, ułatwia znalezienie błędów PHP, wtyczki i motywu, które mogłyby zakłócać scenariusze w Twojej witrynie.

Aby aktywować tryb debugowania, otwórz plik WP-config.php (za pośrednictwem FTP lub menedżera plików hostingowych) i dodaj następujące wiersze:

 define('WP_DEBUG', true); define('WP_DEBUG_LOG', true); define('SCRIPT_DEBUG', true);

Możesz już znaleźć definicję („script_debug”, false); w pliku. Jeśli tak, po prostu zmień to na „True”. Zapisz i ponownie przesłać plik.

Powyższe ustawienia Włącz tryb debugowania, rejestrowanie błędów (błędy pojawią się w WP-Content/Debug.log ) i załadują niezmienione wersje Core CSS i pliki JavaScript, aby łatwiej śledzić problemy.

Ponownie zrób to na stronie programistycznej, z dala od oczu gości. Ponadto nie zapomnij usunąć tego kodu, aby wrócić do normy.

Możesz także użyć wtyczki debugowania WP, aby włączyć tryb debugowania WordPress.

4. Rozwiąż problemy z wydajnością

Jak każdy inny kod, dodanie JavaScript do stron WordPress może sprawić, że Twoja witryna jest wolniejsza. Często zauważysz, że kiedy prędkość testujesz swoją stronę internetową i otrzymasz ostrzeżenie z napisem „Zmniejsz nieużywany JavaScript”.

Aby uniknąć problemów z wydajnością spowodowaną przez JavaScript, postępuj zgodnie z tymi najlepszymi praktykami:

  • Usuń skrypty, których nie potrzebujesz: regularnie audytuj ładowanie JavaScript na swojej stronie, aby sprawdzić, czy faktycznie potrzebujesz tego wszystkiego, zwłaszcza usług innych firm.
  • Załaduj skrypty w stopce: Umieść pliki JavaScript w sekcji główki, gdy konieczne jest, aby załadowały się wcześniej.
  • Połącz skrypty: Połącz kilka skryptów w jeden plik (nazywa się to „Conatenaation”). Pojedynczy duży plik często ładuje się szybciej niż kilka mniejszych.
  • Minify JavaScript Pliki : Usuwa to niepotrzebne formatowanie i białe znak, które świetnie nadają się do czytelności niepotrzebnej do wykonywania kodu.
  • Załaduj asynchronicznie JavaScript: oznacza, że ​​przeglądarka nie przestaje przetwarzać witryny podczas ładowania plików JavaScript, ale ładuje je w tle i wykonuje je po pobraniu.
  • Odrocz duże skrypty: Tutaj pliki są również pobierane w tle, ale wykonują się tylko po zakończeniu reszty procesu ładowania, aby nie przerwano.
  • Opóźnij wykonanie JavaScript : Odkłada ładowanie wszystkich plików JavaScript i skrypty wbudowane, aż do interakcji użytkownika. To jest jak leniwe ładowanie obrazów, ale do plików JavaScript.

Uprościć optymalizację wydajności JavaScript za pomocą WP Rocket

Zamiast robić to ręcznie, masz również możliwość wdrożenia go znacznie łatwiej za pomocą rakiety WP. Gdy jest aktywna w witrynie, wtyczka domyślnie minifryp JavaScript i możesz łączyć, opóźniać, odłożyć i asynchronicznie ładować wszelkie skrypty na witrynie WordPress, po prostu sprawdzając kilka pól w menu optymalizacji plików .

Ustawienia optymalizacji JavaScript w rakiecie WP

W razie potrzeby możesz wykluczyć zoptymalizowanie poszczególnych skryptów, wtyczek i plików, na wypadek, gdyby zakłócać reakcję elementów strony.

Poza tym WP Rocket automatycznie wdraża szereg ulepszeń wydajności w tle, takich jak:

  • Buforowanie, w tym oddzielna mobilna pamięć podręczna
  • Kompresja GZIP
  • Pamięć podręczna i linki wstępne
  • Krytyczna optymalizacja obrazu (aby wykluczyć obrazy nad fałdem z leniwego ładowania), aby poprawić największą zawartość farby
  • Automatyczne leniwe renderowanie w celu ładowania elementów wysoko na stronie

W rzeczywistości po prostu instalowanie i aktywowanie wtyczki implementuje 80% najlepszych praktyk wydajności w Twojej witrynie i natychmiast przyspiesza. A jeśli to nie wystarczy, istnieje wiele innych funkcji, które możesz aktywować, aby zwiększyć prędkość witryny, na przykład:

  • Leniwe ładowanie obrazów, w tym tła CSS, filmy i iframy
  • Wstępne ładowanie plików zewnętrznych i czcionek
  • Samowystarczalne czcionki Google
  • Optymalizacja bazy danych
  • Opcje łatwego połączenia się z CDN, w tym RocketCDN

Gotowy do dodania JavaScript do swoich stron WordPress?

JavaScript oferuje wiele ekscytujących możliwości dla witryn WordPress, czy to w celu dodania interaktywności, czy integracji z oprogramowaniem stron trzecich. Istnieje wiele sposobów dodania go do swoich stron, w zależności od poziomu umiejętności i preferencji.

Jednocześnie JavaScript może wprowadzić błędy i być dużym czynnikiem w wydajności strony. Z tego powodu konieczne jest, aby z ostrożnością dodać JavaScript do swoich stron WordPress.

Jeśli zmagasz się z problemami z wydajnością związanymi z JavaScript, WP Rocket pomaga łatwo i skutecznie zająć się nimi. Ponadto oferuje wiele innych funkcji, aby przyspieszyć witrynę. Zdobądź rakietę WP już dziś i wypróbuj ją bez ryzyka przez 14 dni!