Эту статью можно назвать продолжением моей предыдущей статьи о виджетах. Виджеты - хорошая штука, так как позволяют простым перетаскивание добавлять/удалять блоки, менять их порядок в колонках блога.
В принципе, мнгоие авторы тем, распространяемых по 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).
Вот, собственно, и все.
Комментариев: 25
> Использование больше чем одной колонки
Отдельное спасибо за это. Два часа убил на поиск объяснения, как регистрировать несколько сайдбаров.
Огромное спасибо просто и доступно разложено
Проблема возникла. Не понимаю как её исправить. Сделал всё как тут написано но виджеты не отображаються. В админке появилась возможность перетаскивать виджеты на сайдбары, а вот в теме они не отображаються? Помогите пожалуйста.
Честно сказать пытался по Вашей инструкции адаптировать безвиджетную тему с 2-мя сайдбарами. Виджеты включаются вроде как, но они прикрепляются только к первому сайдбару. В чем проблема пока не смог понять WP ver- 2.6, Тема Grid Focus Public 1.0
попытаюсь с помощью ваших подсказок исправить руссифицированную тему TypoXP 1.0.3! Если не получиться буду еще обращаться!!!
Проблема возникла. Не понимаю как её исправить. Сделал всё как тут написано но виджеты не отображаються?? Попрежнему пишеться:
- Боковые колонки не определены
- Вы видите это сообщение, потому что используемая вами тема не поддерживает виджеты, а значит, нет и возможности настраивать боковые колонки. Для получения дополнительной информации посмотрите инструкцию по доработке темы.
Большое,просто огромное спасибо за виджетирование,а то как никак под сапу нормальную тему заточить немог..а тут Вы Респект….
Спасибо! Как раз выбрал темку подходящую, а оказалась что она вилжеты не поддерживает! С помощью данной статьи и подсказки программиста
все получилось !
статья замечательная только у меня ничего не получилось(
спасибо,мужик
Спасибо за статью. Очень помогло. Только у меня не полусилось с “Определяем контейнер для виджетов”. Виджеты появляются но оформлены не красиво. Только надписи. ((
Фух… Ладно. Завтра разберусь. Спать пора.
К сожалению я не силен во всем этом!
У меня одноколоночная темка, виджеты я включил, но они никак не хотят отображаться! Помогите ради бога)
Большое спасибо за подробную инструкцию. За 20 минут разобрался
код в оригинале должен быть такой:
Спасибо за понятный мануал. Все получилось сразу.
Спасибо за подверждение того что вроде-бы я все делала правильно. Cтатью прочла только после изучения того куда послал wordpress)), но у меня так и не получилось.
код в sidebar.php достаточно длинный и начинается и заканчивается он совсем не так как в Оригинале и у Вас
пробовала что-то менять, но выдает ошибку.
есть какие-то ньансы?
вместо
php if ( !function_exists(’dynamic_sidebar’)
|| !dynamic_sidebar() ) :
надо
php if ( !function_exists(’dynamic_sidebar’)
|| !dynamic_sidebar() ) ;
Чтобы отображать другие sidebar, надо при вызове функции dynamic_sidebar() в скобочках указывать номер sidebara.
Например, для вывода второго sidebar можно использовать такой код:
Рубрики
Архив
Супер! Всё получилось! Спасибо огромное
что то переделать для 2 колонок не получилось - только 1 колонка работает, да и оформление не как в моей теме(
Для відображення більше одного віджета потрібно в function.php прописпти:
if ( function_exists( ‘register_sidebar’) ) {
register_sidebar( array( 1,
‘name’ => ‘Widget 1′
) );
register_sidebar( array( 2,
‘name’ => ‘Widget 2′
) );
}
і визиваються вони відповідно:
Прошу прощения, коды не прописались
Получилось, правда хочу добавить - код “php if ( !function_exists(’dynamic_sidebar’)
|| !dynamic_sidebar() )”
поставил не там где написано в статье. а перед самой строчкой
php endif (естественно со всеми скобочками и знаками)
Вышло очень даже здорово - мои установленные (жестко прописанные в коде) виджеты неизменно остались на своих местах, а те, которые я добавляю из панели встают ниже и в таком же стиле (мною прописанном)
Пример можно глянуть http://muvik.freeoda.com/
Респект админу за статью
Хорошая статья, как раз помогла разобраться, только вот 2 сайдбар не хочет отображаться
Получалось ли у кого то сделать виджет-совместимой тему summer flowers???
Второй день занимаюсь этим… помогите пожалуйста кто может(((
Нифига не работает. Wordpress е***й - никак это не исправишь, каким хером убрать сообщение “Боковые колонки не определены” можно узнать в самом коде, но в wp этот код раскинут по 100-м функциям и очень трудно читать код. А твоя х***я не помогает.
На эту страницу размещена 1 ссылка
[…] Статья находится по аресу [http://a2p.net.ru/wordpress/14/widgetising-wordpress-themes/] […]