theme.json 中的 settings.layout 属性是一个存储布局相关设置的对象，您可以对其进行配置。目前，它用于设置“内容”和“宽屏”宽度，但未来也可用于其他设置。

在本文档中，您将了解 layout 属性的用途以及如何在主题中使用它。

布局设置

layout 是一个对象，直接嵌套在 theme.json 中的顶级 settings 属性内。在该对象中，您可以定义两个设置：

  • contentSize：用于定义内容默认宽度的有效 CSS 长度值。它通常用于控制页面中帖子内容及相关区域的宽度。
  • wideSize: 用于定义默认宽屏对齐宽度的有效 CSS 长度值，该宽度通常介于内容大小和完整视口宽度之间。

查看 theme.json 文件中 layout 属性的上下文及其默认值：

{
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "",
			"wideSize": ""
		}
	}
}

内容大小

settings.layout.contentSize 属性主要用于定义网站内容区域的宽度。将其视为网站的默认宽度。您可以通过对块应用“宽屏”（如下所示）或“全宽”来突破此限制。内容宽度仅仅是基础。

在几乎任何设计中，您都希望将此宽度限制为易于阅读的某个值，特别是如果内容包含文本的话。这是一个需要您自行确定的值，但一个很好的经验法则是每行应有 45-75 个字符（尽管一些指南对数字范围略有不同）。当然，您的默认字体族和字体大小是确定此问题的关键部分。

尝试在 theme.json 文件中配置内容大小：

{
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "40rem"
		}
	}
}

如果您在站点编辑器中打开模板，可以使用它来定义各种块的布局。在下方的截图中，您可以看到“帖子内容”块在布局选项卡下的内部块使用内容宽度选项已选中：

WordPress 帖子编辑器，选中了“帖子内容”块，显示其内部内容限制在内容宽度内。

此设置的作用是告诉 WordPress，任何嵌套在“帖子内容”块内的块都应设置为 theme.json 中为 settings.layout.contentSize 定义的 40rem 值。

宽屏大小

settings.layout.wideSize 属性定义了“宽屏”块的宽度。为了有用，宽屏块必须嵌套在一个告诉 WordPress 其内部块应限制在“内容”大小的块内。宽对齐块旨在从其父块中“突破出来”。

并非每个主题都会受益于具有宽屏大小。根据设计，主题的布局可能根本没有额外的空间让块突破其容器。在这些情况下，您不需要设置此值。

对于可以容纳宽屏块的主题设计（通常是无边栏设计的典型特征），您将希望将此设置为大于 settings.layout.contentWidth 的值。但它不应拉伸到全屏宽度（例如，100vw）。WordPress 有一个单独的全宽设置，您可以使用它来实现此目的。

尝试向您的 theme.json 文件添加自定义 settings.layout.wideSize（请记住，您需要设置内容大小才能使这有用）：

{
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "40rem",
			"wideSize": "64rem"
		}
	}
}

现在，在 WordPress 管理后台打开您的站点编辑器并编辑模板。首先，添加一个组块，并启用内部块使用内容宽度选项。然后，在其内放置另一个块，并选择宽屏宽度选项。

在下方的截图中，您可以看到嵌套在组块内的“帖子特色图片”块。它突破了其父容器，但其他与帖子相关的块限制在内容宽度内：

WordPress 站点编辑器，选中了“帖子特色图片”块并设置为“宽屏宽度”。