已配置theme.json的contentSize与wideSize，布局仍为全宽的技术问题

问题详情 #

我已在theme.json中添加layout对象及contentSize:620px、wideSize:1000px属性，但前端和编辑器中的布局仍为全宽。在编辑器的布局标签页可查看已设置的值，但该设置在编辑器及前端均未生效。

相关theme.json代码如下：

{
  "$schema": "https://schemas.wp.org/wp/6.2/theme.json",
  "settings": {
    "appearanceTools": false,
    "layout": {
      "contentSize": "620px",
      "wideSize": "1000px"
    }
  }
}

解决方法 #

• 开启Appearance Tools
  当前设置的"appearanceTools": false会禁用WordPress的布局样式注入功能，必须将其改为true，theme.json的布局设置才会生成对应的CSS规则：

  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "620px",
      "wideSize": "1000px"
    }
  }
  

• 检查主题模板钩子完整性
  确保主题的模板文件（如index.php、single.php）中包含wp_body_open()、wp_footer()，并且正确调用了get_header()和get_footer()——这些钩子是WordPress加载theme.json样式的必要条件。

• 清除所有缓存
  本地开发环境的浏览器缓存、WordPress缓存插件（如有）、本地服务器缓存都可能导致修改不生效，修改后强制刷新页面（Ctrl+F5）或手动清除缓存再测试。

• 排查CSS冲突
  用浏览器开发者工具检查页面元素的宽度样式，确认是否有主题或插件的自定义CSS覆盖了theme.json的布局规则，若有可针对性调整CSS优先级。

• 确认块支持布局属性
  部分自定义块可能未声明支持布局设置，优先使用WordPress核心块测试布局是否生效；如果是自定义块，需要在块注册代码中添加supports: { layout: true }。

内容的提问来源于stack exchange，提问作者Huzaifa Qayyum