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になっています。

<img class=" wp-image-1144 alignleft" src="http://ドメイン.com/wp-content/uploads/2015/10/画像名.jpg" alt="画像名[1]" width="390" height="292" srcset="https://ドメイン.com/wp-content/uploads/2015/10/画像名.jpg 300w, https://ドメイン.com/wp-content/uploads/2015/10/画像名.jpg 768w, https://ドメイン.com/wp-content/uploads/2015/10/画像名.jpg 660w, https://ドメイン.com/wp-content/uploads/2015/10/画像名.jpg 192w" sizes="(max-width: 390px) 100vw, 390px">

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

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

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

// Webサイト全体の画像をResponsive images機能の対象から外す
add_filter( 'wp_calculate_image_srcset', '__return_false' );

// 記事本文、the_content()関数が出力する画像のみ無効化する場合はこちら
remove_filter( 'the_content', 'wp_make_content_images_responsive' );

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

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