コンテンツ幅設定とレスポンシブイメージの検証

コンテンツ幅設定とレスポンシブイメージの検証

全体の幅では無く、サイドバーなどを除外したコンテンツエリアの幅を指定します。
WP4系までは、レスポンシブイメージやembedに影響してくるので設定しておきましょう。
WP5.2の場合、レスポンシブイメージに影響しなくなったようです。embedへの影響は未検証です。

設定サンプル

800の箇所をそれぞれのテーマに合わせて変更してください。

function wpqw_content_width() {
	$GLOBALS['content_width'] = apply_filters( 'wpqw_content_width', 800 );
}
add_action( 'after_setup_theme', 'wpqw_content_width', 0 );

レスポンシブイメージの検証

設定 > メディアで設定したサイズ
サムネイル : 300 x 200
中サイズ : 600 x 400
大サイズ : 1200 x 800
アップロードする画像サイズ : 2400 x 1600

WP5(ブロックエディター)の場合

生成されるファイル
photo-300×200.jpg
photo-600×400.jpg
photo-1200×800.jpg

出力されたhtml (class/altは外してます)

<img src="https://example.com/wp/wp-content/uploads/photo-1200x800.jpg"
	srcset="https://example.com/wp/wp-content/uploads/photo-1200x800.jpg 1200w,
			https://example.com/wp/wp-content/uploads/photo-300x200.jpg 300w,
			https://example.com/wp/wp-content/uploads/photo-600x400.jpg 600w"
	sizes="(max-width: 1200px) 100vw, 1200px">

WP4の場合

生成されるファイル
photo-300×200.jpg
photo-600×400.jpg
photo-768×512.jpg
photo-1200×800.jpg

出力されたhtml (class/altは外してます)

<img src="https://example.com/wp/wp-content/uploads/photo-1200x800.jpg" width="800" height="533"
	srcset="https://example.com/wp/wp-content/uploads/photo-1200x800.jpg 1200w,
			https://example.com/wp/wp-content/uploads/photo-300x200.jpg 300w,
			https://example.com/wp/wp-content/uploads/photo-600x400.jpg 600w,
			https://example.com/wp/wp-content/uploads/photo-768x512.jpg 768w"
		sizes="(max-width: 800px) 100vw, 800px">

幅768px画像の生成を止める方法

update_option( 'medium_large_size_w', 0 );

srcset / sizes属性を止める方法

WP4 / WP5共通
この場合、WP4の768px画像の生成も止まります。

add_filter( 'wp_calculate_image_srcset', '__return_false' );

Codex

まとめ

という事で、WP5ではコンテンツ幅設定の影響をレスポンシブイメージが受けなくなりました。
しかし、テーマチェックプラグインで必須となるため、念の為に設定しておきましょう。