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

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

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

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

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

• Контролировать вывод и логику полностью;
• Добавить настройки для управления содержимым;
• Интегрировать с плагинами и API;
• Оптимизировать код под конкретные задачи.

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

Для создания виджета в WordPress необходимо:

1. Создать класс, наследующийся от WP_Widget;
2. Определить конструктор и методы widget(), form(), update();
3. Зарегистрировать виджет с помощью хука widgets_init;
4. Добавить код вывода и обработки настроек.

Создаем простой виджет "Приветствие" с настройками

Для наглядности сделаем виджет, который выводит приветствие с настраиваемым текстом и цветом. Такой пример можно расширить под свои нужды.

class WPCAT_Widget_Greeting extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'wpcat_greeting', // ID виджета
            'WPCAT Приветствие', // Название
            ['description' => 'Отображает приветственное сообщение с настройками']
        );
    }

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

        $text = !empty($instance['text']) ? $instance['text'] : 'Привет, посетитель!';
        $color = !empty($instance['color']) ? $instance['color'] : '#333333';

        echo '<div style="color:' . esc_attr($color) . '; font-weight: bold;">' . esc_html($text) . '</div>';

        echo $args['after_widget'];
    }

    public function form( $instance ) {
        $text = !empty($instance['text']) ? $instance['text'] : '';
        $color = !empty($instance['color']) ? $instance['color'] : '#333333';
        ?>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('text')); ?>">Текст приветствия:</label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('text')); ?>" name="<?php echo esc_attr($this->get_field_name('text')); ?>" type="text" value="<?php echo esc_attr($text); ?>" />
        </p>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('color')); ?>">Цвет текста:</label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('color')); ?>" name="<?php echo esc_attr($this->get_field_name('color')); ?>" type="color" value="<?php echo esc_attr($color); ?>" />
        </p>
        <?php
    }

    public function update( $new_instance, $old_instance ) {
        $instance = [];
        $instance['text'] = sanitize_text_field( $new_instance['text'] );
        $instance['color'] = sanitize_hex_color( $new_instance['color'] );
        return $instance;
    }
}

// Регистрируем виджет
function wpcat_register_widget_greeting() {
    register_widget( 'WPCAT_Widget_Greeting' );
}
add_action( 'widgets_init', 'wpcat_register_widget_greeting' );

Подключение и использование виджета

Добавьте код создания виджета в файл functions.php вашей темы или в отдельный плагин. После этого в админке WordPress в разделе Внешний вид → Виджеты появится новый виджет "WPCAT Приветствие". Его можно перетащить в любую область виджетов и настроить текст и цвет.

Такой подход позволяет создавать сложные виджеты с собственными настройками, формами, запросами к базе и интеграцией с API.

Пример расширения: добавление вывода даты и времени

Можно дополнить виджет, чтобы он показывал текущую дату и время. Для этого допишем в метод widget() следующий код:

echo '<div style="font-size:12px; color:#666; margin-top:5px;">Сегодня: ' . date_i18n( get_option('date_format') . ' ' . get_option('time_format') ) . '</div>';

Это добавит под приветствием текущую дату и время в формате, заданном в настройках WordPress.

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

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

• Expert Review — для добавления блоков отзывов в виджеты;
• WPStories — визуальные истории, которые можно выводить виджетом;
• My Popup — всплывающие окна, которые можно активировать через виджеты.

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