Jak dodać JavaScript (pliki lub skrypty) bez niszczenia witryny WordPress (functions.php, szablon lub wtyczka)

Zazwyczaj istnieje wiele powodów, dla których chcesz dodać JavaScript do WordPressa, albo drobne poprawki funkcji, albo może chcesz dodać skrypt innej firmy. Szacunekless z powodów, dla których chcesz to zrobić, chcesz się upewnić, że się nie pomylisz - ponieważ możesz zrujnować swoją witrynę.

Istnieje dobry sposób na dodanie JavaScriptu do WordPressa. A potem są złe sposoby, które mogą albo zepsuć Twoją witrynę, albo mieć negatywny wpływ na wydajność.

W tym artykule zasugerujemy kilka różnych sposobów dodawania kodu JavaScript do stron internetowych i które z nich powinny być używane w różnych okolicznościach, z jakimi możesz się spotkać.

WordPress jest tak rozszerzalny, że umożliwia łatwe dodawanie nowych funkcji i funkcjonalności do witryny bez konieczności przeprojektowywania lub zastępowania całego motywu. Zamiast odtwarzać motyw WordPress od podstaw, możesz dodać funkcjonalność, po prostu dodając wtyczki.

A jeśli funkcjonalność, którą chciałbyś dodać, jest raczej niewielka i nie ma potrzeby tworzenia ani instalowania wtyczki, możesz użyć Plik functions.php lub na różne inne sposoby dodawania JavaScript do WordPressa bez konieczności tworzenia osobnej wtyczki.

(Specjalna notatka: Szukasz listy usprawnień/sztuczek, które możesz łatwo wprowadzić w swojej witrynie WordPress bez używania wtyczki? Możesz odnieść się do naszego przewodnika tutaj: 101 sztuczek WordPress, które każdy poważny bloger musi znać.)

Najlepsza rzecz w tym plik funkcji jest to, że działa jak wtyczka, której można używać do dodawania funkcji i rozszerzania funkcjonalności zarówno motywu, jak i samego WordPressa.

Chociaż możesz łatwo dodać Kod JavaScript bezpośrednio do twojego plik header.php, jest problem z tą metodą.

W rzeczywistości może powodować konflikty z innymi wtyczkami, gdy ładują własne skrypty JS.

W tym artykule autorstwa CollectiveRay, przyjrzymy się, w jaki sposób można dodać javascript do motywów WordPress. Jako programiści WordPressa jest to jedna z rzeczy, które będziemy musieli robić bardzo często.

Jeśli nie masz pewności co do samodzielnego poprawiania kodu, możesz zapoznać się z tym artykułem, aby dowiedzieć się, jak zrekrutować najlepszego programistę WordPress dla swojej firmy: https://www.collectiveray.com/wordpress-developers-for-hirelub zapoznaj się z następującymi tanimi opcjami programowania. 

Jeśli nie masz pewności, czy to jest odpowiednie dla Ciebie i co zrobić, aby to zrobić szybko, sprawdź kilka koncertów Fiverr, które mogą to zrobić szybko za Ciebie

Kliknij tutaj, aby znaleźć tanich ekspertów od poprawek WordPress

Jak dodać JavaScript do WordPressa

Istnieje wiele sposobów na dodanie niestandardowego kodu JavaScript do witryny WordPress, z których każdy ma swoje własne zastosowania:

1. Dodaj skrypt do określonej lub pojedynczej wybranej strony lub wielu stron za pomocą functions.php
2. Dodaj skrypt do wybranych stron za pomocą wtyczek, takich jak nagłówki i stopki
3. Dodaj plik JavaScript do nagłówka motywu

1. Korzystanie z functions.php

Pojedyncza strona lub post

Ta poprawka kodu użyje Funkcje plik znaleziony w folderze szablonu, aby dodać wybrany przez siebie plik .JS tylko do jednej wybranej strony.

Wykorzystuje funkcję IS_PAGE, którą można znaleźć tutaj: https://developer.wordpress.org/themes/basics/conditional-tags/. W rzeczywistości możesz użyć różnych innych opcji, jeśli chcesz dodać skrypt tylko w określonych warunkach, takich jak:

• is_single(),
• is_front_page(),
• is_home,
• is_admin itd. 

Jeśli wolisz obejrzeć film na YouTube, jak to zrobić, ten krótki film jest całkiem dobry, jak dodać JavaScript do pojedynczej strony:

Na stronie znajdują się szczegółowe instrukcje, więc po obejrzeniu filmu możesz użyć tego artykułu jako odniesienia.

Jeśli chcesz dodać plik do wszystkich stron, kontynuuj przewijanie, aby znaleźć inne alternatywy dla tej metody poniżej.

• Najpierw musisz określić identyfikator strony, do której chcesz dodać skrypt. Robisz to przechodząc do strony, do której chcesz dodać plik, kliknij Edytuj a następnie pobierz identyfikator strony z adresu URL, jak widać poniżej. Identyfikator to numer znaleziony w adresie URL paska przeglądarki.



• Teraz, gdy masz już identyfikator strony, musisz przesłać plik .js do lokalizacji. Zalecamy przesłanie pliku .js do folderu szablonów, być może w katalogu podrzędnym.
• Po przesłaniu należy dokładnie zanotować katalog i nazwę pliku .JS, którego używamy zamiast PATH_TO_JS_FILE poniżej. Na przykład Twój plik może znajdować się w: https://www.yourwebsite.com/wp-content/themes/twentynineteen/js/myjsfile.js
• Zanotuj ten pełny adres URL i zastąp PATH_T_JS_FILE poniżej. Będziesz także musiał wymienić identyfikator, który znalazłeś powyżej.
• Dodaj pełny kod poniżej na końcu Funkcje plik szablonu.

funkcjonować collectiveray_load_js_script() {
  if( is_page(ID)) {
    wp_enqueue_script('js-file', 'PATH_TO_JS_FILE', array('jquery'), '', false);
    //lub użyj wersji poniżej, jeśli dokładnie wiesz, gdzie znajduje się plik
    //wp_enqueue_script( 'plik-js', get_template_directory_uri() . '/js/myscript.js');
  }
}

add_action('wp_enqueue_scripts', 'collectiveray_load_js_script');

Jeśli dokładnie wiesz, gdzie umieściłeś plik JS, możesz użyć niewielkiej odmiany wp_enqueue_script: 

wp_enqueue_script( 'plik-js', get_template_directory_uri() . '/js/myscript.js');

W takim przypadku plik /js/mysript.js to lokalizacja pliku, który chcesz dodać.

Po ponownym załadowaniu strony okaże się, że plik został dodany. Możesz to potwierdzić, klikając Wyświetl źródło strony.

Jeśli zamiast dodawać plik JavaScript do strony, chcesz dodać go do pojedynczej strony, możemy zastosować niewielką modyfikację tej funkcji, aby zastosować ją do pojedynczego postu. Możesz użyć dowolnej odmiany następujących elementów:

• is_single( '17' ) - używa identyfikatora posta
• is_single( 'Mój tytuł posta' ) - używa tytułu posta, aby sprawdzić, czy jest to post, do którego ma zostać dodany plik
• is_single( 'moj-tytul-post' ) - sprawdza przed ślimakiem słupka
• is_single( array( 17, 'tytuł-mojego-post', 'Tytuł mojego posta' )) - to sprawdza, czy którykolwiek z warunków identyfikatora posta to "17", slug to "tytuł-mojego-postu" lub tytuł to "Tytuł mojego posta"
• jest singlem() - inne odmiany funkcji is_single wykorzystujące tablicę wartości do sprawdzenia

Kod w tym przypadku byłby następujący lub niewielką wariacją w zależności od parametrów funkcji is_single. 

funkcjonować collectiveray_load_js_script() {
  if( is_single('17')) {
    wp_enqueue_script('js-file', 'PATH_TO_JS_FILE', array('jquery'), '', false);
    //lub użyj wersji poniżej, jeśli dokładnie wiesz, gdzie znajduje się plik
    //wp_enqueue_script( 'plik-js', get_template_directory_uri() . '/js/myscript.js');
  } 
}

add_action('wp_enqueue_scripts', 'collectiveray_load_js_script');

Jeśli masz tytuł posta, możesz go użyć zamiast parametru „17”. Po raz kolejny wp_enqueue_script można również dostosować do:

wp_enqueue_script( 'plik-js', get_template_directory_uri() . '/js/myscript.js');

Dodaj JavaScript do wszystkich stron 

Jak widzieliśmy, najłatwiejszą i najczystszą metodą dodania pliku javascript do motywu WordPress jest użycie functions.php plik z wp_enqueue_script. W tym przypadku zamiast tworzyć warunek dodawania treści do określonych stron, dodamy funkcję ogólną.

Oto jak to zrobić:

Otwórz swoje functions.php plik i skopiuj do niego poniższy fragment kodu. Przed zapisaniem upewnij się, że zastąpiłeś adres URL szablonu swoim własnym.

funkcjonować collectiveray_theme_scripts_function() {
  wp_enqueue_script( 'plik-js', get_template_directory_uri() . '/js/myscript.js');
}
add_action('wp_enqueue_scripts','collectiveray_funkcja_skryptów_motywu');

Jeśli jesteś za pomocą motywu potomnego, musisz użyć get_stylesheet_directory_uri() zamiast get_template_directory_uri() 

2. Korzystanie z wtyczek

Jeśli chcesz po prostu użyć wtyczki do osadzenia odwołania JavaScript do pliku nagłówka lub stopki motywu WordPress, wtyczka „Wstaw nagłówki i stopki” jest łatwą opcją.

Jak sama nazwa wskazuje, pozwala na dodawanie skryptów do plików nagłówka i stopki, podpinając się pod wp_head i wp_footer funkcje WordPressa. 

Ta wtyczka jest dobrą opcją, ponieważ pozwala dodać dowolny skrypt bez ryzyka zepsucia rzeczy. Co więcej, nie musisz samodzielnie zmieniać ani poprawiać żadnego kodu (jeśli nie czujesz się z tym komfortowo), jak to zrobiliśmy w poprzednim przykładzie.

Bezpośrednia zmiana kodu jest zazwyczaj lepszą opcją dla projektantów stron internetowych. Metoda przy użyciu tej wtyczki jest łatwiejsza.

Zamiast modyfikować pliki motywu bezpośrednio za pomocą niestandardowego kodu JavaScript, wtyczka umożliwia wstawienie kodu, który następnie zostanie dodany do nagłówka lub stopki witryny, w zależności od wybranych opcji. 

Ta wtyczka obsługuje dwie opcje:

1. Dodanie ścieżki do konkretnego pliku JavaScript, który przesyłasz
2. Bezpośrednie dodanie skryptu (np. w przypadku skryptów Analytics lub innych zewnętrznych skryptów)

Zacznijmy: 

Możesz pobierz Wstaw nagłówki i stopki tutaj.

Zainstaluj wtyczkę:

• Zaloguj się do zaplecza lub administratora swojej witryny.
• Przejdź do Wtyczki > Dodaj nowy
• Wyszukaj wtyczkę „Nagłówki i stopki” i kliknij Zainstaluj teraz.
• Po zainstalowaniu kliknij Aktywuj

Opcja 1: Prześlij niestandardowy plik JavaScript

• Najpierw musisz przygotować plik do włączenia
• Zapisz kod JavaScript lub plik w nowym pliku testowym za pomocą . Js rozbudowa.
• Prześlij go do swojej witryny do następującego folderu: wp-content/themes/ /js/
• Przejdź do Ustawienia > Wstaw nagłówki i stopki.

Mamy teraz kilka możliwości załadowania naszego pliku:

1. Skrypty w nagłówku (załaduj wewnątrz etykietka)
2. Skrypty w stopce (załaduj przed zamknięciem etykietka)

Użyj lokalizacji, która najlepiej odpowiada Twoim konkretnym potrzebom, korzystając z poniższego przykładu. Zauważ, że należy zmienić na nazwę katalogu motywu, którego używasz, np. dwadzieścia dwadzieścia

/js/file.js">

• Kliknij przycisk „Zapisz”, aby zakończyć i zapisać.

Opcja 2: Załaduj niestandardowy skrypt bez pliku

Druga opcja, której możesz użyć z tą wtyczką, to możliwość dodania kodu bezpośrednio do WordPressa bez konieczności używania konkretnego pliku.

Można to wykorzystać, gdy korzystasz z usługi innej firmy, takiej jak Google Analytics, Drip lub innego narzędzia, które wymaga dodania skryptu do Twojej witryny. Po prostu weź skrypt i wrzuć go do Skrypty w nagłówku okno:

Załaduj ponownie interfejs i sprawdź źródło swojej witryny, aby upewnić się, że kod jest teraz wyświetlany. Dobrym pomysłem jest również przejrzenie kilku stron, aby potwierdzić, że wszystko nadal działa dobrze.

Chociaż wydaje się to dość proste, może być poza twoją strefą komfortu, więc jeśli chcesz zrobić to szybko, sprawdź niektóre deweloperzy na Fiverrze, który może to za Ciebie zrobić.

Kliknij tutaj, aby znaleźć tanich ekspertów od poprawek WordPress

Jeśli uznałeś tę wskazówkę za przydatną, możesz sprawdzić więcej naszych wskazówek dotyczących WordPressa w odpowiednim menu u góry strony.

3. Dodaj JavaScript do nagłówka motywu

W niektórych przypadkach możesz chcieć, aby plik JavaScript był używany w całej witrynie, ale nie chcesz używać do tego wtyczki.

Na przykład, jeśli chcesz dodać skrypt innej firmy na wszystkich swoich stronach (np. skrypt instantpage.js, aby przyspieszyć działanie witryny), możesz wstawić skrypt lub dodać sam plik skryptu, do którego się odwołuje, w head Twojego header.php plik szablonu. 

TO NIE JEST IDEALNE. Jeśli zaktualizujesz motyw, możesz utracić te zmiany. Jeśli nadal chcesz to zrobić bezpośrednio, zdecydowanie zaleca się utworzenie motywu podrzędnego.

W tym scenariuszu, w którym chcesz, aby ten skrypt był dodawany wszędzie, możesz dodać plik bezpośrednio do szablonu zgodnie z poniższymi instrukcjami:

To wywołanie pliku (lub skryptu) należy dodać między metatagami a linkiem do arkusza stylów. Jest to dokładnie to samo, co w przypadku dodawania kodu JavaScript na dowolnej stronie HTML. 

Aby „dodać” plik JavaScript do swojej witryny, w head, używasz następującego kodu:

Upewnij się, że zdefiniowałeś type poprawnie, w przeciwnym razie Twoja witryna nie będzie ważna. Upewnij się również, że katalog /scripts istnieje w motywie i dodałeś do niego myscript.js.

Następnie możesz dodać dowolne odniesienie do funkcji używanych w pliku, który właśnie dodałeś do kodu HTML, w którym chcesz go użyć. 

Na przykład jest to przykład użycia właśnie dodanej funkcji.

" >Nagłówek idzie tutaj

Często zadawane pytania

Jak dodać plik JavaScript do WordPressa?

Czy mogę używać Javascript w WordPressie?

Tak, istnieje wiele sposobów wykorzystania JavaScript w WordPressie. Jeśli chcesz dodać prosty skrypt, możesz użyć wtyczki Wstaw nagłówki i stopki, aby dodać skrypt do nagłówka, a następnie wywołaj skrypt z dowolnej części motywu, posta lub wtyczki, z której chcesz go użyć.

Jak dodać własny kod do WordPressa?

Najlepszym sposobem dodania własnego kodu do WordPressa jest użycie pliku functions.php. Zaleca się utworzenie motywu potomnego, a następnie dodanie własnych modyfikacji do motywu potomnego, aby nie zakłócać możliwości uaktualniania motywu.

Jak edytować JavaScript w WordPressie?

Najlepszym sposobem na edycję JavaScript w WordPressie jest utworzenie motywu potomnego, a następnie dodanie edycji kodu JavaScript lub dostosowanie innych funkcji w motywie potomnym. Pozwala to na edycję JavaScript w razie potrzeby bez uszkadzania reszty motywu lub możliwości aktualizacji motywu.

Wnioski

Powyższe trzy metody to najczystszy sposób na dodanie JavaScript do WordPressa. Ogólnie rzecz biorąc, bezpośrednie poprawianie kodu powinno być wykonywane przez zaawansowanych użytkowników, którzy mają duże doświadczenie w kodzie i mogą być pewni, że wiedzą, jak cofnąć wszelkie wprowadzone przez siebie zmiany. W przeciwnym razie najlepiej trzymać się wtyczek. Jeśli nie masz ochoty samodzielnie poprawiać kodu, byłoby wspaniale skontaktować się z naszymi partnerami na Fiverr, którzy mogą to zrobić na dziś

Kliknij tutaj, aby znaleźć tanich ekspertów od poprawek WordPress

O autorze

Autor: David AttardStrona internetowa: https://www.linkedin.com/in/dattard/

David pracuje w branży online / cyfrowej lub w jej pobliżu od 18 lat. Ma ogromne doświadczenie w branży oprogramowania i projektowania stron internetowych przy użyciu WordPress, Joomla i otaczających je nisz. Jako konsultant ds. Cyfrowych koncentruje się na pomaganiu firmom w uzyskaniu przewagi konkurencyjnej za pomocą połączenia ich strony internetowej i dostępnych obecnie platform cyfrowych.