Einen WordPress Artikel via API und jQuery (...oder PHP) in HTML ausgeben

API´s und "Headless" CMS sind in aller Munde. Auch WordPress stellt schon seit längerem Inhalte per REST API im JSON Format zur Verfügung. Die Einsatzszenarios sind für eine solche Verwendung vielfältig: Der Inhalt einer statischen Landingpage kann vom Redaktionsteam in der gewohnten WordPress Umgebung bearbeitet werden. Kein Entwickler muss mehr beauftragt werden. Oder es können Blog Beiträge in einem anderen PHP System (z.B. einer anderen WordPress Instanz, gerne aber auch Joomla oder Drupal) ausgegeben werden. React, Angular oder Vue.js Anwendungen können mit Inhalten bestückt werden usw. usw. Kurz gesagt: Das erfassen von Inhalten und deren Ausgabe kann komplett getrennt werden. Das Frontend kann auf einem beliebigen Technologie-Stack basieren und in einer beliebiegen Umgebung laufen.

Zeit also für ein kleines Experiment: Wie kann ich diesen Artikel (genau, den, den ihr hier gerade lest) außerhalb von WordPress in einer einfachen HTML Seite anzeigen lassen. Los gehts: Wie gesagt, WordPress stellt schon seit längerem Inhalte per API im JSON Format zur Verfügung. Und das einfach per URL. Unter: http://www.holgerkoenemann.de/wp-json/wp/v2/posts

erhaltet ihr z.B. alle Informationen zu Artikeln von holgerkoenemann.de in einem JSON Objekt. Wir wollen aber nur einen bestimmten Artikel anzeigen, also müssen wir die Anfrage etwas präzisieren:

http://www.holgerkoenemann.de/wp-json/wp/v2/posts/1288

Dies ist die Abfrage für den Inhalt des Artikels mit der ID 1288.

Ihr könnte auch nach dem Slug, dem Status, dem Titel etc. fragen. Hier eine kleine Übersicht.

Wir machen aber mit der ID weiter. Die Antwort der API enthält nun alle Daten des Posts mit der entsprechenden ID.

Soweit so gut. Jetzt wollen wir aber nur den Inhalt dieses Artikels innerhalb einer normalen HTML Seite anzeigen. Nicht den ganzen Kram drum herum. Dafür fragen wir per jQuery die API ab, lesen den Teil aus den wir brauchen und hängen das Ganze an ein DIV Container in unserem HTML Dokument an.

Das sieht dann so aus:

WP JSON Data

So siehts die Ausgabe aus dann "in echt" aus

Wichtig ist dieser Teil:

$.getJSON('http://www.holgerkoenemann.de/wp-json/wp/v2/posts/1288', function(jd) { var contentElm = jd.content.rendered $(contentElm).appendTo("#userdata");

In der ersten Zeile fragen wir die API ab und packen die Antwort in eine Funktion. In der zweiten Zeile präzisieren wir die Abfrage (content.rendered enthält den eigentlichen Artikel mit HTML Markup, wie WordPress ihn normalerweise renderd) weiter und packen alles in eine Variable.

Wir wollen nämlich nicht alle Informationen des Artikels (Titel, Autor, Permalink, Inhalt, Auszug etc.) anzeigen, sondern nur den Inhalt selber. Wer sich das gelieferte JSON Objekt genau anguckt findet schnell die Stelle, nämlich unter: content/rendered.

Wir erweitern unsere Funktion "jd" also entsprechend um jd.content.rendered und hängen das ganze in den DIV Container mit der ID #userdata.

Und fertig!

Und ja, dass ganze geht auch per Vanilla JS, vue.js oder natürlich auch mit serverseitigen Programmiersprachen. Letzteres hätte zusätzlich den Vorteil das die Inhalte in die Seite gerendert werden können bevor diese an den Client ausgeliefert werden, so dass auch Suchmaschinen und Screenreader was davon haben. Dazu später mehr.

Dieser Artikel soll aber zunächsteimal zeigen wie schnell und einfach sich WordPress "headless" machen läßt.

Nachtrag: Hier das Ganze mit PHP

WP JSON Data