PC 雑記

WordPressテーマ「STINGER 5」でiframeを使うための応急処置

投稿日:

Stinger5iframe1

こんばんみ。

先日から導入したいと思っていたWordpressテーマ「STINGER 5」ですが、とりあえず応急処置を施して当ブログでも使えるようになりました!


はて、この「STINGER 5」はレスポンシブに対応したテーマで、ウィンドウ幅によって記事の幅が伸縮したりレイアウトが変化するようになっています。

Youtubeのプレイヤーを貼り付けた場合でもウインドウ幅に応じてプレイヤーごと伸縮されるように設定されているのですが、Youtubeのプレイヤーよりも小さなiframeタグを貼り付けた時にちょっと困った問題があります。

Amazonの商品リンクのようなwidthとheightが指定された小さなiframeを記事に複数貼り付けたい場合、本当は横に並べたいのに妙な空間が空いて縦に連なってしまいます。

と言うのも、どうやら記事中にiframeが貼られると正規表現か何かを使って<div class="youtube-container">〇〇</div>というタグで包んで伸縮できるようにしてあるようです。

クラス名からわかる通り、Youtubeのプレイヤーのサイズに合わせて作られている為、Youtubeのプレイヤーよりも小さなiframeを貼った場合でもプレイヤーと同じ面積を専有してしまうのです。

というわけで、自動でこのタグが追加されないように手を加えよう!ってことでテーマのファイルを物色。

検索していくと、「functions.php」の中に

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

という記述が。
ここでiframeにタグを追加しているようなので、これを…

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

こんな感じでコメントタグで無効化して自動でタグが追加されないようにしました。

これでひとまず応急処置はOKかな…?
ただし自動でレスポンシブ対応のタグが付かなくなったので、Youtubeなどのwidthが指定されたプレイヤーを記事に貼る場合は手動で<div class="youtube-container">〇〇</div>で包んであげる必要があります。
もちろん過去の記事でYoutubeを貼っていたらそれも要修正です…。

WordPressの管理画面から動画が貼られている記事を探しだすのは骨が折れそうなので、「Export to Text」というプラグインを使って今までの記事をcsvに書き出し、「Smooth CSV」というcsvエディタを使って動画が貼られている記事を検索してタグを置き換え、そして「csv importer」というプラグインを使ってWordpressに記事を戻しました。
自分はECの仕事をしているのでcsvで作業しましたが、もっと簡単な方法もあるのかも…。

自分がもっとphpや正規表現に詳しかったらYoutubeの記事が貼られた場合のみレスポンシブ化するタグを追加するようにできたかな?とか思ったけど、結局Youtube以外の動画とかを貼った時は対応できない訳ですし、どうやったらキチンとしたものにできるかわかりませんでした…。

とりあえずは動画を貼るときは手動でタグを調節します…ノ

-PC, 雑記

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

久しぶりにみなとみらいに夜景を撮りに行った話。

こんばんみ。 先日ゴールデンウィーク休暇を使って平日に横浜をぶらっとしてきました。

新居のデスク周り用に無印の棚を買った話。

こんばんみ。 新居用に無印良品のシェルフを買ってみました。

no image

個人的に旬なオンラインゲーム

こんばんみ。 Battle Field 4リリース以降、「これ!」っといったオンラインゲームに恵まれず(個人的にはね)、スカイリムなどのオフラインのPCゲームを中心に遊んでいましたが、ここ最近、ちょっ …

タブ同期機能で便利になったOpera使ってる?

こんばんみ。 トップシェアとは言えないものの、常に熱心な信者が存在するブラウザ「Opera」。 自分のネットサーフィンのお供に愛用しているこのブラウザですが、つい先日のアップデートでついにタブの同期機 …

Call of Duty:Advanced Warfareファーストインプレッション

こんばんみ。 もう続編は買わないだなんて言っていたCoDですが、結局新作の「Call of Duty:Advanced Warfare」買ってしまいました…。

広告

やましん
・神奈川在住
・音楽好き
・洋ゲー好き
・写真勉強中

WEB通販関係の仕事をしながら写真やデザインの勉強中です。
α7RIII・CONTAX G2・BESSA R2Mなどのカメラを愛用しています。
忙しくてやっていませんがPCの洋ゲーも好き。

コンタクトはこちらからどうぞ。
- SNS -
 Twitter
- PHOTO -
 Flickr
 GANREF
 PHOTOHITO