Глобальные стили (Styles) — это мощная функция в WordPress 6, которая позволяет управлять эстетикой и макетом всего сайта из единого интерфейса. Вам больше не нужно редактировать каждый блок или страницу отдельно — теперь вы можете задать единые правила для шрифтов, цветов и отступов на глобальном уровне.

Эта функция является частью концепции Full Site Editing (FSE) и доступна в блочных темах, начиная с WordPress 5.9.

С помощью стилей вы можете:

  • Настроить цветовую палитру, типографику, макет и интервалы для всего сайта.
  • Придать сайту целостный и профессиональный вид.
  • Изменить внешний вид стандартных блоков (например, задать фирменный стиль для всех кнопок или заголовков).

Как работают глобальные стили

Стили, которые вы настраиваете в интерфейсе Styles, применяются ко всему сайту. Если вы измените здесь цвет фона, он обновится на всех страницах, в записях и шаблонах.

В панели «Стили» находятся настройки по умолчанию, предоставленные вашей темой и самим WordPress. Вы можете переопределить их, создав собственные правила: добавить уникальные цвета в палитру, изменить шрифты или скорректировать ширину макета.

Боковая панель стилей в редакторе WordPress

Кроме того, вы можете управлять внешним видом конкретных блоков. Например, можно задать единый размер шрифта и цвет фона для всех блоков «Цитата» на сайте.

Как использовать панель стилей

Чтобы получить доступ к этой функции, убедитесь, что у вас установлена блочная тема (например, Twenty Twenty-Three) и версия WordPress 5.9 или выше.

  1. Перейдите в раздел Внешний вид > Редактор.
  2. Нажмите на значок полузатененного круга («Стили») в правом верхнем углу экрана (над боковой панелью настроек).
  3. Значок стилей доступен как при редактировании всего сайта, так и при работе с отдельными шаблонами.

На панели «Стили» вы увидите основные разделы:

  • Типографика
  • Цвета
  • Макет

Также доступен раздел Блоки, где можно детально настроить каждый тип блока.

Руководство по использованию

При первом открытии панели вы увидите диалоговое окно «Начальная инструкция». Вы можете ознакомиться с кратким туром, используя кнопки «Следующий» и «Предыдущий».

Начальная инструкция по стилям

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

Меню действий в панели стилей

Вариации стиля

Вариации стиля — это готовые наборы настроек, введенные в WordPress 6.0. Они позволяют мгновенно изменить облик сайта, переключаясь между предустановленными комбинациями цветов, шрифтов и отступов.

Вариации стиля в WordPress

Как это работает:

  1. На панели «Стили» отображается превью текущей вариации.
  2. Нажмите «Обзор стилей», чтобы увидеть все доступные варианты для вашей темы.
  3. Выберите любую комбинацию, чтобы сразу увидеть результат в редакторе.
  4. Используйте стрелку «Назад», чтобы вернуться к основным настройкам.

Читайте также: Отложенная публикация в WordPress: Как планировать посты

Типографика

Раздел «Типографика» позволяет управлять шрифтами для текста, ссылок, заголовков и кнопок на глобальном уровне.

  1. Нажмите Типографика в главном меню стилей.
  2. Выберите элемент для настройки (например, «Текст» или «Заголовки»).

Настройки типографики

Здесь можно изменить:

  • Семейство шрифтов (Font Family)
  • Размер (Size): доступны предустановки S, M, L, XL, XXL или пользовательские значения (px, em, rem).
  • Начертание (Appearance): жирность и курсив.
  • Высоту строки (Line Height).

Выбор размера шрифта

Для заголовков можно задать общие настройки или настроить каждый уровень (H1–H6) отдельно.

Цвета

В этом разделе вы управляете цветовой палитрой сайта и цветами отдельных элементов (фона, текста, ссылок).

Настройки цветов

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

В панели «Палитра» вы можете редактировать цвета темы и создавать свои собственные.

  1. Цвета темы: основные цвета, заданные разработчиком темы.
  2. Цвета по умолчанию: стандартные цвета WordPress.
  3. Пользовательские цвета: ваши собственные оттенки.

Чтобы изменить цвет:

  1. Нажмите на три точки рядом с названием палитры и выберите «Редактировать цвета».
  2. Кликните на цвет, который хотите изменить.
  3. Выберите новый оттенок в палитре или введите код (HEX, RGB, HSL).

Редактирование палитры

Вы можете создать свою палитру в разделе «Пользовательские», нажав на +. Это полезно для сохранения фирменных цветов бренда.

Градиенты

WordPress позволяет использовать не только сплошные цвета, но и градиенты.

  1. Переключитесь на вкладку Градиент в панели палитры.
  2. Вы можете редактировать предустановленные градиенты или создавать свои.
  3. Настройте точки перехода цветов, тип (линейный/радиальный) и угол наклона.

Редактор градиентов

Применение цветов к элементам

В разделе Элементы панели «Цвета» можно задать глобальные правила:

  • Фон: сплошной цвет или градиент для всего сайта.
  • Текст: основной цвет текста.
  • Ссылки: цвет обычных ссылок и их состояние при наведении.
  • Заголовки: общий цвет для всех заголовков или настройки для конкретных уровней (H1–H6).
  • Кнопки: цвет текста и фона кнопок.

Макет (Layout)

Раздел «Макет» отвечает за ширину контента и отступы.

Настройки макета

Ширина контента

Вы можете задать два параметра ширины:

  1. Content (Содержимое): ширина по умолчанию для большинства блоков.
  2. Wide (Широкая ширина): ширина для блоков с настройкой «По ширине».

Значения можно указывать в px, %, em, rem, vw, vh.

Отступы (Padding)

Здесь задаются внешние отступы для всего сайта (вокруг основного контейнера).

  • Можно установить единое значение для всех сторон или настроить верх, низ, лево и право отдельно (нажав на иконку «цепи» для разблокировки).
  • Используйте ползунок или введите точные значения.

Настройка отступов

Интервалы между блоками (Block Spacing)

Этот параметр определяет вертикальное расстояние между соседними блоками. Настройка помогает сделать контент более «воздушным» или, наоборот, компактным.

Настройка отдельных блоков

Если вам нужно изменить внешний вид конкретного элемента (например, всех изображений или таблиц), используйте раздел Блоки в главной панели стилей.

  1. Выберите блок из списка (или воспользуйтесь поиском).
  2. Настройте доступные параметры: цвета, типографику, границы, отступы.

Изменения коснутся всех блоков этого типа на сайте, кроме тех, которые были настроены индивидуально внутри постов.

Пример: Вы можете добавить рамку и тень для всех блоков «Изображение» или изменить шрифт для всех блоков «Цитата».

Настройки отступов (Margin) для блоков

Для многих блоков (Абзац, Заголовок, Галерея, Список и др.) в разделе «Макет» доступны настройки внешних отступов (Margin). Это позволяет точно контролировать расстояние вокруг элементов и улучшить читаемость контента.

Итог: Глобальные стили в WordPress 6 — это революционный инструмент для настройки дизайна. Они дают вам полный контроль над визуальной составляющей сайта без необходимости править CSS-код, делая процесс создания уникальных тем доступным для каждого.