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 Konfiguration für CodePen

FürBasierend CodePenauf kannstder duDatei incodepen.txt, deinemdie WP-oEmbed-Plugineinen typischerweiseCodePen-Embed Folgendesenthält, eintragen:hier die Konfiguration für dein WordPress-Plugin:

Einzutragende Werte:

URL-PatternPattern:

Ein Pattern, das CodePen-URLs matcht, z. B.:

https?:https://codepen\.codepen.io/.+

Wenn dein Plugin genauer sein soll, eher so:

https?://codepen\.io/[^/]+*/pen/[^/]+

Für Editor-/Embed-Links aus deiner Datei ggf. zusätzlich:

https?://codepen\.io/editor/[^/]+/pen/[^/]+*

oder allgemein:als Regex (falls dein Plugin das unterstützt):

https?#https?://codepen\.io/(editor/)?[^/]+)/pen/([^/]+)#i

Endpoint-URLURL:

CodePen hat einen oEmbed-Endpoint:

https://codepen.io/api/oembed

Wichtig

Erklärung:

In

Feld Wert Beschreibung URL-Pattern https://codepen.io/*/pen/* Matcht alle CodePen-URLs im Format /username/pen/pen-id Endpoint-URL https://codepen.io/api/oembed Der offizielle oEmbed-API-Endpunkt von CodePen

Beispiel aus deiner DateiDatei:

steht

Die einURL Embed-Linkin wie:deinem 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:

    https://codepen.io/editor/ZcarecroW/embed/019da77a-6995-7501-9af8-4866e69b7f1c?default-tab=html%2Cresult

    und auch ein Pen-Link:

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

    Hinweis:

    FürCodePen oEmbedverwendet istmanchmal meistensauch dieandere normaleURL-Formate Pen-URLwie:

    entscheidend,
    nichthttps://codepen.io/*/full/* unbedingt(Fullscreen-Ansicht) diehttps://codepen.io/*/details/* fertige(Details-Ansicht) iframe-Embed-URL. Daher solltest

    Falls du nach Möglichkeit URLs wie diese matchen:auch unterstützen willst, könntest du mehrere Patterns anlegen oder ein breiteres Pattern verwenden:

    https://codepen.io/ZcarecroW/pen/abc123*/*/*

    oder in deinem Fall, wenn dein Plugin auch Editor-Links verarbeiten soll, ein breiteres Pattern nutzen.

    Meine Empfehlung

    Wenn dein Plugin Regex akzeptiert:

      URL-Pattern

      https?://codepen\.io/.+/(pen|full|details|embed)/.+

      Endpoint-URL

      https://codepen.io/api/oembed

      Wenn du willst, kann ich dir auch direkt ein konkretes Pattern für genau dein Plugin-Format bauen, falls du mir sagst, ob es Regex, Wildcard oder einfach nur URL-Schema erwartet.

      Back to top