Skip to main content

oEmbed Plugin | eigene Provider definieren

<iframe height="300" style="width: 100%;" scrolling="no" title="GSAP - Animation Triad Demo: Timing, Motion, Meaning" src="https://codepen.io/editor/ZcarecroW/embed/019da77a-6995-7501-9af8-4866e69b7f1c?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true">
  See the Pen <a href="https://codepen.io/editor/ZcarecroW/pen/019da77a-6995-7501-9af8-4866e69b7f1c">
  GSAP - Animation Triad Demo: Timing, Motion, Meaning</a> by ZcarecroW (<a href="https://codepen.io/ZcarecroW">@ZcarecroW</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

CodePen als oEmbed-Provider hinzufügen

CodePen unterstützt offiziell das oEmbed-Protokoll. Du kannst es direkt über den Tab "Eigene Provider" in deinem Plugin hinzufügen.

Über die Admin-Oberfläche

Gehe zu Einstellungen → oEmbed Manager → Eigene Provider und füge folgende Werte ein:

Feld Wert
URL-Pattern https://codepen.io/*/pen/*
Endpoint-URL https://codepen.io/api/oembed
Regex ☐ (nicht angehakt)

Das Problem mit deiner URL

Deine aktuelle URL hat das Format:

https://codepen.io/editor/ZcarecroW/embed/019da77a-6995-7501-9af8-4866e69b7f1c

Das ist eine Editor/Embed-URL, keine Standard-Pen-URL. oEmbed von CodePen funktioniert nur mit dem kanonischen Pen-Format. Du musst also in deinem WordPress-Beitrag diese URL einfügen:

https://codepen.io/ZcarecroW/pen/019da77a-6995-7501-9af8-4866e69b7f1c

Dann erkennt WordPress die URL automatisch und holt über den oEmbed-Endpoint die Einbettung.

Erweiterte Variante: Auch Editor-URLs unterstützen

Falls du auch die /editor/-URLs und /embed/-URLs automatisch auflösen möchtest, brauchst du einen zweiten Provider-Eintrag mit Regex. Da das URL-Pattern https://codepen.io/*/pen/* nur die Standard-Pen-URLs matcht, kannst du zusätzlich einen Regex-Provider anlegen:

Feld Wert
URL-Pattern #https?://codepen\.io/.+/(pen|embed|full)/.*#i
Endpoint-URL https://codepen.io/api/oembed
Regex ☑ (angehakt)

Allerdings ist der sauberste Weg einfach die kanonische Pen-URL zu verwenden.

Testen

Du kannst prüfen, ob der oEmbed-Endpoint funktioniert, indem du folgende URL im Browser aufrufst:

https://codepen.io/api/oembed?url=https://codepen.io/ZcarecroW/pen/019da77a-6995-7501-9af8-4866e69b7f1c&format=json

Das sollte eine JSON-Antwort mit dem Embed-HTML zurückliefern.

Hinweis zum Provider-Matching

In deiner filter_providers-Methode werden Provider über stripos gematcht. Eigene Provider, die über register_custom_providers mit wp_oembed_add_provider registriert werden, sind davon nicht betroffen – sie werden direkt in WordPress registriert und funktionieren unabhängig vom Deaktivierungs-Filter.

ich hab nun deine beiden definitionen eingetragen und auf einer wp page einen link eingefügt:
https://codepen.io/editor/ZcarecroW/pen/019da77a-6995-7501-9af8-4866e69b7f1c
leider ist es im frontend immer noch nur ein link.

CodePen oEmbed – Problemanalyse

Das Problem liegt an mehreren Stellen:

1. Die URL ist falsch

Die URL https://codepen.io/editor/ZcarecroW/pen/... ist keine gültige CodePen-Pen-URL. Das /editor/ gehört dort nicht hin. Die korrekte URL lautet:

https://codepen.io/ZcarecroW/pen/019da77a-6995-7501-9af8-4866e69b7f1c

2. Das Provider-Matching hat ein Problem

In deiner filter_providers-Methode wird mit md5($pattern) als Key gearbeitet. Beim Deaktivieren von Providern wird der md5-Hash des Patterns als Vergleichswert gegen das Pattern und den Endpoint geprüft – das funktioniert korrekt für Standard-Provider. Aber das eigentliche Problem ist, dass eigene Provider über wp_oembed_add_provider registriert werden, was im init-Hook passiert – und der oembed_providers-Filter greift auf eine andere interne Liste zu. Das sollte eigentlich funktionieren.

3. Der eigentliche Grund: WordPress erkennt die URL nicht

WordPress macht bei oEmbed ein Pattern-Matching gegen die URL. Dein Pattern https://codepen.io/*/pen/* matcht nur URLs im Format:

https://codepen.io/{username}/pen/{id}

Aber nicht URLs mit /editor/ darin.

Lösung

Schritt 1: Verwende die richtige URL in deinem WordPress-Beitrag. Füge in den Block-Editor einfach diese URL auf einer eigenen Zeile ein:

https://codepen.io/ZcarecroW/pen/019da77a-6995-7501-9af8-4866e69b7f1c

Schritt 2: Stelle sicher, dass dein eigener Provider korrekt eingetragen ist:

Feld Wert
URL-Pattern https://codepen.io/*/pen/*
Endpoint-URL https://codepen.io/api/oembed
Regex ☐ (nicht angehakt)

Schritt 3: Leere den oEmbed-Cache. Speichere einfach nochmal die Plugin-Einstellungen – das löst flush_oembed_cache aus und löscht alle gecachten oEmbed-Einträge.

Verifikation

Du kannst prüfen, ob der CodePen oEmbed-Endpoint deine URL überhaupt akzeptiert. Öffne diese URL im Browser:

https://codepen.io/api/oembed?url=https://codepen.io/ZcarecroW/pen/019da77a-6995-7501-9af8-4866e69b7f1c&format=json

Wenn du eine JSON-Antwort mit html-Feld bekommst, funktioniert der Endpoint. Wenn du einen Fehler bekommst, liegt das Problem bei CodePen selbst (z.B. ist der Pen möglicherweise privat).

Optional: Auch Editor-URLs unterstützen

Falls du trotzdem auch /editor/-URLs unterstützen willst, brauchst du einen zweiten Provider-Eintrag mit Regex:

Feld Wert
URL-Pattern #https?://codepen\.io/(?:editor/)?([^/]+)/(?:pen|embed|full)/(.+)#i
Endpoint-URL https://codepen.io/api/oembed
Regex ☑ (angehakt)

Wichtig: Auch mit Regex-Matching sendet WordPress die originale URL an den oEmbed-Endpoint. Wenn CodePen die /editor/-URL nicht als gültige Pen-URL akzeptiert, wird es trotzdem nicht funktionieren. Daher ist die sauberste Lösung: Verwende die kanonische Pen-URL ohne /editor/.

Back to top