WordPress4.4でhttpsサイトの画像が表示されなくなったら

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アクセスしても正しくサムネイルが表示できるようになりました。