先日お客様より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');
みなさんもぜひ試してみてくださいね！
これ、なんならデフォルトの記述にしてもいいのかもしれない…