Customizer.json

这个文件用于定义你的主题外观中的控件数量。

每个主题都有其特定的 customizer.json。它定义了哪些变量是默认显示的，哪些变量仅在高级模式中显示。这个文件分为 controls 和 groups两部分。

Controls/控件

控件（controls）用于定义如何在定制工具中显示变量。默认情况下，所有的变量都显示在输入框（input）元素中。你可以使用以下类型（type）来改变默认的输入框。

Variables/变量

选择了输入框的类型后，你还须定义哪些变量会相互影响。你可以使用特定的单个变量或者使用通配符 * 来选择一组，而不是一个一个地单独设置每个变量。

{
    "vars": [
        "@global-border",
        "@global-light-border"
    ]
}

{
    "vars": [
        "*-color",
        "*-background"
    ]
}

颜色选择器

通过设置 "type": "color" 将下面的示例中所有以 -color 或 -background 结尾的变量变成一个简单易用的颜色选择器，需要注意的是变量的值必须是一个颜色值。

Example

{"controls": [
    {
        "type": "color",
        "vars": [
            "*-color",
            "*-background"
        ]
    }
]}

选择元素

如果一个变量只能使用特定的值，你可以通过使用 "type": "select" 轻松地将输入元素变成一个选择元素，并加入可选择的选项。

Example

{"controls": [
    {
        "type": "select",
        "vars": [
            "*-weight"
        ],
        "options": [
            {"name": "Normal", "value": "normal"},
            {"name": "Bold", "value": "bold"}
        ]
    }
]}

字体

当涉及到字体时，你可以使用上面介绍的“选择元素”方法或通过设置 "type": "font" 来创建一个字体选择框，你可以添加一些值，比如一个字体 url 或者将你的字体分成几组。

Example

{"controls": [
    {
        "type": "font",
        "vars": [
            "*-font-family"
        ],
        "options": {
            "System Fonts": [
                {"name": "Arial", "value": "\"Helvetica Neue\", Helvetica, Arial, sans-serif"},
                {"name": "Consolas", "value": "Consolas, monospace, serif"}
            ],
            "Google Fonts": [
                {"name": "Abel", "value": "'Abel'", "url":"http://fonts.googleapis.com/css?family=Abel"},
                {"name": "Asul", "value": "'Asul'", "url":"http://fonts.googleapis.com/css?family=Asul"},
        }
    }
]}

Groups/组

组（groups）定义了哪些变量应该显示在定制器的侧边栏中。你可以把一些相关的变量组合到一起放在一个组中，显示在一个标题下，或者在 Advanced Mode(高级模式)中显示。

Example

{"groups": [
    {
        "label": "Backgrounds",
        "vars": [
            "@global-background",
            "@global-dark-background"
        ]
    }
]}

{"groups": [
    {
        "label": "Navbar",
        "advanced": true,
        "vars": [
            "@navbar-*"
        ]
    },
]}