Strøm en blogg med WordPress API

I løpet av de siste årene har utviklingen av en rest API for WordPress åpnet nye dører for utviklere. Utviklere som tidligere hadde vært begrenset til å skrive et WordPress-drevet prosjekt i PHP, har nå mer fleksibilitet og kontroll i hvordan de kan nærme seg teknologien av deres nettside for å være.

Dette betyr at det er mulig å beholde alle fordelene ved det strålende WordPress-kontrollpanelet, som er laget ekstremt fleksibelt av populært Wordpress plugins. som avanserte egendefinerte felt, og har en helt tilpasset bygget frontend som bare samhandler med WordPress når den trenger.

• Last ned opplæringsfilene

I dette Wordpress Tutorial Vi vil utforske hvordan man implementerer WordPress-resten API i en enkel bloggapp, som for øyeblikket bruker en lokal JSON-fil som datakilde, og er bygget som en enkeltside-applikasjon (SPA) ved hjelp av det populære JavaScript-rammene Vue.js. . Dette vil innebære implementering av VUEX, som vi skal bruke til å lagre dataene vi ber om fra en WordPress ved hjelp av en kombinasjon av handlings- og mutasjonsmetoder.

Når du er ferdig, bør du ha skapt et magert, enkelt spa, som har all reaktiviteten til vue.js, mens du viser innlegg hentet fra og administreres av WordPress.

For mer AWESOME APIer å utforske, ta en titt på våre guider til det beste Javascript Apis , HTML APIER og Google Apis .

01. Sett opp arbeidsområde og avhengigheter

Første ting først, bør du Last ned prosjektets filer og åpne dem i din foretrukne redaktør.

I konsollen, CD i Nettsted-mal og kjør kommandoen nedenfor for å installere prosjektets nodeavhengigheter (hvis du ikke har node installert, Gjør det først ). Vi skal jobbe rent i src. katalog herfra på ut.

npm install

02. Installer VUEX.

Neste, ved hjelp av kommandoen nedenfor, installerer vi Vuex. , som er et statlig styringsmønster og bibliotek for vue.js applikasjoner. Dette vil fungere som en sentral informasjonsbutikk for alle Vue-komponenter som avhenger av dataene vi mottar fra WordPress API. For utviklere som er kjent med reakt, er VUEX sterkt inspirert av flux.

npm install vuex --save

03. Start utviklingsserver

I konsollen, kjør kommandoen nedenfor for å starte utviklingsserveren. Dette vil kompilere VUE.JS-prosjektet som det for øyeblikket står og tilordner det til en URL, slik at du kan få tilgang til den. Dette er vanligvis Localhost: 8080. .

En stor fordel Dette bringer er Live Reloading, så når du gjør endringer i appen og lagrer, vil siden i nettleseren oppdatere seg uten at du må laste inn manuelt.

npm run dev

04. Opprett VUEX Store

I src. , opprett en katalog kalt butikk og i den en ny fil kalt index.js. . Dette vil være der vår Vuex-butikk vil bli definert. Selv om vi kommer til det, må vi først sørge for at vår vue.js-app er klar over sin eksistens. Å gjøre dette, åpent main.js. og importer butikken og ta med den som avhengighet, som i snippeten nedenfor.

 Importer Vue fra 'Vue'
Importer app fra './app'
importer ruteren fra './router'
Importer butikk fra './store'
Vue.config.productionTip = False
/ * Eslint-deaktiver No-New * /
Ny Vue ({
  el: '#app',
  router,
  butikk,
  Mal: '& lt; app / & gt;',
  Komponenter: {app}
}) 

05. Lag butikk stillas og installer aksios

For å hjelpe oss med å forenkle AJAX-forespørsler, vil butikken vår gjøre til WordPress API, vi installerer Axios, som er en løftebasert HTTP-klient. For å gjøre dette, åpne et eget konsollvindu, navigere til Nettsted-mal katalog og kjøre NPM Installer Axios - Lagre .

Deretter, la oss begynne å scaffold butikken ved å instantiere et nytt tomt Vuex-butikkobjekt. For øyeblikket gjør det ikke noe, men i det minste bør VUE være oppmerksom på det.

 Importer aksios fra 'Axios'
Importer Vue fra 'Vue'
importere vuex fra 'vuex'
Vue.use (vuex)
constbutikk = new vuex.store ({
  stat: {},
  Handlinger: {},
  Mutasjoner: {}
})
Eksporter standard butikk 

06. Opprett innleggsstat

I Vuex holder statens objekt søknadsinformasjon, som i dette tilfellet vil være WordPress Post-dataene vi tar tak i API. Innenfor dette objektet, opprett en ny eiendom kalt innlegg og tilordne det en verdi av null.

 Stat: {
  Innlegg: Null
} 

07. Opprett getposts handling

I Vuex er handlinger den viktigste måten hvor asynkronforespørsler håndteres. Disse er typisk metoder definert i butikken, som deretter kan sendes som nødvendig av appen.

I det tomme handlinger Objekt, la oss definere en hvor hvis innleggsstaten fortsatt er null, brukes Axios til å utføre en AJAX-forespørsel til WordPress API og returnere en liste over innlegg. Når vi har mottatt et positivt svar, vil vi da løse løftet og forplikte innleggene med Storeposts Mutasjon.

 getposts: funksjon (kontekst) {
  returnere nytt løfte ((løse, avvise) = & gt; {
  hvis (kontekst.State.posts) {
  Løse()
  }
  ellers {
  axios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / Posts ')
  .Nå ((svar) = & gt; {
  kontekst.Commit ('Storeposts',
  response.data)
  Løse()
  }). Fangst ((feil) = & gt; {
  avvis (feil);
  });
  }
  })
} 

08. Lag storposts mutasjon

Et annet konsept som ble introdusert av VUEX, er mutasjoner, som også er typisk metoder som er definert i butikken. Mutasjoner er den eneste måten å endre tilstand i en VUEX-butikk, som gjør at det enkelt kan spores når de feilsøkes.

I det tomme Mutasjoner objekt, la oss definere Storeposts Metode Vi refererte i det forrige trinnet, og gjør det til å overstyre Post-egenskapen i statsobjektet med data som mutasjonen mottar som nyttelast.

 Storeposts (statlig, respons) {
   State.posts = respons} 

09. Trigger getposts handling på last

Vi har opprettet handlings- og mutasjonsmetodene som griper innlegg fra WordPress API og forplikter dem til VUEX-staten, men nå må vi faktisk utløse denne prosessen et sted. I toppnivået vue.js komponent App.Vue. , legg til stikket nedenfor.

opprettet () er en livssykluskrok som utløser koden så snart VUE-komponenten er opprettet på last, mens bruken av det globale $ Store Variabel gjør at vi får tilgang til innholdet i vår VUEX-butikk og leverer getposts. handling fra trinn 7.

 opprettet () {
   dette. $ Store.dispatch ('getposts')} 

10. Oppdater attributtbaner

Hvis du jobber i Chrome eller Firefox og har Vue.js Devtools Extension (Hvis ikke, anbefaler jeg at du gjør som det er veldig nyttig), du bør nå kunne se de lastede Wordpress-innleggene i Basisstat under Vuex. fanen.

Tilbake til appen, i /components/posts/posts.Vue. , Malen HTML må peke på disse dataene, så la oss tweak noen av attributtbanene.

 Bytt 'Post.title' til 'Post.title.Rendered'
 Bytt 'post.preview' til 'post.acf.preview'
 Bytt 'post.previewimage' til 'post.acf.header_image_small' 

11. Oppdater V-for Loop

I innleggskomponenten er det et vue.js-direktiv som kalles v-for. . Disse løkkene gjennom alle innlegg og for hver enkelt skriver ut en forekomst av postkomponenten, og viser dem i en liste.

Vi må oppdatere banen som passeres til dette direktivet, da det fortsatt bruker de lokale dummy testdataene. Oppdater V-for-direktivet til stikket nedenfor for å peke på våre lagrede innlegg i VUEX-butikken.

 v-for = "Post i dette. $ Store.State.posts" 

12. Gjør litt housekeeping

En liste over WordPress-innleggene skal nå vises. Som vi ikke lenger bruker de lokale postdataene, la oss slette SRC / DATA . Så i innleggskomponenten, fjern Innlegg: postdata.data. Eiendom i komponentene lokal datalager og deretter postdata importen.

13. FIX Post Forfatter

Du kan legge merke til at for hvert innlegg blir forfatteren som et tall. Dette skyldes at WordPress API returnerer en forfatter-ID, i stedet for et navn. Vi må bruke denne IDen til å spørre WordPress for full forfatterinformasjon. La oss starte med å skape et sted å lagre dette i vår Vuex-butikk, sammen med vår postinfo, i butikk / index.js. .

 Stat: {
  Forfattere: null,
  Innlegg: Null} 

14. Lag GetAuthors Action

Som med innlegg, vil vi skape en handling i /Store/index.js. For å utløse en AJAX-forespørsel om å spørre WordPress API. Når en vellykket respons er mottatt, vil løftet da løse og utløse Storeauthors. Mutasjon, som vi skal lage neste.

 GetAuthors: Funksjon (kontekst) {
  axios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / brukere ')
  .Nå (funksjon (respons) {
  kontekst.Commit ('Storeauthors',
  response.data)
  })
} 

15. Opprett storbehandlere mutasjon

Innenfor mutasjonsobjektet til VUEX-butikken, opprett Storeauthors. Mutasjon ved hjelp av koden nedenfor. Som med Storeposts Fra trinn 8 tar dette nyttelastet sitt passerte og setter det som verdien av forfatterens eiendom i butikkens tilstand.

 Storeauthorer (statlig, respons) {
  State.Authors = Response} 

16. Trigger GetAuthors On Load

Vi må få forfatteren info fra WordPress så snart appen begynner å laste. La oss endre toppnivå komponenten App.Vue. igjen og send på GetAuthors. handling i det samme opprettet () Lifecycle Hook som getposts. handling.

 opprettet () {
  dette. $ Store.Dispatch ('GetAuthors')
   dette. $ Store.dispatch ('getposts')} 

17. Lag getusername-metoden

Nå ber vi om WordPress for forfatterinformasjon om last, alt vi trenger å gjøre er å definere en metode i vår Post-komponent som lar oss passere en forfatter-ID og få et navn i retur. Kopier koden under innleggets komponentets metodobjekt, under eksisterende getinglepost. metode.

 getusername: funksjon (userid) {
  var brukernavn = "ukjent";
  Dette. $ Store.State.
  authors.filter (funksjon (bruker) {
  hvis (user.id === userid) {
  Brukernavn = bruker.name.
  }
  });
  returnere brukernavn;
} 

18. Ring getusername metode

Nå må vi bare ringe getusername. . Fortsatt i innleggskomponenten, i malen, erstatt forfatterens attributtets referanse til Post.Author. Så det reflekterer koden nedenfor. Forfatterens navn skal nå vises riktig for hvert innlegg.

: Forfatter = "getusername (post.Author)" 

19. Bloggbelastning

Når vi legger inn postdataene asynkront, er det et øyeblikk før forespørselen fullfører hvor programmet er tomt. For å motvirke dette, vil vi implementere en lastestatus som er aktiv til bloggen er fullt befolket. I Post-komponenten, lim inn koden under like etter åpningen & lt; script & gt; Tag for å importere ikonene vi skal bruke.

 Importikon fra '@ / komponenter / ikoner / ikoner'
importere lasting fra './../../
Eiendeler / img / loading.svg '

20. Legg til ikon for komponenterliste

Neste, fortsatt innenfor innlegg, legg til en referanse til ikonet i komponentobjektene. Dette gjør innleggene komponent oppmerksom på vår nylig importerte ikonkomponent.

 Komponenter: {
   ikon,
   Post} 

21. Lag lastelementer

Vi trenger nå bare å legge til lastelementene i innleggsmalen, slik at den vises på siden. For det første, vikle den andre diven i koden rundt de to divsene med v-If. Direktiver for å sikre at ingen innlegg vises til lastingen er fullført.

Legg deretter til den første diven fra stikket over det. Dette inneholder lastikonet og en v-If. Direktivet, noe som betyr at det bare vil være synlig til det punktet hvor appen er fullt lastet. Når du er ferdig, bør lasting nå implementeres.

 & lt; div v-hvis = "! Dette. $ Store.State.posts"
klasse = "U-Juster-senter" & gt;
   & lt; icon class = "c-ikon-loading"
   bruk = "lasting" & gt; & lt; / icon & gt;
& lt; / div & gt;
& lt; div v-hvis = "dette. $ Store.State.posts" & gt;
   [...]
& lt; / div & gt; 

22. Oppdater enkelt postattributtbaner

Det eneste som er igjen å gjøre er å sørge for at enkeltposter er riktig konfigurert slik at de bruker WordPress Post-dataene i VUEX-butikken. Det første trinnet er å oppdatere attributtbanene i POST-komponentmalen i v-hvis = "this.type ===" singel "" div, som håndterer visning av enkeltposter.

 Switch 'singlepost.title' til 'singlepost.title.Rendered'
 Bytt 'singlepost.Author' til 'getusername (singelpost.Author)'
 Bytt 'singlepost.fullimage' til 'singlepost.acf.header_image'
 Bytt 'singlepost.content' til 'singlepost. innhold.Rendered '

23. Refactor GetingLepost-metoden

Vi må også refacture Post-komponentene getinglepost. metode. Det må returnere et løfte som sender getposts. handling. I oppfølgingen deretter Funksjon, vi søker etter Vuex-butikkens innlegg for en oppføring med en slug som matcher den som passerte i nettadressen. Hvis det er funnet, kopierer vi dataene til komponentens lokale tilstand og løser løftet. Hvis det ikke er funnet, vil løftet bli avvist.

 GetsingLepost: Funksjon () {
   returnere nytt løfte
   ((Løs, avvis) = & gt; {
  dette. $ Store.dispatch ('getposts')
  .Den (() = & gt; {
  var fanenpost = false;
  Dette. $ Store.State.posts.
  Filter ((post) = & gt; {
  hvis (post.slug ===
  dette. $ route.params.slug) {
  this.singlepost = post;
  foundpost = sant; }
  });
  foundpost? Løs (): Avvis ();
  })
  })
} 

24. Refactor Posts opprettet () krok

Deretter må vi refactor opprettet () Livscykelkrok i innleggskomponenten. Hvis vi trenger å vise et enkelt innlegg, bør kroken ringe getinglepost. Metode fra forrige trinn, og hvis det er løftet avvist, send brukeren til siden 404 'siden ikke funnet'. Dette er å ta hensyn til scenarier hvor brukere skriver inn en ikke-eksisterende postslug i nettadressen.

 opprettet () {
  hvis (dette.type === 'single') {
  denne.GETSINGLEPOST (). Deretter (null, () = & gt; {
  dette. $ router.push ({navn: 'pagenotfound'})
  });
  }
} 

25. Legg til V-hvis direktiv

Det endelige trinnet er å legge til koden nedenfor til postkomponenten i v-hvis = "this.type ===" singel "" div i malen. Dette direktivet betyr at posten bare vil vise når de lokale postdataene er tilgjengelig av getinglepost. Metoden er befolket. Dette er å stoppe Vue fra for tidlig å gjøre komponenten og dermed forårsake feil.

 v-if = "singlepost" 

26. Bygg appen

Nå med alt som jobber, i konsollen, kansellerer NPM Run Dev. Kommando eller åpne en ny konsoll og kjøre nedenstående kommando for å generere en produksjonsgjenoppretting for å laste opp til din egen server. Dette vil vises i dist. katalog.

 NPM Run Build 

Denne artikkelen dukket opp i utgave 268 i Web Designer, Creative Web Design Magazine - tilbyr ekspert opplæringsprogrammer, banebrytende trender og gratis ressurser. Abonner på webdesigner nå.

Les mer:

• 32 beste gratis wordpress temaer
• 10 TOP WordPress Resources
• De beste gratis blogging plattformer