全体の幅では無く、サイドバーなどを除外したコンテンツエリアの幅を指定します。
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ではコンテンツ幅設定の影響をレスポンシブイメージが受けなくなりました。
しかし、テーマチェックプラグインで必須となるため、念の為に設定しておきましょう。