Wenn eine Website erstellt wird, so passiert das heute selten „auf der grünen Wiese“. Meistens existiert schon eine Vorgänger Website, manchmal betreibt man mehrere Websites. Manchmal bloggen auch Personen in der Firma zu Themen, die interessant sind. Eine Anforderung, die mir in letzter Zeit relativ häufig begegnete war das Einbinden von Beiträgen aus einem WordPress Blog in eine andere Website, möglichst ohne die Nutzung von PHP oder anderen Programmiersprachen auf der Serverseite. So prinzipiell suchte man „nach einem JavaScript Schnipsel“.
Nachdem ich nun alle möglichen „JavaScript Schnipsel“ ausprobiert habe, entschloss ich mich selbst etwas einfaches zu schreiben.
Aufgabe
Innerhalb einer HTML Seite sollen interaktiv die letzten Beiträge einer anderen WordPress Site geladen werden. In der einfachsten Form soll das etwa so aussehen wie im folgenden Screenshot, aber natürlich dynamisch mit den aktuellen Daten.
Idee
Da WordPress über eine JSON API ansprechbar ist, kann man diese Daten verwenden. Das Novatrend Blog nutzt ja auch WordPress und bietet unter der URL https://blog.novatrend.ch/wp-json/wp/v2/posts die Daten der letzten 10 Beiträge. Das funktioniert normalerweise mit jedem WordPress Blog und sieht etwa so aus wie in diesem Screenshot.
Diese Daten enthalten wirklich alles, was zu einem Blog Beitrag in diesem Blog abgespeichert ist. Sie liegen im JSON Format vor und können mit dem Fetch Befehl eingelesen werden.
<script>
fetch('https://blog.novatrend.ch/wp-json/wp/v2/posts')
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
});
<script>
Wenn dieser Code in einer HTML Seite steht, so zeigt er nichts an, schreibt aber die abgefragten Daten in ein Array und zeigt dieses Array in der Konsole des Browser an.
Das Array lässt sich sehr schön „erforschen“ wenn man die einzelnen Zeilen einfach aufklappt …
Man kann genau sehen, wie die einzelnen Felder heissen und was sie beeinhalten.
Daten auslesen und anzeigen
In meinem einfachen Fall benötige ich das Datum, die URL und den Titel der letzten 10 Beiträge, also die Felder date, link und title. Diese Felder muss ich in einer Schleife auslesen und auf der HTML Seite anzeigen.
Die Anzeige soll in einer HTML Liste erfolge, also innerhalb eines solchen Konstruktes <ul id=“Name“></ul>.
Die JavaScript Funktion zum Auslesen könnte etwa so aussehen:
function appendDataNovatrend (data) {
for (let i=0; i<data.length; i++) {
const li = document.createElement("li");
var fdate = data[i].date;
var fdate = fdate.substr(0, 10);
li.innerHTML += fdate + ' - <a href="' + data[i].link + '">' + data[i].title.rendered + '</a>';
blogNovatrend.appendChild (li);
}
}
Die Schleife wird so lange durchlaufen, bis das Array ausgelesen ist (data.length). Ein List Item Element li wird deklariert. Das Datum wird ausgelesen und formatiert (fdate.substr(0, 10)). Die auszugebende Zeile wird „zusammengebaut“ und mittels blogNovatrend.appendChild (li) an der richtige Stelle angehängt.
Was noch fehlt ist der Aufruf dieser Funktion innerhalb der Fetch Anweisung (appendDataNovatrend(data);). Der komplette Code der HTML-Seite ist erstaunlich kurz.
<html >
<body>
<h1>Blog Posts Novatrend</h1>
<ul id="blogNovatrend"></ul>
<script>
fetch('https://blog.novatrend.ch/wp-json/wp/v2/posts')
.then((response) => {
return response.json();
})
.then((data) => {
appendDataNovatrend(data);
console.log(data);
});
function appendDataNovatrend (data) {
for (let i=0; i<data.length; i++) {
const li = document.createElement("li");
var fdate = data[i].date;
var fdate = fdate.substr(0, 10);
li.innerHTML += fdate + ' - <a href="' + data[i].link + '">' + data[i].title.rendered + '</a>';
blogNovatrend.appendChild (li);
}
}
</script>
</body>
</html>
Diesen Code könnte man nun als einzelne Webseite aufrufen oder in eine existierende Website einbauen.
JavaScript in WordPress Beiträgen
Während ich das schreibe, denke ich mir, dass es doch eigentlich auch möglich sein müsste, den Code in diesem Blog Beitrag in Aktion zu sehen. Um JavaScript in WordPress Beiträgen ausführen zu können, benötigt man ein Plugin. Ich habe es mit Script n Styles probiert und es funktionierte gut. Im Gutenberg-Editor muss man dann noch einen HTML Block mit der Zeile <ul id=“blogNovatrend“></ul> einfügen und schon sind die letzte 10 aktuellen Beiträge da 🙂
Nun ist es natürlich auch auf andere Art möglich, die eigenen Beiträge in einem Artikel anzuzeigen. Für Artikel anderer WordPress Seiten ist diese Funktionalität schon interessanter. Hier sind beispielsweise die letzten Beiträge des Familienbetriebs (Manchmal dauert der Aufbau ein wenig, also falls da nicht sofort etwas steht, bitte kurz warten).
Fazit
Es ist für mich immer wieder erstaunlich mit wie wenig JavaScript-Code man viel erreichen kann 🙂 Leider dauert es eine Weile, bis man den Code so kompakt beisammen hat und dann auch alles wirklich funktioniert.
tl;dr: Mit JavaScript lassen sich öffentliche Daten aus WordPress auslesen
Schreibe einen Kommentar