Eine Einführung in Oembed und WordPress

WordPress ist derzeit eine der größten CMS- und Blogging -Plattformen. Aber warum ist das so? WordPress wurde in den letzten Jahren viel kritisiert. Eines der größten Themen ist, dass die Architektur nicht so modern ist, wie sie auch sein könnte. Die Art und Weise, wie die Plattform (oder CMS) im Jahr 2004 geschrieben wurde, unterscheidet sich von den Standards, die wir heute sehen. Trotzdem besteht kein Zweifel, dass es für Endbenutzer sehr einfach zu bedienen ist.

Endbenutzer wollen ein CMS, mit dem Inhalte einfach veröffentlichen können. Ich glaube, dass die meisten Benutzer ihre Inhalte nicht harten möchten. Wenn ein Kunde mich fragt: „Ich möchte einige Inhalte von Slideshare hinzufügen“, ist mein Verstand zu REST -APIs oder zumindest einbetten Codes. Heute werden wir uns eine Funktion von WordPress ansehen, die Sie wahrscheinlich verwendet haben, ohne es zu wissen.

Key Takeaways

• OEMbed ist ein Protokoll, das eine einfache Einbettung von Inhalten in eine Website ermöglicht und über eine Verbraucher- und Anbieterbeziehung funktioniert. Es gibt vier Arten von Ressourcen an - Foto, Video, Links und Rich -, die alle eine URL, Breite und Höhe in ihrer Antwort bieten.
• WordPress hat eine integrierte Unterstützung für OEMbed mit einer Liste von Whitelisted Anbietern. Durch einfaches Einfügen einer URL von einem whitelisteten Anbieter beim Erstellen eines Beitrags oder einer Seite holt WordPress das Einbett -HTML automatisch und zeigt sie im Beitrag an. Benutzer können auch manuell zusätzliche Anbieter hinzufügen.
• Über seine Einfachheit für Endbenutzer hinaus ist OEMbed ein flexibles Werkzeug innerhalb von WordPress. Benutzer können mit der Whitelist experimentieren, sie mit ihren eigenen Anbietern erweitern und sogar das Erscheinungsbild ihrer OEMbeds anpassen. WordPress bietet auch Funktionen zur Registrierung einer Website, die OEMbed und zum Hinzufügen von OEMBED -Unterstützung zu einer Site unterstützt.

Einführung in Oembed

OEMbed ist eine unglaublich einfache Möglichkeit, Inhalte in Ihre Website einzubetten. OEMbed besteht aus einem Verbraucher und einem Anbieter. Der Anbieter bietet Ressourcen an, die in den Verbraucher eingebettet werden können, und der Verbraucher fordert diese Ressourcen über den OEMBED -Endpunkt an.

Die OEMBED -Implementierung gibt 4 Arten von Ressourcen an:

• Foto
• Video
• Links
• reich

Das Foto, Video und ein reicher Typ sollten in ihrer Antwort eine URL, eine Breite und Höhe bereitstellen. Die Anbieter können auch andere Daten einbeziehen, aber diese sind alles, was bei der Behandlung dieser Art von Inhalten erforderlich ist. Die OEMBED -Spezifikation ist eine Richtlinie, die Anbieter können ihre eigene Umsetzung von OEMbed durchführen. Der Anbieter sollte mindestens einen OEMbed -Endpunkt und eine Ressourcen -URL haben.

Schauen wir uns die Slideshare an und sehen, wie sie OEMbed implementiert haben.

In ihrer Dokumentation geben sie den OEMBED -Endpunkt und den Ressourcenendpunkt an. Der OEMBED -Endpunkt ist: http://www.slideshare.net/api/oembed/2. Der Ressourcenendpunkt sieht ungefähr so ​​aus: http://www.slideshare.net/user-slug/slidename-slug. Um die Informationen vom Anbieter zu erhalten, sollten wir den OEMBED -Endpunkt verwenden und einen URL -Parameter der Ressource übergeben. Die Parameter sollten URL codiert werden. Die minimale Anforderung ist der URL -Parameter, aber Sie können auch maxwidth , maxheight und das Format übergeben. Es hängt wirklich vom Inhaltsformat ab, aber für Video, Foto und reichhaltiges Format haben Sie die Möglichkeit, diese Argumente zu übergeben. Oembed gibt auch nur die GET -Methode an, sodass Sie andere Methoden nicht anwenden können.

Stellen wir mit dem URL -Parameter eine Anforderung an diesen Endpunkt an.

Machen Sie eine Anfrage an: http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/chris-burgess/wordpress- themeswpmelb2014 und Sie erhalten eine XML-Antwort wie die Follow:

<span><span><span><oembed>></oembed></span>
</span>  <span><span><span><total-slides> type<span>="integer"</span>></total-slides></span>50<span><span></span>></span>  
</span>  <span><span><span><thumbnail-width> type<span>="integer"</span>></thumbnail-width></span>170<span><span></span>></span>
</span>  <span><span><span><width> type<span>="integer"</span>></width></span>425<span><span></span>></span>
</span>  <span><span><span><type>></type></span>rich<span><span></span>></span>
</span>  <span><span><span><provider-name>></provider-name></span>SlideShare<span><span></span>></span>
</span>  <span><span><span><slideshow-id> type<span>="integer"</span>></slideshow-id></span>41489102<span><span></span>></span>
</span>  <span><span><span><provider-url>></provider-url></span>http://www.slideshare.net<span><span></span>></span>
</span>  <span><span><span><slide-image-baseurl>></slide-image-baseurl></span>//image.slidesharecdn.com/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02/95/slide-<span><span></span>></span>
</span>  <span><span><span><version>></version></span>1.0<span><span></span>></span>
</span>  <span><span><span><conversion-version> type<span>="integer"</span>></conversion-version></span>2<span><span></span>></span>
</span>  <span><span><span>></span><span><span><iframe> src<span>="http://www.slideshare.net/slideshow/embed_code/41489102"</span> width<span>="427"</span> height<span>="356"</span> frameborder<span>="0"</span> marginwidth<span>="0"</span> marginheight<span>="0"</span> scrolling<span>="no"</span> <span>style<span>="<span>border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;</span>"</span></span> allowfullscreen></iframe></span> <span><span></span>></span> <span><span><div> <span>style<span>="<span>margin-bottom:5px</span>"</span></span>> <span><span><strong>></strong></span> <span><span><a> href<span>="https://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014"</span> title<span>="WordPress Themes Demystified"</span> target<span>="_blank"</span>></a></span>WordPress Themes Demystified<span><span></span>></span> <span><span></span>></span> from <span><span><strong>></strong></span><span><span><a> href<span>="http://www.slideshare.net/chris-burgess"</span> target<span>="_blank"</span>></a></span>Chris Burgess<span><span></span>></span><span><span></span>></span> <span><span></span></span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span><author-name>></author-name></span>Chris Burgess<span><span></span>></span>
</span>  <span><span><span><title>></title></span>WordPress Themes Demystified<span><span></span>></span>
</span>  <span><span><span><height> type<span>="integer"</span>></height></span>355<span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Wenn Sie nur den URL -Wert im Browser anfordern, erhalten Sie nur eine normale HTML -Seite. Etwas, das Sie jeden Tag sehen. SlideShare standardmäßig mit dem XML -Format, wenn kein anderes Format angefordert wird. Lassen Sie uns die Anfrage ein wenig ändern. Diesmal werden wir einen weiteren Parameter hinzufügen und eine JSON -Antwort erhalten.

<span>{
</span>
    <span>"author_url": "http://www.slideshare.net/chris-burgess",
</span>    <span>"total_slides": 50,
</span>    <span>"provider_name": "SlideShare",
</span>    <span>"version_no": "1415853027",
</span>    <span>"html": "<iframe src="%5C%22http://www.slideshare.net/slideshow/embed_code/41489102%5C%22" width='\"427\"' height='\"356\"' frameborder='\"0\"' marginwidth='\"0\"' marginheight='\"0\"' scrolling='\"no\"' style='\"border:1px' solid border-width:1px margin-bottom:5px max-width: allowfullscreen> </iframe> <div style='\"margin-bottom:5px\"'> <strong> <a href="%5C%22https://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014%5C%22" title='\"WordPress' themes demystified target='\"_blank\"'>WordPress Themes Demystified</a> </strong> from <strong><a href="%5C%22http://www.slideshare.net/chris-burgess%5C%22" target='\"_blank\"'>Chris Burgess</a></strong> </div>\n\n",
</span>    <span>"thumbnail_height": 128,
</span>    <span>"type": "rich",
</span>    <span>"slide_image_baseurl": "//image.slidesharecdn.com/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02/95/slide-",
</span>    <span>"slide_image_baseurl_suffix": "-1024.jpg",
</span>    <span>"slideshow_id": 41489102,
</span>    <span>"title": "WordPress Themes Demystified",
</span>    <span>"version": "1.0",
</span>    <span>"height": 355,
</span>    <span>"provider_url": "http://www.slideshare.net",
</span>    <span>"thumbnail": "//cdn.slidesharecdn.com/ss_thumbnails/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02-thumbnail.jpg?cb=1415853027",
</span>    <span>"conversion_version": 2,
</span>    <span>"author_name": "Chris Burgess",
</span>    <span>"thumbnail_width": 170,
</span>    <span>"width": 425
</span>
<span>}</span>

Versuchen Sie erneut, diese Ressource anzufordern, diesmal jedoch einen zusätzlichen Parameter. Lassen Sie uns den Maxwidth-Parameter auf 200 einstellen und diese URL anfordern: http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/chris-burgess/wordpress-THETHEMESWPMELB2014&format=json&max=json&max=json&max=json&max=json&max=json&max=json&maxdiMAxdim&maxdiMax=json&maxdiMaxpect=json&maxmax. 200, Sie sollten dieses Ergebnis erhalten:

<span>{
</span>
    <span>"conversion_version": 2,
</span>    <span>"version_no": "1415853027",
</span>    <span>"slide_image_baseurl_suffix": "-320.jpg",
</span>    <span>"html": "<iframe src="%5C%22http://www.slideshare.net/slideshow/embed_code/41489102%5C%22" width='\"202\"' height='\"168\"' frameborder='\"0\"' marginwidth='\"0\"' marginheight='\"0\"' scrolling='\"no\"' style='\"border:1px' solid border-width:1px margin-bottom:5px max-width: allowfullscreen> </iframe> <div style='\"margin-bottom:5px\"'> <strong> <a href="%5C%22https://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014%5C%22" title='\"WordPress' themes demystified target='\"_blank\"'>WordPress Themes Demystified</a> </strong> from <strong><a href="%5C%22http://www.slideshare.net/chris-burgess%5C%22" target='\"_blank\"'>Chris Burgess</a></strong> </div>\n\n",
</span>    <span>"total_slides": 50,
</span>    <span>"width": 200,
</span>    <span>"slide_image_baseurl": "//image.slidesharecdn.com/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02/85/slide-",
</span>    <span>"thumbnail_height": 128,
</span>    <span>"thumbnail_width": 170,
</span>    <span>"thumbnail": "//cdn.slidesharecdn.com/ss_thumbnails/wordpress-themes-wpmelb-2014-141112215416-conversion-gate02-thumbnail.jpg?cb=1415853027",
</span>    <span>"provider_name": "SlideShare",
</span>    <span>"author_url": "http://www.slideshare.net/chris-burgess",
</span>    <span>"author_name": "Chris Burgess",
</span>    <span>"version": "1.0",
</span>    <span>"slideshow_id": 41489102,
</span>    <span>"type": "rich",
</span>    <span>"height": 167,
</span>    <span>"title": "WordPress Themes Demystified",
</span>    <span>"provider_url": "http://www.slideshare.net"
</span>
<span>}</span>

Wenn Sie die Breite des Iframe auf HTML -Schlüssel dieser Anfrage mit der vorherigen Anfrage vergleichen, sollten Sie einen Unterschied sehen. Der erste hatte eine Breite von 427 und die letzte hatte eine Breite von 202.

Wenn Sie mehr über die OEMBED -Spezifikation erfahren möchten, schauen Sie sich die offiziellen OEMBED -Dokumente an. Schauen Sie sich auch die Dokumentation von Slideshare Oembed an und spielen Sie ein wenig damit, um besser zu verstehen, wie es funktioniert.

Warum dies nützlich ist

Vergessen wir für einen Moment die technische Implementierung. Bei WordPress geht es mehr um Endbenutzer. Die gesamte Implementierung der OEMBED -Spezifikation befindet sich innerhalb der WordPress -Codebasis. WordPress hat eine weiße Liste aller unterstützten OEMBED -Anbieter. Dies sind nur einige von ihnen aus ihrer Whitelist.

WordPress macht es einfach, Inhalte aus dieser Whitelist einzubetten. Fügen Sie einfach die URL einer Ressource ein, wenn Sie einen Beitrag oder eine Seite erstellen.

Sie werden dann sehen, dass es den Inhalt sofort rendert:

Die URL sollte nur eine Zeile für sich sein. WordPress sucht nach diesem Link und sucht dann, um festzustellen, ob dieser Link eine Ressource für eine der Whitelisted -URLs ist. Wenn dies der Fall ist, dann ist es eine Anfrage an den OEMBED -Endpunkt. In diesem Beispiel habe ich eine Twitter -Status -URL und WordPress kopiert, die diesen Status für mich in den Beitrag eingebettet hat. Dies ist jedoch nicht nur auf Twitter begrenzt, suchen Sie nach anderen Websites im Whitelist und experimentieren Sie mit ihnen.

Über die Whitelist hinaus wird jede OEMBED -Site von WordPress unterstützt. Sie können manuell zusätzliche Anbieter hinzufügen. WordPress bietet zwei Funktionen, eine für die Registrierung einer Website, die OEMBED unterstützt, und eine, die wir hardcode können, um unserer Website OEMBED -Unterstützung hinzuzufügen. Verwenden Sie WP_OEMBED_ADD_PROVIDER (), um WordPress eine vorhandene OEMBED -Site hinzuzufügen. Sie können auch wp_embed_register_handler () verwenden, um eine Nicht-Aembed-Site hinzuzufügen. Oder wenn Sie wie ich sind, der es hasst, das Rad neu zu erfinden, können Sie auch prüfen, ob ein Plugin zuerst existiert.

Schlussfolgerung

OEMbed ist eine der handlichen WordPress -Funktionen, die Ihr Leben erleichtert. In diesem Artikel behandelten wir das, was OEMbed ist, wir haben uns die OEMBED -Spezifikationen angesehen und wie OEMbed und WordPress zusammenarbeiten. Aber hör dort nicht auf. Experimentieren Sie mit der Whitelist und erweitern Sie es mit Ihren eigenen Anbietern.

häufig gestellte Fragen zu OEMbed und WordPress

Was ist OEMBED und wie funktioniert es mit WordPress? Inhalt. WordPress hat eine integrierte Unterstützung für OEMbed. Wenn Sie eine URL von einer Site einfügen, die OEMBED unterstützt, verwendet WordPress die API automatisch, um das Einbett HTML zu holen und in Ihrem Beitrag anzuzeigen. Dies beseitigt die Notwendigkeit, HTML von der Website zu kopieren und zu kleben, in der die Medien gehostet werden, die Sie einbetten möchten. kann dies tun, indem ein Plugin wie deaktivierte Einbettungen oder OEMBED -Manager verwendet werden. Alternativ können Sie der Datei Ihres Themas ein paar Codezeilen für die Funktionen Ihres Themas hinzufügen, um OEMBED zu deaktivieren. Beachten Sie jedoch, dass dies alle Arten von Einbettungen deaktiviert. Dies kann durchgeführt werden, indem Ihrem Thema benutzerdefinierte CSS hinzugefügt werden. Das genaue CSS, das Sie benötigen, hängt von der Art der Einbettung und dem Design Ihres Themas ab. Es ist wichtig, Inhalte nur aus vertrauenswürdigen Quellen zu betten. Einige Websites können ihren OEMBED -Code möglicherweise nicht ordnungsgemäß bereinigen, was möglicherweise zu Sicherheitslücken führen könnte.

Warum funktioniert mein OEMbed nicht in WordPress? Die URL, die Sie einbetten möchten, stammen möglicherweise nicht von einer Website, die OEMBED unterstützt, oder es könnte einen Konflikt mit einem Plugin oder einem Thema bestehen. Wenn Sie Probleme haben, deaktivieren Sie alle Plugins und wechseln Sie zu einem Standardthema, um festzustellen, ob dies das Problem behebt. Sie können OEMBED mit benutzerdefinierten Post -Typen in WordPress verwenden. Sie müssen nur sicherstellen, dass der benutzerdefinierte Beitragstyp die Funktion "Editor" unterstützt. OEMBED -Anbieter mit der Funktion wp_oembed_add_provider (). Mit dieser Funktion können Sie das URL -Schema für den Anbieter und den Endpunkt angeben, mit dem WordPress die Einbettung html abrufen sollte. Sie können die Breite und Höhe von OEMbeds in WordPress einschränken. Dies kann durch die Verwendung des Filterfilters embod_defaults erfolgen 24 Stunden, um die Leistung zu verbessern. Sie können diese Dauer jedoch mit dem OEMbed_Ttl -Filter ändern. Die Funktion WP_OEMBED_get (). Mit dieser Funktion können Sie die Einbettung HTML für eine URL abrufen und überall auf Ihrer Website anzeigen.

Das obige ist der detaillierte Inhalt vonEine Einführung in Oembed und WordPress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!