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

Автор: Ирина Данилова | Опубликовано: 17.11.2025

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

Что такое виджеты в WordPress и где они применяются

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

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

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

В основе виджета лежит PHP-класс, который наследуется от WP_Widget. Для регистрации виджета используется хук widgets_init. Ниже приведена базовая структура виджета:

class Wpstudy_Custom_Widget extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'wpstudy_custom_widget',
            'WPStudy: Мой виджет',
            array( 'description' => 'Пример собственного виджета WPStudy' )
        );
    }

    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>Контент моего виджета WPStudy</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 = array();
        $instance['title'] = sanitize_text_field( $new_instance['title'] );
        return $instance;
    }
}

function wpstudy_register_custom_widget() {
    register_widget( 'Wpstudy_Custom_Widget' );
}
add_action( 'widgets_init', 'wpstudy_register_custom_widget' );

Разбор кода виджета WPStudy

Конструктор __construct() задаёт ID, название и описание виджета, которые отображаются в админке.

Метод widget() отвечает за вывод содержимого виджета на сайте. В нём мы используем стандартные обёртки before_widget и before_title, чтобы сохранить стили темы.

Метод form() создаёт форму настроек виджета в админке. Здесь мы добавили поле для заголовка.

Метод update() сохраняет данные из формы, применяя фильтрацию и очистку.

Добавление дополнительных настроек и логики в виджет

Помимо заголовка, можно добавить любые поля: чекбоксы, выпадающие списки, текстовые области. Например, добавим поле для выбора количества выводимых последних записей:

public function form( $instance ) {
    $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
    $post_count = ! empty( $instance['post_count'] ) ? absint( $instance['post_count'] ) : 5;
    ?>
    <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( 'post_count' ) ); ?>">Количество записей:</label>
        <input class="tiny-text" id="<?php echo esc_attr( $this->get_field_id( 'post_count' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'post_count' ) ); ?>" type="number" step="1" min="1" value="<?php echo esc_attr( $post_count ); ?>" size="3">
    </p>
    <?php
}

public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = sanitize_text_field( $new_instance['title'] );
    $instance['post_count'] = absint( $new_instance['post_count'] );
    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'];
    }

    $post_count = ! empty( $instance['post_count'] ) ? $instance['post_count'] : 5;
    $recent_posts = get_posts( array(
        'numberposts' => $post_count,
        'post_status' => 'publish'
    ) );

    if ( ! empty( $recent_posts ) ) {
        echo '<ul>';
        foreach ( $recent_posts as $post ) {
            echo '<li><a href="' . get_permalink( $post->ID ) . '">' . esc_html( $post->post_title ) . '</a></li>';
        }
        echo '</ul>';
    } else {
        echo '<p>Нет доступных записей.</p>';
    }

    echo $args['after_widget'];
}

Использование популярных плагинов для расширения виджетов

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

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

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

Заключение: зачем создавать собственные виджеты WPStudy

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