Jak dodać własny kod JavaScript w WordPress

Własny kod JavaScript w WordPress

Jeśli zdarza Ci się sporadycznie coś majstrować przy WordPress na własną rękę, to może przyjść taki moment w którym odbijesz się od ściany. Zaczniesz szukać pomocy w wyszukiwarce i natkniesz się na rozwiązanie swojego problemu. Jeśli masz szczęście, wystarczy kilka kliknięć i jesteś w domu. Czasem jednak znalezione poradniki przedstawią Ci rozwiązanie oparte o konieczność dodania własnych skryptów. I tu zaczynają się schody. Widzisz kod, ale nie wiesz jak go zaimplementować na stronie. Dziś pokażę Ci jak dodać własny kod JavaScript w WordPress.

Własny kod JavaScript w WordPress

Wbudowane narzędzia WordPress bez problemu pozwalają w relatywnie prosty sposób dodać kod CSS do strony. Kod CSS odpowiedzialny jest za warstwę wizualną. Kod JavaScript natomiast (ale nie tylko on sam) odpowiada za warstwę funkcjonalną. Może uruchamiać czy wykonywać określoną akcję. Przydatny jest gdy chcesz podpiąć kod śledzenia Google Analytics, Facebook Pixel lub inny skrypt potrzebny do wykonania określonego zadania.

W zależności od Twojego poziomu zaawansowania, masz kilka sposobów na to, aby własny kod JavaScript dodać do WordPress. Omówię dzisiaj dwie najwygodniejsze metody.

JavaScript za pomocą wtyczki

Pierwszą i najłatwiejszą metodą dodania własnego kodu JavaScript do strony WordPress jest instalacja dedykowanej wtyczki. W repozytorium WordPress znajdziesz ich całą masę. Którą wybrać? W zasadzie dowolną, która spełnia wszystkie wymagane kryteria do twojego działania. Jeśli nie wiesz na czym się oprzeć, sprawdź mój wpis o tym, jak wybrać wtyczkę.

Ja w dzisiejszym artykule oprę się o bardzo popularny plugin WPCode (wcześniej Insert Headers and Footers by WPBeginner). Ma ona swoje wady i zalety, ale na potrzeby dzisiejszego artykułu pasuje idealnie.

Wtyczka WPCode pozwala dodać własne skrypty w dowolnej części strony.

Wiesz jak dodać wtyczkę? Świetnie, idziemy dalej. Po instalacji i włączeniu wtyczki przejdź do nowej pozycji w menu po lewej stronie „Code Snippets”. Następnie w tym samym menu odszukaj zakładki „Header & Footer”. Zobaczysz trzy proste pola: “Header”, “Body” i “Footer”. Czyli odpowiednio skrypty w nagłówku strony, treści strony oraz w stopce. 

W zależności od funkcji jaką pełni kod który chcesz użyć, wklej go do odpowiedniego pola. Część skryptów, takie jak kody śledzące może wymagać użycia w nagłówku strony a część w treści lub stopce. Kod wklejony w stopce strony wykonywany jest na samym końcu jej wczytywania a więc nie blokuje przeglądarki przed ładowaniem pozostałych treści.

Wklej swój kod JavaScript, zapisz zmiany i gotowe!

Zaletą tej metody jest prostota użycia. Kilka szybkich kliknięć i sprawa załatwiona. Wad jest jednak kilka. Nie każdy chce instalować kolejną wtyczkę do kilku linijek skryptu. Dodatkowa wtyczka nierzadko posiada więcej kodu niż rzeczony fragment, który chcesz użyć. Dodatkowo, w przypadku w którym kod okaże się wadliwy i spowoduje błąd krytyczny WordPress, jedyną deską ratunkową będzie wyłączenie całej wtyczki.

JavaScript przy edycji functions.php 

Drugą metodą dodania kodu JavaScript do WordPress jest edycja pliku functions.php znajdującego się w folderze z plikami motywu który używasz. 

Ale uwaga! Nie edytuj tego pliku bezpośrednio w motywie głównym. Twoje zmiany zostaną nadpisane przy kolejnej jego aktualizacji. Zamiast tego, upewnij się, że używasz motywu potomnego. Motyw potomny, bo bliźniaczy motyw będący jakoby dzieckiem swojego rodzica. 

Motyw główny to motyw w którym znajdują się wszystkie jego pliki określające wygląd i działanie Twojej strony. Rozbudowane motywy potrafią mieć nawet kilkaset lub kilka tysięcy plików. Są one automatycznie nadpisywane gdy autor motywu wyda aktualizację. 

Motyw potomny to osobny motyw w którym umieszcza się tylko zmodyfikowane pliki motywu głównego wraz z funkcjami i poleceniami które mają nadpisać motyw główny. Jakiekolwiek nowe funkcje w nim umieszczone, zostaną wykonane niezależnie od tego co znajduje się w motywie głównym. Dlatego jeśli za jego pomocą nadpiszesz kod oryginalnie napisany przez autora motywu, to nie stracisz go przy kolejnej aktualizacji. Minimalizujesz też ryzyko przypadkowego uszkodzenia oryginalnego kodu, bo w ogóle go nie ruszasz.

Gdy chcesz dodać własny skrypt w nagłówku swojej strony (czyli wykonywany na całej stronie) to w pliku functions.php dodaj taką funkcję i wklej w środku swój kod:

function wyklikane_custom_javascript() {
    ?>
        <script>
          // tutaj wklej swój kod
        </script>
    <?php
}
add_action('wp_head', 'wyklikane_custom_javascript');

Jeśli natomiast chcesz, aby kod wykonywany był tylko na jednej określonej podstronie, możesz użyć warunku:

function wyklikane_custom_javascript() {
  if (is_single ('123')) { 
    ?>
        <script type="text/javascript">
          // tutaj wklej swój kod
        </script>
    <?php
  }
}
add_action('wp_head', 'wyklikane_custom_javascript');

Zauważ, że w przykładowym warunku użyty jest numer 123, będący numerem ID postu, na którym wykonany ma być skrypt. Numer ID postu lub strony znajdziesz w zapleczu na liście stron i wpisów, najeżdżając myszką na link “Edytuj”. Zobaczysz fragment zaczynający się od “post=”.

Pasek adresu

Wady i zalety edycji functions.php

Niewątpliwą zaletą drugiego rozwiązania jest omijanie potrzeby instalacji dodatkowego pluginu. Dbamy tym samym o czystość kodu i jego wydajność. Nie musimy też pamiętać o aktualizacjach dodatkowej wtyczki, która przecież ma nam pomóc w prostej sprawie. Wadą a w zasadzie drobną niedogodnością jest konieczność manualnej edycji pliku motywu. Czy to za pomocą edytora w zapleczu WordPress czy to poprzez modyfikację pliku protokołem FTP. Jeśli nie mamy jednak motywu potomnego, opcja z dodatkową wtyczką będzie jedyną rozsądną alternatywą.

Co zrobić i jak żyć

Podsumowując, jeśli wiesz co robisz, chcesz dbać o szczegóły, porządek i optymalizację swojej strony, spróbuj dodawać własny kod JavaScript w WordPress poprzez edycję pliku functions.php w motywie potomnym. Jeśli jednak boisz się ryzyka związanego z grzebaniem w kodzie lub nie masz motywu potomnego – zostaje Ci opcja z wtyczką. Tak czy inaczej, każda z opisanych powyżej metod powinna zadziałać.

ZAPISZ SIĘ DO NEWSLETTERA!

Bądź na bieżąco! W newsletterze będziesz otrzymywać m.in. informacje o nowych wpisach na blogu, poradnikach na YouTube, e-bookach oraz ważnych wydarzeniach ze świata WordPress. Wysyłam jedynie wartościowe treści.

Facebook
Twitter
Email
Drukuj