Customizer.json

Этот файл определяет количество контроля у вас есть над вашей темы внешний вид.

Каждая тема имеет свои специфические customizer.json. Он определяет, какие переменные выводятся по умолчанию или только в расширенном режиме. Файл разделена на две основные части, controls и groups.

Контроль

Контроля определять, как значение переменной будет отображаться в окне настройщика. По умолчанию, все переменные отображаются внутри элемента Input. Вы можете изменить стандартное поле ввода с помощью одного из следующих типов.

Переменные

После выбора типа входного сигнала необходимо определить, какие переменные должны быть затронуты каждого типа. Вы можете использовать специальные переменные или просто подстановочный символ *, чтобы выбрать группу переменных, не устанавливая каждую переменную.

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

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

Выбор цвета

Установка "type": "color" следующий пример включает все переменные, которые оканчиваются на слово -color или -background в удобный для обработки палитры, при условии, что значение переменной-это значение цвета.

Пример

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

Выберите элемент

Если переменной необходимо использовать только определенные значения, можно легко превратить в элемент Input в Select элемент с помощью "type": "select" и добавив доступные варианты.

Пример

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

Шрифты

Когда дело доходит до шрифтов, вы можете просто использовать выбрать типа как выше или "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"},
        }
    }
]}

Групп

Группы определить, какие переменные будут отображаются в боковом меню настройщика. Вы сможете собрать связанных с ними переменных в группе, нанести название или отображать их в Advanced Mode.

Пример

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

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