Une introduction à Oemed et WordPress

WordPress est actuellement l'une des plus grandes CMS et plates-formes de blogs. Mais pourquoi? WordPress a été beaucoup critiqué au cours des dernières années. L'un des plus grands problèmes est que l'architecture n'est pas aussi moderne qu'elle pourrait l'être. La façon dont la plate-forme (ou CMS) a été écrite en 2004 est différente des normes que nous voyons aujourd'hui. Malgré cela, il ne fait aucun doute qu'il est très facile à utiliser pour les utilisateurs finaux.

Les utilisateurs finaux veulent un CMS facile à publier du contenu. Je crois que la plupart des utilisateurs ne veulent pas coder dur leur contenu. Si un client me demande: «Je veux ajouter du contenu de SlideShare», mon esprit va reposer des API ou au moins des codes intégrés. Aujourd'hui, nous allons examiner une fonctionnalité de WordPress que vous avez probablement utilisée sans même le savoir.

Les plats clés

• OEMBED est un protocole qui permet une intégration facile de contenu dans un site, fonctionnant via une relation de consommateur et de fournisseur. Il spécifie quatre types de ressources - photo, vidéo, liens et riches - qui fournissent tous une URL, une largeur et une hauteur dans leur réponse.
• WordPress a un support intégré à OEMBED, avec une liste de fournisseurs de listes blanches. En collant simplement une URL d'un fournisseur de listes blanches lors de la création d'un message ou d'une page, WordPress récupère automatiquement le HTML intégré et l'affiche dans le post. Les utilisateurs peuvent également ajouter manuellement les fournisseurs supplémentaires.
• Au-delà de sa simplicité pour les utilisateurs finaux, Oembled est un outil flexible dans WordPress. Les utilisateurs peuvent expérimenter la liste blanche, l'étendre avec leurs propres fournisseurs et même personnaliser l'apparence de leurs OEMB. WordPress fournit également des fonctions pour enregistrer un site qui prend en charge OEMBED et pour ajouter une prise en charge OEMBED à un site.

Introduction dans Oembed

OEMBED est un moyen incroyablement facile d'incorporer du contenu dans votre site. Oemed se compose d'un consommateur et d'un fournisseur. Le fournisseur fournit des ressources qui peuvent être intégrées sur le consommateur et le consommateur demande ces ressources via le point de terminaison OEMBED.

L'implémentation OEMBED spécifie 4 types de ressources:

• Photo
• vidéo
• liens
• riche

La photo, la vidéo et le type riche doivent fournir une URL, une largeur et une hauteur dans leur réponse. Les fournisseurs peuvent inclure également d'autres données, mais ce sont tout ce qui est requis pour traiter ce type de contenu. La spécification OEMBED est une directive, les prestataires peuvent faire leur propre mise en œuvre d'Oemed. Le fournisseur doit avoir au moins un point de terminaison OEMBED et une URL de ressource.

Jetons un coup d'œil au SlideShare et voyons comment ils ont mis en œuvre Oemed.

Dans leur documentation, ils spécifient le point de terminaison OEMBED et le point de terminaison de la ressource. Le point de terminaison Oembled est: http://www.slideshare.net/api/oembed/2. Le point de terminaison de la ressource ressemble à ceci: http://www.slideshare.net/user-slug/slidename-slug. Pour obtenir les informations du fournisseur, nous devons utiliser le point de terminaison OEMBED et passer un paramètre URL de la ressource. Les paramètres doivent être codés par URL. Le besoin minimal est le paramètre URL, mais vous pouvez également passer maxwidth , maxheight et le format . Cela dépend vraiment du format de contenu, mais pour la vidéo, la photo et le format riche, vous avez la possibilité de passer ces arguments. De plus, Oembled spécifie uniquement la méthode GET, vous ne pouvez donc pas utiliser d'autres méthodes.

faisons une demande à ce point de terminaison en utilisant le paramètre URL.

Faites une demande à: http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014 et vous obtiendrez une réponse XML comme la réponse comme le suivant:

<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>

Si vous demandez uniquement la valeur URL dans le navigateur, vous n'obtiendrez qu'une page HTML normale. Quelque chose que vous voyez tous les jours. SlideShare est par défaut au format XML si aucun autre format n'est demandé. Changeons un peu la demande. Cette fois, nous ajouterons un autre paramètre et obtiendrons une réponse JSON.

<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>

Essayez à nouveau de demander cette ressource, mais cette fois spécifiez un paramètre supplémentaire. Passons le paramètre maxwidth à 200 et demandons cette URL: http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/chris-burgess/wordpress-themeswpmelb2014&format=json&maxwidth== 200, vous devriez obtenir ce résultat:

<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>

Si vous comparez la largeur de l'Iframe sur la clé HTML de cette demande avec la demande précédente, vous devriez voir une différence. Le premier avait une largeur de 427 et le dernier avait une largeur de 202.

Si vous voulez en savoir plus sur les spécifications OEMBED, jetez un œil aux documents Oemed officiels. Jetez également un œil à la documentation Oemed SlideShare et jouez un peu avec pour mieux comprendre comment cela fonctionne.

pourquoi c'est utile

Pendant un moment, oublions la mise en œuvre technique. WordPress est davantage sur les utilisateurs finaux. Toute l'implémentation de la spécification OEMBED se trouve à l'intérieur de la base de code WordPress. WordPress a une liste blanche de tous les fournisseurs OEMBed pris en charge. Ce ne sont que certains d'entre eux de leur liste blanche.

WordPress facilite le contenu de cette liste blanche. Collez simplement l'URL d'une ressource lors de la création d'un message ou d'une page.

Vous le verrez ensuite rendre instantanément le contenu:

L'URL devrait être juste une ligne seule. WordPress recherche ce lien, puis recherche pour voir si ce lien est une ressource pour l'une des URL de liste blanche. Si c'est le cas, il fait une demande au point de terminaison OEMBED. Dans cet exemple, j'ai copié une URL de statut Twitter et WordPress a intégré ce statut pour moi, à l'intérieur du post. Mais cela ne se limite pas uniquement à Twitter, recherchez d'autres sites de la liste blanche et expérimentez avec eux.

Au-delà de la liste blanche, chaque site OEMBEd est soutenu par WordPress. Vous pouvez ajouter manuellement les fournisseurs supplémentaires. WordPress fournit deux fonctions, une pour l'enregistrement d'un site qui prend en charge OEMBED et une que nous pouvons cocoder pour ajouter un support OEMBED à notre site. Utilisez wp_oembed_add_provider () pour ajouter un site Oembled existant à WordPress. Vous pouvez également utiliser WP_EMBED_REGISTER_HANDLER () pour ajouter un site non-OEMBLED. Ou, si vous êtes comme moi qui déteste réinventer la roue, vous pouvez également vérifier si un plugin existe en premier.

Conclusion

Oemed est l'une des fonctionnalités de WordPress pratiques qui vous facilite la vie. Dans cet article, nous avons couvert ce qu'est l'OEMBED, nous avons examiné les spécifications OEMBED et comment Oembled et WordPress fonctionnent ensemble. Mais ne vous arrêtez pas là. Expérimentez avec la liste blanche et prolongez-la avec vos propres fournisseurs.

Des questions fréquemment posées sur Oembled et WordPress

Qu'est-ce que Oemed et comment cela fonctionne-t-il avec WordPress?

Oembled est un protocole qui permet à votre site Web d'afficher du contenu intégré (comme des vidéos, des images, des tweets, etc.) simplement en collant une URL dans votre contenu. WordPress a une prise en charge intégrée pour OEMBED. Lorsque vous collez une URL à partir d'un site qui prend en charge Oemed, WordPress utilise automatiquement l'API pour récupérer le HTML intégré et l'afficher dans votre message. Cela élimine le besoin de copier et de coller du HTML du site hébergeant les médias que vous souhaitez intégrer.

Comment puis-je désactiver Oemed dans WordPress?

Si vous souhaitez désactiver Oemed dans WordPress, vous Peut le faire en utilisant un plugin comme Disable Embeds ou Oembed Manager. Alternativement, vous pouvez ajouter quelques lignes de code au fichier functions.php de votre thème pour désactiver Oemed. Cependant, sachez que cela désactivera tous les types d'intégration.

Puis-je personnaliser l'apparence de mes OEMBE dans WordPress?

Oui, vous pouvez personnaliser l'apparence de vos Oembes dans WordPress. Cela peut être fait en ajoutant CSS personnalisé à votre thème. Le CSS exact dont vous avez besoin dépendra du type d'intégration et de la conception de votre thème.

Y a-t-il des problèmes de sécurité concernant l'utilisation de l'OEMB dans WordPress?

Bien que OEMBED soit généralement sûr à utiliser, Il est important d'incorporer uniquement du contenu à partir de sources de confiance. Certains sites Web peuvent ne pas désinfecter correctement leur code OEMBED, ce qui pourrait potentiellement conduire à des vulnérabilités de sécurité.

Pourquoi mon Oemed ne fonctionne-t-il pas dans WordPress?

Il pourrait y avoir plusieurs raisons pour lesquelles votre OEMBED ne fonctionne pas. L'URL que vous essayez d'incorporer peut ne pas provenir d'un site qui prend en charge OEMBED, ou il pourrait y avoir un conflit avec un plugin ou un thème. Si vous rencontrez des problèmes, essayez de désactiver tous les plugins et de passer à un thème par défaut pour voir si cela résout le problème.

Puis-je utiliser Oemed avec des types de publication personnalisés dans WordPress?

Oui, oui, Vous pouvez utiliser Oemed avec des types de publiques personnalisés dans WordPress. Il vous suffit de vous assurer que le type de publication personnalisé prend en charge la fonctionnalité «éditeur».

Comment puis-je ajouter la prise en charge d'un nouveau fournisseur OEMBED dans WordPress?

Vous pouvez ajouter la prise en charge d'un nouveau Fournisseur OEMBED en utilisant la fonction WP_OEMBED_ADD_PROVIDER (). Cette fonction vous permet de spécifier le schéma URL pour le fournisseur et le point de terminaison que WordPress devrait utiliser pour récupérer le HTML.

Puis-je limiter la largeur et la hauteur des OEM dans WordPress?

Oui , vous pouvez limiter la largeur et la hauteur des OEMB dans WordPress. Cela peut être fait en utilisant le filtre Embed_Defaults, qui vous permet de spécifier la largeur et la hauteur maximales pour tous les OEM.

Comment puis-je mettre en cache les réponses OEMB dans WordPress?

WordPress cache automatique pendant 24 heures pour améliorer les performances. Cependant, vous pouvez modifier cette durée en utilisant le filtre OEMBED_TTL.

Puis-je utiliser Oemed en dehors de l'éditeur de poste dans WordPress?

Oui, vous pouvez utiliser Oemed en dehors de l'éditeur de poste en utilisant en utilisant la fonction wp_oembed_get (). Cette fonction vous permet de récupérer le HTML intégré pour une URL et de l'afficher n'importe où sur votre site.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!