WordPress REST API: Die CMS-Funktion der nächsten Generation

Mehr als ein Viertel des Webs läuft auf WordPress. Es ist eine ziemlich bemerkenswerte Leistung, wenn man bedenkt, dass es seit mehr als einem Jahrzehnt existiert, was es in technischen Jahren ziemlich alt macht.

Was ist die geheime Sauce von WordPress? Einfach – es ist die einfachste und dennoch erweiterbarste Art, Ihre Inhalte zu verwalten. Für eine Weile schien WordPress jedoch ins Hintertreffen geraten zu sein.

Da das Web immer mehr auf JavaScript angewiesen ist, um immersive, interaktive Erlebnisse zu schaffen, wurde immer deutlicher, dass WordPress Benutzern und Entwicklern neue Möglichkeiten bieten muss, mit ihren Inhalten zu interagieren.

Während WordPress auf PHP aufbaut – und weiterhin aufgebaut wird – ist die WP REST API ein Versuch, eine Brücke zwischen dem Erbe des PHP-WordPress-Kerns und dem Potenzial und der Leistungsfähigkeit von JavaScript-Webanwendungen sowie nativen Mobilgeräten zu schlagen und Desktop-Anwendungen.

Die WordPress-REST-API bringt den Inhalt jeder WordPress-Website in eine einfach zu nutzende API, sodass WordPress als Speicher- und Abrufsystem für die Veröffentlichung von Inhalten im Web dienen kann.

Bringen Sie die REST-API in WordPress

Wenn Sie glauben, dass die WP REST API aus dem Nichts aufgetaucht ist, liegen Sie falsch.

Das Hinzufügen einer völlig neuen Funktion zu WordPress ist keine einfache Aufgabe. Da es sich um Open-Source-Software handelt, ist die Entwicklung von WordPress von der Community als Ganzes abhängig, um Fortschritte zu erzielen.

Die Entwicklung der API begann vor einigen Jahren als separates Feature-Plugin, das es Entwicklern ermöglichte, in einer kontrollierten Umgebung mit dem Projekt zu experimentieren und dazu beizutragen.

In vielen Iterationen und Erweiterungen und zwei völlig separaten Versionen mussten die Mitwirkenden hinter der REST-API die Vorteile und immensen Konsequenzen des Bereitstellens eines offenen API-Zugriffs auf die Daten von Millionen von Websites testen und bewerten.

WordPress 4.4, Codename „Clifford“, brachte die anfängliche Infrastruktur des Projekts in den WordPress-Kern, während die Endpunkte erst mit WordPress 4.7, „Vaughan“, auftauchten.

Im Wesentlichen gab dies den Entwicklern Zeit, die Funktionalität zu testen, die die API antreibt, ohne die Daten selbst offenzulegen.

Jetzt, da die anfänglichen Inhaltsendpunkte in alle aktuellen Versionen von WordPress zusammengeführt wurden, können Plugin-Entwickler und Themenautoren mit aufregenden neuen Wegen experimentieren, um die Daten außerhalb der traditionellen wp-admin-Erfahrung abzurufen, anzuzeigen und zu ändern.

Brechen Sie die Abkürzungen auseinander: Von HTTP zu einer JSON-REST-API

Um die Bedeutung der WP-REST-API zu verstehen, kann es hilfreich sein, die Grundlage dafür zu verstehen, wie wir Daten online teilen und wohin sich das Internet entwickeln könnte.

HTTP ist die Grundlage für den meisten Webverkehr, mit dem wir täglich zu tun haben. Wenn Sie eine URL in einen Browser eingeben, stellen Sie eine Anfrage . Der entsprechende Server nimmt Ihre Anfrage entgegen und liefert eine Antwort . Diese Transaktion ist die Grundlage für fast alles, was wir online tun. Browser stellen Anfragen und Server liefern Antworten.

Die Art der Anfrage, die wir stellen, kann sich auf die Art der Antwort auswirken, die wir erhalten. Meistens stellen wir eine einfache GET -Anfrage: „Hey Google, GET mir deine Zielseite.“ Google liefert eine Antwort.

Als das Web interaktiver wurde, begannen wir, andere HTTP-Anforderungen zu nutzen, einschließlich PUT , POST und DELETE .

Zum Beispiel füllen wir eine Suchleiste auf einer Website aus: „Hey Google, POSTE meine E-Mail-Adresse und mein Passwort auf deiner Anmeldeseite.“ Google beginnt eine neue Sitzung für uns und liefert eine andere Antwort.

Dieses Protokoll ist die grundlegende Grundlage, auf der wir unsere WordPress-Seiten aufbauen.

Wir verwenden Formulare und PHP, um Daten in unsere Datenbank zu GET und POST. Entgegen der landläufigen Meinung wird sich diese zugrunde liegende Grundlage von WordPress in absehbarer Zeit nicht ändern. Alles, was WordPress jetzt tut, bietet Entwicklern eine neue Möglichkeit, über eine RESTful-API mit ihren WordPress-Daten zu interagieren.

Repräsentative Zustandsübertragung (REST)

WordPress-Entwickler sollten allgemein mit APIs wie der Shortcode-API und der Options-API vertraut sein. Diese APIs definieren die Funktionalität für die Komponenten, aus denen WordPress besteht, sodass Autoren von Themen und Plugins die Kernfunktionen von WordPress erweitern können. Die WP-REST-API ist jedoch etwas anders.

Bei einer REST- oder RESTful-API geht es darum, Ihre Daten sicher HTTP-Anforderungen von externen Quellen auszusetzen. Es geht auch darum, eine gemeinsame Architektur und eine Reihe von Protokollen einzurichten, um auf diese Anfragen zu reagieren. Obwohl hinter dieser Art von Service fortgeschrittenere Ideen und Prinzipien stehen, würden diese den Rahmen dieses Artikels sprengen.

Die Existenz der WP-REST-API, insbesondere nach WordPress 4.7, bedeutet, dass der gesamte Inhalt Ihrer Website, einschließlich Posts, Seiten, Kommentare und alle öffentlichen Post-Metadaten, jetzt direkt als Rohdaten zugänglich sind. Es bedeutet auch, dass Sie diese Daten von außerhalb des traditionellen wp-admin ändern können, wenn Sie möchten, vielleicht über eine mobile oder Desktop-App.

Anstatt Ihre Daten einfach als Zeilen in einer Datenbank zu betrachten, können Sie jetzt in Form von JSON serialisiert darauf zugreifen.

JSON - Was ist mit XML passiert?

WordPress-Tierärzte haben viel Erfahrung mit XML, einem gängigen Format zum Teilen von Inhalten zwischen Websites.

Ähnlich wie XML ist JSON einfach ein Mechanismus, der es uns ermöglicht, Daten einfach zu übertragen, indem wir sie in einer bestimmten Syntax bündeln. JSON ist eigentlich ein String, eine Textdarstellung eines JavaScript-Objekts, das Ihre Daten in einer Reihe von Schlüssel-Wert-Paaren speichert. Eine gängige JSON-Darstellung eines WordPress-Beitrags könnte wie folgt aussehen:

 { “id”: 1, “title”: { “rendered”: “Hello World” }, “content”: { “rendered”: “Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!” } }

(Sie können ein JSON-Formatierungstool verwenden, um die JSON-Antwort bei Bedarf zu verschönern.)

Eine vollständige JSON-Antwort über die WP-REST-API enthält zusätzliche Informationen zum Beitrag, einschließlich Metadaten. Indem Sie diese Daten bequem im JSON-Format bündeln, können Sie auf neue und aufregende Weise mit Ihren WordPress-Inhalten interagieren.

Es ist kein Zufall, dass JSON am besten mit JavaScript kombiniert wird. Da immer mehr WordPress-Entwickler damit beginnen, „JavaScript gründlich zu lernen“, werden wir immer mehr fortgeschrittene Verwendungen von WordPress als Backend sehen.

So finden wir die Daten: Folgen Sie der Route zu einem Endpunkt

Der Zugriff auf alle Ihre Site-Daten über die REST-API ist so einfach wie das Erstellen einer URL.

Fügen Sie für jede WordPress-Site, auf der mindestens Version 4.7 ausgeführt wird, die folgende Zeichenfolge am Ende der URL Ihrer Site hinzu: /wp-json/wp/v2 (z. B. http://example.com/wp-json/wp/v2 ). Geben Sie diese URL in Ihren Browser ein und sehen Sie, was angezeigt wird.

Das Ergebnis sieht wahrscheinlich wie ein großes Datenchaos aus, es sei denn, Sie haben eine Browsererweiterung installiert, die JSON bereinigt. Dieses große Datenchaos sind die Inhalte und Metainformationen deiner speziellen WordPress-Seite im JSON-Format.

Indem Sie diesen Inhalt laden, haben Sie gerade eine Route definiert und Ihren Browser gebeten, ihn für Sie abzurufen.

Eine Route ist eine URL, die einer bestimmten Methode zugeordnet ist. Der WordPress-Kern liest diese Route, wobei jeder Schrägstrich „/“ einen bestimmten Pfad oder Parameter darstellt, dem gefolgt werden sollte.

Der Pfad endet an einem Endpunkt , an dem Funktionen tief im Inneren des WordPress-Kerns Entscheidungen darüber treffen können, welche Daten bereitgestellt werden und was mit den bereitgestellten Daten zu tun ist.

Ein Beispielendpunkt könnte „/wp-json/wp/v2/posts/1“ sein, wo wir die Pfade „/posts“ und „/1“ hinzugefügt haben. Dieser bestimmte Endpunkt weist unsere Website an, unsere Daten zu durchsuchen, unsere Beiträge aufzurufen und den Beitrag mit der ID 1 aufzurufen.

Was die REST-API so nützlich macht, ist die Tatsache, dass sie erweiterbar ist, was bedeutet, dass Sie beliebige Daten innerhalb Ihrer Website nehmen und als Endpunkt hinzufügen können. Die meisten Kernfunktionen von WordPress werden derzeit (oder werden bald) unterstützt.

Theme- und Plugin-Entwickler können jedoch damit beginnen, ihre benutzerdefinierten Inhalte und Einstellungen als Endpunkte hinzuzufügen, sodass Benutzer auf neue Weise mit ihren Websites interagieren können.

Wenn Sie neugierig auf die Endpunkte sind, die derzeit auf Ihrer WordPress-Site verfügbar sind, bietet eine Browseranwendung wie Postman eine GUI speziell zum Erkunden von APIs.

Header und Authentifizierung

Das Eingeben von URL-Endpunkten in den Browser erscheint einfach, enthält jedoch zusammen mit der Anfrage eine Reihe von Standard- Headern . Mit der Antwort wird wiederum eine Reihe von Headern zurückgesendet. Diese Header enthalten viele nützliche Informationen, aber die wichtigsten für unsere Zwecke haben mit der Art der Anfrage zu tun, die wir stellen, und ob wir authentifiziert sind oder nicht.

Wenn Sie in die „Entwicklertools“ Ihres Browsers springen, können Sie die HTTP-Header auf alle Assets untersuchen, die in das Browserfenster geladen werden, einschließlich HTML-Dateien, CSS-Stylesheets, Bilder und mehr.

Der erste zu berücksichtigende Header ist die Request-Methode , die direkt den HTTP-Anforderungen entspricht, die wir zuvor kennengelernt haben. Hier sehen Sie höchstwahrscheinlich GET als Anforderungsmethode, wenn wir nur eine Seite anzeigen.

Eine Anwendung, die Ihre REST-API aufruft, kann die Anforderungsmethode des Headers in POST ändern.

Eine POST-Methode weist Ihre Website an, neue Daten einzugeben oder vorhandene Daten in Ihrer WordPress-Datenbank zu ändern. Durch das Senden von Informationen über die POST-Methode haben andere Anwendungen die Möglichkeit, Ihre Daten zu ändern, ohne sich bei wp-admin anzumelden.

Machen Sie sich jedoch keine Sorgen, denn wenn sie nicht auch Header enthalten, die die richtigen Anmeldeinformationen für die Authentifizierung bereitstellen, wird Ihre Website sie ablehnen.

HINWEIS: Die Methoden zum Authentifizieren von Aufrufen an Ihre REST-API sind jedoch noch nicht abgeschlossen, was die Authentifizierung zur größten Eintrittsbarriere für Entwickler macht, die mit der REST-API arbeiten möchten, um Daten hinzuzufügen oder zu ändern.

Derzeit sind Optionen verfügbar, darunter ein Plugin von den Entwicklern hinter der REST-API. Wenn die Standardverfahren rund um die Authentifizierung ihren Weg in den Kern finden, werden die letzten Hürden für eine breite Nutzung der WP REST API genommen.

WP-REST-API-Beispielanwendung

Was die WP REST API so leistungsfähig macht, ist die Tatsache, dass sie konsistent ist, sodass wir die gleichen grundlegenden Ergebnisse von jeder Website erwarten können, auf der WordPress 4.7 oder höher ausgeführt wird. WordPress ist jedoch eine verteilte API, was bedeutet, dass es nicht nur einen Ort gibt, von dem alle Daten abgerufen werden können.

Jede Website, auf der WordPress ausgeführt wird, ist eine einzigartige Anwendung mit einzigartigen Benutzern und Authentifizierung. Während es möglicherweise unterschiedliche Autorisierungstechniken erfordert, um Inhalte über die REST-API zu bearbeiten, können wir tatsächlich ziemlich einfach auf die Beiträge der meisten von WordPress betriebenen Blogs zugreifen.

Um dies zu demonstrieren, erstellen wir eine schnelle Codepen-Demo, die Auszüge der neuesten Posts aus einigen beliebten WordPress-bezogenen Blogs lädt, die natürlich alle auf WordPress laufen. Wenn wir schon dabei sind, fügen wir ein Suchformular hinzu, damit wir tatsächlich alle diese Seiten auf einmal durchsuchen und die relevanten Artikel von jeder abrufen können.

Schließlich stellen wir sicher, dass wir den Link zum Lesen des vollständigen Artikeltextes auf der ursprünglichen Website einfügen.

Phase 1: Aktuelle Posts erhalten

Wir beginnen damit, eine schnelle Vue-Instanz einzurichten und sie an einem Element zu montieren. Wir werden auch Bootstrap einbeziehen, damit wir ein Raster und ein grundlegendes Styling für die Formularelemente haben können, die wir später hinzufügen werden.

Wenn wir die Daten definieren, wollen wir einen Platz zum Speichern des Namens der Website (der nicht in der Standardantwort enthalten ist), der URL und der Posts, sobald wir sie erhalten. Hier ist ein Beispiel:

 { “name”: “wordpress.org”, “url”: “https://wordpress.org/news/wp-json/wp/v2/posts?per_page=3”, “posts”: [] }

Sie werden feststellen, dass wir auch unseren ersten Parameter am Ende der URL eingefügt haben, per_page . Normalerweise paginiert die WP-REST-API die Ergebnisse nach den gleichen Regeln wie eine normale WP_Query-Schleife. Wir beschränken unsere Abfragen auf die ersten drei Posts.

Als Nächstes definieren wir die Methode loadPosts() , die unsere Quellenliste durchläuft, die Ergebnisse mit vue-resource abruft und das leere posts -Array jeder Quelle mit den Ergebnissen füllt.

 loadPosts : function(){ var self = this; self.sources.forEach(function(source, index){ self.$delete(source, 'posts'); // Get API with vue-resource self.$http.get(source.url).then(function(response) { self.$set(source, 'posts', response.data); }, function(response) { console.log('Error'); }); }); }

Wir fügen auch einen anfänglichen Aufruf von loadPosts() ein, wenn unsere Vue-Instanz erfolgreich gemountet wurde.

 mounted : function(){ this.$nextTick(function(){ // Load posts on initial page load this.loadPosts(); }); }

loadPosts() als separate Methode beizubehalten, wird sich in Zukunft als nützlich erweisen, wenn wir beginnen, mehrere Aufrufe an die API zu senden. In unserem HTML verwenden wir die einfachen Listen-Rendering-Anweisungen und die Vorlagensyntax von Vue, um alle unsere Posts auszugeben.

Sehen Sie sich den eingebetteten Stift für eine funktionierende Demo an:

Siehe Pen WP REST API Search Example (Phase One) von Brian Coords (@bacoords) auf CodePen.

Phase 2: Ergebnisse filtern

Lassen Sie uns eine Seitenleiste hinzufügen und einige Filter erstellen, um die verschiedenen Quellen anzuzeigen/auszublenden. Dazu fügen wir dem sources -Objekt eine neue Eigenschaft hinzu, einen booleschen Wert, den wir on nennen.

Während wir Filter hinzufügen, generieren wir einen Vue-Filter, der uns hilft, das Datum auch richtig anzuzeigen. WordPress speichert das Datum und die Uhrzeit des Beitrags als Unix-Zeitstempel.

Wir verwenden die Drittanbieterbibliothek Moment.js, um das Datum in ein besser lesbares Format zu konvertieren.

 filters: { // Using Moment.js to convert post date to a readable format prettyDate: function(value){ // Return if date is empty if(!value) return ''; // Convert date to Moment.js var date = moment.utc(value); // Return formatted date return date.format("MMM DD, YYYY,"); } },

Sehen Sie sich den eingebetteten Stift für eine funktionierende Demo an:

Siehe Pen WP REST API Search Example (Phase One) von Brian Coords (@bacoords) auf CodePen.

Letzte Phase: Suchanfragen

Hier fügen wir unserer API-Anfrage einen neuen Parameter hinzu. Wir haben bereits den Parameter per_page=3 hinzugefügt, um die Anzahl der Ergebnisse zu begrenzen, die wir von jeder Website erhalten. Wenn etwas in die Suchleiste geschrieben ist, fügen wir es als zusätzlichen Parameter hinzu.

Dadurch können wir die integrierte Suchfunktion jeder Website verwenden, als ob wir die Suchleiste auf dieser Website abfragen würden.

Wir fügen eine Suchleiste hinzu und binden sie mithilfe der v-model- Direktive von Vue an eine Variable.

Anstatt sofort alle APIs aufzurufen, fügen wir eine Schaltfläche hinzu und binden ein Ereignis an die Formularübermittlung, wenn der Benutzer mit der Eingabe beginnt. Dann fügen wir unserer Vue-Instanz eine Methode hinzu, die die Suchparameter (natürlich URL-codiert) zur URL hinzufügt.

 generateUrl : function(source){ var self = this; // Add search parameters. if(self.searchQuery){ return source.url + '&search=' + encodeURI(self.searchQuery); }else{ return source.url; } }

Sehen Sie sich den eingebetteten Stift für eine funktionierende Demo an:

Siehe Pen WP REST API Search Example (Phase One) von Brian Coords (@bacoords) auf CodePen.

Während dies ein einfaches Beispiel für die WP REST API ist, könnten wir uns eine mögliche Anwendung für so etwas innerhalb von WordPress selbst vorstellen. So gibt es beispielsweise bereits die Metabox „WordPress News“.

Wir könnten diese Demo leicht in ein WordPress-Plugin umwandeln und es auf dem WordPress-Dashboard anzeigen. Jetzt haben wir die Möglichkeit integriert, direkt von unserer eigenen Website aus auf einigen der besten WordPress- und Webdesign-Tutorial-Sites nach Hilfe zu suchen.

Zukunftspotenzial der REST API

Obwohl das obige Beispiel nur an der Oberfläche der Fähigkeiten der WP-REST-API kratzt, sollte es einige der Möglichkeiten vermitteln, die sich ergeben, wenn Sie anfangen, mit den Daten zu spielen. Unabhängig davon, ob es zur Verbesserung der Benutzererfahrung auf der Website selbst oder zum Sammeln und Bearbeiten von Daten aus einer externen Quelle verwendet wird, ist es ein leistungsstarkes Tool.

Während einige Branchenexperten Bedenken hinsichtlich der Möglichkeit geäußert haben, dass Ihre Inhalte „gekratzt“ und an anderer Stelle angezeigt werden, ist es wichtig, sich daran zu erinnern, dass diese Funktionalität RSS-Feeds ähnelt, und dass es für Website-Betreuer unerlässlich ist, eine klare Kontrolle darüber zu haben, was Daten sind und was ist nicht öffentlich.

Wenn die WP-REST-API immer mehr in das Gewebe von WordPress eindringt, werden wir beginnen, ihre Auswirkungen zu sehen, vielleicht ohne es überhaupt zu merken. Die Beispiele reichen von einfachen (Chris Coyiers Zitate über Design) bis hin zu komplexen Einzelseitenanwendungen (Guggenheim-Website).

Ein weiterer beliebter Anwendungsfall für die WP REST API ist die Entwicklung mobiler Anwendungen.

Da Inhalte über die REST-API so zugänglich sind, können Entwickler native Apps für iOS und Android erstellen und müssen keine doppelten Datenquellen erstellen.

Wenn Benutzer mit diesen mobilen Apps interagieren, können sie die Daten der ursprünglichen Website abrufen und direkt transformieren, ohne dass der Entwickler eine komplexe Infrastruktur erstellen muss, um dies zu unterstützen.

Diese besucherorientierten Anwendungen der REST-API sind jedoch nur der Anfang, da die wirklichen Auswirkungen viel tiefer gehen. Eines der Ziele für das Kernentwicklungsteam ist es, damit zu beginnen, es in der gesamten wp-admin-Oberfläche zu verwenden.

Mit zukünftigen WordPress-Updates werden wir allmählich sehen, dass admin-ajax zugunsten der API ersetzt wird, was hoffentlich die Geschwindigkeit grundlegender Funktionen wie das Bearbeiten von Menüs oder das Veröffentlichen von Beiträgen erhöht.

Dies könnte möglicherweise mit dem verstärkten Fokus von WordPress auf den Customizer und den Editor als benutzerfreundliche Ausgangspunkte für WordPress-Neulinge einhergehen.

Obwohl die WP-REST-API so wie sie ist enorm nützlich ist, gibt es noch mehr zu tun. Die API ist nicht vollständig. Es können noch weitere Funktionen und Endpunkte hinzugefügt werden.

Schließlich werden Sie in der Lage sein, mit Ihrer WordPress-Site zu interagieren, ohne sie überhaupt zu besuchen. Und während viele Dienste jetzt benutzerdefinierte APIs verwenden, um mit WordPress zu interagieren, bedeutet die Umstellung auf eine standardmäßige WordPress-REST-API, dass mehr Websites und Dienste miteinander verbunden werden können und dieselbe Sprache sprechen.

WordPress begann als Blogging-Plattform, eine Möglichkeit für Blogger, sich zu verbinden und ihre Gedanken und Ideen auszutauschen. Mit der Entwicklung der WordPress-REST-API werden wir beginnen, eine neue Ebene des Verbindens und Teilens hinter den Kulissen zu sehen. Dies wird es den Benutzern ermöglichen, auf ihren Gedanken und Ideen auf eine Weise aufzubauen, die noch nie zuvor in Betracht gezogen wurde, und WordPress und seine Benutzer an völlig neue Grenzen führen.