lokj-798x449

WordPress バージョン4.4以降から、記事のリンクURLを直接入力するだけでアイキャッチやリンクの詳細を誰でも簡単に引用が行えるよう、oEmbed規格を採用しました。
57b8ad171c27ba4a3f9ece1dc83d4034-798x320

この機能、使いこなすと凄く便利なのです。しかし

喜んだのもつかの間・・・・実はこの便利機能には罠がありました。

それは、スマホで回覧するとレスポンシブ化されないという問題です。

4ca80772873e5d6d50c770ca1eeb22fe-1024x762

おいっ!レスポンシブ対応になっておらず、画面切れてるやんけ!!!

ソースを見てみるとどうやらテーマ自体にコード修正を加えないとレスポンシブ表示ができないようです。

実は1年ほど前にもyoutubeがoEmbed規格に対応したことでWordPress記事内でURLのみで動画を挿入できるようになっておりましたがこちらも結局レスポンシブ表示させるためにはコードの修正が必要でした。

せっかくなので弊社でoEmbedで埋め込んだコンテンツをレスポンシブ化するプラグインを作ってみました。

oembed-responsive導入方法

以下からダウンロードを行い、プラグインとしてWordPressに直接インストールしてください。それ以外の設定は一切必要ありません。

プラグインを導入することで以後対応サイトのURLを挿入するだけで以下のようにテキストや写真がレスポンシブ対応になります。

5975ff2251a1bf13ff25a46d7dd4ea6f

 

注意
プラグインを導入する以前のページにはレスポンシブ化は効きませんのでその場合は再生成をしてください。

多くのwebサービスに対応しています。

その他以下のwebサービスにも対応しているはずです。(oEmbed統一規格なのでたぶん大丈夫です。全ての確認はしておりませんのでご了承ください)

  • twitter
  • youtube
  • Dailymotion
  • Vimeo
  • Instagram
  • hulu
  • Flickr
  • SlideShare
  • Imgur