WordPress 4.4 にアップデートしたら jQuery で操作している画像が表示されない（srcset）

2015年12月28日

数日前にあるサイトの WordPress を 4.4 にアップデートしたら、サムネイルをクリックすると画像が変わるはずなのに変わらないとの報告がありました。

調べてみると、jQuery を使って対応するアイキャッチ画像の src 属性を取得して、それを表示する画像の src 属性に設定するというような処理になっていて、問題なく src 属性は変更されているのに画像は変わらない状態になっていました。

以下がその jQuery の処理ですが、この処理自体に問題はありませんでした。

$('.xxxx img').css('display', 'none').attr('src', target.find('img').attr('src')).fadeIn(700);

更に調べてみると、画像の src 属性の他に、srcset 属性と言うのが追加されているのがわかり、これが原因でした。

WordPress 4.4 から導入された機能のようで、the_content フィルタを利用して、img に srcset と sizes が追加されるレスポンシブイメージ対応の機能のようです。（知りませんでした。。。）

問題の画像要素のタグは以下のようになって jQuery で指定した src 属性と、新しい機能により追加された srcset が異なっていました。

<img class="attachment-works_m size-works_m wp-post-image" width="300" height="450" sizes="(max-width: 300px) 100vw, 300px" srcset="http://xxxx/en/wp-content/uploads/sites/2/2014/08/xxxxx-360x540.jpg 360w, http://xxxxx/en/wp-content/uploads/sites/2/2014/08/xxxxx-300x450.jpg 300w, http://xxxxx/en/wp-content/uploads/sites/2/2014/08/xxxxx-220x330.jpg 220w, http://xxxxx/en/wp-content/uploads/sites/2/2014/08/xxxxx-190x285.jpg 190w, http://xxxxx/en/wp-content/uploads/sites/2/2014/08/xxxxx.jpg 400w" alt="peace" src="http://xxxxx/en/wp-content/uploads/sites/2/2014/02/yyyyyy-300x450.jpg" style="opacity: 1;">

検索してみたところ、srcset を追加する機能（レスポンシブイメージ）を無効にする方法があったので、取り敢えずその方法を利用して問題なく画像が表示できるようになりました。

srcset を追加する機能（レスポンシブイメージ）を無効にする方法

以下を functions.php に記述するだけです。

function disable_srcset( $sources ) {
    return false;
}
add_filter( 'wp_calculate_image_srcset', 'disable_srcset' );

但し、これでは根本的な解決にはならないと思ったので、以下を試してみました。

別の解決方法

上記の方法でレスポンシブイメージを無効にしても解決しましたが、jQuery の記述で、src 属性を変更するのではなく、srcset 属性も変更するように書き換えても問題なく表示されるのが確認できました。（src 属性と srcset 属性の両方を書き換えるように変更）

$('.xxxx img').css('display', 'none').attr('src', target.find('img').attr('src')).fadeIn(700);

上記の src の部分以外に srcset も変更（srcset のみの変更では、ブラウザによりうまく表示されない場合がありました）。

$('.xxxx img').css('display', 'none').attr('src', target.find('img').attr('src')).attr('srcset', target.find('img').attr('srcset')).fadeIn(700);

参考にさせていただいたサイト

How do I disable responsive images in WP 4.4?
Is it possible to disable the responsive image ‘srcset’ on WordPress 4.4?
Responsive Images in WordPress 4.4

Web Design Leaves