Функция register_widget() в WordPress: регистрация пользовательских виджетов

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

register_widget( string|WP_Widget $widget )

• $widget (string|WP_Widget) — это либо название класса, расширяющего WP_Widget, либо экземпляр этого класса. Функция позволяет зарегистрировать пользовательский виджет, который можно будет использовать в любом месте темы или плагина.

Пример 1: Создание и регистрация простого виджета

Давайте рассмотрим, как создать новый виджет и зарегистрировать его с помощью функции register_widget().

<?php
/**
 * Класс Simple_Widget — это пользовательский виджет.
 */
class Simple_Widget extends WP_Widget {

    /**
     * Конструктор виджета.
     */
    function __construct() {
        parent::__construct(
            'simple_widget', // ID виджета
            __( 'Простой Виджет', 'textdomain' ), // Название виджета
            array( 'description' => __( 'Это простой пример виджета.', 'textdomain' ) ) // Описание виджета
        );
    }

    /**
     * Вывод виджета на фронтенде.
     *
     * @param array $args Аргументы вывода, такие как before_widget, after_widget и т.д.
     * @param array $instance Данные виджета.
     */
    function widget( $args, $instance ) {
        echo $args['before_widget'];
        echo '<h2>' . __( 'Привет, мир!', 'textdomain' ) . '</h2>';
        echo $args['after_widget'];
    }

    /**
     * Форма настроек виджета в админ-панели.
     */
    function form( $instance ) {
        $title = isset( $instance['title'] ) ? $instance['title'] : __( 'Заголовок по умолчанию', 'textdomain' );
        ?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Заголовок:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>
        <?php
    }

    /**
     * Обновление настроек виджета.
     *
     * @param array $new_instance Новые настройки.
     * @param array $old_instance Старые настройки.
     * @return array Обновлённые данные для сохранения.
     */
    function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
        return $instance;
    }
}

// Регистрация виджета
function register_simple_widget() {
    register_widget( 'Simple_Widget' );
}
add_action( 'widgets_init', 'register_simple_widget' );

В этом примере создаётся виджет под названием «Простой Виджет». Он выводит простой текст «Привет, мир!» и позволяет настраивать заголовок через админ-панель.

Пример 2: Виджет с дополнительной логикой и стилями

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

<?php
/**
 * Класс Advanced_Widget — виджет с дополнительными функциями.
 */
class Advanced_Widget extends WP_Widget {

    function __construct() {
        parent::__construct(
            'advanced_widget', // ID виджета
            __( 'Расширенный Виджет', 'textdomain' ), // Название виджета
            array( 'description' => __( 'Виджет с подключением скриптов и стилей.', 'textdomain' ) ) // Описание
        );
    }

    function widget( $args, $instance ) {
        echo $args['before_widget'];
        echo '<h2>' . __( 'Это расширенный виджет!', 'textdomain' ) . '</h2>';
        echo '<p>' . __( 'С дополнительными функциями.', 'textdomain' ) . '</p>';
        echo $args['after_widget'];
    }

    function form( $instance ) {
        // Форма настройки виджета
        $text = isset( $instance['text'] ) ? $instance['text'] : '';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id( 'text' ); ?>"><?php _e( 'Текст:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" type="text" value="<?php echo esc_attr( $text ); ?>">
        </p>
        <?php
    }

    function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['text'] = ( ! empty( $new_instance['text'] ) ) ? strip_tags( $new_instance['text'] ) : '';
        return $instance;
    }

    // Подключение скриптов виджета
    function add_widget_scripts() {
        if( ! apply_filters( 'show_advanced_widget_script', true, $this->id_base ) )
            return;

        wp_enqueue_script( 'advanced_widget_script', get_stylesheet_directory_uri() . '/js/advanced-widget.js', array('jquery'), null, true );
    }

    // Подключение стилей виджета
    function add_widget_styles() {
        if( ! apply_filters( 'show_advanced_widget_style', true, $this->id_base ) )
            return;
        ?>
        <style type="text/css">
            .advanced_widget { color: blue; }
        </style>
        <?php
    }
}

// Регистрация виджета
function register_advanced_widget() {
    register_widget( 'Advanced_Widget' );
}
add_action( 'widgets_init', 'register_advanced_widget' );

Этот виджет включает дополнительные функции, такие как подключение пользовательских скриптов и стилей только тогда, когда виджет активен.

Пример 3: Виджет с поддержкой изображений

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

<?php
/**
 * Класс Image_Widget — виджет для отображения изображений.
 */
class Image_Widget extends WP_Widget {

    function __construct() {
        parent::__construct(
            'image_widget', // ID виджета
            __( 'Виджет Изображения', 'textdomain' ), // Название виджета
            array( 'description' => __( 'Виджет для загрузки и отображения изображений.', 'textdomain' ) ) // Описание
        );
    }

    function widget( $args, $instance ) {
        echo $args['before_widget'];
        if ( ! empty( $instance['image_url'] ) ) {
            echo '<img src="' . esc_url( $instance['image_url'] ) . '" alt="" />';
        }
        echo $args['after_widget'];
    }

    function form( $instance ) {
        $image_url = isset( $instance['image_url'] ) ? $instance['image_url'] : '';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id( 'image_url' ); ?>"><?php _e( 'URL изображения:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'image_url' ); ?>" name="<?php echo $this->get_field_name( 'image_url' ); ?>" type="text" value="<?php echo esc_attr( $image_url ); ?>">
        </p>
        <?php
    }

    function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['image_url'] = ( ! empty( $new_instance['image_url'] ) ) ? esc_url_raw( $new_instance['image_url'] ) : '';
        return $instance;
    }
}

// Регистрация виджета
function register_image_widget() {
    register_widget( 'Image_Widget' );
}
add_action( 'widgets_init', 'register_image_widget' );

Этот виджет позволяет пользователю загружать изображение, указывая URL, и выводит его на сайте.

Заключение

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