【WordPress】画像の特定サイズのsrcset要素だけ無効化・削除する方法
2022年7月17日
WordPress 6.0.1 で画像に付随する特定サイズの srcset 要素のみ出力を抑止（削除）するコードを共有しておきます。
ここでは、幅が "768" の srcset 要素のみを削除するコードを例示しておきます。各自、必要に応じて追記・更新してください。
function filter_image_srcset( $sources, $size_array, $image_src, $image_meta, $attachment_id ) {
if ( isset( $sources[768] ) ) {
unset( $sources[768] );
}
return $sources;
}
add_filter( 'wp_calculate_image_srcset', 'filter_image_srcset', 10, 5);
Code language: PHP (php)このフィルターフックの詳細仕様については、巻末リンク先の media.php 内 wp_calculate_image_srcset() 関数のソースを参照のこと。
引数として渡される $sources は連想配列で、画像ファイルの URL が格納されています。応用すれば特定ファイル名、特定拡張子の画像のみ srcset 要素を削除することもできるでしょう。
なお WordPress 側の仕様により、レスポンシブイメージのバリエーションが1枚しかない場合は、その画像の srcset・sizes 要素は出力されません。
別記事でも触れますが、WordPress ではイメージサイズ名 "medium_large" のみ特別扱いとなっており、イメージサイズの削除・リサイズが困難です。
"medium_large" の初期値は横幅 768px と写真愛好家には扱いやすいサイズですが、WordPress テーマの設計によってはこれが原因でブラウザ上で画像がぼやけるなど、問題を引き起こすケースもあります。
これに限らず、srcset 要素を細かく制御したいのに諸事情により WordPress のイメージサイズの削除が許されない場合などで、今回のコードが役立つはずです。
たったこれだけのコードですが、2022年7月現在、ペペっと検索しても日英どちらでも出てこなかったので書いておきました。
参考資料：