WebDev - блог

Эту статью можно назвать продолжением моей предыдущей статьи о виджетах. Виджеты - хорошая штука, так как позволяют простым перетаскивание добавлять/удалять блоки, менять их порядок в колонках блога.

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

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

Ниже я опишу как можно добавить поддержку виджетов в вашу тему, и как можно адаптировать их вид к вашей теме.

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

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

Включаем поддержку виджетов в шаблоне темы

Итак, имееем тему, к которой мы хотим рикрутить поддержку виджетов. Вспомним, что виджеты - это блоки информации,которые показываются в колонках блогах(так как колонка не всегда одна). Значит нам нужно изменить шаблон, в котором происходит формирование колонок. Шаблон этот, как правило, находится в файле sidebar.php.

Для примера, я использую тему русифицированную версию тему Emire 1.0, взятую по адресу http://themes.mywordpress.ru/view/Emire. Вполне возмжно, что ее автор уже обновил ее, но мне важно, что данная версия не поддерживает виджеты и я попробую сделать ее виджет-совместимой самостоятельно.

Открываем файл sidebar.php и видим следующий код:

<div id="sidebar">
<h2>Рубрики</h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
</ul>
<h2>Архив</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
<ul>
<?php get_links_list(); ?>
</div>

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

Для того, чтобы в этой колонке отображались виджеты, когда они активированы, необходимо добавить все несколько строк кода:

<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar() ) : ?>
<h2>Рубрики</h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
</ul>
<h2>Архив</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
<ul>
<?php get_links_list(); ?>
<?php endif; ?>
</div>

В приведенном коде, жирным шрифтом я выделил добавленные строки. Таким образом мы подготовили наш шаблон колонки к показу виджетов.

Теперь нам нужно сообщить системе, что наша тема содержит одну колонку, на которой можно расположить виджеты. Для этого мы создаем файл functions.php(если его нет) и прописываем в него следующий код:

<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>

Таким образом, мы зарегистрировали одну колонку(по -умолчанию) . Теперь, зайдя на страницу управления виджетами(Внешний вид -> Виджеты) мы видим прямоуголник, подписанный как Сайдбар 1(Sidebar 1). Перетянем на него какие-нибудь виджеты из доступных, нажнем на кнопку "Сохранить изменения" и - ура! - виджеты показались в колонке блога! Правда выглядят не совсем так, как те, что были прописаны в шаблоне sidebar.php... Сейчас посмотим что с этим можно сделать.

Определяем контейнер для виджетов

Давайте посмотрим на код, который генерируется после включения в нашу колонку виджетов:

<div id="sidebar">
<li id="search" class="widget widget_search">
<form id="searchform" action="xxxxxxxxxx" method="get">
<div>
<input id="s" type="text" size="15" name="s"/>
<br/>
<input type="submit" value="Найти"/>
</div>
</form>
</li>
<li id="links" class="widget widget_links">
<h2 class="widgettitle">Ссылки</h2>
<ul>
<li>
<a title="PHP4 и 5 хостинг, MySQL5.0" href="http://isahost.com">Наш хостинг</a>
</li>
</ul>
</li>
</div>

Как видим, виджеты генерируются внутри тэга li, то есть подразумевается, что вместо <div id="sidebar"> должно быть <ul id="sidebar">, но автор темы, увы использовал div. Значит нам нужно сделать так, чтобы при генераци виджетов они не вкладывались в тэг li. Наш замечательный WP это позволяет сделать без особых проблем:

Изменяем код, регистрации колонки в functions.php на следующий:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '',
'after_widget' => ''
));
?>

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

Таким образом мы подстраиваем вывод наших виджетов под существующий html-шаблон колонки. Но если вы только разрабатываете свою тему, то всегда имейте ввиду, что колонки лучше определять тэгом ul, так как стандартные виджеты, и большинство сторонних, по умолчанию, рассчитаны именно на это. И вам будет проще подстроить свою тему под виджеты, чем потом подстраивать вид виджетов под вашу тему. К тому же, ограничение тела виджета тэгом li дает большую гибкость при определении стилей для виджетов.

Возможно, что для некоторых виджетов вам придется дополнительно задать стили в CSS файле, например, для форм или каких-то других вложенных тэгов.

Использование больше чем одной колонки.

В случае, если ваша тема содержит больше чем одно колонки, вам необходиом при регистрации колонок использовать вместо фнкции register_sidebar функцию register_sidebars(n). Например, для двух колонок код будет такой:

<?php
if ( function_exists('register_sidebars') )
register_sidebars(2);
?>

или

<?php
if ( function_exists('register_sidebars') )
register_sidebars(2, array(
'before_widget' => '',
'after_widget' => ''
));
?>

И в шаблоне sidebar.php при вызове функции dynamic_sidebar() в качестве параметра передаете номер колонки(начиная с 1).

Вот, собственно, и все.

Добавить в закладки: