Na grudniowym WordCamp US, współzałożyciel WordPress Matt Mullenweg użył swojego stanu słowa talk, aby zachęcić nas do ” learn JavaScript, deeply.”Ale co to oznacza i co programiści WordPress muszą wiedzieć o JavaScript?

JavaScript jest uznanym i stale rozwijającym się językiem front-end, który jest tradycyjnie używany do tworzenia animacji i efektów na stronach internetowych. Szanse są, jeśli masz wtyczkę na swojej stronie do suwaka, linków do mediów społecznościowych lub responsywnego menu nawigacyjnego, używa JavaScript do tworzenia efektów.

Jeśli jesteś programistą WordPress przyzwyczajonym do pracy z PHP, być może nigdy nie dotknąłeś linii JavaScript i możesz czuć się nieco zastraszony perspektywą zagłębienia się w nią.

Ale dobrą wiadomością jest to, że PHP i JavaScript mają swoje podobieństwa. Działają na różne sposoby i w różnych kontekstach, ale kod, który piszesz, nie zawsze jest tak różny.

W tym poście przedstawię niektóre z kluczowych pojęć JavaScript, które programiści WordPress muszą zrozumieć, aby rozpocząć pracę z nim. Pokryję:

  • JavaScript i WordPress – jak współdziałają, podobieństwa i różnice
  • Używanie JavaScript w szablonach i wtyczkach-najprostszy sposób na rozpoczęcie nauki JavaScript
  • Interakcja z API WP-REST – przegląd.

Ale zacznijmy od szybkiego wprowadzenia do JavaScript i dlaczego staje się on tak popularny.

Czym w ogóle jest JavaScript?

JavaScript to język programowania front-end (zwany również po stronie klienta), co oznacza, że komunikuje się z przeglądarką internetową użytkownika, gdy odwiedza witrynę. Jest to główna różnica między JavaScript i PHP, który jest językiem back-end (lub po stronie serwera), co oznacza, że komunikuje się z serwerem. Oznacza to, że strony zasilane przez JavaScript mogą działać znacznie szybciej i być bardziej responsywne:

  • Jeśli Twoja witryna korzysta z PHP, aby odpowiedzieć na coś, co robią użytkownicy, żądanie zostanie wysłane na serwer, aby przetworzyć tę zmianę, a następnie strona zostanie odświeżona po aktywowaniu zmiany.
  • Jeśli używasz JavaScript, przeglądarka przetwarza zmiany, co oznacza, że żądanie nie musi iść na serwer, a strona nie odświeża się.

Możesz sobie wyobrazić korzyści, jakie może to przynieść: wycinanie wszystkich tych żądań serwera może sprawić, że Twoja witryna będzie działać znacznie szybciej i zapewni elastyczność w tworzeniu aplikacji internetowych, które działają podobnie jak programy komputerowe.

W rzeczywistości, jako użytkownik WordPress, używasz już jednego z nich, ponieważ oprogramowanie WordPress wykorzystuje JavaScript do zasilania ekranów administratora zaplecza. Jeśli kiedykolwiek przeciągałeś i upuszczałeś elementy do menu, tworzyłeś Widżety lub korzystałeś z Dostosowywacza, skorzystałeś z JavaScript, który zasila administratora WordPress.

Ale to nie znaczy, że używanie Javascript jest zawsze lepsze niż PHP. Czasami możesz chcieć, aby serwer odświeżył stronę, na przykład jeśli chcesz wygenerować nowe strony i adresy URL do celów SEO (chociaż istnieje sposób na obejście tego w JavaScript).

Innym potencjalnym minusem korzystania z JavaScript jest to, że nie będzie działać, jeśli użytkownicy nie mają włączonej obsługi JavaScript w przeglądarce. Nowoczesne przeglądarki (zarówno stacjonarne, jak i mobilne) działają doskonale z Javascript, ale jeśli użytkownik ma starszą przeglądarkę lub JavaScript nie gra dobrze z ich wersją Internet Explorera lub używa narzędzi ułatwień dostępu, które wymagają wyłączenia JavaScript, nic nie będzie działać. Na wszelki wypadek warto więc mieć rezerwę po stronie serwera.

Na koniec ważne jest, aby pamiętać, że znaczniki generowane przy użyciu JavaScript po załadowaniu strony nie zawsze będą indeksowane przez wyszukiwarki. Jeśli więc coś jest kluczowe dla rankingów w wyszukiwarkach, dodaj to za pomocą języka po stronie serwera lub użyj metody JavaScript, którą wyszukiwarki mogą odczytać.

JavaScript i WordPress

Jako programista WordPress nie musisz wiedzieć wszystkiego o JavaScript, wystarczy wiedzieć, co jest istotne podczas pracy z WordPress.

Rzućmy więc okiem na zastosowania JavaScript z WordPress i jak te dwa współdziałają ze sobą.

1. JavaScript jest już częścią WordPress

JavaScript jest już dostarczany w pakiecie z WordPress, w postaci wielu bibliotek JavaScript, takich jak jQuery, JSON, Backbone.js i podkreślenie.js.

Może to być zniechęcające patrząc na tę listę i zastanawiając się, od czego zacząć, więc polecam skupić się na jQuery pierwszy. jQuery to ogromna biblioteka, która sprawia, że programowanie z JavaScript jest łatwiejsze i bardziej niezawodne (na przykład zwiększenie obsługi przeglądarki), a jeśli dodajesz animacje lub efekty do swojej witryny za pomocą motywu lub wtyczki, to jQuery jest prawdopodobnie narzędziem, którego użyjesz do tego.

Gdy już masz jakieś doświadczenie z JavaScript za pomocą jQuery, będziesz wiedzieć, jak działają skrypty i być gotowy, aby przejść do korzystania z JSON do interakcji z API WP-REST. Więcej o tym później w tym poście.

2. JavaScript jest w wielu wtyczkach i motywach

Prawdopodobnie masz zainstalowane wtyczki na swojej stronie, które używają JavaScript do tworzenia efektów i animacji, a może do dynamicznego przenoszenia danych lub wstawiania treści. Jest również w wielu motywach, albo zasilając efekty w interfejsie, albo zwiększając dynamikę interakcji z motywem na ekranach administratora.

3. JavaScript zasila administratora WordPress

JavaScript stał się coraz bardziej fundamentalny dla administratora WordPress w ostatnich wersjach i prawdopodobnie stanie się jeszcze ważniejszy w przyszłości, zwłaszcza wraz z wydaniem Calypso, całkowicie opartej na JavaScript wersji administratora WordPress.

WordPress Customizer screen
Dostosowywacz używa JavaScript

Wszystko, co robisz na ekranach administratora, które skutkują natychmiastowymi zmianami, będzie korzystać z JavaScript, w tym:

  • Tworzenie i Edycja menu
  • Tworzenie i edycja widżetów
  • Aktualizacja wtyczek i motywów
  • Korzystanie z dostosowywania.

Dopiero po kliknięciu na PublikujAktualizacja lub Zapisz Zmiany przyciski, w które włącza się PHP, do bazy danych wprowadzane są trwałe zapisywania, a ekran administratora odświeża się, dlatego tak ważne jest kliknięcie tych przycisków.

4. JavaScript i API WP-REST

W ciągu ostatniego roku JavaScript awansował z roli wspierającej do roli bliższej wiodącej, jeśli chodzi o WordPress, a to wszystko dzięki WordPress REST API.

Nie zamierzam wchodzić w ogromne ilości szczegółów na temat tego, czym jest API, ponieważ już to zrobiliśmy, ale jest to jeden z przykładów interakcji WordPress z JavaScript.

Samo API jest napisane w PHP, ponieważ wymaga użycia języka po stronie serwera do interakcji z bazą danych. Ale różnica polega na tym, że można z nim współdziałać za pomocą JavaScript, w szczególności za pomocą obiektów JSON.

Dam ci przegląd tego, jak to zrobić później w tym poście, ale najpierw przyjrzę się miejscu, w którym większość ludzi zaczyna używać JavaScript z WordPress: dodawanie go do wtyczek i motywów.

Używanie JavaScript w wtyczkach i motywach

Jeśli dodajesz efekty JavaScript, możesz to zrobić w wtyczkach i motywach. Jeśli używasz REST API, możesz to zrobić za pomocą wtyczki lub motywu (przy użyciu PHP z opcjonalnym JavaScript) lub za pomocą zewnętrznej aplikacji (przy użyciu JavaScript). Moim zdaniem warto zacząć od użycia jQuery, aby dodać interakcję lub dwie, ponieważ pomoże Ci to zapoznać się z używaniem JavaScript. Ale jeśli chcesz przejść od razu do korzystania z REST API, to śmiało!

Przyjrzyjmy się, jak wstawiasz skrypty do motywów i wtyczek oraz jak nazywasz zewnętrzne biblioteki.

1. Dodawanie skryptów do wtyczek i motywów-właściwy sposób

Jeśli słuchałeś Rad Matta i spędziłeś Święta, ucząc się wszystkiego o JavaScript, prawdopodobnie natknąłeś się na instrukcje, jak wywoływać skrypty z < head> Twoich stron. Jeśli pracujesz ze statycznym HTML, jest to właściwy sposób.

Ale przestań!

W WordPressie nie należy wywoływać skryptów z < head> sekcji, kuszony jak możesz być, aby dodać to do swojego motywu nagłówek.php plik lub podłącz go do wp_head w swoich wtyczkach. Istnieje prawidłowy sposób dodawania skryptów w WordPressie, który nazywa się enqueueing.

Sprawdzanie skryptów jest lepsze z dwóch głównych powodów:

  • Unika dodawania skryptu więcej niż raz, ponieważ WordPress nie załaduje tego samego skryptu dwa razy, jeśli zostanie zapytany dwa razy.
  • Zarządza zależnościami i kolejnością dodawania skryptów dla ciebie: więc jeśli jeden skrypt (np. ten, który napisałeś za pomocą jQuery) potrzebuje innego (np. jQuery) do załadowania, to zrobi to we właściwej kolejności.

Zauważ, że jQuery (między innymi) jest już pytany w WordPress, więc nie musisz go pytać – po prostu pytaj o własne skrypty i ustaw jQuery jako zależność.

Enqueuing scripts in WordPress - WPMU DEV guide
Dowiedz się, jak poprawnie ładować skrypty w WordPress z naszym przewodnikiem

Do zapytania skryptów używasz wp_enqueue_script() funkcji, umieszczając to wewnątrz własnej funkcji, którą następnie zaczepiasz do wp_enqueue_scripts hak. Jeśli chcesz załadować skrypt na ekranach administratora, użyj wp_enqueue_scripts() funkcja w ten sam sposób, ale podłącz swoją funkcję do admin_enqueue_styles hak.

Aby załadować skrypt do motywu, użyjesz tego kodu:

Ładowanie gist b215307bacb005482ffa

Dodaje skrypt o nazwie mój scenariusz.js, który jest przechowywany w filtrze skryptów w Twoim motywie. Zawsze dodaję skrypty w osobnym folderze, ponieważ utrzymuje porządek i jest szczególnie przydatny, jeśli chcesz dodać rudy niż jeden skrypt. Ten skrypt jest zależny od jQuery i będzie ładowany na każdej stronie.

Czasami możesz nie chcieć rejestrować skryptu na każdej stronie, w takim przypadku używasz dwóch oddzielnych funkcji: wp_register_script oraz wp_enqueue_script(). Aby uzyskać szczegółowe informacje, zobacz samouczek Daniela Pataki na temat sprawdzania skryptów we właściwy sposób.

2. JavaScript: Kilka Znanych Pojęć

JavaScript i PHP mają wspólne dziedzictwo: oba pochodzą z języka programowania C. Oznacza to, że istnieje kilka pojęć JavaScript, które będą ci znane, jeśli masz doświadczenie w pracy z PHP. Nie tak dobrą wiadomością jest to, że istnieją inne koncepcje, które będą dla Ciebie zupełnie nowe, i inne, które są podobne do PHP, ale nieco inne (co oznacza, że musisz uważać, aby nie pisać JavaScript jak to jest PHP: trochę jak nauka włoskiego była dla mnie po wcześniejszej nauce hiszpańskiego!).

Niektóre pojęcia JavaScript, które będą ci znane, jeśli masz doświadczenie z PHP, obejmują:

  • Komentarze. Używasz dokładnie tej samej składni do komentowania tekstu w JavaScript i PHP. Z pewnością bonus dla kogoś takiego jak ja, kto próbuje używać komentowania w stylu PHP w plikach CSS.
  • Składnia. JavaScript i PHP mają podobną składnię, przy czym oba używają średnika na końcu linii. JavaScript różni się sposobem, w jaki używa kropek przed metodami, ale używa nawiasów i cudzysłowów w sposób, który będzie znany.
  • Zmienne. Możesz definiować zmienne w JavaScript w podobny sposób jak w PHP, z główną różnicą, którą dodajesz var przed nazwą zmiennej. Możesz także używać zmiennych globalnych i lokalnych zarówno w JavaScript, jak i PHP.
  • Ciągi znaków, tablice, wartości logiczne i wartości liczbowe. Sposób ich działania i składnia użyta dla każdego z nich jest bardzo podobna w JavaScript i PHP. Główną różnicą jest to, że w JavaScript używasz składni do oznaczania tablic, a nie słowa array.
  • Operatorzy. JavaScript używa tych samych operatorów do arytmetyki i porównań (np. + oraz >=), z tylko jedną różnicą: JavaScript ma moduł (%) operator, który zwraca pozostałą część jednej liczby podzieloną przez drugą. Zarówno JavaScript jak i PHP używają = do przypisywania wartości i == dla równych sobie.
  • Funkcje. Możesz tworzyć funkcje w JavaScript, jak możesz w PHP. Podstawowa składnia jest taka sama jak w PHP.
  • Warunki. Możesz użyć jeśli, else oraz else if w JavaScript w taki sam sposób, w jaki byś użył jeślielse oraz elseif w PHP.

Ale jest kilka sposobów, w jaki JavaScript różni się od PHP, i kilka nowych pojęć. Oto niektóre z najważniejszych:

  • Składnia. JavaScript jest bardziej wyrozumiały, jeśli chodzi o składnię. Jeśli pominiesz średnik, Twój kod nadal będzie działał.
  • Metody. Metoda to coś, co dzieje się z obiektem. Jest to podobne do funkcji w PHP – kiedy tworzysz funkcję, wywoływasz ją za pomocą metody lub możesz wywołać wbudowaną metodę. Metodę można rozpoznać po nawiasach, które znajdują się po jej nazwie.
  • Obiekty. Obiekt w JavaScript to coś na stronie, na przykład element. Zmienne są również rodzajem obiektu. Obiekty w PHP są bardzo różne i są używane w połączeniu z klasami w PHP dzierżawionym obiektami.
  • Właściwości. Właściwości są wartościami powiązanymi z obiektem. Właściwości są również używane w PHP (z klasami), ale działają inaczej.

Metody, obiekty i właściwości są podstawowymi pojęciami używanymi podczas pisania JavaScript. Zademonstrujmy je na przykładzie:

Ładowanie gist b215307bacb005482ffa

W powyższym kodzie stworzyłem zmienną (obiekt) o nazwie animal. Ma tablicę właściwości, typu i koloru, z których każda ma wartość. Następnie używam dokument.write() metoda wyprowadzenia wartości właściwości type do strony web.

3. Używanie jQuery do dodawania efektów i animacji

Biblioteka jQuery dodaje do tego, co jest dostępne w języku JavaScript, aby dać Ci szeroki wachlarz efektów, których możesz użyć w swoich motywach i wtyczkach i jest dostarczana w pakiecie z WordPress, więc jest to świetne miejsce na początek. Jest to również najprostszy sposób na rozpoczęcie pracy z JavaScript: bonus!

Podczas pracy z jQuery będziesz używać składni JavaScript i nadal możesz używać tych samych obiektów, właściwości i metod, których używasz w vanilla JavaScript, ale możesz również korzystać z tych dostarczonych przez jQuery.

selektory jQuery

Potężnym aspektem jQuery jest sposób, w jaki pozwala wybrać elementy za pomocą ich CSS. Na przykład wybrałbyś element o id sztandar o tak.:

Ładowanie gist b215307bacb005482ffa

Można wtedy wziąć ten Selektor i zastosować do niego metodę, tak:

Ładowanie gist b215307bacb005482ffa

Przyjmuje element o ID sztandar i dodaje <H1> tag do niego z zawartością, za pomocą append() metoda.

metody jQuery

jQuery sam ma wiele metod, które można wykorzystać do tworzenia animacji i efektów. Przykłady obejmują dodawanie treści, dynamiczną zmianę css, ukrywanie i wdrażanie elementów, przenoszenie i zmianę rozmiaru elementów: pełna lista znajduje się na stronie jQuery.

jQuery używa kilku prostych pojęć, których użyjesz w swoim kodzie:

  • selektory: musisz wybrać element (lub wiele elementów) na stronie, aby móc coś z nimi zrobić.
  • filtry: możesz filtrować swój wybór, tak, że tylko niektóre elementy są zaznaczone (np. nieparzyste elementy numerowane).
  • wydarzenia: jQuery może reagować na określone zdarzenia, takie jak kliknięcie myszy lub naciśnięcie klawiatury. Można je łączyć z selektorami, aby coś się stało, na przykład po kliknięciu konkretnego łącza.
  • zmienne: Definiuj zmienne na podstawie wybranych wyborów, danych wejściowych lub wartości, a następnie manipuluj tymi zmiennymi.
  • efekty: po wybraniu czegoś lub wywołaniu zdarzenia można zastosować efekt do wybranego elementu. Efekty obejmują blaknięcie i zniknięcie, przesuwanie się elementów w górę iw dół lub przełączanie między nimi.
  • animacje: korzystanie z animate() właściwość, można animować dowolną właściwość CSS, która przyjmuje wartości liczbowe, na przykład rozmiar tekstu, położenie elementu lub krycie.

jQuery (lub, bardziej poprawnie, JavaScript) korzysta również z funkcji, które możesz zdefiniować, nie różniąc się od tego, jak w PHP.

A jeśli metody i efekty jQuery nie są wystarczające dla ciebie, możesz użyć biblioteki jQuery UI, która daje dostęp do jeszcze większej liczby interakcji i efektów.

4. JavaScript i WP REST API

Tu robi się ciekawie. WP-REST API pozwala zrobić znacznie więcej niż tylko dodawanie efektów za pomocą JavaScript: pozwala na interakcję z bazą danych witryny.

The JSON website
WP-REST API używa JSON, podzbiór JavaScript

Robi to za pomocą JSON (JavaScript Object Notation). JSON jest przeznaczony do odczytu, zapisu i edycji danych przy użyciu JavaScript. Wykorzystuje pojęcia JavaScript, które już wprowadziłem: obiekty, tablice, ciągi znaków i wartości.

Więc każdy wpis w Twojej bazie danych jest obiektem. Posiada etykietę (ciąg znaków) i wartość. Twoja witryna będzie również miała dane, które składają się z tablic i tablic wewnątrz tablic.

JSON poradzi sobie z tym wszystkim. Podobnie jak w PHP, wartością może być łańcuch znaków, liczba, tablica (tutaj znajdują się zagnieżdżone tablice) lub wartość logiczna. Może to być również obiekt.

Szczegółowe zrozumienie, jak używać JSON z REST API, wykracza poza zakres tego postu, ale oto wprowadzenie do rozpoczęcia:

  • Narzędzia. Pierwszą rzeczą, której potrzebujesz, jest klient HTTP, który będzie współdziałał z API. Najbardziej popularny, z którym się spotkałem, to Postman dla Chrome. Potem pracujesz u tego klienta.
  • Odkrycie. Przed rozpoczęciem interakcji z witryną musisz sprawdzić, czy witryna ma włączony interfejs API REST. Jest więcej niż jeden sposób, o którym możesz dowiedzieć się w dokumentacji REST API.
  • Uwierzytelnianie. Ze względów bezpieczeństwa musisz użyć uwierzytelniania. Możesz to zrobić za pomocą jednej z trzech metod: uwierzytelniania plików cookie dla motywów i wtyczek uruchomionych w witrynie; uwierzytelniania OAuth dla zewnętrznych aplikacji; i podstawowego uwierzytelniania dla zewnętrznych klientów podczas tworzenia (nie jest zalecane dla produkcji, ponieważ jest mniej bezpieczne). Dowiedz się, jak to działa w witrynie REST API.
  • Pobieranie danych. Robisz to za pomocą Pobierz dowództwo. Pobiera wszystkie dane powiązane z postem, ale nic nie wyświetla. Więc na przykład, aby uzyskać wszystkie posty w witrynie, której użyłbym:
  • Lub uzyskać tylko jeden post, z identyfikatorem 100, Użyłbym:
  • Edycja i publikowanie danych. Możesz zrobić więcej niż tylko pobrać dane: PUT polecenie pozwala na edycję danych i POST polecenie pozwala publikować nowe dane. Pomyśl o umieszczeniu jak aktualizacji postu i publikowaniu jak publikacji. Na początek polecam korzystanie z API do pobierania danych, w przypadku popełnienia błędów i utraty danych.
  • Wyprowadzanie i manipulowanie danymi. Po użyciu Pobierz polecenie do pobierania danych, jest dostępne do wyprowadzania i manipulowania. REST API oferuje wiele funkcji, których możesz użyć do pracy z obiektami JSON i filtrowania ich: jednym z najbardziej przyjaznych dla użytkownika zasobów, które znalazłem, jest ebook Josha Pollocka na temat API WP-REST.

Możesz pracować ze swoimi danymi za pomocą wtyczki PHP lub całkowicie ominąć PHP i tworzyć samodzielne aplikacje przy użyciu JavaScript, co jest miejscem, w którym naprawdę otwierają się możliwości. Polecam zacząć od połączenia Javascript i PHP za pomocą wskazówek w książce Josha lub naszego przewodnika po korzystaniu z API WP-REST, ponieważ krzywa uczenia się jest mniej stroma.

JavaScript nie musi być straszny!

Myśl o pozostawieniu za sobą ciężko zarobionych umiejętności PHP i nauki JavaScript może być zniechęcająca. Ale dobrą wiadomością jest to, że JavaScript ma wiele wspólnego z PHP; nie tylko ma wspólne pojęcia, składnię i Kod, ale także używa struktury i logiki, które będą całkowicie znane programistom PHP.

JavaScript stał się gorącym tematem w kręgach WordPress ze względu na API WP-REST, ale ma wiele innych aplikacji w ramach wtyczek i motywów. Ucząc się JavaScript i jQuery wymaganych do dodania tego rodzaju funkcjonalności, możesz zacząć rozwijać swoje umiejętności JavaScript, a następnie przejść do stosowania ich z REST API, pobierania i manipulowania obiektami JSON, aby tworzyć elastyczne, potężne aplikacje za pomocą danych przechowywanych przez WordPress.

Uczysz się JavaScript? Czy zacząłeś pracować z WP REST API lub Calypso? Daj nam znać swoje wskazówki dotyczące nauki JavaScript w komentarzach poniżej.

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…