Как создать и использовать шорткод с визуальным редактором Gutenberg в WordPress

Почему важно интегрировать шорткоды с Gutenberg

Гутенберг — это современный визуальный редактор WordPress, который пришёл на смену классическому редактору и значительно расширил возможности по созданию контента. Однако многие разработчики и пользователи сталкиваются с проблемой: шорткоды, созданные для классического редактора, зачастую неудобны в использовании в Gutenberg, поскольку они отображаются как обычный текстовый код, а не как визуальный элемент.

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

В этой статье мы рассмотрим, как создать собственный шорткод с поддержкой визуального блока Gutenberg и приведём примеры кода и полезных плагинов.

Создание шорткода для классического и визуального редакторов

Начнём с простого PHP-шорткода, который выводит кастомный блок с информацией. Вот пример шорткода, который выводит приветственное сообщение с параметром name:

function wpcat_custom_greeting_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'name' => 'гость',
    ), $atts, 'wpcat_greeting' );

    return '<div class="wpcat-greeting">Привет, ' . esc_html( $atts['name'] ) . '!</div>';
}
add_shortcode( 'wpcat_greeting', 'wpcat_custom_greeting_shortcode' );

Этот шорткод можно использовать так: [wpcat_greeting name="Иван"]. В классическом редакторе он заменится на "Привет, Иван!".

Интеграция с Gutenberg: регистрация блока

Чтобы этот шорткод отображался как отдельный блок в Gutenberg, нужно создать JS-блок. Для этого используем JavaScript (React) и API WordPress. Пример регистрационного кода блока:

const { registerBlockType } = wp.blocks;
const { TextControl } = wp.components;
const { useState } = wp.element;

registerBlockType('wpcat/greeting-block', {
    title: 'Приветствие WPCat',
    icon: 'smiley',
    category: 'widgets',
    attributes: {
        name: {
            type: 'string',
            default: 'гость',
        },
    },
    edit: (props) => {
        const { attributes: { name }, setAttributes } = props;
        return (
            <TextControl
                label="Имя для приветствия"
                value={name}
                onChange={(value) => setAttributes({ name: value })}
            />
        );
    },
    save: (props) => {
        return null; // рендер на сервере
    },
});

Этот блок позволяет в редакторе вводить имя, а на фронтенде вывести результат через PHP.

Серверный рендеринг блока на PHP

Чтобы связать JS-блок с PHP-шорткодом, нужно использовать серверный рендеринг в WordPress. Добавим регистрацию блока на PHP:

function wpcat_register_greeting_block() {
    register_block_type( 'wpcat/greeting-block', array(
        'render_callback' => 'wpcat_render_greeting_block',
        'attributes' => array(
            'name' => array(
                'type' => 'string',
                'default' => 'гость',
            ),
        ),
    ) );
}
add_action( 'init', 'wpcat_register_greeting_block' );

function wpcat_render_greeting_block( $attributes ) {
    $name = isset( $attributes['name'] ) ? $attributes['name'] : 'гость';
    return do_shortcode( '[wpcat_greeting name="' . esc_attr( $name ) . '"]' );
}

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

Полезные плагины для работы с шорткодами и Gutenberg

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

• Shortcode UI — позволяет создавать визуальные интерфейсы для шорткодов, упрощая их использование.
• Block Lab — инструмент для создания кастомных блоков Gutenberg без глубоких знаний React.
• Advanced Custom Fields (ACF) Pro — с поддержкой создания блоков Gutenberg через пользовательские поля.

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

Практические советы по разработке и отладке

При разработке шорткодов и блоков Gutenberg важно учитывать несколько моментов:

• Всегда экранируйте пользовательский ввод для безопасности, используйте esc_html и esc_attr.
• Тестируйте блоки в разных браузерах и на мобильных устройствах.
• Используйте инструмент WP_DEBUG для отладки ошибок PHP.
• Разбивайте функционал на отдельные функции с префиксом wpcat_ для удобства поддержки и избежания конфликтов.
• Пишите комментарии к коду, чтобы было проще понимать логику при дальнейшем развитии.

Расширение функционала шорткодов

Вы можете добавить дополнительные параметры в шорткод, например, цвет текста, стили или иконки. Пример расширенного шорткода с параметром цвета:

function wpcat_custom_greeting_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'name' => 'гость',
        'color' => '#000000',
    ), $atts, 'wpcat_greeting' );

    return '<div class="wpcat-greeting" style="color:' . esc_attr( $atts['color'] ) . '">Привет, ' . esc_html( $atts['name'] ) . '!</div>';
}

И не забудьте добавить поддержку этого параметра в JS-блок для визуального редактора, чтобы можно было выбирать цвет через ColorPicker.

Заключение

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