Strøm en blog ved hjælp af WordPress API

I løbet af de sidste par år har udviklingen af ​​en hvile API til WordPress åbnet nye døre for udviklere. Udviklere, der tidligere havde været begrænset til at skrive et Wordpress-drevet projekt i PHP, har nu mere fleksibilitet og kontrol i, hvordan de kan nærme sig teknologien af ​​deres hjemmeside-til-være.

Det betyder, at det er muligt at bevare alle fordelene ved det fantastiske WordPress-kontrolpanel, som gøres ekstremt fleksibel ved at være populært WordPress plugins. Såsom avancerede brugerdefinerede felter, og har en helt tilpasset frontend, der kun interagerer med WordPress, når den skal.

• Download vejledningsfilerne

I denne Wordpress Tutorial. Vi vil udforske, hvordan vi implementerer WordPress-resten API til en simpel blog-app, som i øjeblikket bruger en lokal JSON-fil som datakilde, og er bygget som en enkeltside-applikation (SPA) ved hjælp af den populære JavaScript-ramme Vue.js. . Dette vil indebære implementeringen af ​​Vuex, som vi bruger til at gemme de data, vi anmoder om fra en WordPress ved hjælp af en kombination af dens handlings- og mutationsmetoder.

Når du er færdig, skal du have skabt et magert, simpelt spa, som har al den reaktivitet af vue.js, mens du viser indlæg hentet fra og administreret af WordPress.

For mere fantastiske Apis at udforske, kig på vores guider til de bedste JavaScript Apis. Vi Html apis. og Google Apis .

01. Indstil arbejdsområde og afhængigheder

Første ting først, skal du Download projektets filer og åbne dem i din foretrukne editor.

I konsollen, cd i Website-Template. og køre kommandoen nedenfor for at installere projektets nodeaflejringer (hvis du ikke har node installeret, Gør det først ). Vi arbejder udelukkende i Src. bibliotek fra her ud.

npm install

02. Installer vuex.

Dernæst installerer vi nedenstående kommando Vuex. , som er et statsstyringsmønster og bibliotek til vue.js applikationer. Dette vil fungere som en central informationsbutik for alle Vue-komponenter, der afhænger af de data, vi modtager fra WordPress API. For udviklere, der er bekendt med React, er Vuex stærkt inspireret af flux.

npm install vuex --save

03. Start Development Server

I konsollen skal du køre kommandoen nedenfor for at starte udviklingsserveren. Dette vil kompilere Vue.js-projektet, da det står for øjeblikket og tildeler det til en URL, så du kan få adgang til det. Dette er normalt. LocalHost: 8080. .

En stor fordel Dette bringer er live reloading, så når du foretager ændringer i appen og gemmer, vil siden i din browser opdatere sig uden at skulle genoplade manuelt.

npm run dev

04. Opret vuex butik

I Src. , Opret en mappe kaldet butik og inden for det en ny fil kaldet index.js. . Dette vil være, hvor vores vuex butik vil blive defineret. Selvom vi kommer til det, skal vi først sørge for, at vores vue.js app er opmærksom på dets eksistens. At gøre dette, åbent main.js. og importer butikken og medtag den som en afhængighed, som i snippet nedenfor.

 Import Vue fra 'vue'
Import app fra './app'
Importer router fra './ROUTER'
Import butik fra './store'
Vue.config.produktionstip = falsk
/ * ESLINT-DISABLE NO-NY * /
New Vue ({
  El: '#App',
  router,
  butik,
  Skabelon: '& lt; app / & gt;',
  Komponenter: {App}
}) 

05. Opret Store Stilladser og installer Axios

For at hjælpe os med at forenkle AJAX-anmodningerne, vil vores butik gøre til WordPress API, vi installerer Axios, som er en løftebaseret HTTP-klient. For at gøre dette skal du åbne et separat konsolvindue, navigere til Website-Template. Directory og Run. NPM Installer Axios - Gem .

Næste, lad os begynde at stillbåde butikken ved at instantiating en ny tom Vuex Store-objekt. I øjeblikket gør det ikke noget, men i det mindste bør Vue være opmærksom på det.

 Import Axios fra 'Axios'
Import Vue fra 'vue'
importere vuex fra 'vuex'
Vue.use (vuex)
const store = new vuex.store ({
  stat: {},
  handlinger: {},
  Mutationer: {}
})
Eksport Standard Store 

06. Opret indlæg stat

I Vuex indeholder statens objekt ansøgningsinfo, som i dette tilfælde vil være WordPress Post-data, vi får fat i API. Inden for dette objekt skal du oprette en ny ejendom kaldet indlæg og tildele den en værdi af null.

 Stat: {
  Stillinger: null.
} 

07. Opret Getposts Action

I Vuex er handlinger den vigtigste måde, hvorpå asynkron anmodninger håndteres. Disse er typisk metoder defineret i butikken, som derefter kan afsendes som krævet af appen.

I det tomme handlinger Objekt, lad os definere en, hvor hvis vores indlægstilstande stadig er nul, bruges Axios til at udføre en AJAX-anmodning til WordPress API og returnere en liste over indlæg. Når vi har modtaget et positivt svar, løser vi derefter løftet og begår indlægene ved hjælp af butiksposter. mutation.

 Getposts: Funktion (Kontekst) {
  returnere nyt løfte ((løse, afvise) = & gt; {
  hvis (kontekst.state.posts) {
  beslutte()
  }
  ellers {
  axios.get ('http://lukeharrison.net/
  Webdesigner / WP-JSON / WP / V2 / POSTS ')
  .then ((svar) = & gt; {
  Context.commit ('StorePosts',
  Response.Data)
  beslutte()
  }). Fang ((fejl) = & gt; {
  afvise (fejl);
  });
  }
  })
} 

08. Opret lagerpostmutation

Et andet koncept, der blev indført af Vuex, er mutationer, som også typisk er defineret i butikken. Mutationer er den eneste måde at ændre tilstand i en vuex butik, som gør det muligt at spore staten nemt, når debugging.

I det tomme mutationer. objekt, lad os definere butiksposter. Metode Vi refererede i det foregående trin og gør det tilsidesat postegenskaben i statens objekt med eventuelle data, hvor mutationen modtager som nyttelast.

 StorePosts (tilstand, svar) {
   State.Posts = Response} 

09. Trigger Getposts Action On Load

Vi har oprettet handlings- og mutationsmetoderne, der tager fat i WordPress API og forpligter dem til Vuex-staten, men nu skal vi faktisk udløse denne proces et eller andet sted. I øverste niveau vue.js komponent App.vue. , Tilsæt snippet nedenfor.

oprettet () er en livscykluskrog, der udløser kode, så snart Vue-komponenten er skabt på belastning, mens brugen af ​​det globale $ Store. Variabel giver os adgang til indholdet af vores vuex butik og afsendelse af fåposts. handling fra trin 7.

 Oprettet () {
   dette. $ store.dispatch ('fåposts')} 

10. Opdater attributstier

Hvis du arbejder i Chrome eller Firefox og har Vue.js devtools extension. (Hvis ikke, anbefaler jeg, at du gør som det er meget nyttigt), skal du nu kunne se de indlæste WordPress-indlæg i Base State. under Vuex. Tab.

Tilbage til appen, i /Components/posts/posts.Vue. , Skabelon HTML skal pege på disse data, så lad os tweak et par af attributtevejene.

 Switch 'Post.Title' til 'Post.Title.Rendered'
 Skift 'Post.Preview' til 'Post.Acf.preview'
 Skift 'Post.PreviewImage' til 'Post.Acf.Header_Image_Small' 

11. UPDATE V-TIL LOOP

I Posts-komponenten er der et vue.js-direktiv i brug kaldet v-for. . Disse sløjfer gennem alle indlæg og for hver enkelt udskriver en forekomst af postkomponenten, der viser dem på en liste.

Vi skal opdatere stien, der er gået til dette direktiv, da det stadig bruger de lokale dummy testdata. Opdater V-til direktivet til Snippet nedenfor for at pege på vores lagrede indlæg i Vuex Store.

 V-for = "Post i dette. $ Store.State.Posts" 

12. Gør noget husholdning

En liste over WordPress-indlægene skal nu vises. Når vi ikke længere bruger de lokale postdata, lad os slette src / data. . Derefter i Posts-komponenten, fjern den Stillinger: Postdata.data. Ejendom i komponenterne Local Daty Store og derefter Postdata Import.

13. Fix Post Forfatter

Du kan bemærke, at for hvert indlæg vises forfatteren som et nummer. Dette skyldes, at WordPress API returnerer et forfatter-id, snarere end et navn. Vi skal bruge dette ID til at søge WordPress for de fulde forfatteroplysninger. Lad os starte med at skabe et sted at gemme dette i vores vuex butik, sammen med vores postinfo, i butik / index.js. .

 Stat: {
  Forfattere: null,
  Indlæg: null} 

14. Opret getauthors handling

Som med stillinger vil vi oprette en handling i /Store/index.js. For at udløse en AJAX-anmodning om at forespørge WordPress API. Når et vellykket svar er modtaget, vil løftet derefter løse og udløse StoreAuthors. Mutation, som vi opretter næste.

 GetAuthors: funktion (kontekst) {
  axios.get ('http://lukeharrison.net/
  Webdesigner / WP-JSON / WP / V2 / Brugere ')
  .then (funktion (svar) {
  Context.commit ('StoreAuthors',
  Response.Data)
  })
} 

15. Opret StoreAuthors Mutation

Inden for Mutations-objektet for Vuex Store, oprette du StoreAuthors. mutation ved hjælp af snippet nedenfor. Som med butiksposter. Fra trin 8 tager dette den lastbelastning, der er gået, og sætter det som værdien af ​​forfatterens ejendom i vores butiks tilstand.

 StoreAuthors (tilstand, svar) {
  State.Authors = Response} 

16. Trigger GetAuthors på Load

Vi skal få forfatteroplysningerne fra WordPress, så snart appen begynder at indlæse. Lad os ændre den øverste niveau komponent App.vue. igen og forsend det GetAuthors. handling i det samme oprettet () Livscyklus krog som fåposts. handling.

 Oprettet () {
  Dette. $ Store.dispatch ('GetAuthors')
   dette. $ store.dispatch ('fåposts')} 

17. Opret GetUserName-metode

Nu spørger vi WordPress for forfatteroplysninger på belastning, alt, hvad vi skal gøre, er at definere en metode i vores Posts-komponent, som lader os sende et forfatter-id og få et navn til gengæld. Kopier uddraget nedenfor i Posts-komponentens metoderobjekt, under den eksisterende getinglepost. metode.

 GetUserName: Funktion (UserID) {
  Var brugernavn = 'Ukendt';
  dette. $ store.state.
  forfattere. Filter (funktion (bruger) {
  hvis (user.id === userid) {
  Brugernavn = User.Name.
  }
  });
  returnere brugernavn;
} 

18. Kald GetuserName Method

Nu skal vi bare ringe GetUserName. . Stadig i Posts-komponenten, skal du i skabelonen udskifte forfatterattributens henvisning til post.Author. Så det afspejler snippet nedenfor. Forfatterens navn skal nu vises korrekt for hvert indlæg.

: Forfatter = "GetUserName (Post.Author)" 

19. Blogindlæsning

Da vi lægger postdataene asynkront, er der et øjeblik, før anmodningen fuldender, hvor ansøgningen er tom. For at imødegå dette implementerer vi en belastningstilstand, der er aktiv, indtil bloggen er fuldt befolket. I Posts-komponenten skal du indsætte udgangen nedenfor lige efter åbningen & lt; script & gt; Tag for at importere ikonerne, vi vil bruge.

 Importikon fra '@ / komponenter / ikoner / ikoner'
Import loading fra './../../
Aktiver / IMG / loading.svg '

20. Tilføj ikon til komponentsliste

Næste, stadig inden for indlæg, tilføj en henvisning til ikonet i komponenterne objekter. Dette gør Posts-komponenten opmærksom på vores nyligt importerede ikonkomponent.

 Komponenter: {
   ikon,
   post} 

21. Opret loadelementer

Vi skal nu bare tilføje indlæsningselementerne til Posts-skabelonen, så det vises på siden. For det første indpakke den anden div i snippet omkring de to divs med v-If. Direktiver for at sikre, at der ikke vises indlæg, indtil indlæsningen er færdig.

Tilføj derefter det første div fra drivknippet over det. Dette indeholder indlæsningsikonet og a v-If. Direktiv, hvilket betyder, at det kun vil være synligt, indtil det punkt, hvor appen er fuldt lastet. Når du er færdig, skal indlæsningen nu implementeres.

 & lt; div v-IF = "! Dette. $ Store.state.posts"
klasse = "U-Align-Center" & GT;
   & lt; ikon klasse = "c-ikon-loading"
   brug = "loading" & gt; & lt; / ikon & gt;
& lt; / div & gt;
& lt; div v-IF = "dette. $ store.state.posts" & gt;
   [...]
& lt; / div & gt; 

22. Opdater single post attribut stier

Det eneste, der er tilbage til at gøre, er at sikre, at enkeltposter er korrekt oprettet, så de bruger WordPress Post-data i VUEX Store. Det første skridt er at opdatere attributets stier i stillingskomponentskabelonen inden for v-If = "this.type === 'single'" Div, som håndterer visningen af ​​enkeltposter.

 Switch 'singlepost.title' til 'singlepost.title.Rendered'
 Skift 'singlepost.Author' til 'GetUserName (singlepost.Author)'
 Skift 'singlepost.fullimage' til 'singlepost.acf.header_image'
 Skift 'singlepost.content' til 'singlepost. content.Rendered '

23. Refactor Gettinglepost Method

Vi skal også refactor Posts-komponenterne getinglepost. metode. Det skal returnere et løfte, der sender fåposts. handling. I opfølgningen derefter Funktion, vi søger Vuex Store's indlæg til en post med en slug, der matcher den, der passeres i URL'en. Hvis det findes, kopierer vi dataene til vores komponents lokale tilstand og løser løftet. Hvis det ikke findes, vil løftet blive afvist.

 Getinglepost: Funktion () {
   returnere nyt løfte
   ((Løs, Afvis) = & GT; {
  dette. $ store.dispatch ('fåposts')
  .then (() = & gt; {
  var foundpost = falsk;
  dette. $ store.state.posts.
  Filter ((POST) = & GT; {
  hvis (post.slug ===
  Dette. $ Route.params.slug) {
  dette.singlepost = post;
  foundpost = true; }
  });
  foundpost? Løs (): Afvis ();
  })
  })
} 

24. Refactor stillinger oprettet () kroge

Derefter skal vi refaktoren oprettet () Livscyklus krog i stillingskomponenten. Hvis vi har brug for at vise et enkelt indlæg, skal krogen ringe til getinglepost. Metode fra det foregående trin, og hvis dets løfte afvises, send brugeren til den 404 'side, der ikke findes' side. Dette er at redegøre for scenarier, hvor brugerne indtaster en ikke-eksisterende post slug i webadressen.

 Oprettet () {
  hvis (this.type === 'single') {
  this.getsinglepost (). Derefter (null, () = & gt; {
  dette. $ router.push ({navn: 'pagenotfound'})
  });
  }
} 

25. Tilføj V-IF-direktiv

Det sidste trin er at tilføje snippet nedenfor til postkomponenten inden for v-If = "this.type === 'single'" Div i skabelonen. Dette direktiv betyder, at posten kun vises, når de lokale postdata, der er stillet til rådighed af getinglepost. Metoden er befolket. Dette er at stoppe Vue fra for tidligt at gøre komponenten og dermed forårsage fejl.

 V-IF = "singlepost" 

26. Byg appen

Nu med alt, der arbejder, i konsollen, annullere NPM Run Dev. Kommando eller åben en ny konsol og kør nedenstående kommando for at generere en produktionsrecept version for at uploade til din egen server. Dette vises i Dist. vejviser.

 NPM Run Build 

Denne artikel optrådte i udstedelse 268 af Web Designer, Creative Web Design Magazine - tilbyder ekspert tutorials, banebrydende trends og gratis ressourcer. Abonner på webdesigner nu.

Læs mere:

• 32 bedste gratis wordpress temaer
• 10 TOP WordPress ressourcer
• Det Bedste gratis blogging platforme