WordPressでカスタムフィールドのYoutube動画埋め込みをレスポンシブ対応する方法

youtubeのレスポンシブ対応

WordPressでYoutubeの動画を埋め込むと、iframeがレスポンシブ対応できておらず、スマートフォンで切れてしまう事があります。
記事本文( <?php the_content(); ?>)の場合は、
寝ログ様で紹介されている「YouTubeなどで使われるiframe要素を、WordPressでレスポンシブ対応する方法
という記事を参考にfunction.phpとCSSを編集することで対応できるのですが、カスタムフィールドに投稿した内容をレスポンシブ対応したい場合は、もう一手間加える必要があります。

function.phpに関数を追加

※ソースコードは、寝ログ様のものを参考にしました。
function.phpでiframeをdivで囲む関数を定義します。ここでは特にadd_filterしません。

記事出力側(single.php/page.phpなど)の設定

カスタムフィールドを出力する時に、一度先ほどの関数を通して変換します。その際はget_fieldを使ってください。the_fieldだと変換する前に出力されて、うまくいきません。

CSS側の設定

※ソースコードは、寝ログ様のものを参考にしました。

WordPressの本
  • このエントリーをはてなブックマークに追加
« »

経営者と経営者の妻が沖縄で楽しく生きるためのアレコレ デザイン・カメラ・ロードバイク・旅・畑

© 2017 やまぐち家の生態