Как создать собственный виджет в WordPress с поддержкой AJAX

В этой статье мы разберём, как создать собственный виджет для WordPress, который будет использовать AJAX для динамического обновления контента без перезагрузки страницы. Такой подход улучшает пользовательский опыт, позволяя делать запросы на сервер и обновлять данные на лету.

Основы создания виджета WordPress

Виджеты в WordPress — это удобный способ добавления контента или функционала в боковые панели и другие области темы. Для создания виджета нужно наследовать класс WP_Widget и реализовать несколько обязательных методов.

Вот базовый шаблон виджета:

class WPKEY_Widget_Example extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpkey_widget_example',
            'WPKEY: Пример виджета',
            array( 'description' => 'Пример собственного виджета с AJAX' )
        );
    }

    public function widget( $args, $instance ) {
        echo $args['before_widget'];
        echo '<div id="wpkey-widget-content">Загрузка...</div>';
        echo $args['after_widget'];
    }

    public function form( $instance ) {
        // Форма настроек виджета в админке
    }

    public function update( $new_instance, $old_instance ) {
        // Сохранение настроек
    }
}

Далее нужно зарегистрировать виджет в функции widgets_init:

function wpkey_register_widgets() {
    register_widget( 'WPKEY_Widget_Example' );
}
add_action( 'widgets_init', 'wpkey_register_widgets' );

Добавляем поддержку AJAX в виджет

Чтобы сделать виджет динамическим, мы добавим обработчик AJAX, который будет возвращать данные для обновления. В WordPress AJAX-запросы обрабатываются через хуки wp_ajax_ и wp_ajax_nopriv_ для авторизованных и неавторизованных пользователей соответственно.

Регистрация AJAX действий

Добавим в файл плагина или functions.php следующие обработчики:

add_action( 'wp_ajax_wpkey_get_widget_data', 'wpkey_get_widget_data_callback' );
add_action( 'wp_ajax_nopriv_wpkey_get_widget_data', 'wpkey_get_widget_data_callback' );

function wpkey_get_widget_data_callback() {
    // Здесь формируем данные для вывода
    $time = current_time( 'H:i:s' );
    wp_send_json_success( array( 'time' => $time ) );
}

Подключение JavaScript для AJAX

Создайте файл widget-ajax.js в папке плагина или темы и добавьте туда следующий код:

jQuery(document).ready(function($) {
    function wpkeyUpdateWidget() {
        $.ajax({
            url: wpkey_ajax_object.ajax_url,
            method: 'POST',
            data: {
                action: 'wpkey_get_widget_data'
            },
            success: function(response) {
                if (response.success) {
                    $('#wpkey-widget-content').text('Текущее серверное время: ' + response.data.time);
                }
            }
        });
    }

    // Обновляем виджет при загрузке страницы и каждые 30 секунд
    wpkeyUpdateWidget();
    setInterval(wpkeyUpdateWidget, 30000);
});

Теперь нужно зарегистрировать скрипт и передать параметр с URL для AJAX-запроса в PHP:

function wpkey_enqueue_widget_scripts() {
    wp_enqueue_script( 'wpkey-widget-ajax', plugin_dir_url( __FILE__ ) . 'widget-ajax.js', array('jquery'), null, true );
    wp_localize_script( 'wpkey-widget-ajax', 'wpkey_ajax_object', array(
        'ajax_url' => admin_url( 'admin-ajax.php' )
    ));
}
add_action( 'wp_enqueue_scripts', 'wpkey_enqueue_widget_scripts' );

Расширение функционала виджета и примеры использования

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

Если хотите добавить настройки в админке, используйте метод form() для вывода полей и update() для сохранения данных. Ниже пример поля для выбора текста кнопки, которая может запускать AJAX обновление:

public function form( $instance ) {
    $button_text = !empty( $instance['button_text'] ) ? $instance['button_text'] : 'Обновить';
    ?>
    <p>
        <label for="<?php echo esc_attr( $this->get_field_id( 'button_text' ) ); ?>">Текст кнопки:</label>
        <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'button_text' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'button_text' ) ); ?>" type="text" value="<?php echo esc_attr( $button_text ); ?>" />
    </p>
    <?php
}

public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['button_text'] = sanitize_text_field( $new_instance['button_text'] );
    return $instance;
}

И в методе widget() добавить кнопку с заданным текстом, к которой можно привязать событие для обновления через AJAX.

Полезные плагины для расширения возможностей виджетов

Если хочется не писать код с нуля, можно использовать плагины, которые помогают создавать виджеты с AJAX и динамическим контентом:

• Clearfy Pro — оптимизация и расширение функционала сайта, в том числе для виджетов.
• WPRemark — плагин для улучшения комментариев и виджетов с интерактивом.

Используйте эти инструменты для ускорения разработки и повышения качества пользовательского интерфейса.

Резюме

Создание собственного виджета с поддержкой AJAX — это отличный способ добавить интерактивность и современный UX на сайт WordPress. Главное — грамотно организовать обработку запросов на сервере и корректно подключить скрипты на клиенте. Предложенный пример можно взять за основу и адаптировать под множество задач.