WordPress 6.7で画像が小さく表示される不具合の原因と解決方法
WordPress 6.7で遅延読み込み画像に自動サイズ設定がされるようになりましたが、これとChrome等のユーザーエージェントスタイルが競合し、画像が幅300px、高さ150pxで表示されてしまう不具合が報告されています。この記事では、その原因と対処法をまとめます。
WordPress 6.7 で画像が小さく表示されてしまう不具合の原因
WordPress 6.7では、遅延読み込み画像に対してsizes属性の先頭にautoが自動的に追加される仕様が導入されました。この仕様は、wp-includes/media.php に新たに追加された関数 wp_img_tag_add_auto_sizes によって実現されています。
この変更により、ブラウザが適切な画像サイズを自動的に計算し、レスポンシブ画像の表示を最適化することを目的としています。しかし、Chrome や Edge などのブラウザでは、以下のユーザーエージェントスタイルが適用される仕様があります。
img:is([sizes="auto" i], [sizes^="auto," i]) {
contain: size !important;
contain-intrinsic-size: 300px 150px;
}このスタイルにより、sizes 属性の先頭に auto が含まれる画像は、幅300px、高さ150pxで表示されるという制約が発生します。その結果、意図しない小さいサイズで画像が表示されてしまう不具合が起きています。
この問題は、WordPress側の新機能とブラウザのスタイルが予期せず干渉したことで発生していると考えられます。
画像が小さく表示されてしまう不具合への対処法
WordPressコアがこの問題に対応する修正を提供するまでの間、以下のコードを利用することで、この不具合を回避できます。このコードは、sizes属性からautoを削除することで、ブラウザのユーザーエージェントスタイルによる干渉を防ぎます。
以下のコードを Code Snippets のようなプラグインに設定するか、テーマのfunctions.phpに追加してください。
add_filter(
'wp_content_img_tag',
static function ( $image ) {
return str_replace( 'sizes="auto, ', ' sizes="', $image );
}
);
add_filter(
'wp_get_attachment_image_attributes',
static function ( $attr ) {
if ( isset( $attr['sizes'] ) ) {
$attr['sizes'] = preg_replace( '/^auto, /', '', $attr['sizes'] );
}
return $attr;
}
);このコードでは、wp_content_img_tag および wp_get_attachment_image_attributes のフィルターフックを使用して、HTML出力時に auto を削除しています。
ただしこの対処法は暫定的なものであり、将来的にWordPressコアやブラウザ側で修正が加えられる可能性があります。公式のアップデートが提供された際は、このコードを削除してください。また特定のテーマやプラグインによるカスタマイズが干渉する場合、このコードが期待通りに動作しない可能性があります。その際は、デバッグを行って調整してください。