Классические виджеты в прошлом

Начиная с WordPress 5.8, виджеты были переработаны и интегрированы в блоковый редактор Gutenberg. Теперь вместо классических виджетов используются блоки Gutenberg, что делает процесс управления виджетами более гибким и современным. Это означает, что вы можете использовать стандартные блоки Gutenberg (например, «Заголовок», «Абзац», «Изображение») или создавать кастомные блоки для использования в областях виджетов.

Как работают виджеты в последних версиях WordPress?

1. Области виджетов:

• Области виджетов (сайдбары, футеры и т.д.) теперь поддерживают блоки Gutenberg.
• Вы можете добавлять блоки в эти области через интерфейс Внешний вид → Виджеты или Внешний вид → Настроить → Виджеты (в зависимости от темы).

1. Блоки вместо виджетов:

• Классические виджеты (например, «Текст», «Календарь», «Рубрики») теперь представлены как блоки.
• Вы можете использовать как стандартные блоки, так и кастомные блоки, созданные через Gutenberg.

1. Обратная совместимость:

• Классические виджеты по-прежнему поддерживаются, но они автоматически преобразуются в блоки при использовании в новом интерфейсе.

Как заменить классические виджеты на кастомные блоки Gutenberg?

1. Создание кастомного блока

Для создания кастомного блока используйте API Gutenberg. Пример простого блока:

import { registerBlockType } from '@wordpress/blocks';
import { TextControl } from '@wordpress/components';
import { useBlockProps } from '@wordpress/block-editor';

registerBlockType('my-plugin/my-custom-block', {
    title: 'Мой кастомный блок',
    icon: 'smiley',
    category: 'widgets',
    attributes: {
        content: {
            type: 'string',
            default: 'Привет, мир!',
        },
    },
    edit: (props) => {
        const blockProps = useBlockProps();
        const { attributes, setAttributes } = props;
        const { content } = attributes;

        return (
            <div {...blockProps}>
                <TextControl
                    label="Введите текст"
                    value={content}
                    onChange={(value) => setAttributes({ content: value })}
                />
            </div>
        );
    },
    save: (props) => {
        const blockProps = useBlockProps.save();
        const { attributes } = props;
        const { content } = attributes;

        return <div {...blockProps}>{content}</div>;
    },
});

2. Регистрация блока в WordPress

Зарегистрируйте блок в WordPress через PHP:

function my_custom_block_init() {
    wp_register_script(
        'my-custom-block-editor',
        plugins_url('build/index.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor'),
        filemtime(plugin_dir_path(__FILE__) . 'build/index.js')
    );

    register_block_type('my-plugin/my-custom-block', array(
        'editor_script' => 'my-custom-block-editor',
    ));
}
add_action('init', 'my_custom_block_init');

3. Использование кастомного блока в области виджетов

1. Перейдите в Внешний вид → Виджеты.
2. Найдите ваш кастомный блок в списке блоков (например, «Мой кастомный блок»).
3. Добавьте блок в область виджетов (например, сайдбар или футер).
4. Настройте блок и сохраните изменения.

Как разместить кастомные блоки в областях виджетов?

1. Создание области виджетов

Если ваша тема не поддерживает области виджетов, вы можете добавить их вручную. Для этого откройте файл functions.php вашей темы и добавьте следующий код:

function my_theme_widgets_init() {
    register_sidebar(array(
        'name'          => 'Мой сайдбар',
        'id'            => 'my-sidebar',
        'description'   => 'Добавьте виджеты сюда.',
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ));
}
add_action('widgets_init', 'my_theme_widgets_init');

2. Отображение области виджетов в теме

Чтобы отобразить область виджетов в теме, добавьте следующий код в нужное место (например, в sidebar.php):

if (is_active_sidebar('my-sidebar')) {
    dynamic_sidebar('my-sidebar');
}

3. Добавление кастомного блока в область виджетов

1. Перейдите в Внешний вид → Виджеты.
2. Найдите область виджетов (например, «Мой сайдбар»).
3. Добавьте ваш кастомный блок в эту область.

Как полностью заменить классические виджеты на блоки?

Если вы хотите полностью отказаться от классических виджетов и использовать только блоки, вы можете отключить классические виджеты. Для этого добавьте следующий код в functions.php:

function disable_classic_widgets() {
    remove_theme_support('widgets-block-editor');
}
add_action('after_setup_theme', 'disable_classic_widgets');

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

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

1. Создайте блок (как описано выше).
2. Добавьте блок в область виджетов через интерфейс WordPress.
3. Настройте блок:

• Введите текст или настройте другие параметры.

1. Сохраните изменения и проверьте результат на фронтенде.

Заключение

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

Если вы хотите полностью перейти на блоки, убедитесь, что ваша тема и плагины поддерживают новый интерфейс виджетов.