Kracht een blog met behulp van de WordPress API

In de afgelopen jaren heeft de ontwikkeling van een rust-API voor WordPress nieuwe deuren voor ontwikkelaars geopend. Ontwikkelaars die eerder beperkt waren tot het schrijven van een WordPress-aangedreven project in PHP hebben nu meer flexibiliteit en controle over hoe ze de technologiestack van hun website-to-be kunnen benaderen.

Dit betekent dat het mogelijk is om alle voordelen van het schitterende WordPress-bedieningspaneel te behouden, dat extreem flexibel is gemaakt door populair WordPress-plug-ins zoals geavanceerde aangepaste velden, en hebben een volledig op maat gemaakte frontend die alleen met WordPress communiceert wanneer het nodig heeft.

• Download de tutorial-bestanden

In deze WordPress-tutorial We zullen het verkennen van het WordPress Rust-API in een eenvoudige blog-app, die momenteel een lokaal JSON-bestand gebruikt als de gegevensbron en wordt gebouwd als een applicatie met één pagina (SPA) met behulp van het populaire JavaScript-framework Vue.js ​Dit omvat de implementatie van VUEX, die we gebruiken om de gegevens op te slaan die we vragen van een WordPress met behulp van een combinatie van zijn actie- en mutatiemethoden.

Eenmaal voltooid, had u een magere, eenvoudige spa moeten hebben gemaakt, die alle reactiviteit van vue.js heeft, terwijl de posten worden opgehaald van en beheerd door WordPress.

Voor meer geweldige API's om te verkennen, kijk eens naar onze gidsen naar het beste Javascript API's ​ HTML API's en Google API's ​

01. Stel werkruimte en afhankelijkheden in

Eerste dingen eerst, dat zou je moeten doen Download de bestanden van het project en open ze in uw favoriete editor.

In de console, CD in Website-sjabloon en voer de onderstaande opdracht uit om de Node-afhankelijkheden van het project te installeren (als u geen knooppunt hebt geïnstalleerd, doe dat eerst ​We werken puur in de SRC directory vanaf hier.

npm install

02. Installeer VUEX

Volgende, gebruik de onderstaande opdracht, we installeren Vuex , een patroon en bibliotheek van een staatsbeheer en bibliotheek voor vue.js-applicaties. Dit zal fungeren als een centrale informatiewinkel voor alle VUE-componenten die afhankelijk zijn van de gegevens die we ontvangen van WordPress API. Voor ontwikkelaars die bekend zijn met reageren, is VUEX zwaar geïnspireerd op flux.

npm install vuex --save

03. Start Development Server

Voer in de console de onderstaande opdracht uit om de ontwikkelingsserver te starten. Dit compileert het VUE.JS-project, omdat het momenteel staat en het toewijst aan een URL, zodat u er toegang toe hebt. Dit is meestal localhost: 8080 ​

Een groot voordeel Dit brengt live herladen, dus zodra u wijzigingen aanbrengt in de app en opslaan, wordt de pagina in uw browser zichzelf bijgewerkt zonder de noodzaak om handmatig opnieuw te laden.

npm run dev

04. Maak VUEX-winkel

In SRC , maak een map genaamd winkel en erin riep een nieuw bestand index.js ​Dit is waar onze VUEX-winkel zal worden gedefinieerd. Maar voordat we daarbij komen, moeten we eerst controleren of onze vue.js-app op de hoogte is van het bestaan ​​ervan. Om dit te doen, open main.js en importeer de winkel en neem het op als een afhankelijkheid, zoals in het onderstaande fragment.

 Importeer Vue van 'VUE'
Importeer app van './app'
importeer router van './router'
Importeer winkel van './store'
Vue.config.productiontip = false
/ * Eslint-uitschakelen NO-NIEUWE * /
NIEUWE VUE ({
  El: '#App',
  router,
  winkel,
  Sjabloon: '& LT; APP / & GT;',
  Componenten: {app}
}) 

05. Maak de opslag steigers en installeer Axios

Om ons te helpen de AJAX-aanvragen te vereenvoudigen, zal onze winkel aan WordPress API doen, we installeren Axios, wat een belofte-gebaseerde HTTP-client is. Open hiervoor een apart console-venster, navigeer naar de Website-sjabloon Directory en run NPM Installeer Axios - Opslaan ​

Laten we vervolgens beginnen met de scaffold de winkel door een nieuw leeg vuex-winkelobject te geven. Op dit moment doet het niets, maar er moet op zijn minst VUE op de hoogte zijn.

 Axios van 'Axios' importeren
importeer vue van 'vue'
import vuex van 'vuex'
Vue.gebruik (vuex)
const opslag = nieuwe vuex.store ({
  staat: {},
  Acties: {},
  Mutaties: {}
​
Standaardwinkel uitvoeren 

06. Maak berichtenstatus

In VUEX heeft het object van de State Application Info, die in dit geval de WordPress-postgegevens zijn, zullen we met behulp van de API. Maak binnen dit object een nieuw eigenschap met de naam Berichten en wijs het een waarde van null toe.

 Staat: {
  Berichten: null
} 

07. Maak GetPosts Action

In Vuex zijn acties de belangrijkste manier waarop asynchrone verzoeken worden afgehandeld. Dit zijn typisch methoden gedefinieerd in de winkel, die vervolgens kunnen worden verzonden zoals vereist door de app.

In het lege acties Object, laten we er een definiëren waar als onze berichten staat nog steeds null, Axios wordt gebruikt om een ​​AJAX-verzoek uit te voeren naar de WordPress API en een lijst met berichten retourneert. Zodra we een positieve reactie hebben ontvangen, zullen we de belofte oplossen en de posten plegen met behulp van de storeposten mutatie.

 GetPosts: functie (context) {
  Nieuwe belofte retourneren ((besluit, weigeren) = & GT; {
  if (context.state.posts) {
  oplossen ()
  ​
  anders {
  Axios.get ('http://lukharrison.net/
  WebDesigner / WP-JSON / WP / V2 / POSTS ')
  .Ten ((respons) = & gt; {
  context.commit ('Storeposts',
  response.data)
  oplossen ()
  }). Vangst ((fout) = & gt; {
  weigeren (fout);
  ​
  ​
  ​
} 

08. Maak Storeposts-mutatie

Een ander concept dat wordt geïntroduceerd door VUEX is mutaties, die ook typisch zijn gedefinieerd in de winkel. Mutaties zijn de enige manier om de staat in een VUEX-winkel te veranderen, waardoor de staat gemakkelijk wordt gevolgd bij het debuggen.

In het lege mutaties object, laten we het definiëren storeposten Methode We verwezen in de vorige stap en zorg ervoor dat het de post-eigenschap in het staatsobject met eventuele gegevens opheft, ontvangt de mutatie als payload.

 Storeposts (staat, reactie) {
   State.Posts = reactie} 

09. Trigger GetPosts Action on Load

We hebben de actie en mutatiemethoden gemaakt die posten van WordPress API grijpen en zich aan VUEX-staat plegen, maar nu moeten we dit proces echt ergens activeren. In het hoogste niveau vue.js component App.vue , voeg hieronder het snippet toe.

gemaakt () is een levenscyclushaak die codeert zodra de VUE-component op lading is gemaakt, terwijl het gebruik van de wereldwijde store Met variabele stelt ons in staat om toegang te krijgen tot de inhoud van onze VUEX-winkel en de Getposts actie uit stap 7.

 Gemaakt () {
   dit. $ store.dispatch ('GetPosts')} 

10. Update attribuutpaden

Als je in Chrome of Firefox werkt en de Vue.js Devtools Extension (Zo niet, dan raad ik aan dat je het doet, want het is erg handig), moet je nu in staat zijn om de geladen WordPress-posten in te zien Basisstaat onder de Vuex tabblad.

Terug naar de app, in /comments/posts/posts.vue , de sjabloon HTML moet naar deze gegevens wijzen, dus laten we een paar van de attribuutpaden aanpassen.

 Schakel 'post.title' in op 'post.title.Rendered'
 Switch 'Post.Preview' naar 'post.acf.preview'
 Schakel 'post.previewimage' in op 'post.acf.header_image_small' 

11. Update V-for LOOP

In de postencomponent is er een VUE.JS-richtlijn in gebruik genaamd v-voor ​Dit loopt door alle berichten en voor elk drukt een exemplaar van de postcomponent af en toont ze weer in een lijst.

We moeten het pad bijwerken dat is doorgegeven aan deze richtlijn omdat het nog steeds de lokale dummy-testgegevens gebruikt. Werk de V-for-richtlijn bij op het onderstaande fragment om te wijzen op onze opgeslagen berichten in de VUEX-winkel.

 V-for = "Post hierin. $ Store.state.posts" 

12. Doe wat schoonmaak

Een lijst met de WordPress-posten zou nu moeten worden weergegeven. Omdat we de lokale postgegevens niet langer gebruiken, laten we verwijderen SRC / Gegevens ​Verwijder vervolgens in de postscomponent de Posts: PostData.Data Onroerend goed in de componenten Lokale gegevenswinkel en vervolgens de import van de postdata.

13. Fix Post Author

Mogelijk merkt u dat voor elk bericht de auteur verschijnt als een getal. Dit komt omdat de WordPress API een auteur-ID retourneert in plaats van een naam. We moeten deze ID gebruiken om WordPress te vragen voor de volledige auteur-informatie. Laten we beginnen met het maken van een plek om dit in onze VUEX-winkel te bewaren, naast onze postinformatie, in winkel / index.js ​

 Staat: {
  Auteurs: null,
  Posts: NULL} 

14. Maak Getauthors-actie

Zoals met berichten, creëren we een actie in /store/index.js Om een ​​AJAX-verzoek te activeren om WordPress API te vragen. Zodra een succesvolle reactie is ontvangen, zal de belofte dan oplossen en activeren storegelaars Mutatie, die we volgen.

 Getauthors: functie (context) {
  Axios.get ('http://lukharrison.net/
  WebDesigner / WP-JSON / WP / V2 / gebruikers))
  .Ten (functie (reactie) {
  context.commit ('streelauthors',
  response.data)
  ​
} 

15. Maak storegelaars mutatie

Maak in het object Mutations van de VUEX-winkel de storegelaars mutatie met behulp van het onderstaande fragment. Zoals met storeposten Vanaf stap 8 neemt dit de lading van de lading en stelt het in als de waarde van de eigenschap auteurs in de staat van onze winkel.

 Storegelaars (staat, reactie) {
  state.authors = reactie} 

16. Getauthors op lading

We moeten de auteurinformatie van WordPress krijgen zodra de app begint te laden. Laten we het component van het hoogste niveau wijzigen App.vue opnieuw en verzend de Getauthors actie in hetzelfde gemaakt () Levenscyclushaak als de Getposts actie.

 Gemaakt () {
  dit. $ store.dispatch ('GetAuthors')
   dit. $ store.dispatch ('GetPosts')} 

17. Maak GetUserName-methode

Nu vragen we WordPress voor auteurinformatie over lading, alles wat we moeten doen is een methode definiëren in onze postscomponent waarmee ons een auteur-ID kan passeren en een naam in ruil daarvoor krijgt. Kopieer het snippet hieronder in het methodenobject van de postencomponent, onder het bestaande Get SinglePost methode.

 GETUSERNAME: FUNCTION (UserID) {
  VAR gebruikersnaam = 'onbekend';
  dit. $ store.state.
  auteurs.filter (functie (gebruiker) {
  if (user.id === userid) {
  Gebruikersnaam = gebruikernaam
  ​
  ​
  terugkeer gebruikersnaam;
} 

18. Bel GetUserName-methode

Nu moeten we alleen maar bellen GetUserName ​Nog steeds in de postcomponent, in de sjabloon, vervangt u de verwijzing van de auteurattribuut naar post.author Dus het weerspiegelt het snippet hieronder. De naam van de auteur moet nu correct worden weergegeven voor elke post.

: auteur = "GetUserName (post.author)" 

19. Blog loading

Omdat we de postgegevens asynchroon laden, is er een moment voordat het verzoek is voltooid waar de toepassing leeg is. Om dit tegen te gaan, implementeren we een laadstatus die actief is totdat de blog volledig is gevuld. Plak in de postencomponent het snippet eronder net na de opening & lt; script & gt; Tag om de pictogrammen te importeren die we gebruiken.

 Pictogram importeren van '@ / componenten / pictogrammen / pictogrammen'
invoer laden van './../../
Assets / IMG / Loading.SVG '

20. Pictogram toevoegen aan componentenlijst

Voeg vervolgens nog steeds binnen berichten toe een verwijzing naar het pictogram in de objecten voor componenten. Dit maakt de postcomponent op de hoogte van onze recent geïmporteerde pictogramcomponent.

 Componenten: {
   icoon,
   Post} 

21. Maak laadelementen

We hoeven nu alleen de laadelementen toe te voegen aan de postsjabloon, dus het verschijnt op de pagina. Wikkel eerst de tweede div in het snippel rond de twee DIV's met de v-als Richtlijnen om ervoor te zorgen dat er geen berichten worden weergegeven totdat het laden is voltooid.

Voeg vervolgens de eerste div van het fragment erboven toe. Dit bevat het laadpictogram en een v-als Richtlijn, wat betekent dat het alleen zichtbaar zal zijn tot het punt waarop de app volledig is geladen. Eenmaal gedaan, moet het laden nu worden geïmplementeerd.

 & lt; div v-if = "! Dit. $ Store.state.posts"
Klasse = "U-Aign-Center" & GT;
   & lt; icon class = "C-icon-loading"
   Gebruik = "Laden" & GT; & LT; / ICON & GT;
& LT; / DIV & GT;
& lt; div v-if = "dit. $ store.state.posts" & GT;
   ​
& lt; / div & gt; 

22. Update Single Post Attribuut Paths

Het enige wat te doen is, is om ervoor te zorgen dat afzonderlijke berichten correct zijn ingesteld, zodat ze de WordPress-postgegevens gebruiken in de VUEX-winkel. De eerste stap is om de attribuutpaden bij te werken in de berichtencomponentjabloon binnen de v-if = "this.type === 'single'" DIV, die de weergave van afzonderlijke berichten behandelt.

 Schakel 'singlepost.title' naar 'singlepost.title.Rendered'
 Switch 'SinglePost.author' naar 'GetUserName (SinglePost.autuister)'
 Switch 'singlepost.fulllimage' naar 'singlepost.acf.header_image'
 Schakel 'singlepost.content' naar 'singlepost. inhoud. Gerelateerd '

23. Refactor Getting SinglePost-methode

We moeten ook de componenten van de berichten opnieuw verfijnen Get SinglePost methode. Het moet een belofte retourneren die de Getposts actie. In de follow-up vervolgens Functie, we zullen doorzoeken de berichten van de VUEX Store voor een invoer met een slak die overeenkomt met dat in de URL is gepasseerd. Indien gevonden, kopiëren we de gegevens naar de lokale status van onze component en lossen de belofte op. Als het niet wordt gevonden, wordt de belofte afgewezen.

 Get SinglePost: functie () {
   Nieuwe belofte retourneren
   ((los, weigeren) = & gt; {
  dit. $ store.dispatch ('GetPosts')
  .THEN (() = & GT; {
  Var Foundpost = false;
  dit. $ store.state.posts.
  filter ((post) = & gt; {
  if (post.slug ===
  dit. $ route.params.slug) {
  ThisinglePost = post;
  foundpost = waar;​
  ​
  box? oplossen (): weigeren ();
  ​
  ​
} 

24. Refactorpalen gemaakt () haak

Vervolgens moeten we de gemaakt () Levenscyclus haak in de postcomponent. Als we een enkel bericht moeten weergeven, moet de haak de haak bellen Get SinglePost Methode van de vorige stap en als de belofte wordt afgewezen, verzendt u de gebruiker naar de pagina 404 pagina 'PAGE'. Dit is het account voor scenario's waar gebruikers een niet-bestaande postslak in de URL invoeren.

 Gemaakt () {
  if (this.type === 'single') {
  This.GetSinglePost (). Dan (null, () = & gt; {
  dit. $ router.push ({name: 'pagenotfound'})
  ​
  ​
} 

25. Voeg V-IF-richtlijn toe

De laatste stap is om het snippet hieronder aan de postcomponent in de v-if = "this.type === 'single'" Div in de sjabloon. Deze richtlijn betekent dat het bericht alleen wordt weergegeven wanneer de lokale postgegevens die beschikbaar zijn gesteld door de Get SinglePost methode is bevolkt. Dit is om te stoppen met VUE van het voortijdige weergave van de component en aldus fouten te veroorzaken.

 V-IF = "SinglePost" 

26. Bouw de app

Nu met alles werken, in de console, annuleer de npm run dev Commando of open een nieuwe console en voer de onderstaande opdracht uit om een ​​productie-reageerversie te genereren om naar uw eigen server te uploaden. Dit verschijnt in de dist Directory.

 NPM-run Build 

Dit artikel verscheen in uitgave 268 van Web Designer, het Creative Web Design Magazine - met deskundige tutorials, geavanceerde trends en gratis middelen. Abonneer u nu op Web Designer.

Lees verder:

• 32 beste gratis WordPress-thema's
• 10 Top WordPress-bronnen
• De Beste gratis bloggenplatforms