Virta blogi WordPress API: n avulla

Viime vuosina WordPressin lepopäilitelmän kehittäminen on avannut uusia ovia kehittäjille. Kehittäjät, jotka olivat aiemmin rajoittuneet WordPress-powered-projektin kirjoittamiseen PHP: ssä on nyt enemmän joustavuutta ja valvontaa, miten he voivat lähestyä verkkosivujensa teknologiapinoa.

Tämä tarkoittaa sitä, että on mahdollista säilyttää kaikki loistavan Wordpress-ohjauspaneelin edut, mikä on erittäin joustava suosittu WordPress-laajennukset Kuten kehittyneitä mukautettuja kenttiä ja niillä on täysin mukautettu rakennettu etuosa, joka toimii vain WordPressin kanssa, kun se tarvitsee.

• Lataa opetusohjelmat

Tässä WordPress-opetusohjelma Tutkimme WordPress REM-sovelluksen toteuttamista yksinkertaiseksi blogisovellukseksi, joka käyttää parhaillaan paikallista JSON-tiedostoa tietolähteenä ja se on rakennettu yhdeksi sivun sovellukseksi (SPA) käyttäen suosittua JavaScript-kehystä Vue.js . Tämä edellyttää VUEX: n toteuttamista, jota käytämme tietojen tallentamiseksi WordPressista käyttämällä sen toiminta- ja mutaatiomenetelmiä.

Kun olet valmis, sinun olisi pitänyt luoda laiha, yksinkertainen kylpylä, jolla on kaikki reaktiivisuus Vue.js, kun näytetään Wordpressin haetut viestit.

Saat enemmän mahtavia sovellusliittymiä tutkimaan, katsokaa oppaat parhaiten JavaScript APIS , HTML API ja Google APIS .

01. Aseta työtila ja riippuvuudet

Ensimmäiset asiat ensin, sinun pitäisi Lataa projektin tiedostot ja avaa ne haluamallasi tavalla.

Konsolissa CD Verkkosivusto ja suorita alla oleva komento, jos haluat asentaa projektin solmun riippuvuudet (jos sinulla ei ole solmua, tee se ensin ). Työskentelemme puhtaasti src Hakemisto täältä ulos.

npm install

02. Asenna Vuex

Seuraavaksi käyttämällä alla olevaa komentoa, asennamme Vuex , joka on valtionhallintakuvio ja kirjasto VUE.JS-sovelluksille. Tämä toimii keskeisenä tietomyymälänä kaikille VUE-komponentteille, jotka riippuvat WordPress API: sta saatuista tiedoista. Reagoivien kehittäjien osalta vuex on voimakkaasti innoittanut flux.

npm install vuex --save

03. Käynnistä kehityspalvelin

Suorita komento alla aloita kehityspalvelin. Tämä kokoaa VUE.JS-projektin, koska se on tällä hetkellä ja määrittää sen URL-osoitteeseen, jotta voit käyttää sitä. Tämä on yleensä Localhost: 8080 .

Yksi suuri etu Tämä tuo on live Reloading, joten kun teet muutoksia sovellukseen ja tallentaa, selaimesi sivu päivittää itsensä ilman tarvetta ladata manuaalisesti.

npm run dev

04. Luo vuex Store

Sisään src , Luo hakemisto kutsutaan myymälä Ja siinä on uusi tiedosto nimeltä index.js . Tämä on silloin, kun Vuex-myymälä määritellään. Vaikka ennen kuin pääsemme siihen, meidän on ensin varmistettava, että Vue.js-sovellus on tietoinen sen olemassaolosta. Voit tehdä tämän avoimen Main.js ja tuoda myymälä ja sisällytä se riippuvuudeksi, kuten alla olevassa katkelussa.

 Tuonti Vue "Vue"
Tuo sovellus "./App"
Tuo reitittimen "./ruuter"
Tuo tallentaa './Store'
Vue.config.ProductionTip = FALSE
/ * ESLINT-DISABLE NO-UUSI * /
uusi vue ({
  EL: "#App",
  reititin,
  Säilytä,
  Malline: '& lt; sovellus / & gt;
  Komponentit: {App}
}) 

05. Luo Store telineitä ja asenna Axios

Auttamaan meitä yksinkertaistamaan Ajax-pyyntöjä Store tekee WordPress API: n, asennamme Axios, joka on lupauspohjainen http-asiakas. Voit tehdä tämän, avaa erillinen konsoli-ikkuna, siirry Verkkosivusto hakemisto ja juoksu NPM asentaa Axios - Tallenna .

Seuraavaksi Aloitamme myymälän tukahduttamaan uuden tyhjän VUEX Store -objektin. Tällä hetkellä se ei tee mitään, mutta ainakin VUE VUE: n pitäisi olla tietoinen siitä.

 Tuonti aksiot "Axios"
Tuonti Vue "Vue"
Tuo vuex "Vuex"
VUE.USE (VUEX)
const store = uusi vuex.store ({
  Valtio: {},
  Toiminnot: {},
  Mutaatiot: {}
}))
Vienti oletusvarasto 

06. Luo viestit

VUEX: ssä valtion esine pitää sovellusinfo, joka tässä tapauksessa on WordPress Post Data napata API: n avulla. Luo uusi omaisuus nimeltä Posts ja määrittää sen arvon arvo.

 Valtio: {
  Viestit: null
} 

07. Luo getposts-toimintaa

Vuexissa toimet ovat tärkein tapa, jolla asynkronisia pyyntöjä käsitellään. Nämä ovat tyypillisesti myymälässä määritellyt menetelmät, jotka voidaan lähettää sovelluksen edellyttämällä tavalla.

Tyhjässä Toiminnot Objekti, määritämme yhden, jossa jos viestimme tila on edelleen null, AXIOSia käytetään Ajax-pyynnön suorittamiseen WordPress API: lle ja palauttaa luettelon viesteistä. Kun olemme saaneet myönteisen vastauksen, ratkaisemme sitten lupauksen ja sitoudumme viestit käyttämällä myymälät mutaatio.

 GetPosts: Toiminto (konteksti) {
  Palauta uusi lupaus ((ratkaise, hylkää) = & gt; {
  jos (konteksti.state.posts) {
  ratkaista()
  }
  muu
  aksios.get ('http://lugharrison.net/
  WebDesigner / WP-JSON / WP / V2 / Posts ')
  ., (vastaus) = & gt; {
  konteksti.comMit ("Kaupat",
  vastaus.Data)
  ratkaista()
  }). saalis (virhe) = & gt; {
  Hylkää (virhe);
  });
  }
  }))
} 

08. Luo varastokauppa mutaatio

Toinen Vuexin käyttöön otettu konsepti on mutaatioita, jotka ovat tyypillisesti tavallisesti menetelmiä myymälässä. Mutaatiot ovat ainoa tapa muuttaa tilaa VUEX-myymälässä, mikä sallii valtion helposti seurata virheenkorjaus.

Tyhjässä mutaatiot esine, määritämme myymälät Menetelmä, jossa viitataan edellisessä vaiheessa ja ohita se valtion objektin post-ominaisuuden minkä tahansa tietojen mutaation vastaanottaa hyötykuorman.

 Kaupat (tila, vastaus) {
   state.posts = vastaus} 

09. TRIGGER GETPOSTS Kuorman toiminnot

Olemme luoneet toiminta- ja mutaation menetelmiä, jotka tarttuvat viestit WordPress API: lta ja sitoutuvat VUEX-tilaan, mutta nyt meidän on todella käynnistettävä tämä prosessi jonnekin. Yläosassa Vue.js-komponentti App.vue , Lisää alla oleva katkelma.

Luotu () on elinkaari koukku, joka laukaisee koodin heti, kun VUE-komponentti luodaan kuormituksella, kun taas maailmanlaajuinen käyttö $ Store Muuttuja antaa meille mahdollisuuden käyttää VUEX-myymälän sisältöä ja lähetettävä getposts Vaiheesta 7.

 Luotu () {
   Tämä. $ store.dispatch ('getposts')} 

10. Päivitä attribuuttipolut

Jos työskentelet Chrome tai Firefoxissa ja sinulla on Vue.js devtools-laajennus (Jos ei, suosittelen, että teet niin kuin se on erittäin hyödyllinen), sinun pitäisi nyt pystyä näkemään ladatut WordPress-virat Perusvaltio alla Vuex välilehti.

Takaisin sovellukseen, sisään /components/posts/posts.vus.vut , Mallin HTML: n on osoitettava näitä tietoja, joten lähdemme muutamia attribuuttipolkuja.

 Switch 'Post.Title' 'Post.Title.rendered'
 Vaihda "Post.Preview" "post.acf.preview"
 Vaihda "Post.Previewkuva" post.acf.header_image_small "

11. Päivitä v-silmukka

Posts-komponentissa on käytettävä vue.js-direktiiviä V-FOR . Kaikki silmukat kaikkien viestien kautta ja jokaiselle tulostetaan postikomponentin esimerkistä, näyttämällä ne luettelossa.

Meidän on päivitettävä tähän direktiiviin siirrettävän polun, koska se on edelleen paikallisten nukkien testitietojen avulla. Päivitä V-direktiivit alla olevaan katkelmaan, jotta voit osoittaa Vuex-myymälän tallennettuja viestejä.

 V-for = "Post tässä. $ Store.State.posts" 

12. Tee jonkin verran taloudenhoito

Luettelo WordPress Postsin pitäisi nyt näyttää. Kuten emme enää käytä paikallisia postitietoja, poistetaan SRC / Data . Sitten poistaa viestien komponentit Viestit: postdata.data Omaisuus komponenteissa Paikallinen tietokauppa ja sitten postdata tuonti.

13. Korjaa kirjoittaja

Saatat huomata, että jokaiselle viestille tekijä näyttää numerona. Tämä johtuu siitä, että WordPress API palauttaa tekijän tunnuksen eikä nimen. Meidän on käytettävä tätä tunnusta kyselemään WordPressia koko tekijän tietoja. Aloitetaan luomalla paikka tallentaaksesi tämän Vuex-myymälässamme, lähetystietojen rinnalla Store / index.js .

 Valtio: {
  Tekijät: Null,
  Viestit: null} 

14. Luo "

Kuten viestit, luomme toiminnon /store/index.js Voit käynnistää Ajax-pyynnön kyselyn WordPress API: n kyselyyn. Kun onnistunut vastaus vastaanotetaan, lupaus ratkaista ja laukaisee storeauthors mutaatio, joka luomme seuraavaksi.

 GETAUTORS: Toiminto (konteksti) {
  aksios.get ('http://lugharrison.net/
  WebDesigner / WP-JSON / WP / V2 / Käyttäjät ')
  .Tää (toiminto (vastaus) {
  Context.comMit ("StoreAuthors",
  vastaus.Data)
  }))
} 

15. Luo storeaTuthors mutaatio

Vuex-myymälän mutaatiokohdassa luo storeauthors Mutation käyttämällä alla olevaa katkelmia. Kuten myymälät Vaiheesta 8 tämä vie hyötykuorman sen läpäissyt ja asettaa sen kirjoittajien omaisuuden arvoksi myymälässämme.

 StoreAuthors (valtio, vastaus) {
  state.Authors = vastaus} 

16. Trigger GetAuthors lataus

Meidän on saatava tekijän tiedot WordPressilta heti, kun sovellus alkaa ladata. Muutamme huipputason osaa App.vue uudelleen ja lähetä GetAuthors samoin toiminta Luotu () Lifecycle koukku kuin getposts toiminta.

 Luotu () {
  Tämä. $ Store.Dispatch ('GetAuthetors')
   Tämä. $ store.dispatch ('getposts')} 

17. Luo GetuSername-menetelmä

Nyt kysemme WordPress kirjoittajan tietoja kuormaa, kaikki mitä meidän on tehtävä, on määritellä menetelmä viestissä, jonka avulla voimme siirtää kirjoittajatunnuksen ja saada nimensä. Kopioi katkelman alapuolella Postines Componentin menetelmien kohteen alapuolella getsinglepost menetelmä.

 GETUSERNAME: toiminto (käyttäjätunnus) {
  Var Käyttäjätunnus = "tuntematon";
  Tämä. $ Store.State.
  tekijät.filter (toiminto (käyttäjä) {
  jos (käyttäjä.id === käyttäjätunnus) {
  Käyttäjätunnus = käyttäjä.Name
  }
  });
  Palaa käyttäjätunnus;
} 

18. Soita GetuSername Menetelmä

Nyt meidän täytyy vain soittaa gausername . Silti postitse komponentissa, korvaa tekijän attribuutin viittaus post.Author Joten se heijastaa alla olevaa katkelmia. Tekijän nimen pitäisi nyt näyttää oikein jokaiselle postille.

: Tekijä = "GETUSERNAME (POST.AUTHOR)" 

19. Blogin lataus

Kun lataat postitiedon asynkronisesti, on hetki ennen pyyntöä valmistaa, missä sovellus on tyhjä. Tämän torjumiseksi toteutamme lastaustilan, joka on aktiivinen, kunnes blogi on täysin asuttu. Posts-komponentissa liitä katkelman alla aukon jälkeen & lt; skripti & gt; Tunniste tuoda kuvakkeet käytämme.

 Tuo kuvake "@ / komponentit / kuvakkeet / kuvakkeet"
Tuo lastaus "./../../
Varat / IMG / Loading.svg '

20. Lisää kuvake komponenttilistalle

Seuraavaksi, vielä viesteissä, lisää viittaus kuvakkeeseen komponenttien esineissä. Tämä tekee viestejä osaksi äskettäin tuotu kuvake-komponenttia.

 Komponentit: {
   kuvake,
   Post} 

21. Luo lastauselementtejä

Meidän on nyt vain lisättävä lastauselementit viestien malliin, jotta se näkyy sivulla. Ensinnäkin kääri toinen div irrotus kappaleen kahdella divs V-IF Direktiivit, joilla ei ole viestejä, ennen kuin lastaus on valmis.

Lisää sitten ensimmäinen div irti sen yläpuolelle. Tämä sisältää latauskuvakkeen ja a V-IF Direktiivi, joka tarkoittaa sitä vain näkyväksi siihen asti, kunnes sovellus on täysin ladattu. Kun se on tehty, lataus on nyt toteutettava.

 & lt; div v-if = "! Tämä. $ Store.state.posts"
Luokka = "U-kohdistus" & gt;
   & lt; icon class = "C-icon-loading"
   Käytä = "Ladataan" & gt; & lt; / icon & gt;
& lt; / div & gt;
& lt; div v-if = "tämä. $ store.state.posts" & gt;
   [...]
& lt; / div & gt; 

22. Päivitä yksittäiset post-attribuuttipolut

Ainoa asia, joka on jäljellä, on varmistaa, että yksittäiset viestit on oikein perustettu, jotta ne käyttävät WordPress Post -tietoa VUEX Storessa. Ensimmäinen askel on päivittää attribuuttipolut Posts Component -mallissa v-if = "this.type === 'Single'" DIV, joka käsittelee yksittäisten viestien näyttämistä.

 Kytkin 'Singlepost.Title' 'Singlepost.Title.rendered'
 Kytkin 'singlepost.Author' 'getuusername (singlepost.author)' '
 Kytkin 'singlepost.fullimage' 'singlepost.acf.header_image'
 Kytkin 'Singlepost.content' 'Singlepost. Sisältö.Rendered '

23. Refactor GetsingLePostin menetelmä

Meidän on myös hienostettava viestien komponentit getsinglepost menetelmä. Sen on palattava lupaus, joka lähettää getposts toiminta. Seurannassa sitten Toiminto, etsimme VUEX Storen virkaa merkintä, jossa on Slog, joka vastaa URL-osoitteessa. Jos löytyy, kopioimme tiedot komponentin paikalliselle tilaan ja ratkaisemaan lupauksen. Jos sitä ei löydy, lupaus hylätään.

 Getsinglepost: Toiminto () {
   Palauta uusi lupaus
   ((ratkaise, hylkää) = & gt; {
  Tämä. $ Store.Dispatch ('Getposts')
  ., (() = & gt; {
  var foodpost = false;
  Tämä. $ Store.State.Posts.
  suodatin ((viesti) = & gt; {
  Jos (post.slug ===
  tämä. $ ROUTE.PARAMS.SLUG) {
  tämä.singlepost = post;
  foundpost = tosi; }
  });
  Löydät? Ratkaisu (): Hylkää ();
  }))
  }))
} 

24. REFACTOR POSTS luodut () koukku

Seuraavaksi meidän on hienostettava Luotu () Lifecycle koukku viestien komponentissa. Jos tarvitsemme näyttämään yhden viestin, koukun pitäisi soittaa getsinglepost Menetelmä edellisestä vaiheesta ja jos sen lupaus hylätään, lähetä käyttäjä 404 'sivulle Ei löydy sivulta. Tämän tarkoituksena on ottaa huomioon skenaariot, joissa käyttäjät syöttävät URL-osoitteen ei-olemassa olevan post-liukuun.

 Luotu () {
  jos (tämä.tyyppi === 'Single') {
  tämä.getsinglepost (). Sitten (null, () = & gt; {
  Tämä. $ Router.Push ({NAME: "PagenotFound"})
  });
  }
} 

25. Lisää V-jos direktiivi

Lopullinen vaihe on lisätä katkelman alapuolella postikomponenttiin v-if = "this.type === 'Single'" div in templaatti. Tämä direktiivi tarkoittaa, että viesti näkyy vain, kun paikalliset postitiedot getsinglepost Menetelmä on asuttu. Tämän tarkoituksena on pysäyttää Vue ennenaikaisesti tekemästä komponenttia ja aiheuttaa näin virheitä.

 V-IF = "Singlepost" 

26. Rakenna sovellus

Nyt kaikki työskentelevät konsolissa, peruuta NPM Run Dev Komento tai avaa uusi konsoli ja suorita alla oleva komento tuotannon valmiiksi versioksi, jotta voit ladata oman palvelimen. Tämä näkyy erottaa Hakemisto.

 NPM Run Build 

Tämä artikkeli ilmestyi julkaisussa 268 Web-suunnittelija, Creative Web Design -lehti - tarjoamalla asiantuntija-opetusohjelmia, huippuluokan trendejä ja ilmaisia ​​resursseja. Tilaa nyt web-suunnittelija.

Lue lisää:

• 32 parasta ilmaista WordPress-teemaa
• 10 Top Wordpress resurssit
• The Parhaat ilmaiset blogging-alustat