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

Автор: Артем Савельев | Опубликовано: 13.11.2025

Создание собственного виджета в WordPress — одна из самых востребованных задач среди разработчиков, которые хотят расширить функционал сайта без использования сторонних плагинов. В этой статье подробно разберём, как написать собственный виджет с помощью объектно-ориентированного подхода и зарегистрировать его в системе WordPress.

Что такое виджет в WordPress и зачем создавать свой?

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

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

Создание собственного виджета на примере: пошаговый разбор

Шаг 1. Создаём класс виджета

Все виджеты в WordPress создаются как классы, наследующие WP_Widget. Обязательными методами являются конструктор, метод widget() для вывода содержимого и form() для админской формы настройки.

class Wpdeveloper_My_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpdeveloper_my_widget', // ID виджета
            'WPDeveloper: Мой виджет', // Имя виджета
            array( 'description' => 'Пример собственного виджета WPDeveloper' )
        );
    }

    public function widget( $args, $instance ) {
        echo $args['before_widget'];
        $title = apply_filters( 'widget_title', $instance['title'] ?? 'Заголовок по умолчанию' );
        if ( ! empty( $title ) ) {
            echo $args['before_title'] . $title . $args['after_title'];
        }
        echo '<p>Привет от собственного виджета WPDeveloper!</p>';
        echo $args['after_widget'];
    }

    public function form( $instance ) {
        $title = $instance['title'] ?? '';
        ?>
        <p><label for="<?php echo $this->get_field_id('title'); ?>">Заголовок:</label><br>
        <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>"></p>
        <?php
    }

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

Шаг 2. Регистрация виджета в WordPress

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

function wpdeveloper_register_my_widget() {
    register_widget( 'Wpdeveloper_My_Widget' );
}
add_action( 'widgets_init', 'wpdeveloper_register_my_widget' );

Настройка виджета: как расширить функционал

Добавляем дополнительные поля в форму настройки

Чтобы сделать виджет более гибким, можно добавить в форму настроек поля для ввода пользовательских данных, например, текст, цвет фона или URL изображения. Все данные сохраняются в массиве $instance.

Пример добавления поля для ввода произвольного текста:

public function form( $instance ) {
    $title = $instance['title'] ?? '';
    $custom_text = $instance['custom_text'] ?? '';
    ?>
    <p><label for="<?php echo $this->get_field_id('title'); ?>">Заголовок:</label><br>
    <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>"></p>

    <p><label for="<?php echo $this->get_field_id('custom_text'); ?>">Текст для вывода:</label><br>
    <textarea class="widefat" id="<?php echo $this->get_field_id('custom_text'); ?>" name="<?php echo $this->get_field_name('custom_text'); ?>"><?php echo esc_textarea($custom_text); ?></textarea></p>
    <?php
}

public function update( $new_instance, $old_instance ) {
    $instance = [];
    $instance['title'] = sanitize_text_field( $new_instance['title'] );
    $instance['custom_text'] = sanitize_textarea_field( $new_instance['custom_text'] );
    return $instance;
}

public function widget( $args, $instance ) {
    echo $args['before_widget'];
    $title = apply_filters( 'widget_title', $instance['title'] ?? 'Заголовок по умолчанию' );
    if ( ! empty( $title ) ) {
        echo $args['before_title'] . $title . $args['after_title'];
    }
    $custom_text = $instance['custom_text'] ?? '';
    echo '<p>' . esc_html($custom_text) . '</p>';
    echo $args['after_widget'];
}

Пример использования пользовательских стилей и скриптов

Если виджет требует подключения CSS или JS, лучше регистрировать и подключать их через хуки WordPress, чтобы избежать конфликтов и повысить производительность.

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

function wpdeveloper_widget_scripts() {
    wp_enqueue_style( 'wpdeveloper-widget-style', plugin_dir_url(__FILE__) . 'css/widget-style.css' );
    wp_enqueue_script( 'wpdeveloper-widget-script', plugin_dir_url(__FILE__) . 'js/widget-script.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'wpdeveloper_widget_scripts' );

После этого в файлах widget-style.css и widget-script.js можно описать необходимые стили и функционал для вашего виджета.