Pocket

img要素の属性値変更で不具合

とある昼下がり、WordPressでの不具合相談をされた時の解決方法をメモ。何でも、WordPressのバージョンを4.1から(古い……)最新のバージョンにアップしたらJavaScriptで作っていた画像切り替えのコンテンツが動かなくなったとの事。サムネイルがあって、クリックするとメインの画像が切り替わるというよくあるコンテンツなのだが、動作を見てみても特にコンソールなどにエラーが出ているわけでもなく、ただただメイン画像が切り替わらない。ということで調査を開始。

srcset属性

原因はすぐ見つかりました。サムネイルをクリックすると、メイン画像のsrc属性の値が切り替わるのですが、WordPress4.4 Cliffordからレスポンシブイメージということで実装されたsrcset属性の値を参照しており、この値の切り替えをJavaScriptが行っていなかったのが原因でした。

srcset属性は、HTML5から追加された属性で画面の幅によって使用する画像を切り替えることができるものです。Retina対応としてよく話題にあがるやつです。(MDN:srcset属性の設定例参照

当然、JavaScriptのプログラムを修正する話になるのですが、どうやらどこからか持ってきたライブラリを使っているらしく、解読しなければいけない。ということで取り急ぎ、srcset属性を無効化(削除)するという方向になりました。

フィルターフック:wp_calculate_image_srcset_meta

大抵この辺りはちゃんとフックポイントが準備されてあると見越して調べたらありました。フィルターフック「wp_calculate_image_srcset_meta」が。こういうのをちゃんと準備しているがWordPressってステキ。このフックポイントを使って、srcset属性を無効化します。テーマのfunctions.phpに以下の記述を追加しました。

これだけで済みます。これを追記して、img要素を確認してみると…

srcset属性が無効化(削除)された!\(^o^)/
JavaScriptも元の動作を取り戻しました。しかしそうだよな、srcset属性が増えたということはJavaScriptで画像の処理を行うようなプログラムを組む際に注意する点が増えたということだわな。WordPress以外でも気をつけなければいけない。これは良い勉強になった。