Dodaj JavaScript do witryny WordPress - 3 proste sposoby (posty/strony)

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 zepsuć swoją witrynę lub stworzyć wąskie gardło wydajności.

Bezpośrednie dodawanie kodu JavaScript do stron i postów WordPress nie jest możliwe, dlatego zasugerujemy kilka różnych sposobów dodawania kodu JavaScript do stron internetowych i które z nich powinny być używane w różnych sytuacjach, z jakimi możesz się spotkać. 

Jeśli się spieszysz, skorzystaj z poniższego spisu treści, aby przewinąć do odpowiedniej części artykułu.

Ten artykuł zawiera zmiany w kodzie WordPress. 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 wybranych stron za pomocą wtyczki, takiej jak WPCode
2. Dodaj skrypt do określonej lub pojedynczej wybranej strony lub wielu stron za pomocą functions.php
3. Dodaj plik JavaScript do nagłówka motywu

Przyjrzyjmy się szczegółowo każdej z tych metod.

1. Użyj wtyczki, takiej jak WPCode

Jeśli chcesz po prostu użyć wtyczki do osadzania odniesienia javascript do pliku nagłówka lub stopki motywu WordPress, wtyczka WPCode jest łatwą i BEZPŁATNĄ opcją.

Jak sama nazwa wskazuje, pozwala na dodawanie małych fragmentów kodu, takich jak skrypty, do plików nagłówka i stopki, które są najczęściej potrzebne. 

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 kilka różnych opcji, więc opiszemy tylko te najczęstsze, których będziesz potrzebować.

Możesz pobierz WPCode tutaj lub zainstaluj go za pomocą funkcji Zainstaluj wtyczki WordPress.

Zainstaluj wtyczkę WPCode:

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

Możesz teraz załadować niestandardowy skrypt bez pliku (np. aby dodać otrzymany skrypt, taki jak Google Analytics) lub przesłać niestandardowy plik JavaScript. 

Najpopularniejszą opcją, której możesz użyć z tą wtyczką, jest możliwość dodania kodu bezpośrednio do WordPressa.

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 Globalny nagłówek i stopka okno.

Możesz dodać skrypt do nagłówka, treści lub stopki. Powinieneś otrzymać wskazówki od dostawcy skryptu, do której z tych sekcji musisz dodać skrypt.

Powiedzmy, że chcesz dodać go do nagłówka:

Kliknij „Zapisz zmiany”, aby zakończyć.

Wtyczka WPCode doda teraz kod do każdej strony Twojej witryny.

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.

WPCode umożliwia również tworzenie własnych fragmentów kodu.

Możesz także wstawiać fragmenty kodu w dowolnym miejscu w swojej witrynie, na przykład wewnątrz postów lub stron, przed lub po poście, przed lub po treści lub wiele innych opcji, których możesz potrzebować.

Po prostu przejdź do opcji Fragmenty kodu > Dodaj fragment, a następnie wybierz opcję „Utwórz własny”.

Zostaniesz teraz przeniesiony na stronę „Utwórz niestandardowy fragment”, gdzie możesz nadać kodowi tytuł i wkleić go w polu „Podgląd kodu”.

Następnie z menu rozwijanego „Typ kodu” wybierz „Fragment JavaScript”.

Następnie po prostu przewiń w dół, aż dojdziesz do obszaru „Wstaw”.

Pozostaje tylko wybrać „Lokalizacja” kodu z menu rozwijanego. Znajdź „Strona, post, niestandardowy typ posta” i określ, gdzie ma być wyświetlany kod na stronie lub w poście.

Jeśli chcesz, aby WPCode umieścił fragment przed lub po akapicie, możesz określić, który akapit w poście powinien pojawić się przed lub po.

Jeśli na przykład wpiszesz 1 w polu „Wstaw numer”, fragment kodu pojawi się przed lub po pierwszym akapicie. W drugim akapicie użyj 2 i tak dalej.

Następnie po prostu przełącz przełącznik w górnej części ekranu na „Aktywny”, a następnie kliknij opcję „Zapisz fragment” obok niego.

To wystarczy, aby pobrać próbkę kodu online!

Główną zaletą korzystania z wtyczki jest to, że jest to opcja przyjazna dla początkujących. Nie musisz się martwić edycją plików motywu. Wtyczka WPCode może się również przydać, jeśli szukasz szwuless sposób dodawania innych rodzajów kodu i niestandardowego CSS.

Jednak wadą tej metody jest to, że wymaga zainstalowania wtyczki innej firmy, której niektórzy właściciele witryn starają się unikać. Jeśli chcesz ograniczyć liczbę rozszerzeń do minimum, lepiej skorzystać z jednej z pozostałych metod.  

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

2. 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() 

Korzystając z tej metody, nie musisz instalować kolejnej wtyczki, jeśli edytujesz plik functions.php. Ta metoda może być również używana do dodawania funkcji i funkcjonalności zarówno do motywu, jak i samego WordPressa. Takie podejście, na przykład, może zainstalować JavaScript w pojedynczym poście lub na stronie lub na wszystkich stronach.

Główną wadą tej strategii jest to, że wymaga ona radzenia sobie z kodem i aktualizowania plików witryny. W rezultacie, jeśli brakuje Ci doświadczenia w tej dziedzinie, może nie być idealną alternatywą.

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

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

Używanie haka wp_head do dodawania niestandardowego kodu JavaScript

Możesz także dodać niestandardowy kod JavaScript do swojego nagłówka za pomocą Wp_head hak akcji. Ponownie, to rozwiązanie nie jest preferowane, ponieważ generuje nadmierną liczbę skryptów. Tak jest, nigdyless, najlepiej ręcznie wstawiać skrypty do pliku header.php.

Ta metoda, której można również użyć w przypadku stopki, wykorzystuje zaczepy akcji do wstawiania skryptów wbudowanych do witryny. W przeciwieństwie do funkcji wp enqueue script, która umieszcza w kolejce niestandardowe skrypty, metoda wp head drukuje skrypty w szablonie nagłówka (i stopce, jeśli używasz Wp_footer hak).

Aby rozpocząć, przejdź do pliku functions.php i skopiuj i wklej następujący kod:

function collecter_custom_javascript() { ?>

<?php } add_action('wp_head', 'collective_custom_javascript');

Warto zauważyć, że wp head hook działa tylko na froncie Twojej witryny. Oznacza to, że żaden niestandardowy kod JavaScript dodany w ten sposób nie pojawi się w obszarze administracyjnym ani w obszarze logowania. Jeśli jednak chcesz dodać JavaScript do tych lokalizacji, możesz to zrobić za pomocą zaczepów akcji administratora head i login head.

Deweloperzy lubią funkcję skryptu wp enqueue, ponieważ pozwala uniknąć konfliktów, które mogą wystąpić w przypadku innych rozwiązań, takich jak bezpośrednie dodawanie skryptów do pliku header.php. Ponadto rozwiązanie to nie generuje żadnych skryptów zależnych.

Głównym problemem związanym z dodawaniem niestandardowego kodu JavaScript WordPress do nagłówka witryny jest to, że może on zakłócać działanie innych wtyczek, które ładują własne skrypty. Taka konfiguracja może również spowodować wielokrotne wczytywanie kilku skryptów, co może spowolnić ogólną szybkość i wydajność Twojej witryny.

Dodawanie kodu JavaScript do wideo WordPress

Chcesz zobaczyć, jak dodać JavaScript do WordPressa w filmie na YouTube? To dobry zegarek:

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.

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, ale 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.

(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ć.)

Często zadawane pytania

Co to jest JavaScript?

JavaScript to język komputerowy, który jest wykonywany w przeglądarce użytkownika, a nie na serwerze. Programowanie po stronie klienta umożliwia programistom osiągnięcie wielu interesujących rzeczy bez spowalniania witryny. Często możesz zostać poproszony o skopiowanie i wklejenie fragmentu kodu JavaScript do swojej witryny WordPress, jeśli chcesz osadzić odtwarzacz wideo, dodać kalkulatory lub inną usługę innej firmy.

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 Insert WPCode, aby dodać skrypt do nagłówka, a następnie wywołać skrypt z dowolnej części motywu, postu 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: Dawid AttarStrona 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.