CodepenがURLでoEmbedの埋め込みに対応したようです

Tweet

238

CodePenのヘビーユーザーになりつつあるんですが(見る方の)
ブログでも1日2件ほどCodePenから、使えるコード 面白いコード、デザインを紹介しています

気になる方はcodepenのタグをチェックしてもらえればと思います

タグのRSSもありますので、RSSリーダーで最新のをチェックすることもできます
RSS codepenの記事:https://9-bb.com/tag/codepen/feed/

今回そのcodepenでURLだけで自動的に埋め込みに出来るWordPressの機能と連動するようになったようです

WordPressのoEmbedでcodepenの埋め込みに対応する方法

自分で少しテーマをカスタマイズすることで
埋め込みがURLでも可能になります

wp_oembed_add_provider('http://codepen.io/*/pen/*', 'http://codepen.io/api/oembed');

これをテーマにある functions.php に追加 たったのこれだけでいいみたいです

基本的に、投稿と固定ページでのみ動作します

Jetpackのコメントシステムでは、コメントでも埋め込み(oEmbed)を動作させることが出来るみたいです

私は通常の埋め込みをWordPressのショートコードで使えるプラグインを使って、記事に埋め込みをしています
oEmbedが使えるようになったのですが、高さの調整が今までのやり方のほうが簡単なので 今までどおり使っていきます

あとWordPress用にショートコードも用意されています
プラグインを導入するとこのショートコードで動作するので、こちらもビジュアルエディタのまま操作できるので楽チンです

CODEPENの公式ブログ
http://blog.codepen.io/2014/04/03/oembed/

Tweet

短縮URL:

2014年04月05日 WEBサービス・便利なサイト CodePen