Ström en blogg med WordPress API

Under de senaste åren har utvecklingen av en REST API för WordPress öppnat nya dörrar för utvecklare. Utvecklare som tidigare varit begränsade till att skriva ett Wordpress-driven projekt i PHP har nu mer flexibilitet och kontroll i hur de kan närma sig den tekniska stacken på deras hemsida.

Det betyder att det är möjligt att behålla alla fördelar med den briljanta Wordpress-kontrollpanelen, som görs extremt flexibel av populär WordPress-plugins Såsom avancerade anpassade fält, och har en helt anpassad inbyggd frontend som bara interagerar med WordPress när den behöver.

• Ladda ner de handledningsfilerna

I denna WordPress Tutorial Vi kommer att utforska hur du implementerar WordPress Rest API till en enkel bloggapp, som för närvarande använder en lokal JSON-fil som datakälla och är byggd som en sida (spa) med den populära JavaScript-ramen Vue.js . Detta kommer att innebära genomförandet av Vuex, som vi använder för att lagra de data vi begär av ett WordPress med en kombination av dess åtgärd och mutationsmetoder.

När du har slutfört bör du ha skapat ett magert, enkelt spa, som har all reaktivitet av vue.js, samtidigt som du visar inlägg som hämtas från och hanteras av WordPress.

För mer fantastiska APIs att utforska, ta en titt på våra guider till det bästa Javascript API , Html apis och Google apis .

01. Ställ in arbetsytan och beroenden

Första saker först, du borde Ladda ner projektets filer och öppna dem i din föredragna redigerare.

I konsolen, cd i Webbplatsmall och kör kommandot nedan för att installera projektets nodberoende (om du inte har någon nod installerad, Gör det först ). Vi kommer att arbeta rent i src Katalog härifrån.

npm install

02. Installera Vuex

Därefter, med kommandot nedan, installerar vi Vuex , vilket är ett statligt förvaltningsmönster och ett bibliotek för vue.js-applikationer. Detta kommer att fungera som en central informationsbutik för alla VUE-komponenter som beror på de data vi får från WordPress API. För utvecklare som är bekanta med reagering är Vuex starkt inspirerad av flux.

npm install vuex --save

03. Starta utvecklingsservern

I konsolen kör du kommandot nedan för att starta utvecklingsservern. Detta kommer att kompilera Vue.js-projektet som det står för närvarande och tilldela det till en webbadress så att du kan komma åt den. Detta är vanligtvis Localhost: 8080 .

En stor fördel Med det här är Live Reloading, så när du har ändringar i appen och spara, kommer sidan i din webbläsare att uppdatera sig utan att behöva ladda om manuellt.

npm run dev

04. Skapa Vuex Store

I src , skapa en katalog som heter Lagra och inom den en ny fil som heter index.js . Detta kommer att vara där vår Vuex-butik kommer att definieras. Även om vi kommer till det måste vi först se till att vår vue.js-app är medveten om dess existens. För att göra detta, öppet main.js och importera butiken och inkludera den som ett beroende, som i snippet nedan.

 Importera vue från "VUE"
Importera app från './App'
Importera router från './router'
Import Store från './store'
Vue.config.productiontip = false
/ * Eslint-inaktivera NO-NY * /
ny vue ({
  EL: '#App',
  router,
  Lagra,
  mall: '& lt; app / & gt;',
  Komponenter: {App}
}) 

05. Skapa butiksställningar och installera axios

För att hjälpa oss att förenkla AJAX-förfrågningarna kommer vår butik att göra till WordPress API, vi installerar Axios, vilket är en löfte-baserad HTTP-klient. För att göra detta, öppna ett separat konsolfönster, navigera till Webbplatsmall katalog och kör npm installera axios - spara .

Därefter, låt oss börja byggnadsbutiken genom att installera ett nytt tomt Vuex Store-objekt. För närvarande gör det inte något, men åtminstone vue bör vara medveten om det.

 Importera axios från 'Axios'
Importera vue från "vue"
Importera Vuex från 'Vuex'
Vue.use (vuex)
Const Store = New Vuex.Store ({
  stat: {},
  åtgärder: {},
  Mutationer: {}
})
Exportera standardbutik 

06. Skapa inlägg

I Vuex håller statliga objektet ansökningsinformation, som i det här fallet kommer att vara WordPress Post-data som vi tar tag i med API. Inom det här objektet skapar du en ny egendom som heter inlägg och tilldela det ett värde av null.

 Stat: {
  Inlägg: null
} 

07. Skapa getposts action

I Vuex är handlingar det viktigaste sättet på vilket asynkrona förfrågningar hanteras. Dessa är typiskt metoder definierade i butiken, som sedan kan skickas efter behov av appen.

I den tomma åtgärder Objekt, låt oss definiera en om våra inläggstillstånd fortfarande är null, används Axios för att utföra en AJAX-förfrågan till WordPress API och returnera en lista med inlägg. När vi har fått ett positivt svar, löser vi löftet och begå inlägget med hjälp av Storeposts mutation.

 GetPosts: Funktion (sammanhang) {
  returnera nytt löfte ((lösa, avvisa) = & gt; {
  om (context.state.posts) {
  lösa()
  }
  annars {
  Axios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / inlägg ")
  .then ((svar) = & gt; {
  context.Commit ("Storeposts",
  Response.Data)
  lösa()
  }). Fånga ((fel) = & gt;
  Avvisa (fel);
  });
  }
  })
} 

08. Skapa Storeposts Mutation

Ett annat begrepp som introduceras av Vuex är mutationer, som också är typiska metoder definierade i butiken. Mutationer är det enda sättet att byta tillstånd i en Vuex-butik, vilket gör det möjligt att enkelt spåras när de felsökas.

I den tomma mutationer objekt, låt oss definiera Storeposts Metod som vi hänvisat till i föregående steg och gör det att åsidosätta postegenskapen i det statliga objektet med eventuella data som mutationen mottar som nyttolast.

 Storeposts (State, Response) {
   stats.posts = svar} 

09. Trigger getposts Åtgärd på last

Vi har skapat de åtgärder och mutationsmetoder som tar inlägg från WordPress API och begå dem till Vuex-staten, men nu måste vi faktiskt utlösa denna process någonstans. I toppnivå vue.js-komponenten App.vue , lägg till snippet nedan.

skapad () är en livscykelkrok som utlöser kod så snart VUE-komponenten är skapad på last, medan användningen av den globala $ butik Variabel tillåter oss att komma åt innehållet i vår Vuex-butik och skicka getposts Åtgärd från steg 7.

 Skapat () {
   detta. $ store.dispatch ('getposts')} 

10. Uppdatera attributvägar

Om du arbetar i Chrome eller Firefox och har Vue.js devtools förlängning (Om inte, rekommenderar jag att du gör som det är väldigt användbart), du borde nu kunna se de laddade Wordpress-inläggen i Basstatus under Vuex flik.

Tillbaka till appen, i /components/posts/posts.vue , Mallen HTML måste peka på den här data, så låt oss tweak några av attributvägarna.

 Byt "post.title" till "post.title.Rendered"
 Byt 'post.preview' till 'post.acf.preview'
 Byt 'post.previewimage' till 'post.acf.header_image_small' 

11. Uppdatera V-för slinga

I postkomponenten finns det ett vue.js-direktiv som används v-för . Dessa slingrar genom alla inlägg och för varje skriver en förekomst av postkomponenten, som visar dem i en lista.

Vi måste uppdatera sökvägen som skickas till detta direktiv eftersom det fortfarande använder de lokala dummy-testdata. Uppdatera V-för direktiv till snippet nedan för att peka på våra lagrade inlägg i Vuex-butiken.

 V-för = "posta i detta. $ Store.state.posts" 

12. Gör lite hushållning

En lista över WordPress-inlägget ska nu visa. När vi inte längre använder den lokala postdata, låt oss radera src / data . Därefter avlägsna i postkomponenten Inlägg: postdata.data egendom i komponenterna Lokal datalagring och sedan postdata.

13. Fixa postförfattaren

Du kanske märker att för varje post visar författaren upp som ett nummer. Detta beror på att WordPress API returnerar ett författar-ID, snarare än ett namn. Vi behöver använda detta ID för att fråga WordPress för fullständig författarinformation. Låt oss börja med att skapa en plats för att lagra detta i vår Vuex-butik, tillsammans med vår postinformation, i Butik / index.js .

 Stat: {
  Författare: Null,
  Inlägg: null} 

14. Skapa GetAuthors Action

Som med inlägg skapar vi en åtgärd i /store/index.js För att utlösa en Ajax-förfrågan till Query WordPress API. När ett framgångsrikt svar är mottaget kommer löftet att lösa och utlösa StoreAuthors Mutation, som vi ska skapa nästa.

 Getauthors: Funktion (sammanhang) {
  Axios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / Användare ")
  .Then (funktion (svar) {
  context.Commit ("StoreAuthors",
  Response.Data)
  })
} 

15. Skapa StoreAuthors Mutation

Inom mutationsobjektet i Vuex-butiken skapar du StoreAuthors Mutation med hjälp av snippet nedan. Som med Storeposts Från steg 8 tar det nyttlastet som passerat och sätter det som värdet av författarnas egendom i vår butiks tillstånd.

 StoreAuthors (State, Response) {
  stats.authors = svar} 

16. Trigger Getauthors på last

Vi måste få författaren info från WordPress så snart appen börjar ladda. Låt oss ändra toppnivåkomponenten App.vue igen och skicka GetAuthors Åtgärd i samma skapad () Livscykelkrok som getposts handling.

 Skapat () {
  Detta. $ Store.Dispatch ('Getauthors')
   detta. $ store.dispatch ('getposts')} 

17. Skapa getusername-metod

Nu frågar vi WordPress för författarinformation om belastning, allt vi behöver göra är att definiera en metod i vår inläggskomponent som låter oss skicka ett författar-ID och få ett namn i gengäld. Kopiera snippet nedan i inläggets komponents metoderobjekt, under det befintliga GetsinglePost metod.

 GetUsername: FUNCTION (UserID) {
  Var användarnamn = 'Okänt';
  Detta. $ Store.State.
  Författare. Filter (funktion (användare) {
  om (user.id === userid) {
  användarnamn = user.name
  }
  });
  returnera användarnamn;
} 

18. Ring getusername-metod

Nu behöver vi bara ringa getusername . Fortfarande i postkomponenten, i mallen, byt ut författarens hänvisning till post.author Så det speglar snippet nedan. Författarens namn ska nu ordentligt visa för varje inlägg.

: Författare = "getusername (post.author)" 

19. Blog Laddar

När vi laddar postdata asynkront, finns det ett ögonblick innan begäran är klar där applikationen är tom. För att motverka detta kommer vi att genomföra ett laststat som är aktivt tills bloggen är helt befolkad. I postkomponenten klistra in snippeten nedan strax efter öppningen & lt; script & gt; Tag för att importera ikonerna vi ska använda.

 Importera ikon från '@ / komponenter / ikoner / ikoner'
Importera lastning från './../../
tillgångar / img / loading.svg '

20. Lägg till ikon till komponenter lista

Nästa, fortfarande inom inlägg, lägg till en referens till ikonen i komponenternas objekt. Detta gör postkomponenten medveten om vår nyligen importerade ikonkomponent.

 Komponenter: {
   ikon,
   Post} 

21. Skapa lastelement

Vi behöver nu bara lägga till laddningselementen till inläggsmallen så det visas på sidan. För det första linda den andra diven i snippet runt de två divarna med v-om Direktiv för att se till att inga inlägg visas tills lastningen är klar.

Lägg sedan till den första diven från snippet ovanför den. Detta innehåller laddningsikonen och a v-om Direktiv, vilket innebär att det bara är synligt förrän den punkt där appen är fullt laddad. När du är klar ska laddningen nu genomföras.

 & lt; div v-om = "! Det här. $ Store.state.posts"
klass = "U-Align-Center" & GT;
   ikon klass = "c-ikon-laddning"
   Använd = "loading" & gt; & lt; / ikon & gt;
& lt; / div & gt;
& lt; div v-om = "detta. $ store.state.posts" & gt;
   [...]
& lt; / div & gt; 

22. Uppdatera singelpostattributvägar

Det enda som är kvar att göra är att se till att enstaka inlägg är korrekt inställda så att de använder Wordpress-postdata i Vuex-butiken. Det första steget är att uppdatera attributvägarna i postkomponentmallen i V-IF = "This.Type === 'singel'" Div, som hanterar visning av enskilda inlägg.

 Switch 'singlepost.title' till 'singlepost.title.Rendered'
 Byt 'singlepost.author' till 'getusername (singlepost.author)'
 Byt 'singlepost.fullimage' till 'singlepost.acf.header_image'
 Byt 'singlepost.content' till 'singlepost. content.Rendered '

23. Refactor GetsinglePost Method

Vi behöver också refactor postkomponenterna GetsinglePost metod. Det måste returnera ett löfte som skickar getposts handling. I uppföljningen sedan Funktion, vi söker efter Vuex Store-inlägg för en post med en slug som matchar den som passerade i webbadressen. Om det hittas kopierar vi data till vår komponents lokala stat och löser löftet. Om det inte finns, kommer löftet att avvisas.

 GetsinglePost: Funktion () {
   returnera nytt löfte
   ((lösa, avvisa) = & gt; {
  detta. $ store.dispatch ('getposts')
  .then (() = & gt; {
  var foundpost = false;
  Detta. $ store.state.Posts.
  filter ((post) = & gt; {
  om (post.slug ===
  detta. $ rutt.params.slug) {
  this.singlePost = post;
  foundpost = sant; }
  });
  Funnepost? lösa (): avvisa ();
  })
  })
} 

24. Refactor inlägg skapade () krok

Därefter måste vi refactor skapad () Livscykelkrok i inläggskomponenten. Om vi ​​behöver visa ett enda inlägg, ska kroken ringa GetsinglePost Metod från föregående steg, och om dess löfte avvisas, skicka användaren till sidan 404 'sida inte hittat'. Det här är att redogöra för scenarier där användare anger en obefintlig postslug i webbadressen.

 Skapat () {
  Om (This.Type === 'singel') {
  this.getsinglePost (). Sedan (null, () = & gt; {
  det här. $ router.push ({name: 'pagenotfound'})
  });
  }
} 

25. Lägg till V-Om Direktiv

Det sista steget är att lägga till snippet nedan till postkomponenten inom V-IF = "This.Type === 'singel'" div i mallen. Detta direktiv innebär att posten endast kommer att visas när de lokala postdata som görs tillgängliga av GetsinglePost Metoden är befolkad. Detta är att stoppa vue från för tidigt att göra komponenten och därmed orsaka fel.

 V-IF = "singlePost" 

26. Bygg appen

Nu med allt som arbetar, i konsolen, avbryt npm kör dev Kommando eller öppna en ny konsol och kör kommandot nedan för att generera en produktionsklarversion för att ladda upp till din egen server. Detta kommer att visas i distans katalog.

 npm kör byggnad 

Denna artikel uppträdde i utgåva 268 av webbdesignern, den kreativa webbdesignmagasinet - som erbjuder experttutorials, avancerade trender och gratis resurser. Prenumerera på webbdesignern nu.

Läs mer:

• 32 bästa gratis wordpress teman
• 10 Top WordPress Resources
• De Bästa gratis bloggplattformar