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

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

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

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

Создание собственного виджета позволяет:

• Добавить уникальный функционал, который не предлагает стандартный набор.
• Упростить редактирование определённых элементов сайта для администраторов.
• Интегрировать внешние сервисы или собственные функции.

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

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

Для создания виджета нужно создать класс, наследующий WP_Widget. В этом классе реализуются основные методы:

• __construct() — регистрация виджета с названием и описанием.
• widget() — вывод содержимого виджета на фронтенде.
• form() — форма настроек виджета в админке.
• update() — обработка и сохранение настроек.

После создания класса его нужно зарегистрировать с помощью хука widgets_init.

Пример минимального виджета для wpbloger.ru

class WPBlogger_Custom_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpbloger_custom_widget',
            'WPBlogger: Кастомный виджет',
            ['description' => 'Пример простого виджета для wpbloger.ru']
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        echo '<p>Привет, это кастомный виджет от WPBlogger!</p>';
        echo $args['after_widget'];
    }

    public function form($instance) {
        echo '<p>Настроек нет</p>';
    }

    public function update($new_instance, $old_instance) {
        return $old_instance;
    }
}

function wpbloger_register_custom_widget() {
    register_widget('WPBlogger_Custom_Widget');
}
add_action('widgets_init', 'wpbloger_register_custom_widget');

Этот код можно добавить в файл functions.php вашей темы или в отдельный плагин. После активации виджет появится в разделе Внешний вид > Виджеты.

Добавление настроек в виджет: текстовые поля и чекбоксы

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

Форма настроек виджета

Метод form() отвечает за вывод полей в админке. Для текстового поля используем input type="text", для чекбокса — input type="checkbox".

public function form($instance) {
    $title = !empty($instance['title']) ? $instance['title'] : '';
    $show_message = !empty($instance['show_message']) ? (bool)$instance['show_message'] : false;
    ?>
    <p>
        <label for="<?php echo $this->get_field_id('title'); ?>">Заголовок:</label>
        <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>
        <input class="checkbox" type="checkbox" <?php checked($show_message); ?> id="<?php echo $this->get_field_id('show_message'); ?>" name="<?php echo $this->get_field_name('show_message'); ?>" />
        <label for="<?php echo $this->get_field_id('show_message'); ?>">Показать приветственное сообщение</label>
    </p>
    <?php
}

Обработка и сохранение настроек

Метод update() должен валидировать и сохранять данные.

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

Вывод содержимого с учётом настроек

public function widget($args, $instance) {
    echo $args['before_widget'];

    if (!empty($instance['title'])) {
        echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
    }

    if (!empty($instance['show_message'])) {
        echo '<p>Привет от WPBlogger!</p>';
    }

    echo $args['after_widget'];
}

Использование популярных плагинов для расширения виджетов

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

• Widget Options — добавляет условия отображения, управление видимостью на страницах, устройствах и ролях пользователей.
• SiteOrigin Widgets Bundle — набор готовых виджетов с возможностью кастомизации и визуального редактора.
• Elementor — конструктор страниц с мощным редактором виджетов, позволяющий создавать уникальные блоки без кода.

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

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

1. Используйте префиксы для функций и классов

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

2. Всегда проверяйте и фильтруйте пользовательский ввод

Используйте функции sanitize_text_field, esc_html, esc_attr для безопасности и корректного отображения данных.

3. Поддерживайте совместимость с кастомными темами

Для корректного вывода используйте $args['before_widget'], $args['before_title'] и аналогичные переменные, чтобы виджет выглядел органично в любой теме.

4. Тестируйте виджет на разных устройствах и в разных браузерах

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