Использование опций в вашей теме

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

Мы провели тяжелую работу, благодаря которой мы смогли получить гибкий код для страницы настроек, легко адаптируемый под любые требования разработчика. Теперь перейдем к вопросу, как именно нам использовать настройки для изменения поведения нашей темы. К счастью, указанная часть является на порядок проще, нежели предыдущая.

Изменение CSS

В панели настроек, созданной ранее, мы определили три опции: первую — для изменения цвета ссылок, вторую — для добавления произвольного изображения в заголовок, и третью — для того, чтобы определить популярную рубрику. Две первых настройки требуют лишь изменения CSS стилей, поэтому мы начнем с них. Наш файл options.php, уже порядком разросшийся, до сих пор служит единственной цели: он определяет произвольную форму настроек. Для того, чтобы сохранить общую структурированность кода темы, мы поместим зависимый от настроек код CSS в отдельный файл и подключим его в файле functions.php следующим образом:

// include style options
include('library/style-options.php');

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

Создадим новую функцию:

function wicked_load_custom_styles() {
// load the custom options
global $childoptions;
foreach ($childoptions as $value) {
$$value['id'] = get_option($value['id'], $value['std']);
}

Опять же, данный код вы можете использовать без изменений. Функция сохраняет каждую опцию в отдельную переменную. К примеру, параметр wicked_link_color будет находиться теперь в переменной $wicked_link_color.

Остальная часть этой функции просто выведет соответствующий CSS:

// output a style sheet with the options
?><style type="text/css">
/* <![CDATA[ */
/* Color Options */
a, a:link, a:visited,
#content a,
#content a:link,
#content a:visited {color:#<?php echo $wicked_link_color; ?>;}<?php if ($wicked_show_logo  == 'true') { ?>
#blog-title {
background: transparent url('<?php echo
?get_bloginfo('stylesheet_directory') ?>/images/header.png') left top no-repeat;
padding-left: 120px;
height: 100px;
}

<?php } ?>

/* ]]> */
</style>

<?php
} // end function

Тег <style> позволяет указать основные стили для опций. Мы вызываем значение $wicked_link_color внутри стилевого правила и тестируем $wicked_show_logo для того чтобы узнать, было ли определено изображение header.jpg.

Для того чтобы добавить тег <style> в нашу тему, мы должны подцепить функцию к действию wp_head:

add_action('wp_head', 'wicked_load_custom_styles'); 

Таким образом, вывод нашей функции будет присутствовать в заголовке документа, переопределяя те стили, которые были указаны ранее. На данном этапе мы уже можем изменять цвет ссылок темы и добавлять изображение header.jpg к заголовку (если header.jpg присутствует в папке images).

Изменение разметки

В приведенном выше примере мы использовали опции для изменения CSS стилей. Аналогично, мы можем использовать опции для изменения текущей разметки. Благодаря удобным хукам и фильтрам, имеющимся в Thematic, мы можем легко изменить вывод нашей темы при помощи настроек. К примеру, когда мы включаем опцию отображения заголовка, мы могли бы добавить атрибут class к блоку div заголовка. Сделать это можно следующим образом:

function remove_thematic_blogtitle() {
remove_action('thematic_header','thematic_blogtitle',3);
}
add_action('init','remove_thematic_blogtitle');</code>
// In the header div
function wicked_blogtitle() {
// load the custom options
global $childoptions;
foreach ($childoptions as $value) {
$$value['id'] = get_option($value['id'], $value['std']);
}
if('true' == $wicked_show_logo) { ?>
<div id="blog-title">
<span><a href="<?php bloginfo('url') ?>/"
title="<?php bloginfo('name') ?>"
rel="home"><?php bloginfo('name') ?></a></span>
</div>
<?php } else {
thematic_blogtitle();
}
}
add_action('thematic_header', 'wicked_blogtitle', 3);

Это довольно простой пример, позволяющий иллюстрировать способы изменения разметки темы на основе используемых опций.

Изменение функциональности

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

Сделать это довольно просто. В файле functions.php у нас есть функция wicked_indexloop, которая ответственна за вывод на экран произвольного цикла для главной страницы. Добавим в самый верх этой функции код, отвечающий за загрузку произвольный опций.

function wicked_indexloop() {// load the custom options
global $childoptions;
foreach ($childoptions as $value) {
$$value['id'] = get_option($value['id'], $value['std']);
}

query_posts("posts_per_page=4");

Выполним небольшую модификацию функции для того чтобы отображать записи из необходимой нам рубрики:

function wicked_indexloop() {// load the custom options
global $childoptions;
foreach ($childoptions as $value) {
$$value['id'] = get_option($value['id'], $value['std']);
}

query_posts("posts_per_page=4&cat=" . $wicked_feature_cat);

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

Поделиться

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

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

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