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

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

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

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

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

• Реализовать нестандартный функционал, который не покрыт плагинами;
• Сделать интерфейс настройки виджета через админку;
• Управлять выводом данных на фронтенде;
• Оптимизировать работу сайта под конкретные задачи.

Далее рассмотрим, как это делается на практике.

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

Для создания виджета мы создадим класс, унаследованный от WP_Widget, и зарегистрируем его через хук widgets_init. Это классический способ, который работает во всех версиях WordPress.

Пример базового виджета для сайта wpqa.ru:

class Wpqa_Custom_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpqa_custom_widget',
            'WPQA: Пользовательский виджет',
            ['description' => 'Пример собственного виджета для сайта wpqa.ru']
        );
    }

    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>Это мой кастомный виджет с уникальным содержимым.</p>';
        echo $args['after_widget'];
    }

    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : '';
        ?>
        <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>
        <?php
    }

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

function wpqa_register_custom_widget() {
    register_widget('Wpqa_Custom_Widget');
}
add_action('widgets_init', 'wpqa_register_custom_widget');

Объяснение кода

В конструкторе задаём ID и название виджета, а также описание. Метод widget отвечает за вывод содержимого на сайте. В методе form создаётся интерфейс настройки виджета в админке, а update обрабатывает сохранение новых данных.

Добавление более сложной логики: вывод последних вопросов с сайта wpqa.ru

Предположим, что на сайте wpqa.ru есть пользовательские записи с типом question. Создадим виджет, который выводит последние вопросы с ссылками.

Для этого изменим метод 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'];
    }

    $query = new WP_Query([
        'post_type' => 'question',
        'posts_per_page' => 5,
        'post_status' => 'publish'
    ]);

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

    echo $args['after_widget'];
}

Такой виджет автоматически обновляет список вопросов без необходимости вручную менять содержимое. Это удобно для сайтов с активным сообществом.

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

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

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

public function form($instance) {
    $title = !empty($instance['title']) ? $instance['title'] : '';
    $number = !empty($instance['number']) ? intval($instance['number']) : 5;
    $category = !empty($instance['category']) ? $instance['category'] : '';

    $categories = get_terms(['taxonomy' => 'question_category', '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('number')); ?>">Количество вопросов:</label>
        <input class="tiny-text" id="<?php echo esc_attr($this->get_field_id('number')); ?>" name="<?php echo esc_attr($this->get_field_name('number')); ?>" type="number" step="1" min="1" value="<?php echo esc_attr($number); ?>" size="3">
    </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="">Все категории</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>
    <?php
}

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

И в методе widget применим эти настройки:

$args_query = [
    'post_type' => 'question',
    'posts_per_page' => $instance['number'],
    'post_status' => 'publish'
];
if (!empty($instance['category'])) {
    $args_query['tax_query'] = [[
        'taxonomy' => 'question_category',
        'field' => 'slug',
        'terms' => $instance['category']
    ]];
}
$query = new WP_Query($args_query);

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

Хотя создание виджета вручную даёт полный контроль, есть плагины, которые существенно упрощают работу и добавляют функциональность:

• Widget Options — позволяет управлять отображением виджетов по страницам, ролям пользователей, устройствам и др.;
• Custom Sidebars — создаёт дополнительные области виджетов для разных страниц;
• Widget Importer & Exporter — удобен для переноса настроек виджетов между сайтами;
• Code Snippets — безопасный способ добавлять пользовательский PHP-код без редактирования файлов темы.

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

Заключение: как подойти к созданию виджета на wpqa.ru

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

На wpqa.ru, например, можно создавать виджеты, которые выводят последние вопросы, популярные темы, или отображают пользовательскую статистику. Важно всегда обрабатывать входные данные и оптимизировать запросы для быстрой работы.

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