WordPressでGetty Imagesの写真等のiframeが公開後に表示されない時の対処法

   

 ウェブサイトを運営していると、著作権が厳しい有名人の写真を使用したい場合が多々あるかと思いますが、Getty Imagesの写真のコードを引っ張ってきても投稿画面では出るのに公開したら真っ白で写真が表示されないなんて事があります。

Getty images“に限らず、音楽ソフトの”Spotify“なんかも同じで、構造としては写真を直接貼るのではなく、iframeタグを使用してGetty images側の写真をWordPress等のウェブサイトで表示させる、要は著作権が厳しいものを同意のもとで利用させてもらう訳です。

今回はそのiframeがうまく表示されない時の対処法を説明します。

Sponsored Link

Getty Imagesなどのiframeが表示されない症状と原因

私はプログラミングが得意な訳ではないので、恥ずかしながらこの症状を解決するのにかなり苦戦してしまいました。

では簡単に症状を説明していきます。

ここで調べたい名前を入力して調べていきます。

写真がずらっと並ぶ中から好きな画像を選び、下の”</>”マークをクリックすると右側の画面のようになりiframeタグが出てきます。

WordPressの場合、このタグをテキスト画面で貼付ければ完了です。しかし、ここで表示されたからといって、公開後に表示されるとは限りません。

私の他サイト(海外テーマ)では問題なく表示されているのですが、このMug8 Blogだけがうまく表示されなかったのです。

そこでまず思いつく理由としては、テーマの違いぐらいなのでテーマを現在使用している” Giraffe“から”Simplicity“に変更して状況を見てみました。どちらのWordpressの無料テーマとしては人気があるものなので、何かと手がかりが掴めるかと思ったのですが、simplicityでも表示されず。

そこで、検索能力の低い私が何とか調べてみるものの、完全に一致する検索結果には辿り着けずプログラミングの質問サイト”teratail“で先輩方にでも頼ってみようかと思ったが、思い止まりもう少し調べてみる事に。

出てこないってことは余りにも簡単な理由なんじゃないか・・・・と…..!!!!

問題部分の要素詳細を比較

まずは、表示されないサイトの要素

表示されるサイトの要素

よくよく目を凝らして見比べてみると

<div style=”overflow:hidden;position:relative;height:0;padding:75.084175% 0 0 0;width:100%;”>
<div class=”youtube-container”>
<iframe src=”//embed.gettyimages.com/embed/・・・・

表示されない方にはyoutube-containerというタグが入っているのが分かります。

こいつが原因だったか。。。。と嬉しくも、あまりに簡単な理由で少し恥ずかしい。

Stinger系のテーマの”Giraffe”も、”Simplicity”も、iframeタグが貼られると公開時に自動で youtube-container タグで囲む仕様になっている為不具合が出ているようです。

こいつが、youtube以外のiframe を貼付けた際に悪さをしている原因です。

そんなの知ってるよ!って言われそうですが、始めに「Getty imeges 写真 表示されない」みたいなロングテールで調べていたので全く分からなかったのです。。。

Getty Imagesなどのiframeが表示されない時の対処法

iframeのレスポンシブ対応として、youtube-containerがある訳ですが、こいつを解除していく必要があります。

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レスポンシブを無効化する事で、今まで貼ったyoutubeなどのiframeがレスポンシブ対応しなくなる場合があるので要確認です。

こんな感じでgetty images からiframeで写真を貼付ける事が出来るようになりました。

まとめ

このサイトの場合だと、youtube-container タグを無効化しても大きな問題がなかったので、今回はこのような対応をしましたが、もしかしたら両方を活かす対処法があるのかもしれません。まだまだ、勉強が必要なようです。

 

 

 - Webサービス, Webデザイン, WordPress