Добавление цветовых вариантов представления темы

Из предыдущего раздела мы увидели, каким образом можно разрешить пользователям вводить собственные цвета для темы. Однако, как быть, если мы хотим полностью изменить представление нашей темы, добавив к ней множество различных цветов, декоративных изображений и оттенков? Процесс создания нескольких вариантов стилизации во многом подобен определению цветовой гаммы, рассмотренной в предыдущем разделе. В данном случае мы будем создавать отдельные стилевые таблицы для каждого из вариантов. Приступим к работе.

Создадим новую папку в каталоге с нашей темой и назовем ее skins. В ней мы создадим три подпапки, названных red, yellow и blue, каждая из которых будет содержать файлы skin.css и header.png.

В целях иллюстрации мы исключим из наших таблиц стилей все лишнее, оставив лишь самые важные стилевые правила. Файл blue.css будет иметь следующий вид:

a, a:link, a:visited {
color:#0033FF;
}
#blog-title {
background:transparent url('header.png') left top no-repeat;
}

Red.css и Yellow.css будут иметь аналогичное представление:

a, a:link, a:visited {
color:#FF0000;
}
#blog-title {
background:transparent url('header.png') left top no-repeat;
} 

a, a:link, a:visited {
color:#FFFF00;
}
#blog-title {
background:transparent url('header.png') left top no-repeat;
}

Форма опций

Теперь мы должны изменить форму опций темы, чтобы вывести на экран набор цветовых вариантов. Сделаем это следующим образом: обновим массив $childoptions в нашем файле options.php, убрав из него массивы с цветом ссылки и изображением для заголовка и добавив новый массив с настройкой цветовых вариантов.

function childtheme_options() {
global $childthemename, $childshortname, $childoptions;// the color variants array
$color_variants = array(
"blue" => "blue",
"red" => "red",
"yellow" => "yellow"
);

$childoptions = array (

array( "name" => __('Color Variant','thematic'),
"desc" => __('Select which color scheme or variant you would like to use.','thematic'),
"id" => "wicked_color_variant",
"std" => 'blue',
"type" => "radio",
"options" => $color_variants),

Тем самым мы получим форму для страницы настроек темы, приведенную на рисунке:

Добавление стилевых таблиц

На следующем шаге мы должны добавить выбранную таблицу стилей к блоку head, для того чтобы активировать необходимые нам стили. В WordPress имеется функция, позволяющая динамически добавлять стилевые таблицы — wp_enqueue_style. С помощью указанной функции можно отслеживать нужные версии, определять различные зависимости и порядок загрузки. В функции вызывается wp_enqueue_style, которая ставит имеющиеся таблицы стилей в очередь перед тем, как выполнять их добавление к документу. Таким образом, она дает возможность произвести некоторую дополнительную обработку. В примере ниже мы добавим нашу синюю таблицу стилей к теме:

wp_enqueue_style(
'wicked-blue', // Style ID
get_bloginfo('stylesheet_directory') . '/skins/blue.css', // Path to stylesheet
'', // dependencies (empty)
'', // version (empty)
'all' // media attribute
);

Теперь мы отредактируем функцию wicked_load_custom_styles, храняющуюся в library/style-options.php, для того чтобы поставить в очередь таблицу стилей, основанную на выбранной опции. Уберем из этой функции вывод тега <style> и заменим его вызовом wp_enqueue_style:

function wicked_load_custom_styles() {
// load the custom options
global $childoptions;
foreach ($childoptions as $value) {
$$value['id'] = get_option($value['id'], $value['std']);
}wp_enqueue_style('wicked-skin', get_bloginfo('stylesheet_directory') .
'/skins/' . $wicked_color_variant . '/skin.css', '', '', 'all');
} // end function

Все, что мы здесь делаем, это вставляем опцию $wicked_color_variant в строку пути стилевой таблицы. Наша таблица стилей должны быть поставлена в очередь еще до представления блока head документа, что закрывает нам путь к использованию хука wp_head. К счастью, в WordPress существует хук wp_print_styles, который позволяет решить возникшую проблему:

add_action('wp_print_styles', 'wicked_load_custom_styles'); 

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