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

Автор: Елена Волкова | Опубликовано: 28.11.2025

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

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

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

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

Структура и базовые методы создания виджета в WordPress

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

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

После создания класса виджет необходимо зарегистрировать с помощью хука widgets_init.

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

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

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

<?php
class WPlinks_Custom_Text_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wplinks_custom_text',
            'WPlinks: Произвольный текст',
            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" rows="4" id="<?php echo esc_attr( $this->get_field_id( 'text' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'text' ) ); ?>"><?php echo esc_textarea( $text ); ?></textarea>
        </p>
        <?php
    }

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

function wplinks_register_custom_text_widget() {
    register_widget( 'WPlinks_Custom_Text_Widget' );
}
add_action( 'widgets_init', 'wplinks_register_custom_text_widget' );
?>

Этот код создаёт виджет с двумя настройками: заголовок и текст. В админке виджет будет иметь удобную форму, а на сайте выведет заданный контент.

Как улучшить и расширить собственный виджет WordPress

После создания базового виджета можно добавить новые функции, чтобы сделать его более полезным и гибким. Например:

Добавление опций форматирования. Можно добавить выбор цвета текста, фона, шрифта или других CSS параметров. Для этого расширьте форму form(), добавьте поля для выбора стилей и примените их в методе widget().
Использование WYSIWYG редактора. Стандартный textarea можно заменить на редактор TinyMCE через функцию wp_editor(), чтобы пользователь мог форматировать текст без знания HTML.
Кэширование вывода виджета. Для снижения нагрузки на сайт можно кешировать HTML-вывод виджета с помощью Transients API.
Поддержка мультиязычности. Добавьте функции локализации, чтобы виджет можно было использовать на разных языках.

Вот пример расширения формы с добавлением выбора цвета текста:

public function form( $instance ) {
    $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
    $text = ! empty( $instance['text'] ) ? $instance['text'] : '';
    $color = ! empty( $instance['color'] ) ? $instance['color'] : '#000000';
    ?>
    <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" rows="4" id="<?php echo esc_attr( $this->get_field_id( 'text' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'text' ) ); ?>"><?php echo esc_textarea( $text ); ?></textarea>
    </p>
    <p>
        <label for="<?php echo esc_attr( $this->get_field_id( 'color' ) ); ?>">Цвет текста:</label> 
        <input class="widefat" type="color" id="<?php echo esc_attr( $this->get_field_id( 'color' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'color' ) ); ?>" value="<?php echo esc_attr( $color ); ?>">
    </p>
    <?php
}

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'];
    }
    $color = ! empty( $instance['color'] ) ? $instance['color'] : '#000000';
    if ( ! empty( $instance['text'] ) ) {
        echo '<p style="color:' . esc_attr( $color ) . '">' . esc_html( $instance['text'] ) . '</p>';
    }
    echo $args['after_widget'];
}

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

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

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

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

Советы по отладке и безопасности при создании виджетов

При разработке виджетов важно не забывать про безопасность и качество кода. Вот несколько рекомендаций:

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

Это поможет избежать ошибок, защитить сайт от XSS и других атак, а также упростит поддержку кода в будущем.