Описание
Поле «Выбор цвета» предоставляет интерактивный способ выбора строки с цветом в шестнадцатеричном формате с помощью Iris.
Скриншоты
Настройки
- Значение по умолчанию
Значение, которое изначально загружается в поле «Выбор цвета» при первом редактировании его значения. - Включить прозрачность
Включает управление прозрачностью в палитре цветов. Если эта опция включена, варианты формата возвращаемого значения изменяются на строку RGBA или массив RGBA. - Пользовательская палитра
Задаёт доступные цвета, отображаемые в поле. Принимает список шестнадцатеричных кодов, разделённых запятыми. Каждый шестнадцатеричный код будет цветом по умолчанию, отображаемым в палитре. Эта настройка находится на вкладке «Представление» в настройках поля. - Использовать цвета из theme.json
Если ваша тема содержит файл theme.json, определённые в нём цвета можно использовать в качестве палитры. Чтобы воспользоваться этой опцией, включите «Пользовательская палитра», убедитесь, что у вас установлена поддерживаемая тема, и выберите «Использовать цвета из theme.json». - Показывать цветовой круг
Определяет, следует ли показывать или скрывать цветовой круг. Если он скрыт, отображается только палитра цветов и текстовое поле, в котором задаётся фактическое значение. Эта настройка находится на вкладке «Представление» в настройках поля.
Использование в шаблоне
Поле «Выбор цвета» возвращает строковое значение, содержащее цвет в формате HEX, включая префикс «#». Ниже приведены примеры использования поля «Выбор цвета» с именем «color».
Вывод значения во встроенных стилях
В этом примере показано, как создать встроенный стиль с использованием значения поля «Выбор цвета».
<div style="background-color:<?php the_field('color'); ?>">
</div>
Вывод значения внутри тегов стилей
В этом примере показано, как создать CSS-класс с использованием значения поля «Выбор цвета».
<style type="text/css">
.primary-background {
background-color: <?php the_field('primary_background_color'); ?>;
}
</style>
<div class="primary-background">
</div>
Примечания
Настройка
Модальное окно поля «Выбор цвета» можно настроить с помощью JS-фильтра color_picker_args.
Обновлено: 30.09.2026