Построение простого виджета для WordPress

25 Мар 2023г. в 11:52

Создание виджета 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, после чего виджет будет доступен для использования через панель администратора (раздел для виджетов).