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

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

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

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

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

• Добавить уникальный функционал без изменения темы;
• Упростить настройку и повторное использование кода;
• Обеспечить удобный интерфейс настройки через админку WordPress;
• Обеспечить безопасность и совместимость с обновлениями WordPress.

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

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

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

Регистрировать виджет нужно с помощью хука widgets_init, чтобы WordPress знал о нашем новом виджете.

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

class Wpcoder_Widget_Custom extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpcoder_custom_widget', // ID виджета
            'WPCoder: Пользовательский виджет', // Название
            ['description' => 'Простой пользовательский виджет с заголовком и текстом']
        );
    }

    // Вывод виджета на сайте
    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'];
        }
        echo '<p>' . esc_html($instance['text']) . '</p>';
        echo $args['after_widget'];
    }

    // Форма настроек в админке
    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : '';
        $text = !empty($instance['text']) ? $instance['text'] : '';
        ?>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>">Заголовок:</label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
        </p>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('text')); ?>">Текст:</label>
            <textarea class="widefat" id="<?php echo esc_attr($this->get_field_id('text')); ?>" name="<?php echo esc_attr($this->get_field_name('text')); ?>"><?php echo esc_textarea($text); ?></textarea>
        </p>
        <?php
    }

    // Обработка и сохранение настроек
    public function update($new_instance, $old_instance) {
        $instance = [];
        $instance['title'] = sanitize_text_field($new_instance['title']);
        $instance['text'] = sanitize_textarea_field($new_instance['text']);
        return $instance;
    }
}

// Регистрация виджета
function wpcoder_register_custom_widget() {
    register_widget('Wpcoder_Widget_Custom');
}
add_action('widgets_init', 'wpcoder_register_custom_widget');

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

Добавление дополнительных настроек и функционала

Наш виджет сейчас очень простой, но его можно расширить, добавив, например:

• Вывод ссылок с настройкой URL;
• Поддержку HTML или визуального редактора в тексте;
• Возможность выбора цвета и стиля через кастомные настройки;
• Интеграцию с API для вывода динамических данных.

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

Расширение класса виджета с ссылкой

public function form($instance) {
    $title = !empty($instance['title']) ? $instance['title'] : '';
    $text = !empty($instance['text']) ? $instance['text'] : '';
    $link = !empty($instance['link']) ? $instance['link'] : '';
    ?>
    <p>
        <label for="<?php echo esc_attr($this->get_field_id('title')); ?>">Заголовок:</label>
        <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
    </p>
    <p>
        <label for="<?php echo esc_attr($this->get_field_id('text')); ?>">Текст:</label>
        <textarea class="widefat" id="<?php echo esc_attr($this->get_field_id('text')); ?>" name="<?php echo esc_attr($this->get_field_name('text')); ?>"><?php echo esc_textarea($text); ?></textarea>
    </p>
    <p>
        <label for="<?php echo esc_attr($this->get_field_id('link')); ?>">Ссылка (URL):</label>
        <input class="widefat" id="<?php echo esc_attr($this->get_field_id('link')); ?>" name="<?php echo esc_attr($this->get_field_name('link')); ?>" type="url" value="<?php echo esc_attr($link); ?>">
    </p>
    <?php
}

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'];
    }
    echo '<p>' . esc_html($instance['text']) . '</p>';
    if (!empty($instance['link'])) {
        echo '<p><a href="' . esc_url($instance['link']) . '" target="_blank" rel="noopener">Перейти по ссылке</a></p>';
    }
    echo $args['after_widget'];
}

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

Такой подход делает виджет более гибким и наглядным для конечных пользователей.

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

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

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

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

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

При создании виджетов стоит помнить несколько важных моментов:

• Используйте безопасные функции для вывода и сохранения данных: esc_html, esc_url, sanitize_text_field и т.п.;
• Поддерживайте локализацию строк через функции __() и _e() для перевода;
• Тестируйте виджет на разных темах и с разными плагинами, чтобы избежать конфликтов;
• Документируйте код и старайтесь писать чисто и понятно — это поможет в дальнейшем развитии;
• Используйте правильные хуки и методы WordPress для совместимости и безопасности.

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