Выбор цветовой схемы сайта и пользовательские цвета темы ACF PRO

Задача: выбор цветовой схемы темы или установка пользовательских цветов элементам темы с помощью color picker ACF PRO

  • eye 125
  • 1

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

Один из вариантов решения этой задачи при помощи подключения соответствующих файлов стилей.

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

Для начала реализация выбора готовых цветовых схем:

$select_color_scheme = get_field('select_color_scheme', 'option');


switch ($select_color_scheme) {
	case 'sea':
		require get_template_directory() . '/inc/colors/sea.php';
		break;

	case 'pudding':
		require get_template_directory() . '/inc/colors/pudding.php';
		break;

	case 'tuxedo':
		require get_template_directory() . '/inc/colors/tuxedo.php';
		break;

	case 'cocktail':
		require get_template_directory() . '/inc/colors/cocktail.php';
		break;

	case 'default':
		require get_template_directory() . '/inc/colors/default.php';
		break;
		
	case 'custom':
		require get_template_directory() . '/inc/colors/custom.php';
		break;
	
	default:
		require get_template_directory() . '/inc/colors/sea.php';
		break;
}

Собственно в первой строчке мы получаем значение выбранное в select на странице опций. А дальше просто подключается соответствующий файл со стилями.
Подключается файл при помощи action следующим образом:

function set_color_scheme(){

	require get_template_directory() . '/inc/select-color.php';

}
add_action( 'wp_head', 'set_color_scheme' );

Теперь, что касаемо пользовательских цветов. Условной логикой, если выбран вариант «Пользовательские цвета» в select на странице опций, то появляется несколько полей типа color picker.
Дальше подключается файл с пользовательскими цветами. И фрагмент применения цветов:

// Получаем значение цвета для меню, если цвет не задан, то применяется цвет по умолчанию
$color_nav = (get_field('custom_color_nav', 'option')) ? get_field('custom_color_nav', 'option') : '#e56b6c';
.nav__menu-list ul li.active a, .nav__menu-list ul li.current-menu-item a {
	color: <?php echo($color_nav) ?>; /* красный */
}
comments powered by HyperComments

Поделиться

На вашу почту будет отправлена одноразовая ссылка на портфолио

Отправлено!

Что-то пошло не так... Попробуйте отправить позже