Power A Blog mit der WordPress-API

In den letzten Jahren hat die Entwicklung einer Rest-API für WordPress neue Türen für Entwickler eröffnet. Entwickler, die zuvor auf das Schreiben eines WordPress-positiven Projekts in PHP beschränkt waren, haben nun mehr Flexibilität und Kontrolle, wie sie sich dem Technologiestapel ihrer Website ansprechen können.

Dies bedeutet, dass es möglich ist, alle Vorteile des brillanten WordPress-Bedienfelds beizubehalten, das durch Beliebte äußerst flexibel gemacht wird WordPress-Plugins. B. erweiterte benutzerdefinierte Felder und verfügen über ein vollständig angepasste Frontend, das nur mit WordPress interagiert, wenn er muss.

• Laden Sie die Tutorial-Dateien herunter

In diesem WordPress-Tutorial. Wir werden erkunden, wie Sie die WordPress Rest-API in eine einfache Blog-App implementieren, die derzeit eine lokale JSON-Datei als Datenquelle verwendet und als einseitige Anwendung (SPA) mit dem beliebten Javascript-Framework erstellt wird Vue.js. . Dadurch wird die Implementierung von VUEX beinhalten, mit denen wir die Daten verwenden, die wir von einem WordPress mit einer Kombination seiner Aktion und Mutationsmethoden anfordern.

Nach dem Abschluss sollten Sie ein schlankes, einfaches SPA erstellt haben, das über die gesamte Reaktivität von VUE.js verfügt, während Sie von WordPress abgerufene und von WordPress abgerufene Beiträge anzeigen.

Für eine ehrfürchtige APIs zu erforschen, schauen Sie sich unsere Guides nach den Besten an Javascript-APIs. , HTML-APIs. und Google APIs. .

01. Arbeitsbereich und Abhängigkeiten einrichten

Erste Dinge zuerst, du solltest Laden Sie die Dateien des Projekts herunter und öffnen Sie sie in Ihrem bevorzugten Editor.

In der Konsole CD in Website-Vorlage und führen Sie den Befehl unten aus, um die Knotenabhängigkeiten des Projekts zu installieren (wenn Sie keinen Knoten installiert haben, mach das zuerst ). Wir arbeiten rein in der src. Verzeichnis von hier aus raus.

npm install

02. Installieren Sie VUEX.

Als Nächstes, mit dem Befehl unten, werden wir installieren Vuex. , das ist ein staatliches Verwaltungsmuster und eine Bibliothek für vue.js-Anwendungen. Dies fungiert als zentraler Informationsspeicher für alle VOU-Komponenten, die von den von der WordPress-API erhaltenen Daten abhängen. Für Entwickler, die mit der Reaktion vertraut sind, ist Vuex von Flux stark inspiriert.

npm install vuex --save

03. Entwicklungsserver starten

Führen Sie in der Konsole den Befehl unten aus, um den Entwicklungsserver zu starten. Dadurch wird das Projekt VUE.JS kompiliert, da es derzeit steht und es einer URL zugewiesen, damit Sie darauf zugreifen können. Das ist in der Regel. localhost: 8080. .

Ein großer Vorteil, dass das Live-Relading live ist, sobald Sie Änderungen an der App vornehmen und speichern, wird sich die Seite in Ihrem Browser ohne manuell neu laden aktualisieren.

npm run dev

04. Erstellen Sie den VUEX-Speicher

Im src. , erstellen Sie ein Verzeichnis angerufen Geschäft und din it eine neue Datei angerufen index.js. . Dabei wird unser Vuex-Speicher definiert. Aber bevor wir dazu kommen, müssen wir zunächst sicherstellen, dass unsere VUE.JS-App seiner Existenz bekannt ist. So tun, offen Main.js. und importieren Sie den Laden und fügen Sie es als Abhängigkeit, wie im Snippet unten.

 Import Vue von 'vue'
App importieren von './app'
Router importieren von './Router'
Importieren von './Store'
Vue.config.productiontip = false.
/ * ESLINT-Deaktivieren Sie nicht neu * /
Neue VUE ({
  el: '#app',
  Router,
  Geschäft,
  Vorlage: '& lt; app / & gt;',
  Komponenten: {app}
}) 

05. Shop-Gerüste erstellen und Axios installieren

Um uns bei der Vereinfachung der AJAX-Anfragen zu vereinfachen, erstellt unser Shop die WordPress-API, werden Axios installieren, was ein versprechender HTTP-Client ist. Öffnen Sie dazu ein separates Konsolenfenster, navigieren Sie zum Website-Vorlage Verzeichnis und raus. NPM installieren Axios - Speichern .

Nehmen wir an, lasst uns ein neues leeres vuex-speicherobjekt instanziiert werden. Im Moment tut es nichts, aber zumindest sollte Vue sich dessen bewusst sein.

 Importieren von Axios von 'Axios'
Import Vue von 'vue'
Importieren Sie VUEX von 'VUEX'
Vue.Une (vuex)
const store = new vuex.store ({
  Zustand: {},
  Aktionen: {},
  Mutationen: {}
})
Standardspeicher exportieren 

06. Beiträge schreiben

In VUEX hält das Statusobjekt Anwendungsinformationen, in denen in diesem Fall die WordPress-Post-Daten verwendet werden, die wir mit der API ergreifen werden. Erstellen Sie in diesem Objekt eine neue Eigenschaft mit dem Namen Posts und weisen Sie einen Wert von NULL zu.

 Zustand: {
  Beiträge: NULL.
} 

07. Erstellen Sie GetPosts-Action

In VuEx sind Aktionen der Hauptziel, in der asynchrone Anfragen behandelt werden. Dies sind typischerweise im Speicher definierte Methoden, die dann wie von der App nach Bedarf versandt werden können.

In der leeren Aktionen Object, lass uns definieren, wenn unser Poststatus noch NULL ist, wird Axios verwendet, um eine AJAX-Anforderung an die WordPress-API auszuführen und eine Liste von Beiträgen zurückzugeben. Sobald wir eine positive Antwort erhalten haben, lösen wir das Versprechen auf und begehen die Beiträge mit dem Storeposts. Mutation.

getPosts: Funktion (Kontext) {
  Senden Sie neues Versprechen zurück ((beheben, lehnen) = & gt; {
  if (context.state.posts) {
  Entschlossenheit()
  }
  else {
  axios.get ('http://lukeharrison.net/
  webdesigner / wp-json / wp / v2 / posts ')
  .das ((Antwort) = & gt; {
  context.commit ('storeposts',
  Antwort.Data)
  Entschlossenheit()
  }). Fang ((error) = & gt; {
  Ablehnen (Fehler);
  });
  }
  })
} 

08. Storeposts Mutation erstellen

Ein anderes von VUEX eingeführte Konzept ist Mutationen, die auch in der Händler definierten Methoden sind. Mutationen sind die einzige Möglichkeit, den Status in einem Vuex-Speicher zu ändern, mit dem der Status beim Debuggen leicht verfolgt werden kann.

In der leeren Mutationen Objekt, lass uns das definieren Storeposts. Methode, auf die wir im vorherigen Schritt verwiesen haben und die Post-Eigenschaft im Statusobjekt mit allen Daten überschreiben, mit allen Daten, die die Mutation als Nutzlast empfängt.

 Storeposts (Zustand, Antwort) {
   STATE.POSTS = Antwort} 

09. Trigger GetPosts Maßnahmen zur Last

Wir haben die Aktions- und Mutationsmethoden erstellt, die Posts von WordPress-API aufnehmen und sie in den VUEX-Status verpflichten, aber jetzt müssen wir diesen Prozess tatsächlich irgendwo auslösen. In der obersten Ebene Vue.js-Komponente App.vue. Fügen Sie das Snippet unten hinzu.

erstellt () ist ein Lebenszyklaken, der Code auslöst, sobald die VUE-Komponente bei Last erstellt wird, während die Verwendung des Globals $ Shop. Variable ermöglicht es uns, auf den Inhalt unseres Vuex-Stores zuzugreifen und die GetPosts Aktion von Schritt 7.

 erstellt () {
   Dies. $ store.dispatch ('getPosts')} 

10. Aktualisieren Sie Attributpfade

Wenn Sie in Chrom oder Firefox arbeiten und die haben Vue.js Devtools-Erweiterung. (Wenn nicht, empfehle ich Ihnen, dass Sie so nützlich sind), sollten Sie jetzt die geladenen WordPress-Pfosten in sehen können Basisstatus unter dem Vuex. Tab.

Zurück zur App, in /Components/Posts/Posts.VUE. Die Template-HTML muss auf diese Daten hinweisen, sodass wir einige der Attributpfade optimieren.

 Schalter 'post.title' auf 'post.title.rendert'
 Switch 'post.Preview' auf 'post.acf.peview'
 'Post.PreviewImage' auf 'post.acf.head_image_small' 

11. Update V-for Loop

In der Pfostenkomponente gibt es eine VUE.js-Richtlinie, die genannt wird v-für . Diese Schlaufen durch alle Pfosten und druckt für jeden eine Instanz der Postkomponente, die sie in einer Liste anzeigt.

Wir müssen den auf diese Richtlinie übergebenen Pfad aktualisieren, da er noch die lokalen Dummy-Testdaten verwendet. Aktualisieren Sie die V-für Richtlinie auf das Snippet, um sich unten auf unsere gespeicherten Beiträge im Vuex-Shop anzuzeigen.

 v-for = "poste dabei. $ Store.state.Posts" 

12. Machen Sie etwas Reinigung

Eine Liste der WordPress-Beiträge sollte jetzt angezeigt werden. Da wir nicht mehr die lokalen Postdaten verwenden, löschen wir uns src / data. . Entfernen Sie dann in der Pfostenkomponente das Beiträge: postdata.data. Eigenschaft in den Komponenten lokalen Datenspeicher und dann den Postdata-Import.

13. Fix-Postautor

Möglicherweise stellen Sie fest, dass der Autor für jeden Beitrag als Nummer angezeigt wird. Dies liegt daran, dass die WordPress-API eine Autor-ID anstelle eines Namens zurückgibt. Wir müssen diese ID verwenden, um WordPress für die vollständigen Autorinformationen abzufragen. Beginnen wir mit der Erstellung eines Ortes, um dies in unserem Vuex-Shop mit unseren Beitragsinformationen in unserem Vuex-Shop zu speichern speichern / index.js. .

 Zustand: {
  Autoren: null,
  Beiträge: null} 

14. Getagerhors Action erstellen

Wie bei Beiträgen erstellen wir eine Aktion in /store/index.js. Um eine AJAX-Anforderung auszulösen, um die WordPress-API abzufragen. Sobald eine erfolgreiche Antwort eingegangen ist, löst das Versprechen dann auf und löst die StoreAuthors. Mutation, die wir als nächstes erstellen werden.

 getauhors: Funktion (kontext) {
  axios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / Benutzer ')
  .das (Funktion (Antwort) {
  context.commit ('storeAuthors',
  Antwort.Data)
  })
} 

15. Erstellen Sie StoreAuths Mutation

Erstellen Sie innerhalb des Mutationsgegenstandes des Vuex-Stores das StoreAuthors. Mutation mit dem Snippet unten. Wie mit Storeposts. Von Schritt 8 dauert dies die Payload-Pay-Ladung, und setzt sie als Wert der Autoreneigenschaft im Stand der Autors.

 StoreAuthors (Zustand, Antwort) {
  staat.Authors = Antwort} 

16. Trigger Getagerhors auf Last

Wir müssen die Autorinformationen von WordPress abrufen, sobald die App zu laden beginnt. Lassen Sie uns die oberste Ebene kämpfen App.vue. wieder und versenden Sie die getahhors. Aktion in der gleichen erstellt () Lebenszyklushaken als GetPosts Aktion.

 erstellt () {
  Dies. $ store.dispatch ('getauhors')
   Dies. $ store.dispatch ('getPosts')} 

17. GetUsName-Methode erstellen

Jetzt fragst wir WordPress für Autoreninformationen zur Last, alles, was wir tun müssen, ist, dass wir eine Methode in unserer Beitragskomponente definieren müssen, mit der wir eine Autor-ID übergeben können, und einen Namen im Gegenzug erhalten. Kopieren Sie den Snippet unten in das Objekt des Posts Component-Methoden, unter dem vorhandenen Getinglepost. Methode.

 GetUserName: Funktion (UserID) {
  VAR-Benutzername = 'Unknown';
  das. $ store.state.
  Autoren.Filter (Funktion (Benutzer) {
  if (user.id === userid) {
  Benutzername = user.name.
  }
  });
  Geben Sie den Benutzernamen zurück;
} 

18. Call GetUserName-Methode

Jetzt müssen wir nur anrufen GetusienName . Trotzdem in der Pfostenkomponente, in der Vorlage, ersetzen Sie die Referenz des Autorattributs auf post.autoror. So spiegelt es das Snippet unten wider. Der Name des Autors sollte jetzt für jeden Beitrag korrekt angezeigt werden.

: Autor = "GetUserName (Post.Author)" 

19. Blog loading.

Da wir die Postdaten asynchron laden, gibt es einen Moment, bevor der Antrag abgeschlossen ist, wo die Anwendung leer ist. Um dies zu entgegenzuwirken, werden wir einen Ladezustand implementieren, der aktiv ist, bis der Blog vollständig besiedelt ist. Fügen Sie in der Pfostenkomponente den Snippet unten nach der Öffnung ein & lt; script & gt; Tag, um die Symbole zu importieren, die wir verwenden.

 Icon importieren von '@ / components / icons / icons'
Import Laden von './../../
Vermögenswerte / IMG / Loading.svg '

20. Symbol in die Komponentenliste hinzufügen

Nächstes, noch innerhalb von Beiträgen, fügen Sie in den Komponentenobjekten einen Verweis auf das Symbol hinzu. Dadurch wird die Post-Komponente unserer kürzlich importierten Symbolkomponente aufmerksam.

 Komponenten: {
   Symbol,
   Post} 

21. Ladeelemente erstellen

Wir müssen jetzt nur die Ladeelemente an die Pfostenvorlage hinzufügen, sodass er auf der Seite angezeigt wird. Zunächst wickeln Sie die zweite DIV in das Snippet um die beiden Diven mit dem v-if. Richtlinien, um sicherzustellen, dass keine Beiträge angezeigt werden, bis die Beladung abgeschlossen ist.

Fügen Sie dann den ersten Div aus dem Snippet darüber hinzu. Dies enthält das Ladesymbol und a v-if. Richtlinie, dh es ist nur bis zu dem Punkt sichtbar, an dem die App vollständig geladen ist. Sobald dies getan wurde, sollte das Laden nun umgesetzt werden.

 & lt; div v-if = "! Dies. $ Store.state.Posts"
Klasse = "U-ALIGN-CENTER" & GT;
   & lt; Symbol-Klasse = "C-Icon-Loading"
   Verwenden = "Laden" & GT; & lt; / icon & gt;
& lt; / div & gt;
& lt; div v-if = "Dies. $ store.state.posts" & gt;
   [...]
& lt; / div & gt; 

22. Einzelpostattributpfade aktualisieren

Das einzige, was übrig, ist, sicherzustellen, dass Single-Posts korrekt eingerichtet sind, sodass sie die WordPress-Post-Daten im VUEX-Speicher verwenden. Der erste Schritt besteht darin, die Attributpfade in der Bauteilvorlage in der Pfosten zu aktualisieren v-if = "this.type === 'Single'" div, das die Anzeige einzelner Beiträge übernimmt.

 Switch 'SinglePost.title' auf 'SinglePost.title.rendert'
 Wechseln Sie 'SinglePost.Author' auf 'GetUsName (SinglePost.Author)'
 Wechseln Sie 'SinglePost.fullimage' auf 'SinglePost.acf.header_image'
 Wechseln Sie 'SinglePost.content' in 'SinglePost. content.rendert '

23. Refactor GetinglePost-Methode

Wir müssen auch die Beiträgekomponenten refaktieren Getinglepost. Methode. Es muss ein Versprechen zurückgeben, das das verschickt GetPosts Aktion. In der Folge dann Funktion, wir suchen die Beiträge der VUEX-Store für einen Eintrag mit einem Slug-Matching, der mit dem in der URL übergebenen URL übereinstimmt. Wenn gefunden, kopieren wir die Daten in den lokalen Stand der Komponente und lösen das Versprechen auf. Wenn es nicht gefunden wird, wird das Versprechen abgelehnt.

 GetinglePost: Funktion () {
   Neues Versprechen zurückgeben.
   ((lösen, ablehnen) = & gt; {
  Dies. $ store.dispatch ('getPosts')
  .das (() = & gt; {
  var foundpost = false;
  Dies. $ store.state.Posts.
  filtern ((post) = & gt; {
  if (post.slug ===
  das. $ route.params.slug) {
  this.singlepost = post;
  foundpost = true; }
  });
  foundpost? Resolve (): Ablehnung ();
  })
  })
} 

24. Refactor-Beiträge erstellt () Haken

Als Nächstes müssen wir das Refaktor widerlegen erstellt () Lebenszyklushaken in der Pfostenkomponente. Wenn wir einen einzelnen Beitrag anzeigen müssen, sollte der Haken das anrufen Getinglepost. Methode aus dem vorherigen Schritt, und wenn sein Versprechen abgelehnt wird, senden Sie den Benutzer den Benutzer an die nicht gefundene Seite von 404 '. Dies gilt für Szenarien, in denen Benutzer in der URL in eine nicht vorhandene Post-Slug eingeben.

 erstellt () {
  Wenn (the.type === 'Single') {
  this.getsinglepost (). Dann (null, () = & gt; {
  Dies. $ router.push ({name: 'pageotfound')
  });
  }
} 

25. Fügen Sie V-IF-Richtlinie hinzu

Der letzte Schritt besteht darin, den untenstehenden Snippet in die Pfostenkomponente innerhalb der hinzuzufügen v-if = "this.type === 'Single'" div in der Vorlage. Diese Richtlinie bedeutet, dass der Pfosten nur angezeigt wird, wenn die lokalen Postdaten von der Getinglepost. Die Methode ist besiedelt. Dies ist, um die Vue vorzeitig von vorzeitig zu stoppen, um die Komponente zu rendieren und wodurch Fehler verursacht wird.

 v-if = "SinglePost" 

26. Bauen Sie die App auf

Nun mit allem, was funktioniert, in der Konsole, stornieren Sie die NPM Run Dev. Befehl oder öffnen Sie eine neue Konsole und führen Sie den folgenden Befehl aus, um eine produktionsbereite Version zu generieren, um auf Ihren eigenen Server hochzuladen. Dies erscheint in der distelisch Verzeichnis.

 NPM-Run-Build 

Dieser Artikel erschien in Ausgabe 268 von Webdesigner, dem kreativen Webdesign-Magazin, das Experten-Tutorials, modernste Trends und kostenlose Ressourcen bietet. Abonnieren Sie jetzt Webdesigner.

Weiterlesen:

• 32 Beste kostenlose WordPress-Themes
• 10 Top WordPress-Ressourcen
• Das Beste kostenlose Blogging-Plattformen