Настройки темы: цвета, шрифты, типографика, макет

Связанные страницы: theme.json — основа дизайн-системы, Дизайн-системы в WordPress, Figma → WordPress, DESIGN.md.

Global Styles — центр управления дизайном

Global Styles (глобальные стили) — единая точка настройки визуального оформления всей блочной темы. Меняете один раз — обновляется на всём сайте. Доступ: Site Editor → Styles (иконка в правом верхнем углу).

Цветовая палитра

Настройка палитры

1. Styles → Colors → Palette
2. Добавьте свои цвета (HEX, RGB или выбор из пикера)
3. Минимальный набор:
   • Фоновый цвет (background)
   • Цвет текста (text/foreground)
   • Акцентный цвет (accent — для кнопок, ссылок)
   • Контрастный цвет (contrast)

Применение к элементам

В секции Elements привяжите цвета палитры к конкретным элементам:

• Фон сайта
• Текст
• Заголовки
• Кнопки (Buttons block)
• Ссылки

Типографика

Загрузка кастомных шрифтов

WordPress поддерживает загрузку веб-шрифтов из Google Fonts или любого другого фаундри:

1. Styles → Typography
2. Нажмите «Manage fonts» или «Upload»
3. Загрузите файлы шрифтов (woff2) или выберите из библиотеки

Настройка шрифтов

После загрузки настройте:

• Text font — основной шрифт для параграфов и текста
• Headings font — шрифт для H1–H6
• Line height — межстрочный интервал
• Appearance — normal, thin, light, medium, semi-bold, bold, extra-bold

Тонкая настройка заголовков

Каждый уровень (H1–H6) можно настроить отдельно:

• Размер (size)
• Начертание (appearance)
• Межбуквенное расстояние (letter spacing)
• Цвет

Кнопки и интерактивные элементы

Настройте Buttons block в Style Book → Design:

• Цвет фона и текста
• Типографика (жирность, размер)
• Радиус скругления (border radius)
• Отступы (padding)

Для всех интерактивных элементов: hover-состояние — визуальная обратная связь при наведении.

Макет (Layout)

В секции Layout задаются глобальные ограничения для контента:

• Ширина контента (content width) — например, 800px
• Широкая ширина (wide width) — например, 1200px
• Отступы (padding) — глобальные отступы для основного контента
• Block spacing — расстояние между блоками

Style Book как зеркало

Все изменения в Global Styles мгновенно отражаются в Style Book. Используйте его для проверки:

• Как выглядят все типы контента с новыми шрифтами
• Как цвета сочетаются на разных блоках
• Как кнопки и ссылки отличаются друг от друга

Материалы и источники

• Customizing theme settings (learn.wordpress.org)

Связанные страницы

• Style Book: гид по дизайну
• Отступы и размеры
• Tailwind CSS v4 + daisyUI в блочной теме WordPress
• DESIGN.md для WordPress
• Кастомный CSS в WordPress
• theme.json — основа дизайн-системы — Скругления через settings.border.radiusSizes (WP 6.9+).