Zasilanie bloga za pomocą interfejsu API WordPress

W ciągu ostatnich kilku lat rozwój reszty API dla WordPress otworzył nowe drzwi dla deweloperów. Deweloperzy, którzy wcześniej ograniczyli się do pisania projektu napędzanego wordpress w PHP, teraz mają większą elastyczność i kontrolę, w jaki sposób mogą zbliżyć się do stosu technologii ich strony internetowej.

Oznacza to, że możliwe jest zachowanie wszystkich zalet genialnego panelu sterowania Wordpress, który jest niezwykle elastyczny przez popularną Wtyczki WordPress. takie jak zaawansowane pola niestandardowe i mają całkowicie niestandardowy frontend, który oddziałuje tylko z WordPress, gdy potrzebuje.

• Pobierz pliki samouczka

W tym Samouczek WordPress. Będziemy badać, jak wdrożyć interfejs API Reszta WordPress w prostą aplikację Blog, która obecnie korzystająca z lokalnego pliku JSON jako źródła danych i jest zbudowany jako aplikacja jednorazowa (SPA) przy użyciu popularnych ram javascript Vu.js.js. . Będzie to obejmować wdrożenie Vuex, którego użyjemy do przechowywania danych, które prosimy z WordPress przy użyciu kombinacji jego metod działania i mutacji.

Po zakończeniu powinieneś stworzyć chudego, proste spa, które ma całą reaktywność VUE.JS, podczas gdy wyświetlanie postów pobieranych z i zarządzane przez WordPress.

Aby zbadać bardziej niesamowite interfejsy API, spójrz na nasze przewodniki do najlepszych JavaScript API , HTML API i Google API. .

01. Skonfiguruj obszar roboczy i zależności

Najpierw powinieneś Pobierz pliki projektu i otwórz je w preferowanym edytorze.

W konsoli, CD do Szablon strony internetowej. i uruchom poniżej polecenie, aby zainstalować zależności węzła projektu (jeśli nie masz zainstalowanego węzła, Zrób to pierwszy ). Będziemy pracować wyłącznie w src. Katalog stąd na zewnątrz.

npm install

02. Zainstaluj Vuex.

Następnie, używając poniższego polecenia, zainstalujemy Vuex. , który jest wzorem do zarządzania stanem i biblioteką dla aplikacji Vu.JS. Będzie to działać jako centralny sklep informacyjny dla wszystkich składników VUE, które zależą od danych, które otrzymujemy od API WordPress. Dla programistów znanych z Reagowaniem, Vuex jest silnie zainspirowany strumieniem.

npm install vuex --save

03. Rozpocznij serwer rozwoju

W konsoli uruchom poniżej polecenie, aby rozpocząć serwer programistycznych. Spowoduje to skompilowanie projektu VUE.JS, ponieważ obecnie stoi i przypisuje go do adresu URL, dzięki czemu można uzyskać dostęp do niego. To zwykle. LocalHost: 8080. .

Jedna duża zaletę, która przynosi przeładowanie na żywo, więc po wprowadzeniu zmian w aplikacji i zapisz, strona w przeglądarce zaktualizuje się bez konieczności ręcznego przeładowania.

npm run dev

04. Utwórz sklep Vuex

W src. , utworzyć katalog o nazwie sklep i w nim nowy plik o nazwie index.js. . Będzie to miejsce, w którym zostanie zdefiniowany nasz sklep Vux. Chociaż zanim dotrzemy do tego, musimy najpierw upewnić się, że aplikacja Vue.js zdaje sobie sprawę z jego istnienia. Aby to zrobić, otwórz Main.js.js. i importuj sklep i uwzględnij go jako zależność, jak w fragmence poniżej.

 Importuj vue z "vue"
Importuj aplikację z "./app"
Importuj router z "./router"
Importuj sklep z "./store"
Vue.config.productionTip = false.
/ * eslint-wyłącz no now * /
Nowa Vue ({
  El: '#app',
  router,
  sklep,
  Szablon: "APP / & GT",
  Komponenty: {App}
}) 

05. Utwórz rusztowanie sklepowe i zainstaluj AXIOS

Aby pomóc nam uprościć żądania ajax Nasz sklep będzie podejmować API WordPress, zainstalujemy AXIOS, który jest klientem HTTP oparty na obietnicy. Aby to zrobić, otwórz oddzielne okno konsoli, przejdź do Szablon strony internetowej. katalog i uruchomiony NPM Zainstaluj AXIOS - Zapisz .

Następnie Zacznijmy rusztować sklep przez instancję nowego pustego obiektu Vux Store. W tej chwili nic nie robi, ale co najmniej Vue powinno być tego świadome.

 Importuj AXIOS z "AXIOS"
Importuj vue z "vue"
Importuj vuex z "vuex"
Vue.use (vuex)
Const Store = New Vuex.store ({
  stan: {},
  działania: {},
  mutacje: {}
})
Domyślny sklep z eksportu 

06. Twórz stan postów

W Vuex, obiekt państwowy posiada informacje o aplikacji, które w tym przypadku będzie dane WordPress Post, w którym będziemy chwycić za pomocą API. W tym obiekcie utwórz nową właściwość o nazwie Posty i przypisz go do wartości NULL.

 Stan: {
  Posty: Null.
} 

07. Utwórz akcję GetPostes

W Vuex działań są głównym sposobem obsługi wniosków asynchronicznych. Są one zazwyczaj metodami zdefiniowanymi w sklepie, które można następnie wywołać zgodnie z wymaganiami aplikacji.

W pustym działania Obiekt, zdefiniujmy się, gdzie gdyby nasze stanowisko jest nadal NULL, AXIOS służy do wykonania żądania AJAX do interfejsu API WordPress i zwróć listę postów. Po otrzymaniu pozytywnej odpowiedzi rozwiązujemy obietnicę i popełnimy posty za pomocą Storeposts. mutacja.

 GetPosts: Funkcja (kontekst) {
  zwróć nową obietnicę ((rozwiązać, odrzucić) = & gt; {
  if (context.state.posts) {
  rozwiązać()
  }
  inaczej {
  axios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / Posty ')
  .Then ((reakcja) = & gt; {
  Context.comMit ('Storeposts',
  odpowiedź.data)
  rozwiązać()
  }). Catch ((błąd) = & gt; {
  Odrzuć (błąd);
  });
  }
  })
} 

08. Utwórz mutację sklepu

Inną koncepcją wprowadzoną przez Vuex jest mutacje, które są również zazwyczaj określone w sklepie. Mutacje są jedynym sposobem zmiany stanu w sklepie Vuex, który umożliwia łatwe śledzenie stanu podczas debugowania.

W pustym mutacje Obiekt, zdefiniujmymy Storeposts. Metoda, do której odwołujemy się w poprzednim kroku i udostępnia właściwość post w obiekcie stanu z dowolnymi danymi mutacją otrzymuje jako ładunek.

 Storeposts (stan, odpowiedź) {
   state.posts = odpowiedź} 

09. Uzupełnij działanie GETPOSTS ON LOAD

Stworzyliśmy metody akcji i mutacji, które chwyta publikacje z API WordPress i popełnić je do stanu Vuex, ale teraz musimy gdzieś wywołać ten proces. Na najwyższym poziomie VUE.JS Component App.vue. , dodaj fragment poniżej.

Utworzony() jest hakiem cyklu cyklu, który wywołuje kod, gdy tylko składnik VUE jest tworzony na obciążeniu, podczas gdy korzystanie z globalnego $ Store. zmienna pozwala nam uzyskać dostęp do zawartości naszego sklepu Vuex i wysyłać getposts. działanie z kroku 7.

 Utworzono () {
   To. $ Store.Dispatch ('Getposts')} 

10. Zaktualizuj ścieżki atrybutów

Jeśli pracujesz w Chrome lub Firefox i masz Vue.js Devtools Extension. (Jeśli nie, zalecam, abyś zrobił to bardzo przydatne), powinieneś teraz zobaczyć załadowane posty WordPress Stan bazowy pod Vuex. patka.

Powrót do aplikacji, w /components/posts/posts.vue. , Szablon HTML musi wskazywać na te dane, więc ulepszmy kilka ścieżek atrybutów.

 Przełącz "post.title" do 'post.title.Rendered'
 Przełącz "Post.Preview" do 'post.acf.preview'
 Przełącz "post.previewImage" do 'post.acf.header_Image_small' 

11. Zaktualizuj pętlę V-for

W komponencie postów jest dyrektywa Vue.js w użyciu V-A. . To pętle za pomocą wszystkich postów i dla każdego wydrukuje instancję komponentu postu, wyświetlając je na liście.

Musimy zaktualizować ścieżkę przekazaną do niniejszej dyrektywy, ponieważ nadal korzystają z lokalnych manekinowych danych testowych. Zaktualizuj dyrektywę V. Doręczkę do fragmentu poniżej, aby wskazać nasze składowane posty w sklepie Vuex.

 V-for = "Post w tym. $ Store.state.posts" 

12. Zrób jakieś sprzątanie

Teraz pojawi się lista postów WordPress. Ponieważ nie używamy już danych lokalnych pocztów, usuńmy SRC / DATA. . Następnie w komponencie postów usuń Posty: postdata.data. Nieruchomość w komponentach lokalnych przechowywania danych, a następnie import PostData.

13. Napraw autor

Możesz zauważyć, że dla każdego posta autor pojawia się jako numer. Dzieje się tak, ponieważ API WordPress zwraca identyfikator autora, a nie nazwę. Musimy użyć tego identyfikatora, aby zapytać wordpress dla pełnych informacji autorskich. Zacznijmy od stworzenia miejsca do przechowywania tego w naszym sklepie Vuex, obok naszych informacji o postach, w Sklep / index.js. .

 Stan: {
  Autorzy: Null,
  Posty: Null} 

14. Utwórz akcję GetAuthors

Podobnie jak w przypadku postów, stworzymy akcję /store/index.js. Aby wywołać żądanie Ajax do zapytania WordPress API. Po otrzymaniu pomyślnej odpowiedzi obietnica zostanie następnie rozwiązana i wyzwala Storeauthors. mutacja, którą stworzymy następny.

 GetAuthors: Funkcja (kontekst) {
  axios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / Użytkownicy ")
  .ten (funkcja (odpowiedź) {
  kontekst.comMIT ("Storeauthors",
  odpowiedź.data)
  })
} 

15. Utwórz mutację storeauthors

W obiekcie mutacji sklepu Vuex stwórz Storeauthors. mutacja za pomocą fragmentu poniżej. Podobnie jak z Storeposts. Z kroku 8, to przeszedł ładunek i ustawia go jako wartość nieruchomości autorów w stanie naszego sklepu.

 StoreAuthors (stan, odpowiedź) {
  State.authors = odpowiedź} 

16. Wyzwalacz GetAuthors On Load

Musimy uzyskać informacje o autorze z WordPress, gdy tylko aplikacja zacznie ładować. Zmieńmy komponent najwyższego poziomu App.vue. znowu i wysyłaj getAuthors. działanie w tym samym Utworzony() hak cyklu życia jako getposts. akcja.

 Utworzono () {
  To. $ Store.Dispatch ('GetAuthors')
   To. $ Store.Dispatch ('Getposts')} 

17. Utwórz metodę nazwy Getusername

Teraz zapytamy o WordPress for autor Informacje o ładunku, wszystko, co musimy zrobić, to zdefiniować metodę w naszym komponencie postów, który pozwala nam przekazać identyfikator autora i uzyskać nazwę w zamian. Skopiuj fragment poniżej w obiekcie metodom komponentu Posts, poniżej istniejącego getchinglepost. metoda.

 Nazwa Getusername: Funkcja (UserID) {
  var username = 'nieznany ";
  To. $ Store.state.
  autorzy.filter (funkcja (użytkownik) {
  Jeśli (user.id === userID) {
  Nazwa użytkownika = użytkownik.name.
  }
  });
  Zwróć nazwę użytkownika;
} 

18. Zadzwoń Metoda nazwy Getusern

Teraz musimy zadzwonić Getusername. . Nadal w komponencie postów w szablonie zastępuje odniesienie do adresu autora post.author. więc odzwierciedla więc fragment poniżej. Nazwa autora powinna być teraz poprawnie wyświetlana dla każdego postu.

: Autor = "Getusername (post.author)" 

19. Ładowanie bloga

Ponieważ ładujemy dane pocztowe asynchronicznie, jest chwila przed zakończeniem żądania, w którym aplikacja jest pusta. Aby temu przeciwdziałać, wdrożymy stan załadunku, który jest aktywny, dopóki blog jest w pełni zaludniony. W komponencie postów wklej fragment poniżej, tuż po otwarciu & lt; script & gt; Tag, aby zaimportować ikony, których będziemy używać.

 Importuj ikonę z "@ / komponentów / ikon / ikon"
Importuj ładowanie z "./../../
Aktywa / IMG / Loading.Svg '

20. Dodaj ikonę do listy komponentów

Następnie, nadal w postach, dodaj odniesienie do ikony w obiektach komponentów. To sprawia, że ​​komponent służy świadomy naszego niedawno importowanego komponentu ikony.

 Składniki: {
   Ikona,
   Post} 

21. Utwórz elementy ładujące

Teraz musimy teraz dodać elementy ładowania do szablonu postów, aby pojawi się na stronie. Po pierwsze, owinąć drugi div w fragmencie wokół dwóch div V-IF. Dyrektywy, aby upewnić się, że nie pojawią się żadnych postów aż do zakończenia ładowania.

Następnie dodaj pierwszy div z fragmentu nad nim. Zawiera to ikonę ładowania i V-IF. Dyrektywa, co oznacza, że ​​będzie widoczne tylko do momentu, w którym aplikacja jest w pełni załadowana. Po zakończeniu załadunek należy teraz wdrożyć.

 Div v-If = "! To. $ Store.state.posts"
Class = "U-Aglug-Center" & GT;
   & LT; Icon Class = "C-Icon-Loading"
   Użyj = "Ładowanie" & GT; & LT; / Icon & GT;
& lt; / div & gt;
& lt; div v-If = "To. $ Store.state.posts" & GT;
   [...]
& lt; / div & gt; 

22. Zaktualizuj ścieżki atrybutów pojedynczych post

Jedyną rzeczą do zrobienia jest upewnienie się, że pojedyncze posty są poprawnie skonfigurowane, dzięki czemu korzystają z danych WordPress Post w sklepie Vux. Pierwszym krokiem jest zaktualizowanie ścieżek atrybutów w szablonie komponentu Posts w ramach v-If = "this.Type ===" singiel "" div, który obsługuje wyświetlanie pojedynczych postów.

 Przełącz "pojedynczypost.title" do "singlepost.title.Rendered"
 Przełącz "jedenpost.author" do "Getusername (singlepost.author)"
 Przełącz "onedpost.fulLimage" do "onespost.acf.header_image"
 Przełącz "jedenpost.content" do "OnePost. Content.Rendered '

23. Metoda gethinglepost

Musimy również zrefleksorować komponenty postów getchinglepost. metoda. Musi zwrócić obietnicę, która wywołuje getposts. akcja. W następstwie następnie Funkcja, szukamy postów Vuex Store do wpisu z pasującym do ślimaku, który przeszedł do URL. W razie znalezienia skopiujemy dane do lokalnego stanu naszego komponentu i rozwiązać obietnicę. Jeśli nie zostanie znaleziony, obietnica zostanie odrzucona.

 GettinglePost: Funkcja () {
   Zwróć nową obietnicę
   ((Rozwiąż, Odrzuć) = & GT; {
  To. $ Store.Dispatch ('Getposts')
  .The (() = & gt; {
  var foundpost = false;
  To. $ Store.state.posts.
  filtr ((post) = & gt; {
  Jeśli (post.slug ===
  To. $ route.params.slug) {
  to.Singlepost = post;
  FoundPost = true; }
  });
  FoundPost? Rozwiąż (): Odrzuć ();
  })
  })
} 

24. Utworzone posty refaktoryczne ()

Następnie musimy refraktor Utworzony() Haczyk cyklu życia w komponencie postów. Jeśli potrzebujemy wyświetlania pojedynczego postu, hak powinien zadzwonić getchinglepost. Metoda z poprzedniego kroku, a jeśli jego obietnica zostanie odrzucona, wyślij użytkownika na stronę na stronie 404 ". Ma to na celu uwzględnienie scenariuszy, w których użytkownicy wprowadzają nieistniejący ślimak w URL.

 Utworzono () {
  Jeśli (this.Type === 'single') {
  to.getslepost (). Następnie (null, () = & gt; {
  To. $ router.push ({nazwa: "pagenotfound"})
  });
  }
} 

25. Dodaj dyrektywę V-IT

Ostatnim krokiem jest dodanie fragmentu poniżej do komponentu postu w ramach v-If = "this.Type ===" singiel "" div w szablonie. Niniejsza dyrektywa oznacza, że ​​post wyświetla tylko, gdy lokalne dane pocztowe udostępnione przez getchinglepost. Metoda jest wypełniona. Ma to na celu zatrzymanie VUE przed przedwcześnie renderującym komponentem, a tym samym powodując błędy.

 V-IF = "OnePost" 

26. Zbuduj aplikację

Teraz ze wszystkim pracującym, w konsoli, anuluj NPM Run Dev. Polecenie lub otwórz nową konsolę i uruchom poniżej polecenie, aby wygenerować wersję gotowości produkcyjnej do przesyłania na własny serwer. To pojawi się w Dist. informator.

 Budować NPM 

Ten artykuł pojawił się w wydaniu 268 projektantów stron internetowych, programu Creative Web Design Magazine - Oferowanie samouczków eksperckich, trendów najnowocześniejszych i bezpłatnych zasobów. Subskrybuj teraz projektant stron internetowych.

Czytaj więcej:

• 32 najlepsze darmowe tematy WordPress
• 10 najlepszych zasobów WordPress
• The. Najlepsze darmowe platformy blogów