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

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

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

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

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

• Гибкость в отображении информации;
• Возможность добавлять настройки для управления выводом;
• Интеграцию с собственными данными и API;
• Улучшение пользовательского опыта и админ-панели.

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

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

Рассмотрим базовый шаблон виджета на примере, который мы потом расширим:

class Wprobot_Custom_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wprobot_custom_widget',
            'Wprobot: Мой виджет',
            ['description' => 'Пример собственного виджета']
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        echo 'Привет, это мой виджет!';
        echo $args['after_widget'];
    }

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

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

function wprobot_register_custom_widget() {
    register_widget('Wprobot_Custom_Widget');
}
add_action('widgets_init', 'wprobot_register_custom_widget');

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

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

Чтобы виджет был полезным и настраиваемым, нужно добавить форму настроек. В методе form() выводится HTML форма, в которой администратор может вводить параметры, а в update() обрабатываются и сохраняются эти данные.

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

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

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'] : 'Последние записи';
    $category = !empty($instance['category']) ? $instance['category'] : 0;
    $number = !empty($instance['number']) ? absint($instance['number']) : 5;
    $categories = get_categories();
    ?>
    <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>
    <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>
    <?php
}

public function update($new_instance, $old_instance) {
    $instance = [];
    $instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
    $instance['category'] = (!empty($new_instance['category'])) ? absint($new_instance['category']) : 0;
    $instance['number'] = (!empty($new_instance['number'])) ? absint($new_instance['number']) : 5;
    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'];
    }

    $query_args = [
        'post_type' => 'post',
        'posts_per_page' => $instance['number'],
    ];

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

    $query = new WP_Query($query_args);

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

    echo $args['after_widget'];
}

Полезные плагины для создания виджетов и расширения функционала

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

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

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

Заключение и рекомендации

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

Для удобства разработки соблюдайте следующие рекомендации:

• Используйте правильную фильтрацию и экранирование данных для безопасности.
• Разделяйте логику и вывод, чтобы облегчить поддержку.
• Тестируйте виджет в разных темах и с разными плагинами.
• Документируйте код для будущих изменений.

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