---
title: "Настройки темы: цвета, шрифты, типографика, макет"
description: "Как настроить тему WordPress через Global Styles: цветовая палитра, кастомные шрифты, типографика, отступы и макет."
---

Связанные страницы: [theme.json — основа дизайн-системы](https://wpcraft.ru/kb/stacks/wordpress/themes/practices/theme-json.md), [Дизайн-системы в WordPress](https://wpcraft.ru/kb/stacks/wordpress/themes/design-systems.md), [Figma → WordPress](https://wpcraft.ru/kb/stacks/wordpress/themes/practices/figma-to-wordpress.md), [DESIGN.md](https://wpcraft.ru/kb/design/ai/design-md.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)](https://learn.wordpress.org/lesson/customizing-theme-settings-colors-fonts-typography-and-layout/)

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

- [Style Book: гид по дизайну](https://wpcraft.ru/kb/stacks/wordpress/themes/practices/style-book.md)
- [Отступы и размеры](https://wpcraft.ru/kb/stacks/wordpress/themes/practices/dimensions-spacing.md)
- [Tailwind CSS v4 + daisyUI в блочной теме WordPress](https://wpcraft.ru/kb/stacks/wordpress/themes/practices/tailwind-daisyui-wordpress.md)
- [DESIGN.md: универсальный контракт дизайна](https://wpcraft.ru/kb/design/ai/design-md.md)
- [Кастомный CSS в WordPress](https://wpcraft.ru/kb/stacks/wordpress/faq/custom-css.md)
- [theme.json — основа дизайн-системы](https://wpcraft.ru/kb/stacks/wordpress/themes/practices/theme-json.md) — Скругления через `settings.border.radiusSizes` (WP 6.9+).