Customizer.json

此文件定义了您对主题外观的控制程度。

每个主题都有其特定的 customizer.json。它定义了哪些变量默认显示或仅在高级模式下显示。该文件分为两个主要部分：控件和组。

控件

控件定义了变量的值在定制器中如何显示。默认情况下，所有变量都显示在 input 元素中。您可以使用以下类型之一更改默认的输入字段。

变量

选择输入类型后，您需要定义每种类型应影响哪些变量。您可以使用特定变量或仅使用通配符 * 来选择一组变量，而无需设置每个变量。

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

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

颜色选择器

通过设置 "type": "color"，以下示例将所有以 -color 或 -background 结尾的变量转换为易于操作的颜色选择器，前提是该变量的值是颜色值。

示例

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

选择元素

如果变量应仅使用特定值，则可以使用 "type": "select" 并添加可选择的选项，轻松地将输入元素转换为选择元素。

示例

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

字体

对于字体，您可以像上面一样使用 select 类型，也可以使用 "type": "font" 创建一个用于字体的选择框，您可以在其中添加其他值，例如字体url或将字体分为组。

示例

{"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": [
    {
        "label": "Backgrounds",
        "vars": [
            "@global-background",
            "@global-dark-background"
        ]
    }
]}

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