Настройки темы через theme.json
Тема pw-workshop получила шаблоны и паттерн, но редактор ещё может создавать случайные цвета и размеры. Зададим небольшой набор правил через theme.json. Этот файл согласует настройки редактора и стили блоков: какие варианты доступны человеку и как выглядит результат на сайте. Результат урока — единая палитра, ограниченная ширина текста и понятные размеры шрифта, которые не требуется повторять в каждой странице.
На дату подготовки используем theme.json version 3, указанную в актуальном справочнике. Номер относится к формату файла, а не к версии нашей темы. Старый пример с version 2 может продолжать встречаться в документации и готовых темах; его существование не делает второй формат последним. Наш учебный WordPress — 7.1.3, а настройки ниже ограничены базовыми возможностями палитры, типографики и ширины.
Доступные варианты и применённые стили
В settings задаются возможности и пресеты. В styles задаются значения, которые тема применяет. Добавление фиолетового цвета в список не обязано покрасить весь сайт: пока редактор или общий стиль не выбирает этот пресет, он лишь становится вариантом. И наоборот, заданный стиль не объясняет, какие произвольные варианты разрешены редактору. Разделение помогает обсуждать дизайн как договор: базовое оформление устойчиво, допустимые изменения ограничены задачей.
Создайте в корне pw-workshop файл theme.json. Ниже полный файл урока; он добавляется к снимку после паттерна, а не заменяет шаблоны или stylesheet:
{
"version": 3,
"settings": {
"layout": {"contentSize": "720px", "wideSize": "1100px"},
"color": {
"custom": false,
"defaultPalette": false,
"palette": [
{"slug": "ink", "name": "Текст", "color": "#202126"},
{"slug": "paper", "name": "Фон", "color": "#ffffff"},
{"slug": "accent", "name": "Акцент", "color": "#6330a8"},
{"slug": "soft", "name": "Мягкий фон", "color": "#f2eef8"}
]
},
"typography": {
"customFontSize": false,
"defaultFontSizes": false,
"fontSizes": [
{"slug": "body", "name": "Текст", "size": "1.125rem"},
{"slug": "section", "name": "Раздел", "size": "1.65rem"}
]
}
},
"styles": {
"color": {"background": "var:preset|color|paper", "text": "var:preset|color|ink"},
"typography": {"fontFamily": "system-ui, sans-serif", "fontSize": "var:preset|font-size|body", "lineHeight": "1.65"},
"elements": {
"link": {"color": {"text": "var:preset|color|accent"}},
"h2": {"typography": {"fontSize": "var:preset|font-size|section", "lineHeight": "1.25"}}
}
}
}slug является устойчивым идентификатором пресета. Подпись «Акцент» можно уточнить, сохранив slug accent. Если удалить или переименовать slug, существующие блоки, которые его выбрали, могут потерять связь со стилем. Это похоже на постоянный адрес материала: видимая подпись и техническая идентичность имеют разную устойчивость. Выбирайте названия пресетов по функции, а не «фиолетовый номер три», если оттенок может изменяться при редизайне.
Почему ширина относится к чтению
contentSize задаёт стандартную ширину ограниченной компоновки, а wideSize — более широкую область. Наши шаблоны используют layout constrained, поэтому настройки получают осмысленное место применения. На большом экране основной текст не должен растягиваться от края до края; длинная строка затрудняет переход к следующей. Ширина 720 пикселей — исходное решение темы, а не универсальный закон для любого шрифта и языка. Его нужно оценить на реальных уроках, включая длинные листинги.
Системный шрифт не требует отдельной загрузки файла из внешнего сервиса. Это уменьшает количество обязательных ресурсов, но разные системы могут показывать несколько разные гарнитуры. Поэтому проверьте переносы длинных слов и ширину кнопок на нескольких устройствах, не обещая пиксельного совпадения. Если позже появляется фирменный веб-шрифт, добавление его требует решения о файлах, лицензии и стратегии загрузки. В учебном файле такого ресурса нет, и скорость шрифта не измерялась.
Размер 1.125rem связан с корневым размером документа. Не блокируйте увеличение текста ради точного расположения пунктов меню. Мы ограничиваем произвольный выбор размера в редакторе, но не пользовательские настройки чтения в браузере. Это разные полномочия: редактор соблюдает дизайн, посетитель адаптирует отображение под себя. При двукратном увеличении текст должен оставаться доступным, а не скрываться за фиксированной высотой контейнера.
Глобальные стили и локальное изменение
Откройте study и запись image-shift. Ожидаются одинаковые цвет текста, базовая типографика и оттенок ссылок. Затем вставьте паттерн предыдущего урока: его заголовки должны использовать общий стиль H2 без ручной установки каждого размера. В панели выбора цвета ожидаются четыре пресета темы, без произвольной палитры из этой настройки. Некоторые блоки и расширения могут иметь собственные интерфейсы, поэтому не обещаем, что файл выключает любой способ добавить цвет на всём сайте.
Пользовательские стили, сохранённые редактором сайта, способны изменить итог поверх настроек файла. Если оттенок остаётся прежним после правки accent, сначала проверьте такие переопределения и локальный цвет блока. В нашем файловом состоянии их нет. Очистка браузерного кеша полезна лишь при устаревшем ресурсе; она не сбрасывает настройки базы. При передаче темы нужно описать, какой слой является авторитетным для палитры и как изменения редактора экспортируются.
Рассмотрим ошибочный вариант: автор вставляет CSS-цвет напрямую в каждый абзац, а потом хочет сменить общий акцент. Пресет больше не управляет этими локальными значениями. Исправление — убрать ненужные локальные стили и выбрать общий источник. Файл theme.json не является инструментом автоматической очистки уже сохранённого контента. Работа с такой историей потребует отдельной редакционной проверки, особенно если часть локальных цветов имеет смысл, например выделяет предупреждение.
Файл должен оставаться корректным JSON: ключи и строки заключены в двойные кавычки, комментарии и завершающие запятые не добавляются. При ошибке синтаксиса новый набор настроек может не примениться, а сайт продолжит показывать прежнее оформление или базовые значения. Это легко принять за кеш. Сравните сам файл и сообщение среды, а затем источник глобальных стилей. В примере нет шага автоматической генерации: редактор проекта сохраняет полный документ как часть темы, поэтому различия между версиями можно прочитать обычным текстовым сравнением.
Выбранный оттенок ссылки не отменяет подчёркивание и видимый фокус, заданные действительными стилями окружения. Если новая тема убирает эти признаки, нужно вернуть их осмысленно в следующем расширении оформления. Пара ink и paper описывает обычный текст, а accent используется для ссылок; это разные сочетания, которые оцениваются отдельно. Не делайте вывод о контрасте любого блока по одной удачной паре цветов на главной странице.
Наблюдаемая граница дизайна
Для проверки сравните страницы с длинным текстом, короткий документ «Контакты», ленту и адаптивную навигацию. Посмотрите контраст ссылок, увеличение текста и поведение изображения схемы. В материалах архива эти результаты обозначены как ожидаемые; WordPress не запускался, контраст программой и скорость загрузки не измерялись. Не называем тему полностью доступной или оптимизированной только по выбранным значениям. Мы получили небольшую согласованную основу, которую затем можно оценивать предметно.
Следующий урок отделит собственные изменения от обновляемой основы через дочернюю тему. При этом сохранится тот же смысловой договор: шаблоны берут содержимое из базы, пресеты определяют общие правила оформления, а редакторские страницы остаются независимыми материалами по своим адресам.