WYSIWYGエディターに記述されたYoutubeのiframeを自動でレスポンシブ対応する方法

先日お客様よりWYSIWYGエディターに貼りつけたYoutubeがレスポンシブ対応に
ならないので対応してほしいとご連絡をいただきました。
その際に、Wordpress(ワードプレス)デフォルトのWYSIWYGエディター内に記述された
Youtubeのiframeはもちろんのこと、アドバンスドカスタムフィールド(ACF)で設置した
WYSIWYGエディターにも対応したので、備忘録として残しておこうと思います。

では早速ソースから。

まず、WordpressデフォルトのWYSIWYGエディターへの対応です。
下記のソースを、function.phpにコピペして貼りつければ完了!笑

function iframe_in_div($the_content) {
if ( is_singular() ) {
$the_content = preg_replace('/<iframe/i', '<div class="youtube"><iframe', $the_content);
$the_content = preg_replace('/<\/iframe>/i', '</iframe></div>', $the_content);
}
return $the_content;
}
add_filter('the_content','iframe_in_div');
add_filter('acf_the_content','iframe_in_div');

あっという間です。
ちなみに上記では「is_singular() 」と記載していますので
適宜書き換えてみてください。

次に、アドバンスドカスタムフィールド(ACF)で設置した
WYSIWYGエディターにも対応する場合です。
上記の記述の最下部に、下記を追記してください。

add_filter('acf_the_content','iframe_in_div');

アドバンスドカスタムフィールド(ACF)のWYSIWYGエディターは
「acf_the_content」で制御するそうです。
わかりやすいですよね。

全部まとめると以下のようなソースになります。

function iframe_in_div($the_content) {
if ( is_singular() ) {
$the_content = preg_replace('/<iframe/i', '<div class="youtube"><iframe', $the_content);
$the_content = preg_replace('/<\/iframe>/i', '</iframe></div>', $the_content);
}
return $the_content;
}
add_filter('the_content','iframe_in_div');
add_filter('acf_the_content','iframe_in_div');
add_filter('acf_the_content','iframe_in_div');

みなさんもぜひ試してみてくださいね!

これ、なんならデフォルトの記述にしてもいいのかもしれない…