Коротко: изменить цвета в WordPress можно в «Настройщике» темы («Внешний вид» → «Настроить»), в редакторе стилей блочной темы, в блоке через его настройки или в «Дополнительных стилях» кодом. Глобальные цвета удобно хранить CSS-переменными, чтобы менять их в одном месте.
Где менять цвета
| Место | Что меняет |
|---|---|
| Настройщик темы | цвета темы (если тема это поддерживает) |
| Редактор стилей блочной темы | палитру и глобальные стили |
| Настройки блока | цвет конкретного блока |
| Дополнительные стили | свой CSS-код |
theme.json |
палитра для редактора (блочные темы) |
Вкладки: способы
- «Внешний вид» → «Настроить».
- Найдите раздел «Цвета» (если он есть в теме).
- Меняйте цвет текста, ссылок, кнопок, фона.
- Публикуйте изменения.
Плюс: ничего не нужно программировать. Минус: состав настроек зависит от темы, и не все места можно перекрасить.
- «Внешний вид» → «Редактор» (блочная тема).
- Откройте «Стили».
- Задайте палитру: основной, акцентный, фон, текст.
- Примените цвета к элементам (кнопки, ссылки, заголовки).
- Сохраните.
Так изменения затрагивают весь сайт сразу — это правильный способ для блочных тем.
:root {
--color-brand: #003F8F;
--color-accent: #992222;
--color-text: #505050;
}
.btn { background: var(--color-brand); }
a { color: var(--color-brand); }
a:hover { color: var(--color-accent); }Стили вставляют в «Настройщик» → «Дополнительные стили» или в дочернюю тему. Переменные позволяют менять бренд одной строкой.
- Выделите блок.
- Откройте панель блока → «Цвет».
- Выберите цвет текста/фона/ссылки.
- При необходимости задайте свой цвет вручную.
Используйте палитру темы, а не произвольные цвета — тогда сайт остаётся целостным.
Практика: сменить фирменный цвет
- Определите пару главных цветов: основной и акцентный.
- Занесите их в CSS-переменные.
- Примените переменные к кнопкам, ссылкам, акцентам.
- Проверьте контраст текста и фона.
- Проверьте состояния при наведении.
- Убедитесь, что цвет согласован во всех блоках.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Цвет не меняется | перебит стилем темы | уточнить селектор или порядок |
| Меняется только часть | цвета заданы в разных местах | свести к переменным |
| Правки слетели | правили родительскую тему | дочерняя тема/доп. стили |
| Плохо читается | низкий контраст | проверить контраст, затемнить/осветлить |
Проверьте себя
Вопросы и ответы
Не все темы поддерживают настройку цветов через «Настройщик». Тогда используют глобальные стили, блоки или свой CSS.
Через «Дополнительный CSS-класс» у блока/страницы и отдельное правило, либо через класс page-id-123 в CSS.
Контраст и согласованность. Даже «красивый» цвет бесполезен, если текст на фоне не читается или цвета «спорят» между собой.
Да: опишите класс кнопки в «Дополнительных стилях» или настройте цвет в самом блоке кнопки.
Итоги
- Цвета меняют в настройщике, глобальных стилях, блоках или CSS.
- Глобальные цвета храните в CSS-переменных.
- Правки — в дочерней теме или доп. стилях.
- Следите за контрастом и состояниями.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.