Делаем тему для WordPress виджет совместимой

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

В принципе, многие авторы тем, распространяемых по 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).

Вот, собственно, и все.
Спасибо за статью сайту - a2p.net.ru

Рубрика: Учебник WordPress | 11 марта 2009

Предыдущие записи из рубрики `Учебник WordPress`

Комментировать

Новые комментарии