Выпуск 31. Виджеты в WordPress
Облако тэгов Simple Tagging
В 29 номере рассылки мы говорили об использовании облака тэгов с помощью плагина Jerome's Keywords (JK). На странице обсуждения возникла небольшая дискуссия, в ходе которой выяснилось, что у в некоторых случаях тэги удаляются после добавления комментария.
По правде говоря, мне так и не удалось воспроизвести эту ошибку.
Но главное не это. Описываемый плагин не единственный, есть и вполне достойные альтернативы. Одним из таких является плагин Simple Tagging. В отличие от JK, этот плагин создает отдельную таблицу в базе данных, поэтому возможностей у него несколько больше. Кроме этого он поддерживает импорт меток из других плагинов, включая и JK.
Большинство параметров в Simple Tagging вынесены прямо в админ-панель, поэтому он позволяет производить довольно тонкую настройку облака.
Ко всему прочему вы можете скачать и полностью руссифицированную версию плагина, который сделал Иван (Lecactus). Здесь же вы найдете и примеры использования. Плагин проверен, так что можно использовать. 
Теперь, к теме выпуска.
Виджеты
Чтобы воочию увидеть что такое виджеты, зайдите в админ-панель "Внешний вид", выберите шаблон "Default", а после переключитесь на закладку "Widgets".
У вас будет схематично показан сайдбар (меню) и внизу существующие виджеты. Вам нужно мышью перетащить виджет в блок сайдбара и там же выставить нужный порядок. Теперь, если вы посмотрите сайт, то увидите указанное расположение блоков. Каждый такой блок и есть виджет.
Немного истории
Изначально виджеты были выполнены в виде плагина. Их идея была привлекательной и со временем появилось множество шаблонов, поддерживающих эту технологию. Был только один нюанс - не совсем корректная работа. Поэтому говорить о том, что появилось какое-то разнообразие не приходится - в подавляющем большинстве случаев, программисты просто копировали код из шаблона "Default". На этом всё и заканчивалось.
И вот, начиная с версии WordPress 2.2 виджеты вошли в "движок" и можно сказать, что сейчас нареканий по их работе практически нет. Поэтому можно с уверенностью прогнозировать, что виджеты будут все больше и больше использоваться в шаблонах и плагинах WordPress'а.
Теория
Признаюсь, что информацию о виджетах пришлось собирать по крупицам. Дело в том, что даже на сайте их создателей automattic.com приведена настолько скудная информация, что из неё получить какую-либо реальную пользу сложно.
Поэтому мне пришлось обратиться к коду WordPress, а также шаблонов и плагинов, чтобы посмотреть как можно использовать виджеты. Насколько это возможно, я буду структурировать информацию, но давать её так, как использую сам.
Виджет - блок
Чтобы было проще, давайте считать, что любой виджет это блок или модуль. Не имеет значения будет ли это простой текст, html или PHP-код. При создании виджета вы должны определить его название. Именно это название и будет фигурировать в админ-панели.
После этого виджет должен быть зарегистрирован. Делается это с помощью специальной функции WordPress, где в качестве параметров указывается название виджета и его php-функция.
То есть когда WordPress будет обрабатывать шаблон, он проверит подключен ли ваш виджет (те, что вы мышью переносили) и если это так, то запустит его функцию.
Функция виджета ничем не отличается от обычных php-функций, поэтому считайте, что она является частью шаблона и использовать её можно для самых разных действий.
Но виджеты интересны не только из-за того, что их можно динамически менять. Самая главная их возможность - настраиваемость. Например, можно создать текстовый виджет в котором установить нужные опции. Посмотрите стандартный виджет "Рубрики" и вы поймете о чем речь. По большому счету, в виджете можно хранить любые настройки, которые будут приниматься вашим шаблоном и выполнять какие-либо действия. Например ничего не стоит создать виджет для рекламы, счетчиков, короткого описания блога и т.д.
Виджеты, которые содержат настройки, отображаются с отдельной иконкой. Нажмите на неё и откроется окно с настройками.
Но, для того чтобы вы смогли воспользоваться всеми этими "благами", вам следует сделать так, чтобы ваш шаблон стал виджет-совместимым.
Переделываем шаблон
На самом деле это просто так громко сказано. На деле же ваши действия будут очень простыми.
Обычно виджеты используют в сайдбаре, поэтому в файл sidebar.php нужно всего лишь дописать такой код:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
здесь код сайдбара
<?php endif; ?>
Работает он очень просто - если шаблон поддерживает виджеты и они включены, то управление передается функции динамического сайдбара.
Напомню, что мы используем версию WordPress 2.2 и выше.
Для того, чтобы отключить виджеты нужно просто убрать виджеты из блока сайдбара (Внешний вид - Widgets). В этом случае отображаться будет код сайдбара. Можно сказать, что это вроде как установки сайдбара по-умолчанию.
Функции виджетов
Следующим действием, которое необходимо сделать, это создать файл functions.php. Этот файл содержит функции виджетов, которые вы будете использовать. Имя файла является зарезервированным, поэтому его нельзя использовать для других целей.
В самом простом случае functions.php содержит вызов только одной функции:
register_sidebar( array( 'before_widget' => '', 'after_widget' => '', 'before_title' => '', 'after_title' => '', ));
Как нетрудно догадаться, первые два параметра служат для вывода текста до и после виджета (можно использовать html), а последние два служат для отображения заголовка: код "до" и "после".
Если вы используете тему на основе "Default" ("кубрик"), то функцию можно вызвать так:
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
Просто в таких шаблонах вывод осуществляется в виде <ul> и <li> по такой схеме:
<div id="sidebar"> <ul> <li> блок меню/виджет <li> блок меню/виджет <li> блок меню/виджет </ul> </div>
На мой взгляд это не идеальное решение, поскольку при создании CSS-стилей нужно учитывать вложенность элементов. Поэтому лучше всё-таки использовать что-нибудь попроще:
<div id="sidebar"> блок меню/виджет блок меню/виджет блок меню/виджет </div>
Причем блок в последнем варианте может быть и <div>, и <ul>, а может быть и вообще без объединяющего html-тэга.
К сожалению, дать точную рекомендацию невозможно: в разных шаблонах используются разное оформление и разные функции. Поэтому, для того чтобы определить верный вариант, придется разбираться с каждым шаблоном индивидуально.
Следующим моментом, который вам следует учесть - это то как представленны "блок меню/виджет" в вашем сайдбаре. Многие блогеры меняют параметры вывода функций (например, вывод рубрик), поэтому, когда вы подключите виджет, то увидите только стандартные настройки. Как использовать свои, речь пойдет ниже, но вот, что вам нужно обязательно учесть, так это то, какое оформление и параметры вы будете использовать вместе в выводом "блок меню/виджет".
Еще про блоки меню/виджеты
Я намеренно повторяю слова "блок", потому что это самая главная особенность виджета. Без понимания этого, невозможно понять его работу. Поэтому давайте рассмотрим простой пример. Так я условно разбил блоки сайдбара на виджеты:
<div id="sidebar">
<!-- блок/виджет -->
<h2 class="box">Рубрики</h2>
<ul class="is_link">
<?php
wp_list_categories('show_count=1&title_li=&hide_empty=1');
?>
</ul>
<!-- конец блок/виджет -->
<!-- блок/виджет -->
<h2 class="box">Ссылки</h2>
<ul class="is_link">
<?php
get_links(-1, '<li>', '</li>', '', true, 'rating',
false, false, -1, 1, true);
?>
</ul>
<!-- конец блок/виджет -->
</div>
Так вот - мы можем создать свои виджеты, которые и будут состоять их отмеченных блоков.
Свои виджеты
Для этого нам нужно создать для каждого виджета отдельную функцию и после зарегистрировать её.
Общая схема такая (файл functions.php):
register_sidebar( array(
'before_widget' => '', 'after_widget' => '',
'before_title' => '', 'after_title' => '' ));
function widget_maxsite_1() {
echo 'виджет 1';
}
register_sidebar_widget('Виджет 1', 'widget_maxsite_1');
Обратите внимание на выделенные названия функции widget_maxsite_1: когда вы регистрируете виджет (register_sidebar_widget), то вторым параметром указывается его функция.
Когда мы будем делать второй виджет, то добавим функцию widget_maxsite_2 и зарегистрируем её точно также.
Соглашение об именах функций и переменных
Небольшое отступление, касаемое соглашения об именах функций и переменных. Честно говоря с именами в виджетах можно запутаться даже опытному программисту, потому что виджетов используется много и придумать каждому осмысленное название сложно. Проблема усугубляется еще и тем, что помимо имен функций, мы будем использовать и названия опций, и название полей html-форм.
Поэтому я использют такую схему (N - номер виджета):
widget_maxsite_N:
- Название функции виджета.
- Название опций виджета (get_option)
widget_maxsite_N_options:
- Функция настроек виджета.
menu_ИМЯ_ПОЛЯ:
- Обозначение (name и id) полей html-формы.
Пример
Теперь давайте создадим виджет из нашего первого блока вывода рубрик.
function widget_maxsite_1() {
echo '<h2 class="box">Рубрики</h2>';
echo '<ul class="is_link">';
wp_list_categories('show_count=1&title_li=&hide_empty=1');
echo '</ul>';
}
register_sidebar_widget('Рубрики для меня', 'widget_maxsite_1');
Как видите, вся наша задача состояла только в том, чтобы перенести код из первого блока в функцию виджета.
Теперь зайдите в настроки виджетов и выставьте нужный порядок. Изменения сразу же отобразятся на сайте.
Как изменить название сайдбара
При вызове функции register_sidebar(), WordPress автоматически именует виджеты по-порядку. Не всегда это удобно, например если у вас двухколоночный шаблон. Поэтому можно сразу указать заголовок сайдбара.
register_sidebar(array( 'name' => 'Левая колонка', 'before_widget' => '', 'after_widget' => '', 'before_title' => '', 'after_title' => '', ));
В данном примере, в админ-панели появится блок "Левая колонка".
Что дальше?
В следующий раз я расскажу как сделать так, чтобы виджет стал настраиваемым. А пока у вас есть над чем подумать. 
Подпишитесь на рассылкуИспользуем WordPress для создания своего сайта
и получайте её на e-mail раньше всех!
Постоянная ссылка: http://maxsite.org/?p=255
Версия для печати
