Jak dodać niestandardowy JavaScript do WordPress (metody 3)

Jednym z najlepszych sposobów na zwiększenie funkcjonalności front-endu Twojej witryny jest dodanie niestandardowego kodu JavaScript WordPress. Jednak ustalenie, jak to zrobić, może być trudne, zwłaszcza jeśli jesteś przyzwyczajony do pracy z Customizerem w celu wstawienia niestandardowego CSS.

Na szczęście możesz zastosować kilka różnych strategii w zależności od poziomu doświadczenia i tego, co próbujesz osiągnąć. Gdy poznasz dostępne opcje, będziesz mógł wybrać niestandardowe rozwiązanie JavaScript, które będzie dla Ciebie najodpowiedniejsze.

W tym poście przeprowadzimy Cię przez trzy metody, których możesz użyć, aby dodać niestandardowy JavaScript do swojej witryny WordPress, a także omówimy zalety i wady każdej opcji. Oto trzy metody, które omówimy – możesz kliknąć, aby przejść bezpośrednio do określonej metody:

1. Użyj wtyczki Head & Footer Code (najprostsza opcja dla użytkowników nietechnicznych)
2. Dodaj kod do pliku functions.php
3. Dodaj kod do nagłówka (za pomocą funkcji wp_enqueue_script lub haka wp_head)

Wskakujmy!

1. Zainstaluj wtyczkę, taką jak Head & Footer Code

Korzystanie z wtyczki to jeden z najłatwiejszych sposobów dodawania niestandardowego kodu JavaScript WordPress do swojej witryny. Dobrym narzędziem jest na przykład Head & Footer Code:

Ta bezpłatna wtyczka umożliwia wstawianie kodu na różne sposoby. Możesz go używać do Facebook Pixel, Google Analytics, niestandardowego CSS i innych.

Aby rozpocząć, dodaj wtyczkę do swojej witryny, przechodząc do Wtyczki → Dodaj nowy z pulpitu administratora, a następnie wyszukaj „Kod nagłówka i stopki”.

Po kliknięciu na Zainstaluj teraz oraz Aktywuj przyciski, możesz zlokalizować ustawienia wtyczki, przechodząc do Narzędzia → Kod nagłówka i stopki. Na tym ekranie znajdują się trzy pola dla sekcji nagłówka, stopki i treści:

Możesz wprowadzić niestandardowy kod JavaScript WordPress w dowolnym z tych pól. Kiedy skończysz, wybierz Zapisz zmiany przycisk u dołu ekranu. Kod zostanie następnie załadowany na każdą stronę Twojej witryny.

Plusy i minusy korzystania z wtyczki

Główną zaletą korzystania z wtyczki jest to, że jest to opcja przyjazna dla początkujących. Nie musisz się martwić o edytowanie plików motywu. Wtyczka Head & Footer Code może się również przydać, jeśli szukasz bezproblemowego sposobu dodawania innych typów kodu i niestandardowego CSS.

Jednak wadą tej metody jest to, że wiąże się ona z instalacją 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 innych metod. Ponadto wtyczka jest przeznaczona do zmian JavaScript w całej witrynie, a nie do określonych stron lub postów.

2. Użyj swojego pliku functions.php

Inną metodą dodawania niestandardowego kodu JavaScript WordPress do witryny jest wykorzystanie wbudowanych funkcji i haków do edycji funkcje.php plik. To podejście polega na ręcznym przesłaniu skryptów na serwer.

Przed rozpoczęciem zalecamy utworzenie motywu potomnego. Ten krok pomaga upewnić się, że nadal będziesz w stanie bezpiecznie zaktualizować motyw nadrzędny. Powinieneś także zrobić kopię zapasową swojej witryny na wypadek, gdyby coś poszło nie tak.

Ta metoda polega na użyciu tzw IS_PAGE funkcjonować. Możesz dodać logikę warunkową, aby zastosować niestandardowy kod JavaScript do pojedynczego posta lub strony.

Aby rozpocząć, zlokalizuj i otwórz plik funkcje.php plik, a następnie skopiuj i wklej następujący fragment kodu:

function ti_custom_javascript() {
    ?>
        <script>
          // your javscript code goes here
        </script>
    <?php
}
add_action('wp_head', 'ti_custom_javascript');

Ten kod doda JavaScript do twojego nagłówka. Aby zastosować go do pojedynczego postu, możesz użyć następujących opcji:

function ti_custom_javascript() {
  if (is_single ('3')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'ti_custom_javascript');

Pamiętaj, że będziesz musiał wymienić 3 w powyższym przykładzie z numerem ID posta, do którego chcesz dodać kod. Aby zlokalizować ten numer, przejdź do wpisu z pulpitu administratora, a następnie kliknij Edytować. W adresie URL paska przeglądarki numer identyfikacyjny to liczba obok „post=”:

Zapisz plik po zastąpieniu numeru identyfikacyjnego i dodaniu niestandardowego kodu JavaScript do wyznaczonego obszaru. Możesz również powtórzyć ten sam proces dla pojedynczej strony WordPress.

Plusy i minusy edytowania pliku functions.php

Zaletą edytowania pliku funkcje.php plik polega na tym, że nie trzeba instalować kolejnej wtyczki. Możesz także użyć tej techniki, aby dodać funkcje i funkcje zarówno do swojego motywu, jak i samego WordPressa. Na przykład ta metoda może wstawić JavaScript do pojedynczego postu lub strony lub wszystkich stron.

Jedynym minusem tej metody jest to, że wiąże się ona z pracą z kodem i edycją plików witryny. Dlatego może nie być najlepszą opcją, jeśli nie masz doświadczenia w tym dziale.

Istnieje sposób na dodanie niestandardowego kodu JavaScript WordPress poprzez wstawienie pliku <script> tag bezpośrednio do twojego nagłówek.php plik. Jednak ta metoda nie jest zalecana. Może zakłócać sekwencję ładowania WordPressa i powodować konflikty z innymi motywami i wtyczkami.

Jeśli chcesz dodać niestandardowy kod JavaScript do wszystkich swoich stron za pośrednictwem nagłówka witryny, możesz to zrobić na dwa sposoby. Możesz edytować funkcje.php plik i użyj wp_enqueue_script function, która tworzy funkcję ogólną. Alternatywnie możesz użyć tzw wp_head hak akcji.

Przyjrzyjmy się obu opcjom…

Dodaj JavaScript do nagłówka za pomocą funkcji wp_enqueue_script

Najpierw prześlij swój niestandardowy plik JavaScript do katalogu szablonu. Możesz to zrobić za pomocą klienta protokołu FTP (File Transfer Protocol) lub Menedżera plików.

Przejdź do folderu szablonów swojej witryny (wp_content → motywy → [yourtheme]). Następnie wybierz Wgrywać:

Zanotuj dokładną ścieżkę do tego pliku. Na przykład powinno to być coś w stylu „

Następnie zlokalizuj i otwórz plik funkcje.php plik, a następnie skopiuj i wklej następujący fragment kodu:

function ti_custom_javascript() {
wp_enqueue_script( 'example-script', get_template_directory_uri() . '/js/examplescript.js');
}
add_action('wp_enqueue_scripts', 'ti_custom_javascript');

Pamiętaj, aby zastąpić adres URL szablonu własnym. Na koniec zapisz plik.

Dodaj niestandardowy JavaScript za pomocą haka wp_head

Możesz także skorzystać z tzw wp_head hak akcji aby dodać niestandardowy JavaScript do nagłówka za pomocą wbudowanego skryptu. Ponownie, ta metoda nie jest preferowana, ponieważ może utworzyć zbyt wiele skryptów. Jest to jednak lepsze niż bezpośrednie wstawianie skryptów do pliku nagłówek.php plik.

Ta metoda, której można również użyć w przypadku stopki, wykorzystuje haczyki akcji do dodawania wbudowanych skryptów do witryny. Podczas wp_enqueue_script Funkcja kolejkuje niestandardowe skrypty, wp_head podejście drukuje skrypty w twoim szablonie nagłówka (i stopce, jeśli używasz wp_footer hak).

Aby rozpocząć, przejdź do swojego funkcje.php plik, a następnie skopiuj i wklej następujące elementy:

function ti_custom_javascript() {
?>
<script>
// your javascript code goes here
</script>
<?php
}
add_action('wp_head', 'ti_custom_javascript');

Zauważ, że wp_head hook uruchamia się tylko na froncie Twojej witryny. Oznacza to, że żaden niestandardowy kod JavaScript dodany za pomocą tej metody nie pojawi się w obszarach administracyjnych ani logowania. Jeśli jednak chcesz dodać JavaScript do tych obszarów, możesz użyć metody admin_head oraz nazwa_logowania odpowiednio haki akcji.

Plusy i minusy dodania JavaScript do nagłówka

The wp_enqueue_script jest preferowana przez programistów, ponieważ zapobiega konfliktom, które mogą powstać z innymi opcjami, takimi jak bezpośrednie dodawanie skryptów do pliku nagłówek.php plik. Ponadto użycie tej metody nie powoduje tworzenia ż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 to powodować problemy z innymi wtyczkami, które ładują własne skrypty. Taka konfiguracja może również powodować wielokrotne ładowanie wielu skryptów, co może obniżyć ogólną szybkość i wydajność witryny.

Rozpocznij pracę z niestandardowym kodem JavaScript WordPress

Jak omówiliśmy w tym poście, istnieją trzy sposoby dodawania niestandardowego kodu JavaScript WordPress do swojej witryny:

1. Zainstaluj wtyczkę, taką jak Head & Footer Code.
2. Użyj swojego funkcje.php plik, aby dodać niestandardowy JavaScript do pojedynczej strony lub postu.
3. Dodaj JavaScript do swojego nagłówka, używając formatu wp_enqueue_script funkcja lub wp_head hak.

Teraz, gdy wiesz, jak dodać niestandardowy JavaScript do WordPress, możesz zainteresować się naszym innym przewodnikiem na temat dodawania niestandardowego CSS do WordPress.