自定义

这个设置.自定义属性在中的其他设置中是唯一的主题.json。顾名思义,它是一个自定义属性。这意味着您可以决定如何使用它。本质上,它提供了一种创建CSS自定义属性的方法,您可能需要在主题的其他地方使用这些属性。

在本文档中,您将了解习俗属性是for,以及如何在主题中使用它。

自定义设置概述

这个设置.自定义属性接受单个对象,此对象可用于存储其他值。单个对象值必须是有效的CSS值或具有嵌套键/值对的对象。

以下是来自的示例片段主题.json未设置自定义值:

{“版本”:2,“设置”:{“自定义”:{}}}

关于设置.自定义对象是您可以使用它来创建自己的CSS自定义属性。当您向对象添加键和值时,WordPress将自动生成CSS自定义属性,分配值,并为您加载它。

生成的CSS自定义属性将遵循以下模式:--wp—自定义--{键}--{值}.

假设您想使用水果并给它一个值苹果。将此添加到您的主题.json文件:

{“版本”:2,“设置”:{“自定义”:{“水果”:“苹果”}}}

WordPress将生成此CSS:

车身{--wp——自定义——水果:苹果;}

如何生成CSS自定义属性

正如您在上面了解到的设置.自定义.水果密钥名称将生成--wp--自定义--水果CSS中的变量。但也有其他情况。

自动断字

WordPress将自动为骆驼牌名称断字。例如,线条高度在下面的示例中,将变成线路高度:

{“版本”:2,“设置”:{“自定义”:{“lineHeight”:“1.4em”}}}

这将创建以下CSS:

车身{--wp——自定义——线条高度:1.4em;}

数字用作键时,其处理方式与大写字母相同。例如,键美国广播公司123将成为abc-1-2-3在生成的CSS中。

嵌套属性

在上述示例的基础上,假设您想创建几个线宽的CSS自定义属性,以便在主题中使用。为此,您可能需要在settings.custom.line高度而不是单个值。

将以下内容添加到您的主题.json文件:

{“版本”:2,“设置”:{“自定义”:{“线条高度”:{“xs”:“1”,“sm”:“1.25”,“md”:“1.5”,“lg”:“1.75”}}}}

WordPress将在生成CSS自定义属性名称时自动使用此嵌套结构。

这将生成此CSS:

车身{--wp——自定义——线高——xs:1;--wp——自定义——线高——sm:1.25;--wp——自定义——线高——md:1.5;--wp——自定义——线条高度——lg:1.75;}

可以进行的嵌套数量没有限制,但请记住,嵌套越多,CSS自定义属性名称就越长。

实际使用

您使用的设置.自定义的财产完全由您决定。其核心是生成CSS自定义属性,这些属性本身不做任何事情。CSS中还必须使用自定义属性。

在上一个主题.json上面的示例中,您创建了一组线宽。有很多方法可以将这些应用到实际中。 

在theme.json样式中使用

样式文档,您将通过学习如何将样式应用于根元素、元素和块主题.json。这将是与集成的主要用例之一设置.自定义.

假设您想从上面注册相同的线宽集并使用它们。也许您想将根元素设置为医学博士行高和段落块到lg(长度)。您可以通过以下方式访问每个线高属性var:custom|line-hight|mdvar:custom|line-hight|lg分别是。

在您的主题.json文件:

{“版本”:2,“设置”:{“自定义”:{“线条高度”:{“xs”:“1”,“sm”:“1.25”,“md”:“1.5”,“lg”:“1.75”}}},“样式”:{“排版”:{“lineHeight”:“var:custom|line-hight|md”}“区块”:{“核心/段落”:{“排版”:{“lineHeight”:“var:custom|line-hight|lg”}}}}}

您也可以通过它们的CSS自定义属性来引用这些值。例如,不使用var:custom|line-hight|md,使用var(--wp--自定义--line-hight--md).

记住,您将通过主题.json来自样式文档。您可以使用在那里学到的内容与此处概述的技术相结合。

在CSS中使用

有时您可能需要直接在CSS中引用生成的CSS自定义属性,例如样式表文件。为此,必须使用CSS自定义属性名称。

假设您需要将一个名为的类作为目标.example-class类并给它平方米线-你注册的高度。在CSS中使用此代码:

.example-class类{line-hight:var(--wp-自定义--line-hight--sm);}