Как создать собственный виджет в WordPress: пошаговое руководство с примерами кода

Автор: Егор Смирнов | Опубликовано: 30.11.2025

Что такое виджеты в WordPress и зачем создавать собственные

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

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

В этом руководстве мы подробно разберём, как создать простой, но функциональный виджет с настройками, который можно будет использовать на любом сайте WordPress.

Основы создания виджета в WordPress: класс и регистрация

В WordPress виджет создаётся как класс, наследующийся от базового класса WP_Widget. Важно реализовать несколько обязательных методов, чтобы виджет корректно работал:

__construct() — инициализация виджета, где задаётся его имя, описание и другие параметры.
widget($args, $instance) — вывод содержимого виджета на фронтенде.
form($instance) — форма настроек виджета в админке.
update($new_instance, $old_instance) — обработка и сохранение настроек.

Рассмотрим пример создания виджета, который выводит приветствие с возможностью задать имя посетителя в настройках.

Пример класса виджета для wpto.ru

class Wpto_Greeting_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpto_greeting_widget',
            'WPTО: Приветствие',
            [ 'description' => 'Простой виджет для приветствия посетителей' ]
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        $name = !empty($instance['name']) ? $instance['name'] : 'гость';
        echo $args['before_title'] . 'Приветствие' . $args['after_title'];
        echo '<p>Здравствуйте, ' . esc_html($name) . '! Добро пожаловать на наш сайт.</p>';
        echo $args['after_widget'];
    }

    public function form($instance) {
        $name = !empty($instance['name']) ? $instance['name'] : '';
        ?>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('name')); ?>">Имя посетителя:</label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('name')); ?>" name="<?php echo esc_attr($this->get_field_name('name')); ?>" type="text" value="<?php echo esc_attr($name); ?>">
        </p>
        <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = [];
        $instance['name'] = (!empty($new_instance['name'])) ? sanitize_text_field($new_instance['name']) : '';
        return $instance;
    }
}

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

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

function wpto_register_widgets() {
    register_widget('Wpto_Greeting_Widget');
}
add_action('widgets_init', 'wpto_register_widgets');

После этого в разделе «Виджеты» админки появится новый виджет «WPTО: Приветствие», который можно будет добавить в любую область виджетов.

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

Пример выше демонстрирует базовую работу виджета. Но часто требуется более сложный функционал: несколько настроек, динамические данные, вывод из базы или API. Рассмотрим, как добавить в виджет чекбокс и выпадающий список для выбора типа приветствия.

Для этого дополним методы form, update и widget следующим образом:

public function form($instance) {
    $name = !empty($instance['name']) ? $instance['name'] : '';
    $show_time = !empty($instance['show_time']) ? (bool)$instance['show_time'] : false;
    $greeting_type = !empty($instance['greeting_type']) ? $instance['greeting_type'] : 'default';
    ?>
    <p>
        <label for="<?php echo esc_attr($this->get_field_id('name')); ?>">Имя посетителя:</label>
        <input class="widefat" id="<?php echo esc_attr($this->get_field_id('name')); ?>" name="<?php echo esc_attr($this->get_field_name('name')); ?>" type="text" value="<?php echo esc_attr($name); ?>">
    </p>
    <p>
        <input class="checkbox" type="checkbox" <?php checked($show_time); ?> id="<?php echo esc_attr($this->get_field_id('show_time')); ?>" name="<?php echo esc_attr($this->get_field_name('show_time')); ?>" />
        <label for="<?php echo esc_attr($this->get_field_id('show_time')); ?>">Показывать время приветствия</label>
    </p>
    <p>
        <label for="<?php echo esc_attr($this->get_field_id('greeting_type')); ?>">Тип приветствия:</label>
        <select id="<?php echo esc_attr($this->get_field_id('greeting_type')); ?>" name="<?php echo esc_attr($this->get_field_name('greeting_type')); ?>" class="widefat">
            <option value="default" <?php selected($greeting_type, 'default'); ?>>Обычное</option>
            <option value="formal" <?php selected($greeting_type, 'formal'); ?>>Формальное</option>
            <option value="friendly" <?php selected($greeting_type, 'friendly'); ?>>Дружеское</option>
        </select>
    </p>
    <?php
}

public function update($new_instance, $old_instance) {
    $instance = [];
    $instance['name'] = (!empty($new_instance['name'])) ? sanitize_text_field($new_instance['name']) : '';
    $instance['show_time'] = !empty($new_instance['show_time']) ? 1 : 0;
    $allowed_types = ['default', 'formal', 'friendly'];
    $instance['greeting_type'] = in_array($new_instance['greeting_type'], $allowed_types) ? $new_instance['greeting_type'] : 'default';
    return $instance;
}

public function widget($args, $instance) {
    echo $args['before_widget'];
    $name = !empty($instance['name']) ? $instance['name'] : 'гость';
    $show_time = !empty($instance['show_time']);
    $greeting_type = !empty($instance['greeting_type']) ? $instance['greeting_type'] : 'default';

    $greetings = [
        'default' => 'Здравствуйте',
        'formal' => 'Добрый день',
        'friendly' => 'Привет'
    ];
    $greeting_text = isset($greetings[$greeting_type]) ? $greetings[$greeting_type] : $greetings['default'];

    echo $args['before_title'] . 'Приветствие' . $args['after_title'];
    echo '<p>' . esc_html($greeting_text) . ', ' . esc_html($name) . '!</p>';

    if ($show_time) {
        echo '<p>Сейчас ' . date_i18n('H:i:s') . '</p>';
    }

    echo $args['after_widget'];
}

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

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

Если создавать виджеты вручную сложно или нужно быстро расширить функционал, есть полезные плагины, которые помогут:

Widget Options — добавляет расширенные настройки виджетов, включая условия отображения, отложенную загрузку, адаптивность.
Custom Sidebars — позволяет создавать собственные области виджетов и динамически менять их в зависимости от страницы.
WP Widget Clone — копирует существующие виджеты для их быстрого повторного использования.

Эти инструменты помогут более эффективно управлять виджетами без необходимости писать код.

Советы и рекомендации при создании виджетов

При разработке собственных виджетов учитывайте следующие моменты:

Безопасность. Всегда очищайте входящие данные с помощью функций sanitize_text_field, esc_html и других, чтобы избежать XSS и других уязвимостей.
Производительность. Старайтесь не выполнять тяжелые запросы или операции при выводе виджета. Кэшируйте результаты, если нужно.
Удобство пользователя. Делайте понятные и простые настройки в форме виджета, чтобы администраторы сайта могли легко ими воспользоваться.
Локализация. Используйте функции интернационализации __() и _e() для текста, чтобы виджет можно было легко переводить.

Следование этим советам поможет создавать качественный и надёжный функционал.