Виджеты позволяют простым перетаскиванием добавлять или удалять различные информационные блоки в ваши колонки, а также менять их порядок и расположение, при этом от вас не требуется знание HTML или PHP. Таким образом, можно настраивать свой блог или сайт абсолютно как вашей душе угодно. Виджеты  можно располагать в боковых колонках и в футере и даже в шапке сайта. Общее определение виджета – это графический мини-модуль, который располагается в рабочем пространстве программы и предназначен для украшения или решения отдельных задач. Конкретно в WordPress примерами виджетов могут служить стандартные блоки поиска, страниц, категорий, архива, календарь записей и т.д. В принципе, современные темы и шаблоны уже являются виджет-совместимыми, поэтому придают большую гибкость при управлении сайтом, однако если вы используете шаблон, выпущенный давно, то можете столкнуться с такой проблемой, как отсутствие в нем виджет-совместимости.

Чтобы узнать, является ли ваш шаблон виджет-совместимым достаточно выбрать в панели администрирования пункт “Виджеты” в блоке “Внешний вид”. Если шаблон не поддерживает виджеты, то появится сообщение, что боковые колонки не определены, а значит и используемая вами тема не поддерживает виджеты и нет возможности настраивать боковые колонки. Боковая колонка – это специальная область для размещения виджетов, которая, как правило, в большинстве случаев располагается в сайдбаре сайта. Боковых колонок может быть несколько, в зависимости от того в каком месте сайта нужно будет выводить виджеты.

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

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

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

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

Этим самым, мы зарегистрировали одну боковую колонку для виджетов. Чтобы посмотреть изменения, опять выберите пункт “Виджеты” в блоке “Внешний вид”. Как видите, теперь у нас с правой стороны появилась колонка под названием “Боковая колонка 1″, которая еще может называться “Сайдбар 1″ или “Sidebar 1″ в зависимости от вашей версии WordPress и установленной локализации. Ну а раз мы определили боковую колонку, то появились и информационные блоки – виджеты.

Определяем область для размещения виджетов

Теперь перетяните любой из доступных виджетов в боковую колонку и нажмите кнопку “Сохранить”. Все, виджет размещен и можно уже посмотреть, где и как он будет располагаться на сайте. Однако, никаких изменений мы не увидим, так как система не знает, в каком именно месте сайта должны выводиться виджеты, поэтому нужно еще задать область, в которой они будут размещаться. Поскольку, мы условились, что в большинстве случаев виджеты располагаются в сайдбаре, то давайте зададим область размещения в файле sidebar.php. Открываем файл и добавляем следующий код:

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>

Здесь первая строка – это начало области размещения виджетов, а вторая строка – конец области размещения.

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

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

Это дает нам управление внешним видом виджета, а точнее можно указать CSS-класс блока, в котором выводится виджет, и его заголовка. Здесь мы можем задать, что будет вставляться перед и после кода самого виджета. Приведу небольшой пример. Допустим, у нас есть код блока, выводящий последние записи на сайте, расположенного в файле sidebar.php и выглядит он примерно так:

<div id="recent">
    <h2>
      <?php _e('Последние записи')?>
    </h2>
    <ul>
      <?php wp_get_archives('type=postbypost&limit=10&format=html'); ?>
    </ul>
</div>

Отбросив php-код и оставив теги html-разметки, получим необходимую информацию о том, что будет вставляться перед и после кода самого виджета, а именно нам потребуется конструкция, вида:

<div id="recent">
   <h2>
   </h2>
</div>

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

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<div id="recent">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>

Использование двух и более колонок для виджетов

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

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

или:

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

Чтобы удобнее было ориентироваться, в каком месте сайта нужно выводить виджеты, каждой колонке можно задать уникальное имя:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'Колонка для сайдбара',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'Колонка для футера',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
?>