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

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

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

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

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

• Отображение последних комментариев с дополнительной фильтрацией
• Вывод пользовательских форм или кнопок
• Показ данных из внешних API
• Динамические списки или карусели

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

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

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

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

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

Пример базового виджета для wpaddons.ru

<?php
class WPAddons_Custom_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpaddons_custom_widget',
            'WPAddons: Кастомный виджет',
            array('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'];
        }

        if (!empty($instance['text'])) {
            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')); ?>" rows="4"><?php echo esc_textarea($text); ?></textarea>
        </p>
        <?php
    }

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

function wpaddons_register_custom_widget() {
    register_widget('WPAddons_Custom_Widget');
}
add_action('widgets_init', 'wpaddons_register_custom_widget');
?>

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

Расширение виджета: добавляем динамический контент и настройки

Базовый виджет — это только начало. Чтобы сделать его более мощным, можно добавить динамические данные, например, выводить последние записи из определённой категории или данные из API.

Рассмотрим пример, как добавить выбор категории и выводить 3 последние записи из неё.

Добавление выбора категории в настройки виджета

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

public function form($instance) {
    $title = !empty($instance['title']) ? $instance['title'] : '';
    $category = !empty($instance['category']) ? $instance['category'] : 0;
    $categories = get_categories(array('hide_empty' => false));
    ?>
    <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('category')); ?>">Категория:</label>
        <select class="widefat" id="<?php echo esc_attr($this->get_field_id('category')); ?>" name="<?php echo esc_attr($this->get_field_name('category')); ?>">
            <option value="0">Выберите категорию</option>
            <?php foreach ($categories as $cat): ?>
                <option value="<?php echo esc_attr($cat->term_id); ?>" <?php selected($category, $cat->term_id); ?>><?php echo esc_html($cat->name); ?></option>
            <?php endforeach; ?>
        </select>
    </p>
    <?php
}

И в методе update добавляем обработку поля category:

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

Выводим последние записи выбранной категории

В методе widget добавим запрос и вывод:

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'];
    }

    $cat_id = !empty($instance['category']) ? $instance['category'] : 0;
    if ($cat_id) {
        $query = new WP_Query(array(
            'cat' => $cat_id,
            'posts_per_page' => 3,
            'ignore_sticky_posts' => true
        ));

        if ($query->have_posts()) {
            echo '<ul>';
            while ($query->have_posts()) {
                $query->the_post();
                echo '<li><a href="' . esc_url(get_permalink()) . '">' . esc_html(get_the_title()) . '</a></li>';
            }
            echo '</ul>';
            wp_reset_postdata();
        } else {
            echo '<p>Нет записей в выбранной категории.</p>';
        }
    } else {
        echo '<p>Выберите категорию в настройках виджета.</p>';
    }

    echo $args['after_widget'];
}

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

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

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

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

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

Создавая виджет, обязательно следите за безопасностью вывода и обработки данных. Используйте функции WordPress для экранирования и фильтрации данных, например, esc_html(), sanitize_text_field(), wp_kses_post() и другие.

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

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