Виджетизация WordPress темы с помощью двух простых шагов

В процессе работы над новой темой, подготовленной для очередного обновления книги «Digging into WordPress», я столкнулся с вопросом виджетизации. Виджеты дают возможность пользователям, обладающим недостаточной технической подготовкой, настроить используемую тему с учетом собственных потребностей в функционировании и расположении структурных элементов. Учитывая количество доступных в WordPress виджетов, сделать это не представляет особого труда.

Говоря о виджетах, вам, скорее всего, представляются некоторые абстрактные элементы, расположенные в сайдбаре. На самом деле виджеты могут находиться где угодно, поскольку вы можете виджетизировать любой участок своей темы. В этой статье мы покажем вам, как провести виджетизацию темы с помощью двух простых шагов. Как только азы виджетизации останутся позади, мы рассмотрим некоторые полезные подсказки и приемы работы с виджетами.

Виджетизация WordPress темы. Шаг первый

Разместите в файле functions.php своей активной темы следующий код:

if (function_exists('register_sidebar')) {

	register_sidebar(array(
		'name' => 'Widgetized Area',
		'id'   => 'widgetized-area',
		'description'   => 'This is a widgetized area.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));

}

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

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

• name — название виджетизированной области, которое будет отображаться в панели администратора
• id — уникальный идентификатор виджетизированной области
• description — описание виджетизированной области
• before_widget — разметка, которая будет сгенерирована перед любым добавленным виджетом
• after_widget — разметка, которая будет сгенерирована после любого добавленного виджета
• before_title — разметка, которая будет сгенерирована перед заголовком любого добавленного виджета
• after_title — разметка, которая будет сгенерирована после заголовка любого добавленного виджета

Таким образом, учитывая перечисленные выше параметры, наш код виджетизации спродуцировал бы следующий вывод (на примере встроенного в WordPress виджета Search):

<div id="search-3" class="widget widget_search">
	<h4>Search</h4>
	<form role="search" method="get" id="searchform" action="http://localhost/283/" >
		<div>
			<label class="screen-reader-text" for="s">Search for:</label>
			<input type="text" value="" name="s" id="s" />
			<input type="submit" id="searchsubmit" value="Search" />
		</div>
	</form>
</div>

Обратите свое внимание на разметку, созданную для открывающего блока div. Информация, необходимая для его атрибутов, создается на основании сопоставления, которое определено в нашем массиве. Чтобы понять это, сравните исходные директивы sprintf и результирующий (X)HTML-код:

'before_widget' => '<div id="%1$s" class="widget %2$s">',
<div id="search-3" class="widget widget_search">

Взаимосвязь видна невооруженным глазом. Этот действенный способ позволяет гарантировать, что у всех виджетов будут однотипные имена классов и уникальные идентификаторы, что важно для создания продуманной CSS стилизации.

Давайте перейдем ко второму шагу.

Виджетизация WordPress темы. Шаг второй

Теперь мы готовы приступить к выводу виджетизированной области. Чтобы сделать это, нам необходимо добавить следующий код в любой шаблон (или несколько шаблонов) используемой темы:

<div id="widgetized-area">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('widgetized-area')) : else : ?>

	<div class="pre-widget">
		<p><strong>Widgetized Area</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>

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

Все, что находится между операторами if/endif, будет отображаться в браузере в том случае, если ни один из виджетов не был активирован. Здесь можно разместить небольшие подсказки, говорящие о том, что данная область виджетизирована и может быть использована для добавления виджетов. Я также задал класс “pre-widget”, помогающий провести стилизацию области перед виджетом. Если у вас на странице расположено несколько виджетизированных областей, этот класс поможет быстро подвесить необходимые стили.

Обратите внимание, что мы используем заданный в массиве виджетизации (см. шаг первый) параметр id в качестве значения для проверки dynamic_sidebar() в третьей строке.

Несколько виджетизированных областей в одном шаблоне

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

if (function_exists('register_sidebar')) {

	register_sidebar(array(
		'name' => 'Header',
		'id'   => 'header',
		'description'   => 'This is the widgetized header.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));
	register_sidebar(array(
		'name' => 'Sidebar',
		'id'   => 'sidebar',
		'description'   => 'This is the widgetized sidebar.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));
	register_sidebar(array(
		'name' => 'Footer',
		'id'   => 'footer',
		'description'   => 'This is the widgetized footer.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));

}

Теперь нам предстоит раскидать блоки кода по необходимым нам участкам шаблона:

<div id="widgetized-header">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header')) : else : ?>

	<div class="pre-widget">
		<p><strong>Widgetized Header</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>
<div id="widgetized-sidebar">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else : ?>

	<div class="pre-widget">
		<p><strong>Widgetized Sidebar</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>
<div id="widgetized-footer">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('footer')) : else : ?>

	<div class="pre-widget">
		<p><strong>Widgetized Footer</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>

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

Некоторые приемы виджетизации

Оптимизация и систематизация произвольных виджетов

Первое, что я делаю после виджетизации новой темы, это подключаю отдельный файл “widgets.php”, который содержит все произвольные виджеты. Единственная строка кода — все, что необходимо для реализации этой функциональности:

if ($wp_version >= 2.8) require_once(TEMPLATEPATH.'/widgets.php');

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

Замена стандартных виджетов WordPress

Некоторые стандартные виджеты не несут в себе достаточной функциональности. К счастью, вы всегда можеет заменить их своими собственными наработками. В качестве примера приведем изменение стандартного виджета Search:

<?php function custom_search_widget() { ?>

<form action="http://localhost/283/index.php" method="get">
	<div>
		<label for="s">Site Search</label>
		<input id="s" name="s" alt="Search" type="text" />
	</div>
</form>

<?php } if (function_exists('register_sidebar_widget'))

register_sidebar_widget(__('Search'), 'custom_search_widget'); ?>

Скрытие неиспользуемых областей для виджетов

Пустая виджетизированная область выглядит довольно странно и неуместно, особенно если к ней применены CSS стили. Чтобы скрыть такие области, можно использовать следующий код:

<?php if (function_exists('is_sidebar_active') && is_sidebar_active('sidebar')) { ?>

<!-- code from Step 2 or whatever you want -->

<?php } ?>

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

http://digwp.com/2010/02/how-to-widgetize-wordpress-theme/