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>

oEmbed

CodePen Konfigurationals füroEmbed-Provider CodePen

hinzufügen

BasierendCodePen aufunterstützt deroffiziell Dateidas codepen.txt,oEmbed-Protokoll. Du kannst es direkt über den Tab "Eigene Provider" in deinem Plugin hinzufügen.

Über die einen CodePen-Embed enthält, hier die Konfiguration für dein WordPress-Plugin:

Einzutragende Werte:Admin-Oberfläche

URL-Pattern:

Gehe 

https://codepen.io/*/pen/*zu
Einstellungen oder→ alsoEmbed RegexManager (falls→ deinEigene PluginProvider dasund unterstützt):füge folgende Werte ein: 
#https?://codepen\.io/([^/]+)/pen/([^/]+)#i

Endpoint-URL:

https://codepen.io/api/oembed

Erklärung:

Feld Wert
Beschreibung URL-Pattern https://codepen.io/*/pen/* MatchtEndpoint-URL allehttps://codepen.io/api/oembed CodePen- 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 imunterstützen

Format

Falls du auch die /username/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/pen-id* 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 DerRegex offizielle☑ oEmbed-API-Endpunkt von CodePen(angehakt)

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

Beispiel aus deiner Datei:Testen

DieDu kannst prüfen, ob der oEmbed-Endpoint funktioniert, indem du folgende URL inim deinemBrowser codepen.txt zeigt:

    Autor: ZcarecroW Pen-ID: 019da77a-6995-7501-9af8-4866e69b7f1c Titel: "GSAP - Animation Triad Demo: Timing, Motion, Meaning"

    Eine typische einbettbare URL wäre: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:Hinweis zum Provider-Matching

    CodePenIn verwendetdeiner manchmalfilter_providers-Methode auchwerden andereProvider URL-Formateüber wie: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.

      https://codepen.io/*/full/* (Fullscreen-Ansicht) https://codepen.io/*/details/* (Details-Ansicht)

      Falls du diese auch unterstützen willst, könntest du mehrere Patterns anlegen oder ein breiteres Pattern verwenden:

      https://codepen.io/*/*/*
      Back to top