WordPress4.4にアップデート後、Operaでhttps://www.riscascape.net/にアクセスすると今まで表示できていたサムネイル画像が表示されなくなりました。
症状確認
OperaやChromeでは画像が表示されないのを確認。
原因はhttpsサイトなのにサムネイル画像だけhttpでアクセスしているため。
これはWordPressの設定でサイトアドレスをhttp://に設定しているので、画像参照先などの内部処理がhttp://になっているから。
でもEdgeやIE11では画像が表示されてる。Edge/IE11でアクセスすると画像参照先がhttps://になっている?アクセスするブラウザで挙動が違う?
原因究明
まずEdge/IE11でアクセスした際のソースを見てみます。<img src>の参照先はHTTPS。これが普通。
Edge/IE11<div class="entry-thumb">
<a href="https://www.riscascape.net/archives/3010" class="entry-image entry-image-link" title="No.87 渋谷区広尾 果匠正庵のあんずどら焼き">
<img width="150" height="150"
src="https://www.riscascape.net/wp-content/uploads/2015/12/3_kasho-showan_ananzudorayaki-150x150.jpg"
class="entry-thumnail wp-post-image" alt="No.87 渋谷区広尾 果匠正庵のあんずどら焼き" />
</a>
</div><!-- /.entry-thumb -->
次にOpera/Chromeのソース。こちらも<img src>の参照先はHTTPSでした。
というか記述量が明らかにEdge/IE11より多いし、srcsetなんて見たことのない属性があるぞ。そしてsrcsetの参照先がHTTPになってる!
Opera/Chrome<div class="entry-thumb">
<a href="https://www.riscascape.net/archives/3010" class="entry-image entry-image-link" title="No.87 渋谷区広尾 果匠正庵のあんずどら焼き">
<img width="150" height="150"
src="https://www.riscascape.net/wp-content/uploads/2015/12/3_kasho-showan_ananzudorayaki-150x150.jpg"
class="entry-thumnail wp-post-image" alt="No.87 渋谷区広尾 果匠正庵のあんずどら焼き"
srcset="http://www.riscascape.net/wp-content/uploads/2015/12/3_kasho-showan_ananzudorayaki-100x100.jpg 100w,
http://www.riscascape.net/wp-content/uploads/2015/12/3_kasho-showan_ananzudorayaki-150x150.jpg 150w"
sizes="(max-width: 150px) 100vw, 150px" />
</a>
</div><!-- /.entry-thumb -->
どうやらsrcsetが悪さしているのは間違いないみたい。
srcsetの対策
srcsetはHTML5で実装されたレスポンシブデザイン用の設定で、画面サイズに合わせて画像を指定できる属性。WordPress4.4からテーマに関係なくレスポンシブデザインに対応したようで、Opera/Chromeはすでにsrcset属性に対応済らしいので原因はたぶんコレ。
■レスポンシブ・イメージのWordPressへの実装と4.4
http://www.slideshare.net/torumiki/wordpress44
WordPressの新機能だと確定できれば、あとはテーマのfunctions.php または wp-config.phpでなんとかできるはず。下記サイトを参考にテーマのfunctions.phpに1行追加して解決しました。
■WordPressのResponsive Imagesを無効化する
http://increment-log.com/wordpress-disabling-responsive-images/
functions.phpadd_filter( 'wp_calculate_image_srcset', '__return_false' );
対策成功
OperaでHTTPSアクセスしても正しくサムネイルが表示できるようになりました。
コメント
WordPress4.4に更新すると、chromeで画像が表示されなくなるという、同じ現象に遭遇し解決策を探っているときに、こちらの記事にたどり着きました。
wp-includes フォルダーにある function.php は行番号が5170まであり、何行目に記載されている1行を挿入したらいいのかわかりません。
何行目にこのように入れるといいよ、function……( ){ } の次の行に挿入すればいいよとか、この1行の挿入の仕方を初心者にもわかるようにご教示いただければとても助かるのですが。
何回か試してみたのですが、そのたびに、サイトにアクセスできない状態になり、元に戻す、という作業を繰り返しました。
何かとお忙しいとは思いますが、よろしくお願いいたします。
コメントありがとうございます。
既にいろいろ試されたのですね。
私が試したのはテーマのfunctions.phpファイルでした。/wp-includes/functions.php
ファイルはWordPressの更新で上書きされるファイルなので変更しないという前提で書いた記事でしたので解説が不十分だったかもしれません。
今試したところWordPressサイト直下のwp-config.phpファイルの再末尾に1行追加するだけで効果がありましたのでお試しいただけますか?