凭借所有主要主题功能降落在WordPress 6.6中,很容易忽略一些较小的寿命增强功能。其中之一是 自定义纵横比支持 通过theme.json

在6.6之前,您必须依靠WordPress定义的宽高比或围绕这些设计限制来使用 自定义图像尺寸(更适当地用于定义图像分辨率)。

现在,您可以注册所需的任何纵横比,并且在理性之内按照自己的意愿进行数量。继续学习如何添加它们。

目录

  1. 挖掘纵横比
  2. 注册自定义纵横比
  3. 禁用默认长宽比
  4. 只有几件事

挖掘纵横比

那么,纵横比到底是多少呢?这是图像的宽度和高度或所应用的任何元素之间的比率。例如,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 sl 使用。例如,用于纵横比的sl。3/43-4

注册自定义纵横比

如果您的最新主题展示了两个新的宽高比:2:1(超宽)和21:9(电影)?在6.6中,现在您可以将其定义theme.json

这是什么2:1纵横比将其应用于邮政为特色图像块时看起来像:

WordPress post editor showing a wide-aligned featured image. An aspect ratio of 2:1 is selected in the sidebar controls.

WordPress 6.6确实有一些局限性。目前,您只能为三个块设置长宽比:

  • 图像
  • 邮政特色图像
  • 覆盖

让我们尝试添加2:121: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.defaultAspectRatiosfalse

在上面的示例中构建,看看将其添加到您的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中看到您的自定义长宽比预设。

只有几件事

这可能是我写过的最短教程之一。这个相当简单的功能并没有太多解释,但是为您提供了以前不存在的太多设计控制。一个小的增强?或许。但是我知道我自己需要很长时间。

有一个最后的警告:现在,当您以宽或完全对齐方式使用图像块时,您无法设置纵横比。这 公开票 应该在将来的版本中解决这个问题。现在,这只是图像块的问题。您可以在封面中设置所需的任何纵横比,并设有图像块,无论对齐方式如何。

道具 @玛丽鲍姆@韦尔奇 用于反馈和审查此帖子。

By zhuon

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注