Создание виджета WordPress очень похоже на построение плагина, но является более простым и явным процессом. Все, что нужно - один файл, в котором будет находиться весь код PHP (для плагина может потребоваться достаточно сложная файловая структура).
Для организации виджета требуется всего три основных функции:
function widget()
function update()
function form()
Основная структура
Шаблон виджета очень прост. Скелет, на котором строится код, выглядит обычно следующим образом:
add_action( 'widgets_init', 'register_my_widget' ); // Загрузка виджета
function register_my_widget() {} // Функция регистрации виджета
class My_Widget extends WP_Widget () {} //Класс виджета (как пример)
function My_Widget() {} // Установки виджета
function widget() {} // Вывод виджета
function update() {} // Обновление виджета
function form() {} // Форма для опций виджета
Шаг 1
Для начала нужно загрузить виджет с помощью функции “widgets_init“. Это крюк действий и подробное описание вы можете найти в кодексе WordPress.
add_action( 'widgets_init', 'register_my_widget' );
Для инициализации виджета используется функция, в которой наш виджет регистрируется в системе, чтобы к нему открылся доступ в разделе виджетов.
function register_my_widget() {
register_widget( 'My_Widget' );
}
Шаг 2
Весь код виджета заключен в класс. Имя класса имеет важное значение. Нужно помнить, что имя класса и имя функции регистрации должны совпадать.
class My_Widget extends WP_Widget {}
Теперь передадим некоторые установочные параметры в данный класс. Например, мы можем передать ширину и высоту. Также можно определить небольшое описание, которое может быть полезно при привязке виджета к коммерческой теме.
function My_Widget() {
function My_Widget() {
$widget_ops = array( 'classname' => 'example', 'description' => __('Виджет, который выводит имя автора ', 'example') );
$control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' );
$this->WP_Widget( 'example-widget', __('Example Widget', 'example'), $widget_ops, $control_ops );
}
Теперь все необходимые операции по регистрации завершены и можно сконцентрироваться на основных функциях нашего виджета.
Шаг 3
Функция widget()относится к выводу нашего виджета. Мы будем передавать в нее пару аргументов. Первый аргумент будет получен из темы, в нем передается название и другие параметры. А второй аргумент - экземпляр нашего класса.
function widget( $args, $instance )
Затем мы извлекаем значения из аргумента, потому что они должны быть доступны локально.
extract( $args );
Затем мы устанавливаем название и другие значения для нашего виджета, которые можно поменять в меню виджета. Также используются специальные переменные $before_widget и $after_widget, значения которых устанавливается темой.
$title = apply_filters('widget_title', $instance['title'] );
$name = $instance['name'];
$show_info = isset( $instance['show_info'] ) ? $instance['show_info'] : false;
echo $before_widget;
// Выводим название виджета
if ( $title )
echo $before_title . $title . $after_title;
// Выводим имя
if ( $name )
printf( '<p>' . __('Привет! Меня зовут %1$s.', 'example') . '</p>', $name );
if ( $show_info )
printf( $name );
echo $after_widget;
Шаг 4
Теперь функция update(). Данная функция получает установки пользователя и сохраняет их.
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
//Strip tags from title and name to remove HTML
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['name'] = strip_tags( $new_instance['name'] );
$instance['show_info'] = $new_instance['show_info'];
return $instance;
}
Обратите внимание что мы обрезаем любой код XHTML в значениях переменных, чтобы исключить его влияние на работу виджета.
Шаг 5
Теперь создадим шаблон формы, которая будет служить для ввода значений. Здесь пользователь будет определять установки и значения. Функция form() будет содержать код для создания полей ввода, чекбоксов и так далее.
Прежде, чем приступить к созданию полей ввода информации, нужно определить значения по умолчанию.
//Устанавливаем параметры по умолчанию.
$defaults = array( 'title' => __('Пример', 'example'), 'name' => __('Иван Лбов', 'example'), 'show_info' => true );
$instance = wp_parse_args( (array) $instance, $defaults ); ?>
Теперь создаем поля ввода текста.
// Название виджета
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Название:', 'example'); ?></label>
<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
</p>
//Поле ввода текста
<p>
<label for="<?php echo $this->get_field_id( 'name' ); ?>"><?php _e('Ваше имя:', 'example'); ?></label>
<input id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" value="<?php echo $instance['name']; ?>" style="width:100%;" />
</p>
// Чекбокс
<p>
<input class="checkbox" type="checkbox" <?php checked( $instance['show_info'], true ); ?> id="<?php echo $this->get_field_id( 'show_info' ); ?>" name="<?php echo $this->get_field_name( 'show_info' ); ?>" />
<label for="<?php echo $this->get_field_id( 'show_info' ); ?>"><?php _e('Сделать информацию публичной?', 'example'); ?></label>
</p>
Заключение
Вот и весь код простого виджета, который выводит имя автора блога. Сохраните код в PHP файле, который надо разместить в папке темы. Затем надо вызвать его в файле functions.php, после чего виджет будет доступен для использования через панель администратора (раздел для виджетов).