Виджеты в WordPress

Последнюю запись, сделанную в 2008 году, я решила посвятить вопросу создания собственной виджет-совместимой темы для wordpress. Сразу определимся с терминологией, виджет-совместимая тема, это, как нетрудно догадаться, шаблон поддерживающий возможность динамически добавлять или удалять любые виджеты. По идее любая тема должна быть такой, иначе большая часть преимуществ wordpress, просто теряется, но как часто бывает, теория иногда расходится с практикой.

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

Для отображения виджетов в WordPress используется сайдабр, поэтому в вашей теме обязательно должен присутствовать файл sidebar.php. Содержимое этого файла может быть разным, в зависимости от того что за тему вы используете. Основная причина создания тем без виджетов, я считаю состоит в неумении оформить их  под общий стиль блога, хотя в этом нет ничего сложного.

Как бы там ни было, нужно открыть файл sidebar.php, каким-нибудь редактором, в нем для динамического добавления и удаления виджетов должно быть следующее:

<div id="sidebar">
 <?php  /* Widgetized sidebar, if you have the plugin installed. */
	  if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
 <?php endif; ?>
</div>

Это всего лишь означает, что все содержимое сайдбара будет выведено в блок «sidebar», если у нас присутствует функция dynamic_sidebar(). Все остальное, если там еще что-то есть, можно смело удалять, оно нам не понадобится. 

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

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

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

<?php
  if ( function_exists('register_sidebar') )
	register_sidebar(array(
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));
?>

Теперь, после внесения измененений, wordpress будет выводить все заголовки виджетов, заключенные в теги заголовка h3, а тело виджета в тэги блока div. Следовательно, нет ничего проще чем назначить выводимым элементам любой стиль, который только можно придумать, например следующий код раскрасит все заголовки виджетов в красный цвет, а содержимое в зеленый:

#sidebar h3{
  color: red;
}
#sidebar div{
  background: green;
}

Вот так очень просто, можно назначить одинаковый стиль всем виджетам, добавляемым на ваш сайдбар, а что если нужно чтобы виджеты между собой отличались? Это тоже довольно легко сделать, почему-то я так и не нашла статей на эту тему, поэтому расскажу то, что раскопала сама. На самом деле копать долго не пришлось,  каждому динамическому виджету, присвоен уникальный класс, название классов можно посмотреть в файле wp-includes/widgets.php. Ну а дальше все и так ясно, зная имена классов, достаточно назначить им нужный стиль в css-файле.