WordPress 6.6 带来了许多重大的主题功能，很容易忽略一些较小的体验性改进。其中之一就是通过 theme.json 实现的自定义宽高比支持。

在 6.6 之前，你必须依赖 WordPress 定义的宽高比，或者使用自定义图片尺寸（这更适合用于定义图片分辨率）来绕过这些设计限制。

现在，你可以注册任何你需要的宽高比——并且可以注册任意多个（在合理范围内）。接下来学习如何添加它们。

深入了解宽高比

那么，宽高比到底是什么？它是图片或应用该比例的任何元素的宽度与高度之比。例如，1:1 是正方形，3:4 是现代肖像比例。从美术到商业摄影，各个领域都确定了一些行业标准的宽高比，WordPress 默认涵盖了许多对网页设计和发布最有用的比例。

看看宽高比的默认 theme.json 定义：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"dimensions": {
			"aspectRatio": true,
			"aspectRatios": [
				{
					"name": "Square - 1:1",
					"slug": "square",
					"ratio": "1"
				},
				{
					"name": "Standard - 4:3",
					"slug": "4-3",
					"ratio": "4/3"
				},
				{
					"name": "Portrait - 3:4",
					"slug": "3-4",
					"ratio": "3/4"
				},
				{
					"name": "Classic - 3:2",
					"slug": "3-2",
					"ratio": "3/2"
				},
				{
					"name": "Classic Portrait - 2:3",
					"slug": "2-3",
					"ratio": "2/3"
				},
				{
					"name": "Wide - 16:9",
					"slug": "16-9",
					"ratio": "16/9"
				},
				{
					"name": "Tall - 9:16",
					"slug": "9-16",
					"ratio": "9/16"
				}
			]
			"defaultAspectRatios": true
		}
	}
}

在上面的代码中，宽高比由 settings.dimensions 下的三个属性控制：

• aspectRatio: 这个布尔值控制 UI 中是否显示宽高比控件，默认为 true。
• aspectRatios: 这个对象数组定义了宽高比预设：
  • name: UI 中宽高比的可翻译标签。
  • slug: 这个唯一的键定义了预设，可以包含字母数字字符、连字符或下划线（例如 3-4）。
  • ratio: 宽高比的 CSS 值（例如 3/4）。
• defaultAspectRatios: 这个布尔值启用或禁用核心定义的宽高比，默认为 true。

通过 settings.dimensions.aspectRatios 定义自定义宽高比预设，会将它们添加到用户的 UI 下拉列表中，并使它们可以在你的主题模式和模板中使用。

在为你的 slug 命名时，我建议你遵循默认 WordPress slug 使用的约定。例如，宽高比 3/4 的 slug 应该是 3-4。

注册自定义宽高比

如果你的最新主题需要展示两个新的宽高比：2:1（超宽）和 21:9（影院）怎么办？在 6.6 中，你现在可以在 theme.json 中定义这些。

将 2:1 宽高比应用到文章特色图片块时的效果如下：

WordPress 6.6 确实有一些限制。目前，你只能为三个块设置宽高比：

• 图片
• 文章特色图片
• 封面

让我们尝试添加 2:1 和 21:9 宽高比。将此代码添加到你的 theme.json 文件中：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"dimensions": {
			"aspectRatios": [
				{
					"name": "Extra Wide - 2:1",
					"slug": "2-1",
					"ratio": "2/1"
				},
				{
					"name": "Cinema - 21:9",
					"slug": "21-9",
					"ratio": "21/9"
				}
			]
		}
	}
}

禁用默认宽高比

有时，你可能希望将用户限制为仅使用你的自定义宽高比。好消息！禁用核心预设非常快速和简单。只需将 settings.dimensions.defaultAspectRatios 设置为 false。

基于上面的例子，看看当你将此添加到你的 theme.json 文件中会发生什么：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"dimensions": {
			"aspectRatios": [
				{
					"name": "Extra Wide - 2:1",
					"slug": "2-1",
					"ratio": "2/1"
				},
				{
					"name": "Cinema - 21:9",
					"slug": "21-9",
					"ratio": "21/9"
				}
			],
			"defaultAspectRatios": false
		}
	}
}

之后，你应该在 UI 中只看到你的自定义宽高比预设。

最后几点说明

这可能是我写过的最短的教程之一。这个相当直接的功能不需要太多解释——但它给了你以前不存在的设计控制权。一个小改进？也许吧。但我知道我自己已经需要它很长时间了。

还有一个最后的注意事项：目前，当你在宽对齐或全宽对齐模式下使用图片块时，无法设置宽高比。这个未解决的工单应该在未来的版本中解决这个问题。现在，这只是图片块的问题；你可以在封面块和特色图片块中设置任何你想要的宽高比，无论对齐方式如何。