WordPress REST API: funkcja CMS nowej generacji

Ponad jedna czwarta sieci działa na WordPressie. To dość niezwykłe osiągnięcie, biorąc pod uwagę, że istnieje od ponad dekady, co czyni go dość starym w latach technologicznych.

Jaki jest sekretny sos WordPressa? Łatwy — to najprostszy, ale najbardziej rozszerzalny sposób zarządzania treścią. Jednak przez chwilę wydawało się, że WordPress pozostaje w tyle.

W miarę jak sieć stała się bardziej zależna od języka JavaScript w tworzeniu wciągających, interaktywnych doświadczeń, stawało się coraz bardziej jasne, że WordPress będzie musiał oferować użytkownikom i programistom nowe sposoby interakcji z ich treścią.

Podczas gdy WordPress jest oparty – i nadal będzie budowany – na PHP, WP REST API jest próbą stworzenia pomostu między dziedzictwem rdzenia PHP WordPress a potencjałem i mocą aplikacji webowych JavaScript, a także natywnych urządzeń mobilnych i aplikacje desktopowe.

WordPress REST API przenosi zawartość dowolnej witryny WordPress do łatwego w obsłudze interfejsu API, dzięki czemu WordPress może służyć jako system przechowywania i wyszukiwania do publikowania treści w Internecie.

Wprowadzenie REST API do WordPress

Jeśli uważasz, że WP REST API pojawiło się znikąd, to się mylisz.

Dodanie zupełnie nowej funkcji do WordPressa nie jest prostym zadaniem. Ze względu na to, że jest to oprogramowanie typu open source, rozwój WordPressa zależy od całej społeczności, aby robić postępy.

Rozwój API rozpoczął się kilka lat temu jako osobna wtyczka funkcji, która pozwoliła programistom eksperymentować i wnosić wkład w projekt w kontrolowanym środowisku.

W trakcie wielu iteracji i ulepszeń oraz dwóch całkowicie oddzielnych wersji, twórcy REST API musieli przetestować i ocenić korzyści oraz ogromne konsekwencje zapewnienia otwartego dostępu API do danych w dziesiątkach milionów stron internetowych.

WordPress 4.4 o kryptonimie „Clifford” wprowadził początkową infrastrukturę projektu do rdzenia WordPressa, podczas gdy punkty końcowe pojawiły się dopiero w WordPress 4.7, „Vaughan”.

Zasadniczo dało to programistom czas na przetestowanie funkcjonalności, która obsługuje interfejs API, bez faktycznego ujawniania samych danych.

Teraz, gdy początkowe punkty końcowe treści zostały połączone ze wszystkimi obecnymi wersjami WordPressa, twórcy wtyczek i autorzy motywów mogą eksperymentować z ekscytującymi nowymi sposobami pobierania, przeglądania i zmieniania danych poza tradycyjnym środowiskiem wp-admin.

Rozdzielanie skrótów: od HTTP do JSON REST API

Aby zrozumieć znaczenie interfejsu API WP REST, może pomóc zrozumieć podstawy tego, w jaki sposób udostępniamy dane online i dokąd może zmierzać Internet.

HTTP jest podstawą większości ruchu internetowego, z którym mamy do czynienia na co dzień. Jeśli wpiszesz adres URL w przeglądarce, wysyłasz żądanie . Odpowiedni serwer odbiera Twoje żądanie i udziela odpowiedzi . Ta transakcja jest podstawą niemal wszystkiego, co robimy online. Przeglądarki wysyłają żądania, a serwery dostarczają odpowiedzi.

Rodzaj składanego przez nas żądania może wpłynąć na rodzaj otrzymanej odpowiedzi. Przez większość czasu wysyłamy proste żądanie GET : „Hej Google, GET mi swoją stronę docelową”. Google udziela odpowiedzi.

Gdy sieć stała się bardziej interaktywna, zaczęliśmy korzystać z innych żądań HTTP, w tym PUT , POST i DELETE .

Na przykład, wypełniamy pasek wyszukiwania na stronie internetowej: „Hej Google, PRZEŚLIJ mój adres e-mail i hasło na swojej stronie logowania”. Google rozpoczyna dla nas nową sesję i udziela innej odpowiedzi.

Protokół ten jest podstawowym fundamentem, na którym budujemy nasze witryny WordPress.

Używamy formularzy i PHP do GET i POST danych do naszej bazy danych. Wbrew powszechnej opinii ta podstawa WordPressa nie zmieni się w najbliższym czasie. Wszystko, co teraz robi WordPress, zapewnia programistom nowy sposób interakcji z ich danymi WordPress za pośrednictwem interfejsu API RESTful.

Przeniesienie stanu przedstawicielskiego (REST)

Programiści WordPress powinni znać ogólnie interfejsy API, takie jak Shortcode API i Options API. Te interfejsy API definiują funkcjonalność komponentów wchodzących w skład WordPressa, dzięki czemu autorzy motywów i wtyczek mogą rozszerzyć podstawowe możliwości WordPressa. Interfejs API WP REST jest jednak nieco inny.

Interfejs API REST lub RESTful służy do bezpiecznego wystawiania danych na żądania HTTP ze źródeł zewnętrznych. Chodzi również o stworzenie wspólnej architektury i zestawu protokołów do odpowiadania na te żądania. Chociaż istnieją bardziej zaawansowane pomysły i zasady stojące za tego typu usługami, wykraczają one poza zakres tego artykułu.

Istnienie WP REST API, w szczególności po WordPress 4.7, oznacza, że ​​cała zawartość Twojej witryny, w tym posty, strony, komentarze i wszelkie publiczne meta posty, jest teraz bezpośrednio dostępna jako surowe dane. Oznacza to również, że możesz wprowadzać zmiany w tych danych spoza tradycji wp-admin, jeśli chcesz, na przykład za pośrednictwem aplikacji mobilnej lub stacjonarnej.

Zamiast myśleć o swoich danych jak o wierszach w bazie danych, możesz teraz mieć do nich serializowany dostęp w postaci JSON.

JSON – Co się stało z XML-em?

Weterynarze WordPress mają duże doświadczenie z XML, powszechnym formatem udostępniania treści między witrynami.

Podobnie jak XML, JSON jest po prostu mechanizmem, który pozwala nam łatwo przesyłać dane, łącząc je w określoną składnię. JSON to w rzeczywistości ciąg znaków, tekstowa reprezentacja obiektu JavaScript, przechowująca dane w zestawie par klucz-wartość. Typowa reprezentacja JSON posta WordPress może wyglądać tak:

 { “id”: 1, “title”: { “rendered”: “Hello World” }, “content”: { “rendered”: “Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!” } }

(W razie potrzeby możesz użyć narzędzia do formatowania JSON, aby uprościć odpowiedź JSON).

Pełna odpowiedź JSON za pośrednictwem interfejsu API WP REST będzie zawierać dodatkowe informacje o poście, w tym metadane. Wygodnie łącząc te dane w formacie JSON, możesz wchodzić w interakcje z treściami WordPress na nowe i ekscytujące sposoby.

To nie przypadek, że JSON najlepiej łączy się z JavaScript. Ponieważ coraz więcej programistów WordPressa zaczyna „dogłębnie uczyć się JavaScriptu”, będziemy widzieć coraz bardziej zaawansowane zastosowania WordPressa jako zaplecza.

Jak znajdujemy dane: podążaj ścieżką do punktu końcowego

Dostęp do wszystkich danych witryny za pośrednictwem interfejsu API REST jest tak proste, jak utworzenie adresu URL.

W przypadku dowolnej witryny WordPress działającej w wersji co najmniej 4.7 dodaj następujący ciąg na końcu adresu URL witryny: /wp-json/wp/v2 (np. http://example.com/wp-json/wp/v2 ). Umieść ten adres URL w przeglądarce i zobacz, co się pojawi.

Wynik prawdopodobnie wygląda na duży bałagan danych, chyba że zainstalowałeś rozszerzenie przeglądarki, które czyści JSON. Ten wielki bałagan danych to treść i metainformacje Twojej konkretnej witryny WordPress w formacie JSON.

Ładując tę ​​zawartość, właśnie zdefiniowałeś trasę i poprosiłeś przeglądarkę, aby ją POBRAŁA.

Trasa to adres URL zmapowany na określoną metodę. Rdzeń WordPressa odczytuje tę trasę, a każdy ukośnik „/” reprezentuje konkretną ścieżkę lub parametr, którym należy się kierować.

Ścieżka kończy się w punkcie końcowym , gdzie funkcje znajdujące się głęboko w rdzeniu WordPressa mogą podejmować decyzje o tym, jakie dane dostarczyć i co zrobić z dostarczonymi danymi.

Przykładowym punktem końcowym może być '/wp-json/wp/v2/posts/1', gdzie dodaliśmy ścieżki '/posts' i '/1'. Ten konkretny punkt końcowy mówi naszej witrynie, aby przejrzała nasze dane, wyciągnęła nasze posty i wywołała post o identyfikatorze 1.

To, co sprawia, że ​​REST API jest tak przydatne, to fakt, że jest rozszerzalne, co oznacza, że ​​możesz pobrać dowolne dane ze swojej witryny i dodać je jako punkt końcowy. Większość podstawowych funkcji WordPressa jest obecnie (lub wkrótce będzie) obsługiwana.

Jednak twórcy motywów i wtyczek mogą zacząć dodawać swoje niestandardowe treści i ustawienia jako punkty końcowe, umożliwiając użytkownikom interakcję z ich witrynami w nowy sposób.

Jeśli interesują Cię punkty końcowe obecnie dostępne w Twojej witrynie WordPress, aplikacja przeglądarki, taka jak Postman, udostępnia GUI specjalnie do eksploracji interfejsów API.

Nagłówki i uwierzytelnianie

Wpisywanie punktów końcowych adresu URL w przeglądarce wydaje się proste, ale w rzeczywistości zawiera zestaw domyślnych nagłówków wraz z żądaniem. Z kolei wraz z odpowiedzią odsyłany jest również zestaw nagłówków. Nagłówki te zawierają wiele przydatnych informacji, ale najważniejsze dla naszych celów dotyczą typu żądania, które wysyłamy oraz tego, czy jesteśmy uwierzytelnieni.

Jeśli przejdziesz do „narzędzi programistycznych” przeglądarki, możesz sprawdzić nagłówki HTTP pod kątem dowolnego zasobu załadowanego do okna przeglądarki, w tym plików HTML, arkuszy stylów CSS, obrazów i nie tylko.

Pierwszym nagłówkiem do rozważenia jest Request Method , który bezpośrednio odpowiada żądaniom HTTP, o których dowiedzieliśmy się wcześniej. Tutaj najprawdopodobniej zobaczysz GET jako metodę żądania, jeśli po prostu przeglądamy stronę.

Aplikacja wywołująca Twój interfejs API REST może zmienić metodę żądania nagłówka na POST.

Metoda POST nakazuje Twojej witrynie wprowadzenie nowych danych lub zmianę istniejących danych w bazie danych WordPress. Wysyłając informacje metodą POST, inne aplikacje mają możliwość zmiany danych bez logowania się do wp-admin.

Nie musisz się jednak martwić, ponieważ jeśli nie zawierają one również nagłówków zawierających odpowiednie dane uwierzytelniające do uwierzytelniania , Twoja witryna odmówi ich przyjęcia.

UWAGA: Metody uwierzytelniania wywołań interfejsu API REST nadal nie są jednak sfinalizowane, co sprawia, że ​​uwierzytelnianie stanowi największą barierę wejścia dla programistów, którzy chcą pracować z interfejsem API REST w celu dodawania lub zmiany danych.

Na razie dostępne są opcje, w tym wtyczka od twórców REST API. W miarę jak standardowe procedury związane z uwierzytelnianiem wkraczają do rdzenia, ostatnie przeszkody będą jasne dla powszechnego korzystania z interfejsu API WP REST.

Przykładowa aplikacja WP REST API

To, co sprawia, że ​​WP REST API jest tak potężne, to fakt, że jest spójne, więc możemy oczekiwać tych samych podstawowych wyników z dowolnej witryny z WordPress 4.7 lub nowszym. WordPress jest jednak rozproszonym API, co oznacza, że ​​nie ma tylko jednego miejsca, z którego można by pobrać wszystkie dane.

Każda witryna internetowa z systemem WordPress to unikalna aplikacja z unikalnymi użytkownikami i uwierzytelnianiem. Chociaż edytowanie treści za pośrednictwem interfejsu API REST może wymagać różnych technik autoryzacji, w rzeczywistości możemy dość łatwo uzyskać dostęp do postów większości blogów prowadzonych przez WordPress.

Aby to zademonstrować, zrobimy szybkie demo codepen, które ładuje fragmenty najnowszych postów z niektórych popularnych blogów związanych z WordPressem, które oczywiście działają na WordPressie. Przy okazji dołączymy formularz wyszukiwania, dzięki czemu będziemy mogli przeszukać wszystkie te witryny jednocześnie i pobrać odpowiednie artykuły z każdej z nich.

Na koniec z pewnością umieścimy link do przeczytania pełnego tekstu artykułu na oryginalnej stronie internetowej.

Faza 1: Uzyskiwanie najnowszych postów

Zaczniemy od skonfigurowania szybkiej instancji Vue i zamontowania jej na elemencie. Dodamy również Bootstrap, dzięki czemu będziemy mogli mieć siatkę i podstawowy styl elementów formularza, które dodamy później.

Kiedy definiujemy dane, będziemy potrzebować miejsca do przechowywania nazwy witryny (która nie jest zawarta w domyślnej odpowiedzi), adresu URL i postów, gdy je otrzymamy. Oto przykład:

 { “name”: “wordpress.org”, “url”: “https://wordpress.org/news/wp-json/wp/v2/posts?per_page=3”, “posts”: [] }

Zauważysz, że umieściliśmy również nasz pierwszy parametr na końcu adresu URL, per_page . Zazwyczaj interfejs API WP REST dzieli wyniki na strony zgodnie z tymi samymi regułami, co normalna pętla WP_Query. Ograniczymy nasze zapytania do pierwszych trzech postów.

Następnie zdefiniujemy metodę loadPosts() , która przejdzie przez naszą listę źródeł, pobierze wyniki za pomocą vue-resource i wypełni puste tablice posts każdego źródła wynikami.

 loadPosts : function(){ var self = this; self.sources.forEach(function(source, index){ self.$delete(source, 'posts'); // Get API with vue-resource self.$http.get(source.url).then(function(response) { self.$set(source, 'posts', response.data); }, function(response) { console.log('Error'); }); }); }

Dołączymy również początkowe wywołanie loadPosts() , gdy nasza instancja Vue zostanie pomyślnie zamontowana.

 mounted : function(){ this.$nextTick(function(){ // Load posts on initial page load this.loadPosts(); }); }

Zachowanie loadPosts() jako oddzielnej metody przyda się w przyszłości, gdy zaczniemy wykonywać wiele wywołań API. W naszym kodzie HTML będziemy używać prostych dyrektyw renderowania list Vue i składni szablonów do wyświetlania wszystkich naszych postów.

Zobacz osadzone pióro, aby zobaczyć działające demo:

Zobacz przykład wyszukiwania Pen WP REST API (Phase One) autorstwa Briana Coords (@bacoords) na CodePen.

Faza 2: Filtrowanie wyników

Dodajmy pasek boczny i utwórzmy kilka filtrów, aby pokazać/ukryć różne źródła. Aby to zrobić, dodajemy nową właściwość do obiektu sources , wartość logiczną, którą nazwiemy on .

Dodając filtry, wygenerujmy filtr Vue, który pomoże nam również poprawnie wyświetlić datę. WordPress przechowuje datę i godzinę postu jako uniksowy znacznik czasu.

Użyjemy biblioteki Moment.js innej firmy, aby przekonwertować datę na bardziej czytelny format.

 filters: { // Using Moment.js to convert post date to a readable format prettyDate: function(value){ // Return if date is empty if(!value) return ''; // Convert date to Moment.js var date = moment.utc(value); // Return formatted date return date.format("MMM DD, YYYY,"); } },

Zobacz osadzone pióro, aby zobaczyć działające demo:

Zobacz przykład wyszukiwania Pen WP REST API (Phase One) autorstwa Briana Coords (@bacoords) na CodePen.

Faza końcowa: zapytania wyszukiwania

Tutaj dodamy nowy parametr do naszego żądania API. Dodaliśmy już parametr per_page=3 , aby ograniczyć liczbę wyników, które otrzymujemy z każdej witryny. Jeśli w pasku wyszukiwania jest coś napisane, dodamy to jako dodatkowy parametr.

Umożliwi nam to korzystanie z wbudowanej funkcji wyszukiwania każdej witryny, tak jakbyśmy wysyłali zapytania do paska wyszukiwania w tej witrynie.

Dodamy pasek wyszukiwania i powiążemy go ze zmienną za pomocą dyrektywy v-model Vue.

Zamiast natychmiast wywoływać wszystkie interfejsy API, gdy użytkownik zacznie pisać, dodamy przycisk i powiążemy zdarzenie z przesyłanym formularzem. Następnie dodamy metodę do naszej instancji Vue, która dodaje parametry wyszukiwania (oczywiście zakodowane w adresie URL) do adresu URL.

 generateUrl : function(source){ var self = this; // Add search parameters. if(self.searchQuery){ return source.url + '&search=' + encodeURI(self.searchQuery); }else{ return source.url; } }

Zobacz osadzone pióro, aby zobaczyć działające demo:

Zobacz przykład wyszukiwania Pen WP REST API (Phase One) autorstwa Briana Coords (@bacoords) na CodePen.

Chociaż jest to prosty przykład WP REST API, możemy sobie wyobrazić potencjalną aplikację dla czegoś takiego w samym WordPressie. Na przykład istnieje już metabox „WordPress News”.

Moglibyśmy łatwo przekształcić to demo we wtyczkę WordPress, wyświetlając ją na pulpicie WordPress. Teraz zintegrowaliśmy możliwość wyszukiwania pomocy w niektórych najlepszych witrynach z samouczkami dotyczącymi WordPressa i projektowania stron internetowych bezpośrednio z naszej własnej witryny.

Przyszły potencjał REST API

Chociaż powyższy przykład tylko zarysowuje powierzchnię możliwości WP REST API, powinien przekazywać niektóre z możliwości, które zaczynają się pojawiać, gdy zaczynasz bawić się danymi. Niezależnie od tego, czy służy do poprawy komfortu użytkownika w samej witrynie, czy do zbierania i manipulowania danymi z zewnętrznego źródła, jest to potężne narzędzie.

Podczas gdy niektórzy eksperci branżowi wyrazili obawy dotyczące możliwości „skrobania” treści i wyświetlenia ich w innym miejscu, należy pamiętać, że ta funkcja jest podobna do kanałów RSS, a administratorzy witryn muszą mieć jasną kontrolę nad tym, jakie dane są i jakie są niepubliczne.

W miarę jak API REST WP staje się coraz bardziej zakorzenione w strukturze WordPressa, zaczniemy dostrzegać jego efekty, być może nawet nie zdając sobie z tego sprawy. Przykłady sięgają od prostych (Cytaty Chrisa Coyiera o projektowaniu) do złożonych, jednostronicowych aplikacji (witryna Guggenheima).

Innym popularnym przypadkiem użycia WP REST API jest tworzenie aplikacji mobilnych.

Ponieważ zawartość jest łatwo dostępna za pośrednictwem interfejsu API REST, programiści mogą tworzyć natywne aplikacje dla systemów iOS i Android, unikając konieczności tworzenia zduplikowanych źródeł danych.

Gdy użytkownicy wchodzą w interakcję z tymi aplikacjami mobilnymi, będą mogli pobierać i bezpośrednio przekształcać dane oryginalnej witryny internetowej, bez konieczności tworzenia przez programistę jakiejkolwiek złożonej infrastruktury do obsługi tego.

Te skierowane do odwiedzających aplikacje interfejsu API REST to jednak dopiero początek, ponieważ rzeczywiste implikacje są znacznie głębsze. Jednym z celów głównego zespołu programistów jest rozpoczęcie korzystania z niego w całym interfejsie wp-admin.

Wraz z przyszłymi aktualizacjami WordPress, zaczniemy zastępować admin-ajax na rzecz API, co miejmy nadzieję zwiększy szybkość podstawowych funkcji, takich jak edytowanie menu lub publikowanie postów.

Może to potencjalnie iść w parze ze zwiększonym naciskiem WordPressa na Customizer i Edytor jako przyjazne dla użytkownika punkty wyjścia dla początkujących WordPressa.

Chociaż interfejs API WP REST jest niezwykle przydatny, nadal pozostaje wiele do zrobienia. Interfejs API nie jest kompletny. Do dodania jest jeszcze więcej funkcji i punktów końcowych.

W końcu będziesz mógł wchodzić w interakcję ze swoją witryną WordPress bez odwiedzania jej. I chociaż wiele usług korzysta teraz z niestandardowych interfejsów API do interakcji z WordPress, przejście na jeden standardowy interfejs API REST WordPress oznacza, że ​​więcej witryn i usług może się ze sobą łączyć, mówiąc tym samym językiem.

WordPress zaczął jako platforma blogowa, sposób, w jaki blogerzy mogą się łączyć i dzielić swoimi przemyśleniami i pomysłami. Wraz z rozwojem WordPress REST API, zaczniemy dostrzegać nowy poziom łączenia i udostępniania za kulisami. Umożliwi to użytkownikom rozwijanie swoich myśli i pomysłów w sposób, który nigdy wcześniej nie był brany pod uwagę, przenosząc WordPress i jego użytkowników na zupełnie nowe granice.