Kategorien
Content Management Systeme Programmieren

News aus WordPress auf anderen Seiten anzeigen

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.

Liste der letzten Beitäge

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.

WordPress JSON Daten

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.

Array mit den Daten der letzten Beiträge in der Konsole im Inspektor im Chrome Browser

Das Array lässt sich sehr schön „erforschen“ wenn man die einzelnen Zeilen einfach aufklappt …

Daten eines einzelnen Beitrags

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

      Von hagengraf

      consultant, author, trainer, solution finder, web architect, developer, open source lover, visionary, orator, the good old webmaster. Able to simplify!

      7 Antworten auf „News aus WordPress auf anderen Seiten anzeigen“

      Mit Verlaub: das ist für mich von hinten durch die Brust ins Auge. Warum nicht einfach den Gutenberg Block RSS dafür bemühen?

      Stimmt. Es ging mir mir auch eher darum, zu zeigen, wie einfach man mit einer API kommunizieren kann. Du könntest ja beispielsweise auch andere Felder nehmen, anzeigen und stylen.

      Oh cool, danke, den Aufruf kannte ich noch gar nicht. Oben in dem einen Screenshot kannst du das Array sehen, das ich benutzt habe. Da war auch das featured image drin, aber viel versteckter.

      Man braucht dann halt nen extra Query für jeden Post um das Featured Image zu erhalten. Mit _embed ist es direkt dabei.

      Kommentar verfassen