В предыдущей статье мы рассмотрели функции WordPress API, предназначенные для работы с виджетами и динамическими сайдбарами. Теперь мы займёмся самим процессом создания виджетов, их настройкой и показом на сайте.
Добавить виджет можно двумя способами:
Эти два способа создания виджетов мы и рассмотрим в данной статье на примере добавления виджета, заменяющего стандартный виджет Meta, выводящий несколько ссылок в колонке вашего блога.
При этом подразумевается, что ваша тема поддерживает работу с динамическими сайдбарами и виджетами. Если же это не так, то вам необходимо добавить поддержку виджетов в вашу тему, как это сделать можно прочитать в моей статье "Делаем тему для WordPress виджет-совместимой".
Определение, активизация и деактивизация виджета в файле functions.php активной темы
Добавление виджета в файл functions.php, на мой взгляд, является самым простым способом создания виджетов. Хотя таким способом, я читаю, лучше добавлять только простые виджеты, использующие либо стандартные функции, либо функции из плагинов, и лучше только виджеты, разработанные специально для конкретной темы. Если же виджет должен самостоятельно проводить большую работу с данными и будем большим по объёму кода и является универсальным, то его необходимо добавлять с помощью плагина. Это позволит, один раз подключив плагин, показывать виджет при включении любой темы.
Попробуем написать виджет, который заменит стандартный виджет Meta(Мета).
Стандартный виджет выводит список ссылок: Вход(если вы не вошли), Панель управления, Выход(если вы уже залогинились), Записи в RSS, RSS-лента комментариев, WordPress.org.
Я хочу, чтобы мой виджет Meta выводил только первые 3 ссылки, а для RSS ссылок я хочу сделать отдельный виджет.
Для начала создаём файл functions.php(если его еще нет) в корне каталога темы, т.е. он должен находится по пути вроде такого:
/home/пользователь/public_html/wp-content/themes/имя_темы/functions.php
В этот файл пока добавляем только две строки:
<?php
?>
Добавляем в него callback-функцию, которая будет использована для регистрации виджета:
function a2p_themename_widget_meta($args) {
extract($args, EXTR_SKIP);
$options = get_option('a2p_themename_widget_meta');
$title = empty($options['title']) ? 'Meta' : $options['title'];
?>
<?php echo $before_widget; ?>
<?php echo $before_title . $title . $after_title; ?>
<ul>
<?php wp_register() ?>
<li><?php wp_loginout() ?></li>
<?php wp_meta() ?>
</ul>
<?php echo $after_widget; ?>
<?php
}
Данная функция соответствует рекомендуемому шаблону написания виджетов. Функция принимает один аргумент $args, который представляет из себя ассоциативный массив, элементы которого перечислены выше при описании функции register_sidebar. Этот массив преобразуется в локальные переменные PHP функцией extract.
Во второй строке функции мы получаем значения опций, задаваемые при настройке виджета, если он это поддерживает. В нашем случае, мы получаем значение для заголовка виджета.
Для того, чтобы иметь возможность задавать заголовок для виджета на странице управления виджетами, нам необходимо еще написать и зарегистрировать callback-функцию, отвечающую за вывод формы настройки виджета. Создаем эту функцию:
function a2p_themename_widget_meta_control() {
$options = $newoptions = get_option('a2p_themename_widget_meta');
if ( $_POST["a2p_themename_meta-submit"] ) {
$newoptions['title'] = strip_tags(stripslashes($_POST["a2p_themename_meta-title"]));
}
if ( $options != $newoptions ) {
$options = $newoptions;
update_option('a2p_themename_widget_meta', $options);
}
$title = htmlspecialchars($options['title'], ENT_QUOTES);
?>
<p><label for="a2p_themename_meta-title"><?php _e('Title:'); ?> <input style="width: 250px;" id="a2p_themename_meta-title" name="a2p_themename_meta-title" type="text" value="<?php echo $title; ?>" /></label></p>
<input type="hidden" id="a2p_themename_meta-submit" name="a2p_themename_meta-submit" value="1" />
<?php
}
В этой функции мы выводим только необходимые поля ввода. Формирование тэга form и отправка формы производится самой системой. Если параметры изменены, они сохраняются.
Теперь мы должны зарегистрировать обе callback-функции. Регистрация виджетов и контролов должна проводится только после описания самих функций.
register_sidebar_widget('Meta', 'a2p_themename_widget_meta');
register_widget_control('Meta', 'a2p_themename_widget_meta_control', 300, 90);
При регистрации контрола, третий и четвёртый параметр задают соответственно ширину и высоту формы настройки виджета.
Все, теперь вы можете зайти на страницу управления виджетами, перетащить виджет с именем Meta в колонку, кликнуть на иконку настройки и задать заголовок для виджета. После нажатия на кнопку "Сохранить изменения", наш виджет должен появится в выбранной колонке и с заданным заголовком.
Содержание файла functions.php, при условии, что он создан нами, должно получится таким:
<?php
function a2p_themename_widget_meta($args) {
extract($args, EXTR_SKIP);
$options = get_option('a2p_themename_widget_meta');
$title = empty($options['title']) ? 'Meta' : $options['title'];
?>
<?php echo $before_widget; ?>
<?php echo $before_title . $title . $after_title; ?>
<ul>
<?php wp_register() ?>
<li><?php wp_loginout() ?></li>
<?php wp_meta() ?>
</ul>
<?php echo $after_widget; ?>
<?php
}
function a2p_themename_widget_meta_control() {
$options = $newoptions = get_option('a2p_themename_widget_meta');
if ( $_POST["a2p_themename_meta-submit"] ) {
$newoptions['title'] = strip_tags(stripslashes($_POST["a2p_themename_meta-title"]));
}
if ( $options != $newoptions ) {
$options = $newoptions;
update_option('a2p_themename_widget_meta', $options);
}
$title = htmlspecialchars($options['title'], ENT_QUOTES);
?>
<p><label for="a2p_themename_meta-title"><?php _e('Title:'); ?> <input style="width: 250px;" id="a2p_themename_meta-title" name="a2p_themename_meta-title" type="text" value="<?php echo $title; ?>" /></label></p>
<input type="hidden" id="a2p_themename_meta-submit" name="a2p_themename_meta-submit" value="1" />
<?php
}
register_sidebar_widget('Meta', 'a2p_themename_widget_meta');
register_widget_control('Meta', 'a2p_themename_widget_meta_control', 300, 90);
?>
Вот и все. Мы заменили стандартный виджет своим. В данном случае, замена произошла потому, что мы регистрировали свой виджет с тем же именем, что и имеющийся стандартный. Так как имена у виджета уникальные, то при регистрации виджета с тем же именем, что и у уже имеющегося виджета происходит замена callback-функции на последнюю указанную.
Контрол регистрируется с тем же именем что и виджет.
Не забывайте, что виджет созданный в файле functions.php темы доступен только при активизации именно этой темы. Иначе будет показываться стандартный виджет.
Для создания виджета для любой активной темы, мы создадим плагин, в котором опишем и зарегистрируем наш виджет.
Определение, активизация и деактивизация виджета в плагине
В плагин мы добавим тот же виджет, заменяющий стандартный виджет Meta. Поэтому, для чистоты эксперимента, код, добавленный в файл functions.php нужно закомментировать или включить другую тему.
Для добавления плагина, мы просто создадим файл со своим именем в каталоге
/home/пользователь/public_html/wp-content/plugins/
, например, a2p_meta_plugin.php в котором пропишем пока только тэги php-кода, а также обязательные комментарии, в которых указывается имя плагина, информация о создателе плагина и др.:
<?php
/*
Plugin Name: A2P Meta Plugin
Plugin URI: http://a2p.net.ru/
Description: Meta Widget.
Author: Alexey Apanovich
Version: 1.0
Author URI: http://a2p.net.ru/
*/
?>
Добавим теперь в этот файл код виджета(callback-функции) и контрола. Он будет аналогичен тому, что мы прописывали в файле functions.php, только с небольшими изменениями:
function a2p_plugin_widget_meta($args) {
extract($args, EXTR_SKIP);
$options = get_option('a2p_plugin_widget_meta');
$title = empty($options['title']) ? 'Meta' : $options['title'];
?>
<?php echo $before_widget; ?>
<?php echo $before_title . $title . $after_title; ?>
<ul>
<?php wp_register() ?>
<li><?php wp_loginout() ?></li>
<?php wp_meta() ?>
</ul>
<?php echo $after_widget; ?>
<?php
}
function a2p_plugin_widget_meta_control() {
$options = $newoptions = get_option('a2p_plugin_widget_meta');
if ( $_POST["a2p_plugin_meta-submit"] ) {
$newoptions['title'] = strip_tags(stripslashes($_POST["a2p_plugin_meta-title"]));
}
if ( $options != $newoptions ) {
$options = $newoptions;
update_option('a2p_plugin_widget_meta', $options);
}
$title = htmlspecialchars($options['title'], ENT_QUOTES);
?>
<p><label for="a2p_plugin_meta-title"><?php _e('Title:'); ?> <input style="width: 250px;" id="a2p_plugin_meta-title" name="a2p_plugin_meta-title" type="text" value="<?php echo $title; ?>" /></label></p>
<input type="hidden" id="a2p_plugin_meta-submit" name="a2p_plugin_meta-submit" value="1" />
<?php
}
Далее нам необходимо зарегистрировать вышеприведенные функции. Это можно было сделать так же, как мы сделали в файле functions.php. Но здесь я приведу более надежный вариант. Так как очень часто виджеты могут использовать функции, описанные в других плагинах или библиотеках, необходимо быть уверенным, что при регистрации callback-функции, все необходимые файлы уже загружены. Для этого мы можем использовать механизм хуков(hooks). Данный механизм позволяет "навесить" вашу функцию на какое-либо событие(action) или обработку данных(filter). Подробнее про это можно прочитать на сайте WordPress Codex.
Мы используем хук для события "init", которое вызывается после загрузки всех файлов, но перед отправкой каких-либо заголовков. Таким образом, мы должны определить функцию, в которой будет проводится регистрация виджета и контрола и "навесить" эту функцию на событие "init":
function a2p_plugin_init() {
register_sidebar_widget('Meta', 'a2p_plugin_widget_meta');
register_widget_control('Meta', 'a2p_plugin_widget_meta_control', 300, 90);
}
add_action('init', 'a2p_plugin_init');
Все содержание файла плагина должно получится таким:
<?php
/*
Plugin Name: A2P Meta Plugin
Plugin URI: http://a2p.net.ru/
Description: Meta Widget.
Author: Alexey Apanovich
Version: 1.0
Author URI: http://a2p.net.ru/
*/
function a2p_plugin_widget_meta($args) {
extract($args, EXTR_SKIP);
$options = get_option('a2p_plugin_widget_meta');
$title = empty($options['title']) ? 'Meta' : $options['title'];
?>
<?php echo $before_widget; ?>
<?php echo $before_title . $title . $after_title; ?>
<ul>
<?php wp_register() ?>
<li><?php wp_loginout() ?></li>
<?php wp_meta() ?>
</ul>
<?php echo $after_widget; ?>
<?php
}
function a2p_plugin_widget_meta_control() {
$options = $newoptions = get_option('a2p_plugin_widget_meta');
if ( $_POST["a2p_plugin_meta-submit"] ) {
$newoptions['title'] = strip_tags(stripslashes($_POST["a2p_plugin_meta-title"]));
}
if ( $options != $newoptions ) {
$options = $newoptions;
update_option('a2p_plugin_widget_meta', $options);
}
$title = htmlspecialchars($options['title'], ENT_QUOTES);
?>
<p><label for="a2p_plugin_meta-title"><?php _e('Title:'); ?> <input style="width: 250px;" id="a2p_plugin_meta-title" name="a2p_plugin_meta-title" type="text" value="<?php echo $title; ?>" /></label></p>
<input type="hidden" id="a2p_plugin_meta-submit" name="a2p_plugin_meta-submit" value="1" />
<?php
}
function a2p_plugin_init() {
register_sidebar_widget('Meta', 'a2p_plugin_widget_meta');
register_widget_control('Meta', 'a2p_plugin_widget_meta_control', 300, 90);
}
add_action('init', 'a2p_plugin_init');
?>
После сохранения файла, переходим на страницу управления плагинами и активизируем наш плагин. Теперь, если перейти к управлению виджетами, можно увидеть, что наш виджет показывается в блоке доступных виджетов. При этом он будет доступен независимо от выбранной темы.
На этом я, пожалуй, и завершу свое описание процесса создания виджетов. Готов ответить на любые вопросы, которые могут возникнуть при попытке применения того, что я тут написал.
Комментариев: 11
Спасибо за статью огромное
Big thanks…
благодаря вашей статье быстро написал собственный простенький виджет для добавления на блог поисковой формы яндекса.
Только я бы функцию a2p_plugin_init()
назвал подругому…
а то припопытке создания второго плагина получился сюрприз
Приятная статья, мне даже очень и очень понравилось!
Полезные скрипты, надо взять на вооружение. Спасибо!
Не в тему, замечательно, что у вас комментарии отделены от трекбеков.
Статья супер, оч много для себя нашел.
Спасибо, пригодилось
Спасибо за информацию. Пригодилась.
Да уж, супер. Вот только непонятно, смеяться или плакать…
Спасибо за отличный материал Вам! Буду у Вас частым гостем)
статья конечно интересная. огорчает, только, что таких на сегодняшнее время маловато:(
Прекрасный блог, прошу вас и дальше писать столь интересно и вразмутельно. Сейчас сам захотел заняться парой проектов - не простое это дело, уходит все свободное время.
На эту страницу размещено 3 ссылок
Создаем виджеты для Wordpress […]
[…] о создании виджетов можно почитать здесь. Очень хороший материал. Если раньше по поводу и без […]
[…] о создании виджетов можно почитать здесь. Очень хороший материал. Если раньше по поводу и без […]