凭借所有主要主题功能降落在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 sl 使用。例如,用于纵横比的sl。3/4
会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中看到您的自定义长宽比预设。
只有几件事
这可能是我写过的最短教程之一。这个相当简单的功能并没有太多解释,但是为您提供了以前不存在的太多设计控制。一个小的增强?或许。但是我知道我自己需要很长时间。
有一个最后的警告:现在,当您以宽或完全对齐方式使用图像块时,您无法设置纵横比。这 公开票 应该在将来的版本中解决这个问题。现在,这只是图像块的问题。您可以在封面中设置所需的任何纵横比,并设有图像块,无论对齐方式如何。