img要素の属性値変更で不具合
とある昼下がり、WordPressでの不具合相談をされた時の解決方法をメモ。何でも、WordPressのバージョンを4.1から（古い……）最新のバージョンにアップしたらJavaScriptで作っていた画像切り替えのコンテンツが動かなくなったとの事。サムネイルがあって、クリックするとメインの画像が切り替わるというよくあるコンテンツなのだが、動作を見てみても特にコンソールなどにエラーが出ているわけでもなく、ただただメイン画像が切り替わらない。ということで調査を開始。
srcset属性
原因はすぐ見つかりました。サムネイルをクリックすると、メイン画像のsrc属性の値が切り替わるのですが、WordPress4.4 Cliffordからレスポンシブイメージということで実装されたsrcset属性の値を参照しており、この値の切り替えをJavaScriptが行っていなかったのが原因でした。
<img width="1600" height="1066" src="http://vccw.dev/wp-content/uploads/2011/07/dsc20051220_173257_1191.jpg" class="attachment-twentyseventeen-featured-image size-twentyseventeen-featured-image wp-post-image" alt="Rusty Rail" srcset="http://vccw.dev/wp-content/uploads/2011/07/dsc20051220_173257_1191.jpg 1600w, http://vccw.dev/wp-content/uploads/2011/07/dsc20051220_173257_1191-300x200.jpg 300w, http://vccw.dev/wp-content/uploads/2011/07/dsc20051220_173257_1191-768x512.jpg 768w, http://vccw.dev/wp-content/uploads/2011/07/dsc20051220_173257_1191-1024x682.jpg 1024w" sizes="100vw">
srcset属性は、HTML5から追加された属性で画面の幅によって使用する画像を切り替えることができるものです。Retina対応としてよく話題にあがるやつです。（MDN:srcset属性の設定例参照）
当然、JavaScriptのプログラムを修正する話になるのですが、どうやらどこからか持ってきたライブラリを使っているらしく、解読しなければいけない。ということで取り急ぎ、srcset属性を無効化（削除）するという方向になりました。
フィルターフック：wp_calculate_image_srcset_meta
大抵この辺りはちゃんとフックポイントが準備されてあると見越して調べたらありました。フィルターフック「wp_calculate_image_srcset_meta」が。こういうのをちゃんと準備しているがWordPressってステキ。このフックポイントを使って、srcset属性を無効化します。テーマのfunctions.phpに以下の記述を追加しました。
add_filter( 'wp_calculate_image_srcset_meta', '__return_null' );
これだけで済みます。これを追記して、img要素を確認してみると…
<img width="1600" height="1066" src="http://vccw.dev/wp-content/uploads/2011/07/dsc20051220_173257_1191.jpg" class="attachment-twentyseventeen-featured-image size-twentyseventeen-featured-image wp-post-image" alt="Rusty Rail" sizes="100vw">
srcset属性が無効化（削除）された！＼(^o^)／
JavaScriptも元の動作を取り戻しました。しかしそうだよな、srcset属性が増えたということはJavaScriptで画像の処理を行うようなプログラムを組む際に注意する点が増えたということだわな。WordPress以外でも気をつけなければいけない。これは良い勉強になった。
