「iframe」使用時に勝手にdivタグで囲まれるのを制御（wrap_iframe_in_divの修正）

Wordpress Other

stinger5だと、アマゾンのアソシエイトへのリンクなどを張り付ける時に「iframe」タグを使用すると自動的にiframeが<div class=”youtube-container”>なるタグで囲まれてしまい、サイズ変更や配置などを調整する時に思うようにいきません。

勝手に入る「youtube-container」なるクラスは、その名のとおり埋め込んだYOUTUBEの動画に対し、スマホで見た時に自動的にサイズ調整されるよにしてあるものです（いわゆるひとつのレスポンシブ対応）。

それ自体は確かに便利です。
ただ、デフォルトのソースだとこのクラスがyoutubeのiframeだけでなく、全てのiframeに対して適応されてしまうため、挿入したiframeに対しこちらの意図とは違うコトになってしまうわけです。

この「youtube-container」クラスを自動的に付加しているソースは「functions.php」内にあります。

・使用ソース
/wp-content/themes/stinger5verXXXXXXXX/functions.php

ファイルを開いたら「iframeのレスポンシブ対応」のコメントを検索すると早いです。


//iframeのレスポンシブ対応
function wrap_iframe_in_div($the_content) {
  if ( is_singular() ) {
    $the_content = preg_replace('/< *?iframe/i', '
/i', '
', $the_content);
  }
  return $the_content;
}
add_filter('the_content','wrap_iframe_in_div');

多分一番手っ取り早いのは上記ソースをごそっと消す（コメントアウトする）ことｗ
レスポンシブの恩恵を受けたいならば、YOUTUBEの動画埋め込む時に、自力で<div class=”youtube-container”></div>で囲ってあげればよいかと。

動画紹介をメインにするようなページじゃなければそんなに手間でもないと思います。

何故って、最初はちょこちょこ～っとイジれば楽勝！とか思ってたんですけど、この対応が意外に難儀でして…汗

結果、ほぼ書き直しになってしまったという…涙

しかも、文字を追っていくと頭が痛くなる「正規表現」ってのが出てくるし…大汗

おそらく達人の皆さまからしたら、メチャメチャぶっさいくなコトになっていると思いますが、「とりあえず動けばＯＫ」をモットーにしているワタクシ的に、とりあえず目的の通りに動いたのでヨシ、とします…。

//iframeのレスポンシブ対応
function wrap_iframe_in_div($the_content) {
  if ( is_singular() ) {

  //iframeタグで囲まれている部分を総て取得
  $ret = preg_match_all("/\/i", $the_content, $result);

  if ($ret > 0) {
    //iframeを見つけた件数分ループ
    for ($i = 0; $i <= count($result[0]); $i++) {

      //の間に'youtube.com'という文字列があったら、
で囲う。
      if (mb_strpos($result[0][$i], 'youtube.com')>0){
        $the_content= str_replace($result[0][$i], '
'.$result[0][$i].'
',$the_content); 

      //の間に'amazon-adsystem.com'という文字列があったら、
で囲う。
      }elseif(mb_strpos($result[0][$i], 'amazon-adsystem.com')>0){
        $the_content= str_replace($result[0][$i], '
'.$result[0][$i].'
',$the_content);
      }
    }
  }
}
return $the_content;
  }
add_filter('the_content','wrap_iframe_in_div');

これで一応、YOUTUBEとアマゾンの埋め込みURLをそのままコピペすれば、それぞれに用意したクラスが適応されるようになるはずです。

他のアフェリリンクや独自のiframeを持っている場合は、if文の分岐を増やし「 }elseif(mb_strpos($result[0][$i], ‘XXXXXXX’)>0){」で「XXXXXXX」の部分をその項目で必ず発生する独自の文字列にしてあげればＯＫです。

というか、誰か効率のいい書き方を教えてください…。

[adsense4]

コメント

ホーム
トップ