Für die Meetup-Vorschau auf de.wordpress.org, die automatisch die nächsten sechs Meetups von wpmeetups.de anzeigt, musste eine Lösung gefunden werden, wie eine normale PHP-Seite auf einer WordPress-Website eingebettet werden kann. Dabei wurde sich der neuen oEmbed-Fähigkeit von WordPress bedient, die mit 4.4 eingeführt wurde.
Problem
Auf de.wordpress.org können keine iFrames im Editor genutzt werden. Als Möglichkeit, eine fremde Seite einzubinden, bleibt nur der Weg über die verschiedenen oEmbed-Provider. Da sich die Übersicht der nächsten Termine von wpmeetups.de nicht direkt für das Einbinden anbietet und das außerdem nicht funktionieren würde, musste eine eigene Seite mit den nächsten Terminen erstellt werden, die sich auch vom Design an de.wordpress.org orientiert. Diese muss so angepasst werden, dass de.wordpress.org denkt, dass es sich dabei um eine WordPress-Seite handelt, die einfach durch Einfügen der URL eingebettet werden kann.
Diese Seite konnte nicht durch Nutzung des wpmeetups.de-Feeds erstellt werden, weil dort die Städte aus der Dachzeile nicht aufgeführt werden – die Infos mussten also irgendwie direkt von der Übersichtsseite kommen.
Lösung
Um die angepasste Übersichtsseite zu bauen, wurde die Yahoo Query Language benutzt. Damit diese Anfrage nicht bei jedem Aufruf von de.wordpress.org/meetups getätigt wird, wird das Ergebnis mit phpFastCache für eine Stunde gespeichert.
Um die Seite oEmbed-fähig zu machen, muss sich lediglich angeschaut werden, was dafür alles auf einer normalen WordPress-Seite eingefügt wird. Im head-Element sind das diese beiden link-Elemente:
<link rel="alternate" type="application/json+oembed" href="https://example.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fexample.com%2F2083%2Fslug-des-beitrags%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://example.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fexample.com%2F2083%2Fslug-des-beitrags%2F&format=xml" />Code-Sprache: HTML, XML (xml)Diese beiden Elemente müssen mit angepasster URL in das head-Element der Seite eingefügt werden, die eingebunden werden soll. Anschließend müssen die Dateien oembed.json und oembed.xml erstellt werden, auf die die URLs aus den href-Attributen verweisen. Als Inhalt wird einfach der aus dem entsprechenden link-Element eingefügt und alle Vorkommen der Beitrags-URL angepasst, sodass sie der URL der Seite entsprechen.
Um das iFrame responsive zu gestalten, wird der JavaScript-Code aus dem Footer-Bereich einer beliebigen Embed-Ansicht eines WordPress-Beitrags genutzt. Um diese Ansicht zu erreichen, müsst ihr einfach /embed an die URL hängen. Anschließend lässt sich die Seite einbinden.
Die fertige Seite, die auf de.wordpress.org angezeigt wird, findet ihr hier.