WordPressのResponsive Imagesを無効化する

WordPress4.4、ついに来ましたね。来ちゃいましたね。

新テーマ「Twenty Sixteen」がリリースされてたり、WordPressの記事を埋め込めるようになっていたり。良さげな新機能が増えています。開発者向けのアップデートとしては、REST APIプラグインの一部がコアプログラムに組み込まれたようです。WordPressの可能性がどんどん広がっている感じがしますね。

そんなわけで、当ブログも4.4にアップデートしました。一部プラグインで警告表示が出る以外何も問題は起きなかったのですが、クライアントの方のWelcartを使ったWordPressサイトが崩れてしまいました。

新機能「Responsive Images」がWelcartのSSL設定と相性悪い

Welcartを使ったECサイトを4.4にアップデートすると、なぜか一部画像が表示されなかったんです。調べてみると新たに追加された「Responsive Images」が原因でした。

そしてどうやら作成したテーマのコードに問題があるわけでなく、WelcartのSSL設定との相性が悪かったようです。

Responsive ImagesはレスポンシブWebデザインを考慮した機能で、<img>タグにsrcset属性を付けてデバイスの解像度ごとに表示する画像を変更できるようにするものです。

これがどうやらWelcartのSSL設定を有効化していて、かつカートページや会員ページのみ(共有SSLなどで)SSL暗号化している場合に、画像が一部表示されない不具合が発生する模様。実際の症状としては以下のように、画像表示タグのsrcsetで指定した画像のスキームがhttpsになっています。

これではWebサイト全体をSSL化していなければ読み込めるハズがありません。

Responsive Imagesを無効化して応急処置

応急処置としてResponsive Imagesを無効化することにしました。以下の1行をfunctions.phpに記述するだけで大丈夫です。

これで何とか画像読み込みに失敗するエラーを防げました。

WordPress側かWelcart側か、どちらが対応するべき案件なのか現状断言できませんが、ひとまずこれで凌ぐことにします。

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

  • まさお

    ありがとうございました。原因がわからず、納期も迫り、涙目で作業していた時にこの記事を教えていただき、解決にいたりました。うれしいです。

    • まさおさん
      こちらこそ、コメントありがとうございますm(_ _)m

      自分もこの機能が実装されたとき、原因が中々分からない状況で困っておりました;
      お役に立てたようで何よりです!

トラックバック

    Trackback: https://increment-log.com/wordpress-disabling-responsive-images/trackback/