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

Главная > Как создать собственный виджет в WordPress

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

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

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

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

Добавить уникальный функционал, например, вывод последних отзывов, кастомные формы, специальные меню;
Управлять настройками из админки с удобным UI;
Избежать использования тяжёлых плагинов, если нужна только одна специфическая функция.

Далее мы рассмотрим пример создания виджета для вывода последних постов определённой категории с кастомным оформлением.

Основы создания виджета: класс Hueman_Widget_Latest_Posts

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

Пример минимального шаблона класса для нашего сайта hueman.ru:

class Hueman_Widget_Latest_Posts extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'hueman_latest_posts', // ID виджета
            'Hueman: Последние посты', // Название
            array('description' => 'Выводит последние посты из выбранной категории') // Описание
        );
    }

    public function widget($args, $instance) {
        // Вывод виджета на сайт
    }

    public function form($instance) {
        // Форма настроек в админке
    }

    public function update($new_instance, $old_instance) {
        // Обработка и сохранение настроек
    }
}

Уточним каждый метод.

Метод `__construct()` — инициализация виджета

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

Метод `widget()` — вывод содержимого на сайте

Этот метод вызывается для отображения виджета. В него передаются аргументы темы ($args) и текущие настройки виджета ($instance). Внутри обычно выводится HTML с контентом.

Метод `form()` — форма настроек в админке

Здесь создаём HTML-форму с полями настройки, например, выбор категории или количество постов для вывода. Используем значения из $instance для подстановки текущих настроек.

Метод `update()` — сохранение настроек

Обрабатываем данные, пришедшие из формы, фильтруем и сохраняем в базу. Возвращаем обновлённый массив настроек.

Реализация метода widget() — вывод последних постов

Реализуем вывод. Например, чтобы вывести последние посты из выбранной категории, используем WP_Query:

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

    $title = apply_filters('widget_title', $instance['title'] ?? 'Последние посты');
    $category = !empty($instance['category']) ? $instance['category'] : '';
    $posts_count = !empty($instance['posts_count']) ? intval($instance['posts_count']) : 5;

    if ($title) {
        echo $args['before_title'] . $title . $args['after_title'];
    }

    $query_args = [
        'posts_per_page' => $posts_count,
        'post_status' => 'publish',
    ];

    if ($category) {
        $query_args['category_name'] = $category;
    }

    $query = new WP_Query($query_args);

    if ($query->have_posts()) {
        echo '<ul class="hueman-latest-posts">';
        while ($query->have_posts()) {
            $query->the_post();
            echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        }
        echo '</ul>';
        wp_reset_postdata();
    } else {
        echo '<p>Посты не найдены</p>';
    }

    echo $args['after_widget'];
}

Этот код выводит заголовок и список из 5 последних постов выбранной категории.

Реализация формы настроек form() — параметры виджета

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

public function form($instance) {
    $title = $instance['title'] ?? 'Последние посты';
    $category = $instance['category'] ?? '';
    $posts_count = $instance['posts_count'] ?? 5;

    // Получаем список категорий для выпадающего списка
    $categories = get_categories(['hide_empty' => 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>
        <label for="<?php echo $this->get_field_id('category'); ?>">Категория:</label>
        <select class="widefat" id="<?php echo $this->get_field_id('category'); ?>" name="<?php echo $this->get_field_name('category'); ?>">
            <option value="" <?php selected($category, ''); ?>>Все категории</option>
            <?php foreach ($categories as $cat): ?>
                <option value="<?php echo esc_attr($cat->slug); ?>" <?php selected($category, $cat->slug); ?>><?php echo esc_html($cat->name); ?></option>
            <?php endforeach; ?>
        </select>
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('posts_count'); ?>">Количество постов:</label>
        <input class="tiny-text" id="<?php echo $this->get_field_id('posts_count'); ?>" name="<?php echo $this->get_field_name('posts_count'); ?>" type="number" step="1" min="1" value="<?php echo esc_attr($posts_count); ?>" size="3" />
    </p>
    <?php
}

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

Обработка и сохранение данных update()

Для корректного сохранения настроек используем метод update(). Важно фильтровать введённые данные для безопасности.

public function update($new_instance, $old_instance) {
    $instance = [];
    $instance['title'] = sanitize_text_field($new_instance['title']);
    $instance['category'] = sanitize_text_field($new_instance['category']);
    $instance['posts_count'] = (int) $new_instance['posts_count'];

    if ($instance['posts_count'] < 1) {
        $instance['posts_count'] = 5;
    }

    return $instance;
}

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

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

function hueman_register_latest_posts_widget() {
    register_widget('Hueman_Widget_Latest_Posts');
}
add_action('widgets_init', 'hueman_register_latest_posts_widget');

Полезные советы и рекомендации

Создавая виджет, учитывайте следующие моменты:

Используйте функции WordPress для безопасности: esc_html(), esc_attr(), sanitize_text_field() и др.
Обязательно сбрасывайте wp_reset_postdata() после запроса WP_Query, чтобы не сломать основной цикл.
Для более сложных виджетов можно использовать AJAX для загрузки данных без перезагрузки страницы.
Если планируется много настроек, продумайте пользовательский интерфейс, чтобы он был удобным и понятным.

Заключение

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