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

CODEPEN LOGO
このエントリーをはてなブックマークに追加
PR

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

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

タグのRSSもありますので、RSSリーダーで最新のをチェックすることもできます
RSS codepenの記事:http://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/

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)