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

Дата публикации:Декабрь 11, 2010

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

Создадим новую папку в каталоге с нашей темой и назовем ее 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'); 

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

Поделиться

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.