Добавление виджетов в тему WordPress – часть 7

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

Итак, для добавления виджетов в тему нужно сделать два шага:

1) Добавляем в файл functions.php следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
function register_my_widgets(){
	register_sidebar( array(
		'name' => 'right sidebar',
		'id' => 'sidebar',
		'before_widget' => '<li class="sidebar">',
		'after_widget' => '</li>',
		'before_title' => '<h4>',
		'after_title' => '</h4>',
	) );
}
add_action( 'widgets_init', 'register_my_widgets' );
?>

2) Добавляем в файл sidebar.php такой код:

1
2
3
4
5

<div id="sidebar">
	<ul>		
		<?php dynamic_sidebar('sidebar'); ?>
	</ul>
</div>

Напомним, файл sidebar.php подключается в файле index.php с помощью функции:

1

<?php get_sidebar(); ?>

Подробнее о файле index.php мы писали в части №2.

Теперь детальнее рассмотрим функции, присутствующие в шаге №1 и 2.
Функция register_sidebar регистрирует панель виджетов, которые отобразятся в админ-панели WordPress и на самом сайте. Параметрами функции в нашем примере являются:

1
2
3
4
5
6

- 'name' => 'right sidebar' – название панели виджетов, которое будет отображаться в админке WordPress. В данном случае - right sidebar;
- 'id' => 'sidebar' – идентификатор виджета (id);
- 'before_widget' => '<li class="sidebar">' – HTML-код, который будет расположен перед каждым виджетом. В нашем случае – элемент ненумерованного списка <li class="sidebar"> 
- 'after_widget' => '</li>' - HTML код, который будет расположен после каждого виджета в панели: </li>;
- 'before_title' => '<h4>' – HTML-код перед заголовком виджета. В нашей теме – это <h4>;
- 'after_title' => '</h4>' - HTML-код после заголовка виджета

Следует заметить, что параметры ‘before_widget’ и ‘after_widget’ по умолчанию имеют значения

1

<li id="%1$s" class="widget %2$s"> и </li>

, т.е., сами формируют элемент списка, поэтому их можно и не указывать. Мы же их обозначили, чтобы сразу присвоить нужные классы для последующего описания в файле стилей CSS.
В свою очередь параметры ‘before_title’ и ‘after_title’ по умолчанию формируют теги

1

'<h2 class="widgettitle">' и </h2>

Перейдём к шагу №2. ВНИМАТЕЛЬНО! Функция dynamic_sidebar выводит виджет под названием ‘sidebar’, которое должно совпадать с идентификатором (‘id’ => ‘sidebar’) в функции register_sidebar. Т.е., связка двух функций (dynamic_sidebar и register_sidebar) выполняется с помощью параметра ‘id’, которое заодно выступает и названием виджета (должно совпадать)!
Важно отметить, что данные функции формируют элементы списка:

1

<li></li>

, но не сам обрамляющий тег<ul></ul>, именно поэтому мы добавили его в шаге №2.
В результате выполнения приведённых выше функций WordPress сформирует ненумерованный список:

1

<ul><li></li></ul>

где каждый элемент списка <li></li> будет содержать тот блок, который мы добавим в панели виджетов админки WordPress, например, блок тегов, календарь, поиск и т.д.

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

Обращайтесь к нам – мы создадим оригинальную тему WordPress на заказ!