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

WordPress4.4にアップデート後、Operaでhttps://www.riscascape.net/にアクセスすると今まで表示できていたサムネイル画像が表示されなくなりました。

症状確認

OperaやChromeでは画像が表示されないのを確認。
wordpress_responsiveimages_01_opera

原因はhttpsサイトなのにサムネイル画像だけhttpでアクセスしているため。
wordpress_responsiveimages_02

これはWordPressの設定でサイトアドレスをhttp://に設定しているので、画像参照先などの内部処理がhttp://になっているから。
wordpress_responsiveimages_03_wpsetting

でもEdgeやIE11では画像が表示されてる。Edge/IE11でアクセスすると画像参照先がhttps://になっている?アクセスするブラウザで挙動が違う?
wordpress_responsiveimages_04_edge

原因究明

まずEdge/IE11でアクセスした際のソースを見てみます。<img src>の参照先はHTTPS。これが普通。

Edge/IE11<div class="entry-thumb">
 <a href="/archives/3010" class="entry-image entry-image-link" title="No.87 渋谷区広尾 果匠正庵のあんずどら焼き">
  <img width="150" height="150"
   src="/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="/archives/3010" class="entry-image entry-image-link" title="No.87 渋谷区広尾 果匠正庵のあんずどら焼き">
  <img width="150" height="150"
   src="/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アクセスしても正しくサムネイルが表示できるようになりました。
wordpress_responsiveimages_05_opera

スポンサーリンク
レクタングル (大)

レクタングル (大)

コメント

  1. かつ より:

    WordPress4.4に更新すると、chromeで画像が表示されなくなるという、同じ現象に遭遇し解決策を探っているときに、こちらの記事にたどり着きました。
    wp-includes フォルダーにある function.php は行番号が5170まであり、何行目に記載されている1行を挿入したらいいのかわかりません。
    何行目にこのように入れるといいよ、function……(  ){    } の次の行に挿入すればいいよとか、この1行の挿入の仕方を初心者にもわかるようにご教示いただければとても助かるのですが。
    何回か試してみたのですが、そのたびに、サイトにアクセスできない状態になり、元に戻す、という作業を繰り返しました。
    何かとお忙しいとは思いますが、よろしくお願いいたします。

    • risca より:

      コメントありがとうございます。
      既にいろいろ試されたのですね。

      私が試したのはテーマのfunctions.phpファイルでした。/wp-includes/functions.php
      ファイルはWordPressの更新で上書きされるファイルなので変更しないという前提で書いた記事でしたので解説が不十分だったかもしれません。
      今試したところWordPressサイト直下のwp-config.phpファイルの再末尾に1行追加するだけで効果がありましたのでお試しいただけますか?