WordPress JavaScript: przewodnik dla początkujących

Jeśli zapytasz milion programistów, czym jest JavaScript, otrzymasz milion różnych odpowiedzi. Prawie wszystko, co interaktywne w sieci, odbywa się za pomocą JavaScript.

Jako nowoczesny system zarządzania treścią (CMS), WordPress i wiele jego wtyczek częściowo polega na JavaScript, aby wykonać zadanie. Wbrew pozorom JavaScript nie ma żadnego związku z językiem programowania Java. Nazywa się to tylko w celach marketingowych.

Zagłębmy się we wszystko, co musisz wiedzieć, aby wykorzystać połączoną moc JavaScript i WordPress.

Co to jest JavaScript?

Dawno temu Internet opierał się wyłącznie na HTML i CSS. Takie połączenie pozwala na bardzo podstawową stylizację treści. Jednak niewiele można było zrobić, aby treść była dynamiczna, a tworzenie aplikacji internetowych nie wchodziło w rachubę.

Ponieważ serwery były znacznie droższe w utrzymaniu, programiści zdecydowali się napisać JavaScript do działania na maszynie klienckiej. Napisany w podobny sposób do innych funkcjonalnych języków programowania, JavaScript może przenosić dane do funkcji, przetwarzać je i wyprowadzać dane.

Przeglądarki internetowe mają silnik JavaScript, który potrafi wykonać kod JavaScript. Na przykład silnik JavaScript w Chrome to v8, a silnik JavaScript FireFox to SpiderMonkey. Z tego powodu JavaScript opiera się na przeglądarkach, które „rozumieją”, jak interpretować, obsługiwać i manipulować wyświetlaniem danych.

Techniczne aspekty JavaScript

Chcesz dowiedzieć się więcej o technologii stojącej za JavaScriptem? Jest kilka ważnych wyróżników, o których powinni wiedzieć ci, którzy mają doświadczenie w innych rodzajach rozwoju. Po pierwsze, JavaScript jest niezależny od typu, jak PHP. Oznacza to, że jego zmienne nie mają zdefiniowanego typu, a każda zmienna może być przypisana do prawie każdego typu wartości.

Większość współczesnych języków jest „zorientowana obiektowo”, co oznacza, że ​​opierają się na „klasach” wielokrotnego użytku, które reprezentują obiekt dosłowny. Najbliższy temu JavaScript jest poprzez „prototypy”. Te struktury danych mogą być ponownie wykorzystywane i mogą przechowywać określone wartości, ale ich funkcjonalność i użyteczność są znacznie bardziej ograniczone niż języki zbudowane wokół koncepcji obiektowej, takie jak Java.

Co robi JavaScript?

Ze względu na ogromne wsparcie społeczności i inwestycje dużych firm, takich jak Facebook, a nawet Netflix, JavaScript może znacznie więcej niż działać w przeglądarkach internetowych. JavaScript może zrobić coś tak prostego, jak przechwycenie bieżącego roku, aby wyświetlić go obok symbolu praw autorskich na stronie internetowej, oraz bardziej złożone prace, takie jak wykonanie większości przetwarzania dla internetowego edytora obrazów.

Krótko mówiąc, JavaScript robi prawie wszystko, co programista chce, aby robił na komputerze klienta. JavaScript buforuje lokalnie na komputerze klienta, gdy klient odwiedza witrynę, która go używa.

Podczas gdy wrażliwe dane muszą być obsługiwane na serwerze, wiele aplikacji internetowych intensywnie wykorzystuje JavaScript, aby wykorzystać moc obliczeniową komputera klienckiego. Teraz, gdy jesteśmy w erze niekończących się „frameworków”, które znacznie przyspieszają tworzenie różnego rodzaju treści, możliwości są nieskończone.

Czy JavaScript jest bezpieczny?

Podobnie jak większość protokołów i starszych języków, JavaScript nie był początkowo budowany z myślą o bezpieczeństwie. Można się nad tym zastanawiać, biorąc pod uwagę, jak powszechne stały się cyberataki.

Istnieją rozszerzenia przeglądarki, takie jak „NoScript”, które po prostu blokują wykonywanie całego kodu JavaScript. Dopóki przestrzegasz ogólnej zasady sieci i nie odwiedzasz niezaufanych witryn, możesz pozwolić na działanie JavaScript.

Ponieważ jest to język programowania, złośliwi użytkownicy mogą oczywiście wykorzystać go do ataku na Twój komputer. Nowoczesne przeglądarki automatycznie wykryją większość tych ataków. Jeśli martwisz się o bezpieczeństwo za pomocą JavaScript WordPress, możesz mieć trochę spokoju dzięki wtyczce zabezpieczającej WordPress, która włącza większość aspektów bezpieczeństwa witryny do autopilota.

Dwa główne typy ataków JavaScript

Powiedzenie „trzymaj przyjaciół blisko, a wrogów bliżej” jest istotne, jeśli chodzi o rozwój i bezpieczeństwo. Bardzo ważne jest, aby zrozumieć, w jaki sposób źli ludzie wykorzystują JavaScript, abyś mógł pokrzyżować ich wysiłki!

Skrypty między witrynami (XSS)

Cross-site scripting (XSS) to rodzaj ataku złośliwego oprogramowania, który jest wykonywany przez wykorzystanie luk w zabezpieczeniach między witrynami w dowolnej witrynie WordPress. W rzeczywistości jest to najczęstszy sposób hakowania witryn WordPress, ponieważ istnieje tak wiele wtyczek WordPress, które mają luki XSS.

Atak cross-site scripting jest stosowany, jeśli strona pozwala na przesyłanie na nią danych. W tym ataku złośliwy użytkownik umieszcza kod JavaScript w danych, które mają zostać przesłane na publicznie dostępną stronę.

Jeśli nie zostaną podjęte żadne środki zaradcze, ten złośliwy kod faktycznie uruchamia kod JavaScript na każdym komputerze, który odwiedza tę stronę. Dlatego ważne jest, aby „oczyszczać” dane wejściowe. Oznacza to, że przed opublikowaniem usuwasz takie rzeczy, jak nawiasy i cudzysłowy, które sprawią, że kod stanie się bezużyteczny.

Fałszowanie żądań między witrynami (CSRF)

Ten typ ataku wykorzystuje strony internetowe, na których być może jesteś już zalogowany. Najczęstszym scenariuszem byłoby zalogowanie się do swojego banku.

Załóżmy, że jesteś zalogowany na swoje konto bankowe, ale następnie zdecyduj się na przejście na stronę z torrentami, która ma gotowy CSRF. CSRF, w przypadku braku ograniczeń przeglądarki, przyjmuje wzorzec łącza do wykonywania takich czynności, jak przelewy bankowe dla każdego większego banku, a następnie uruchamia je na komputerze w tle.

Jeden ze scenariuszy, który faktycznie miał miejsce w przypadku dużej witryny i dużego banku, polegał na tym, że link banku do przelewu pieniędzy wyglądał tak: www.bankwithbadsecurity.com/transfer&amount=1000&toAccount=12345, aby przelać 1000 USD na konto o numerze 12345 .

Dla banku wygląda na to, że o to poprosiłeś, a ponieważ żądanie pochodziłoby z Twojego adresu IP, trudno jest udowodnić, że to nie Ty go zainicjowałeś. Na szczęście większość nowoczesnych przeglądarek automatycznie to wykryje i zapobiegnie.

Czy mogę używać JavaScriptu w WordPressie?

Tak, możesz używać JavaScript podczas tworzenia aplikacji dla WordPressa. Pamiętaj, że WordPress to elastyczny system zarządzania treścią, który ma dwa tryby edycji. Jeden z nich umożliwia bezpośrednią edycję kodu, a drugi pozwala na użycie edytora podobnego do tego, który można zobaczyć w edytorze tekstu, znanego również jako edytor „WYSIWYG”. W najnowszej wersji WordPressa edytor WYSIWYG nazywa się Gutenberg.

Pamiętaj, że możesz również używać JavaScript podczas tworzenia rozszerzeń do WordPressa. Podczas gdy strona serwerowa WordPressa to PHP, strona kliencka to prawie 100% czasu JavaScript.

Czy powinienem nauczyć się JavaScript dla WordPress?

Odpowiedź na te pytania zależy od tego, co zamierzasz zrobić z WordPressem. Jeśli potrzebujesz tylko kilku statycznych stron, które generujesz za pomocą platformy, prawdopodobnie będziesz w porządku bez nauki JavaScript.

Z drugiej strony, rozpoczęcie pracy z JavaScriptem jest dość łatwe, a dowiesz się również wiele o tym, jak działa HTML i CSS. Jednak oprócz szkolenia WordPress, będziesz chciał popracować nad nauką JavaScript, jeśli chcesz stworzyć dynamiczną i zapadającą w pamięć witrynę.

Szybkie ostrzeżenie: jeśli jesteś początkującym programistą internetowym, nie oczekuj, że opanujesz JavaScript w ciągu kilku dni. JavaScript jest znany z tego, że ma bardzo niejasne komunikaty o błędach i często jest krytykowany za to, że jest „kodem spaghetti”. Oznacza to, że przez lata programiści gromadzili mnóstwo kodu, nie organizując go odpowiednio. Ponadto większość programistów uczy się programować we frameworkach, które używają JavaScript, ale są nieco inne pod względem składni.

Należy przede wszystkim inwestować czas w nauce JavaScript jeśli jesteś freelancer lub agencji, która zarządza strony klientów. Chociaż istnieją najwyższej klasy narzędzia, które pozwalają zarządzać wieloma witrynami WordPress, żadna wtyczka nie może tworzyć witryn za Ciebie!

Ponadto, jeśli chcesz zostać programistą internetowym, nauka JavaScript jest korzystna dla tych karier:

• Programista front-end
• Programista zaplecza
• Programista pełnego stosu

Ponadto nauka JavaScript wraz z bardziej zaawansowanym HTML, CSS i PHP służy jako solidna podstawa WP, która prawdopodobnie obniży koszty ogólne. Nie będziesz już musiał płacić zewnętrznym wykonawcom, wcinając się w swoje zyski, za wykonywanie zadań, których wykonanie w rzeczywistości może zająć kilka minut. Kiedy już opanujesz JavaScript, możesz przejść do popularnych frameworków, takich jak React i Angular, aby tworzyć naprawdę unikalne, responsywne aplikacje w WordPressie.

Jak pisać JavaScript podczas kodowania w WordPressie?

Mimo że dodanie kodu JavaScript do witryny WordPress nie jest tak proste, jak dodanie CSS i HTML, rozpoczęcie pracy nie zajmie Ci dużo czasu. Można do tego podejść na dwa różne sposoby, a każdy z nich ma inny cel.

Metoda 1: na każdej stronie

Jeśli chcesz uruchomić ten sam skrypt na każdej stronie swojej witryny WordPress, ręczne dodawanie kodu do każdej strony byłoby co najmniej dość żmudne. Właściwym miejscem do wstawienia kodu JavaScript w HTML jest nagłówek i stopka strony.

Istnieje kilka darmowych wtyczek, które przejmą dostosowany kod JavaScript i umieszczą go w nagłówku i/lub stopce każdej strony w witrynie WordPress. Administratorzy WordPressa uwielbiają te wtyczki, ponieważ doskonale współpracują z Google Analytics, zapewniając, że każde trafienie na stronę jest liczone, co pomaga szybciej zwiększyć pozycję SEO.

Metoda 2: Różne JavaScript na każdej stronie

Załóżmy, że prowadzisz witrynę WordPress, która ma na każdej stronie inne narzędzie, które do działania opiera się na co najmniej jednej „bibliotece”. Zmuszenie całego kodu JavaScript do załadowania na każdej stronie, zwłaszcza gdy nie jest to potrzebne, po prostu spowolni dostęp do Twojej witryny. Zdrowy rozsądek podpowiada nam, że spowolnienie wrażeń odwiedzających nie jest najlepszym sposobem na zdobycie klientów!

W sieci jest mnóstwo samouczków, które zawierają szalenie skomplikowane metody wykonywania tego procesu. Chociaż prawdą jest, że można to zrobić, dokonując złożonych edycji w pliku functions.php, nie ma potrzeby stosowania tego podejścia, chyba że lubisz bóle głowy.

Zamiast tego zainstaluj wtyczkę Code Embed w swojej witrynie. Umożliwi to dodanie kodu JavaScript i osadzenie go w dowolnym miejscu na stronie.

Korzystanie z wtyczki CodeEmbed

Po zainstalowaniu wtyczki Code Embed przejdź do opcji ekranu i kliknij pole wyboru „Pola niestandardowe”. Umożliwi to dodanie kodu JavaScript do strony.

Na stronie edycji zobaczysz pole z napisem „Pola niestandardowe” z opcją „Wprowadź nowe” pola niestandardowe. Kliknij na to, a będziesz miał puste pola tekstowe na wpisanie nazwy kodu JavaScript, a także samego kodu.

Aby uniknąć konfliktów z istniejącymi kodami WordPress, musisz rozpocząć nazwę swojego kodu JavaScript od wielkich liter „KOD”. Coś takiego jak „CODEtimer” byłoby w porządku. Następnie dodasz właściwy kod JavaScript do drugiego pola. Upewnij się, że dołączasz tagi otwierające i zamykające skrypt !

Gdy skończysz, po prostu kliknij przycisk „Dodaj pole niestandardowe”. Na koniec określ, w którym miejscu strony chcesz wykonać kod JavaScript. Na przykład, jeśli kod wczytuje licznik czasu, znajdź na swojej stronie miejsce, w którym chcesz wstawić ten licznik. Następnie użyjesz dokładnej składni [[CODEtimer]], aby WordPress wstawił tam swój kod JavaScript i gotowe!

Jak dołączyć moje pliki JavaScript i CSS do WordPressa?

Chociaż WordPress ma wbudowane motywy, wielu twórców stron internetowych woli mieć bardziej unikalny projekt i używać własnego CSS. Będziesz także potrzebował sposobu na przechowywanie tych plików JavaScript.

W tej części musisz przejść do Menedżera plików i zlokalizować plik o nazwie „functions.php”. Zwróć uwagę, że będzie to folder, w którym znajduje się motyw podstawowy Twojej witryny.

Dodawanie CSS do functions.php

Po przejściu do pliku functions.php wykonaj następujące czynności:

1. W nowym wierszu utwórz pustą funkcję, dodając funkcję kodu
   addMyCSS() { #Wypełnij to później }
2. „Zarejestruj” plik CSS w WordPressie, używając wbudowanej funkcji o nazwie wp_register_style w następnym kroku
3. Usuń wypełniacz, który umieściliśmy w kodzie i zamiast tego wstaw wp_register_style('name_of_css_style',plugins_url('file-location.css',__FILE__));
4. Powiedzieliśmy teraz WordPressowi, jak nazwać nasz styl CSS i gdzie on się znajduje. Teraz nadszedł czas, aby „umieścić” styl w kolejce lub powiedzieć WordPressowi, że jesteśmy gotowi go użyć.
5. Pozostając w bloku funkcyjnym addMyCSS , dodaj kod wp_enqueue_style('name_of_css_style'); tuż pod kodem, który wpisaliśmy w ostatnim kroku.
6. Jest jeszcze jeden ostatni krok, ale najpierw upewnij się, że jesteś POZA całą funkcją , którą stworzyliśmy iw ogólnej części pliku PHP.
7. Poza addMyCSS , po prostu dodaj następujący wiersz: add_action('wp_enqueue_scripts','name_of_css_style'); . To mówi WordPressowi, aby uruchomił ładowanie tego pliku podczas ładowania strony.

Być może zastanawiasz się, dlaczego mamy wp_enqueue_scripts w funkcji add_action dla arkusza stylów. W ten sposób WordPress zawsze implementował tę funkcję.

Dodawanie plików JavaScript do WordPress

Teraz, gdy omówiliśmy już proces generowania funkcji, rejestrowania pliku i dodawania akcji, ta część powinna być bułka z masłem!

1. Utwórz funkcję w functions.php o nazwie addMyJS, tak jak zrobiliśmy to z addMyCSS .
2. Wykorzystamy funkcję wp_register_script , ale jest ona nieco bardziej złożona. Posiada pięć „parametrów” (pozycje w nawiasach). Spójrz poniżej, aby zobaczyć, jaki jest każdy parametr.
3. wp_register_script(1. Twoja nazwa skryptu, 2. plugins_url(lokalizacja_skryptu.js, __FILE__), 3. tablica zależności JS, zwykle array(jquery), 4. (Opcjonalne) wersja twojego pliku JS w pojedynczych cudzysłowach, 5. powinna być true jeśli chcesz umieścić JS w stopce, false jeśli chcesz umieścić go w nagłówku);
4. Oto praktyczny przykład kodu JavaScript do uruchomienia w stopce motywu: wp_register_script('timer_js', plugins_url('timer_file.js', __FILE__), array('jquery'),'1.0', true);
5. Ponownie, POZA naszą funkcją addMyJS , „umieścić w kolejce” swój skrypt, umieszczając to w ogólnym obszarze PHP: add_action( 'wp_enqueue_scripts', 'addMyJS' );

Może to wyglądać na skomplikowane, ale gdy już to opanujesz, zajmie to mniej niż minutę, więc nie bój się!

Jakich wtyczek mogę użyć, aby dodać JavaScript do WordPressa?

Istnieje wiele całkowicie darmowych wtyczek tylko do tego celu. Każdy działa nieco inaczej, więc przed zatwierdzeniem poeksperymentuj z kilkoma. Oto pięć głównych do wypróbowania.

• ASync – wyjątkowo ta wtyczka ładuje zarówno pliki JS, jak i CSS oddzielnie od reszty strony. Może to być szczególnie przydatne, jeśli wystąpi błąd w kodowaniu, który w przeciwnym razie w nieskończoność uniemożliwiłby ładowanie strony.

• JS w widżetach – wystarczy dodać kilka linijek kodu do czegoś takiego jak Google Analytics? Ta wtyczka eliminuje problemy i umożliwia dodawanie małych fragmentów do witryn WordPress.

• Zia CSS/JS Helper – ten jest zdecydowanie najlepszy dla osób doświadczonych w klasycznym tworzeniu stron internetowych HTML/CSS/JS. To sprawia, że ​​​​funkcja edycji WordPressa jest podobna do edycji witryny za pomocą menedżera plików cPanel. Możesz wykorzystać wbudowane CSS i JavaScript, aby szybko dodawać fragmenty kodu, tworzyć i zarządzać plikami zewnętrznymi i nie tylko.

Zawsze najpierw wykonaj kopię zapasową swojej witryny!

Chociaż zdecydowana większość wtyczek WordPress nie wyrządzi Twojej witrynie szkody, zawsze istnieje ryzyko, że napotkasz problemy. Zanim zainstalujesz dodatkowe wtyczki lub zmodyfikujesz swoją witrynę, wykonaj kopię zapasową swojej witryny za pomocą wtyczki do tworzenia kopii zapasowych WordPress, która może obsłużyć pełne kopie zapasowe instalacji WordPress, takie jak BackupBuddy. Zaoszczędź sobie godzin możliwych przeróbek i upewnij się, że cała ciężka praca nie pójdzie na marne.

Czy mogę korzystać z API WordPress za pomocą JavaScript?

Jak być może wiesz, WordPress ma obszerną serię interfejsów API lub interfejsów programowania aplikacji. Interfejsy API to zasadniczo funkcje po stronie serwera, których można używać w językach takich jak JavaScript. Nowsza, bardziej nowoczesna metoda dla programistów do nauki funkcji API WordPress jest dostępna na stronie Dokumentacja kodu API WordPress WordPress.

To tutaj dostaliśmy te „wbudowane funkcje”, z których korzystaliśmy wcześniej. Moglibyśmy całymi dniami opowiadać o każdej funkcji w interfejsach API i o tym, jak działają w połączeniu z JavaScript. Jest to jednak zaawansowany temat, który po prostu wymaga indywidualnego czasu i poświęcenia na naukę.

Czy istnieją biblioteki JavaScript dostosowane do WordPressa?

Tak! Zdając sobie sprawę, że wielu programistów nie opanowało całej zawartości WordPress API, wielu programistów stworzyło biblioteki JavaScript, które można łatwo osadzić, używając dowolnej z omówionych wcześniej wtyczek.

Większość bibliotek JavaScript znajduje się na GitHub i jest całkowicie darmowa. Istnieją setki tysięcy dostępnych bibliotek JavaScript kompatybilnych z WordPress, od takich, które dodają zabawne efekty do WordPress, po takie, które pozwalają stworzyć witrynę o bardzo podobnym układzie do Pinteresta!

Najbardziej znana biblioteka używana z WordPress (i większością witryn) nazywa się jQuery. jQuery eliminuje złożoność JavaScriptu, a gdy już go opanujesz, będziesz pisać funkcje szybko i łatwo.

Pomoc! Mój JavaScript WordPress nie działa!

Jedną z mniej szczęśliwych części JavaScriptu jest to, że błędy nie są oczywiste. A dodanie do tego WordPressa może sprawić, że będzie to dość mylące.

Niektóre błędy mogą być spowodowane tak łatwo, jak zapomniany cudzysłów. Inne mogą być spowodowane poważnymi błędami kodowania, które nie są tak łatwe do zidentyfikowania. Jak więc profesjonalni programiści odróżniają?

Istnieją dwa główne klucze do rozwiązywania problemów: funkcja JavaScript console.log i konsola debugowania przeglądarki. W szczególności konsola Chrome jest do tego świetna.

konsola.log

Można to wykorzystać, aby zobaczyć, jaka jest wartość zmiennej w danym punkcie funkcji i upewnić się, że części funkcji są faktycznie osiągane. W pliku JavaScript umieściłbyś po prostu coś takiego jak console.log("test"); .

Konsola debugowania

W zależności od używanej przeglądarki konfiguracja konsoli będzie inna. Ogólnie rzecz biorąc, wystarczy nacisnąć F12, aby go otworzyć, a następnie kliknąć kartę „Konsola”.

Konsola pokaże w jakiej linii, w jakim pliku JavaScript wystąpił błąd. Zwykle pokazuje pełny „ścieżkę stosu” lub serię plików, przez które należy przejść, dopóki nie trafisz na sprawcę. Jest to również miejsce, w którym drukowane są wiadomości z pliku console.log .

Podsumowanie: JavaScript + WordPress

Istnieją profesjonalne narzędzia, które dadzą ci znacznie więcej informacji, ale zazwyczaj kosztują nieźle. Dobrą wiadomością jest to, że w miarę rozwoju jako następny największy na świecie programista JavaScript JavaScript, narzędzia będą się skalować razem z Tobą!

Kristen Wright

Kristen pisze samouczki, które pomagają użytkownikom WordPressa od 2011 roku. Zwykle można ją znaleźć, gdy pracuje nad nowymi artykułami na blogu iThemes lub opracowuje zasoby dla #WPprosper. Poza pracą Kristen lubi prowadzić dzienniki (napisała dwie książki!), wędrować i biwakować, gotować i codzienne przygody z rodziną, mając nadzieję na bardziej obecne życie.