Как добавить поддержку Gutenberg в старую тему WordPress

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

Что такое поддержка Gutenberg в теме WordPress и зачем она нужна

Редактор Gutenberg с версии WordPress 5.0 стал стандартным способом создания и редактирования контента. Для корректной работы новых блоков и их стилей тема должна содержать специальные функции и стили, обеспечивающие совместимость.

Без поддержки Gutenberg блоки могут отображаться некорректно, стили будут отсутствовать, а функциональность — урезана. Поэтому интеграция поддержки важна для улучшения UX и современных возможностей сайта.

Как определить, поддерживает ли тема Gutenberg

Чтобы проверить, поддерживает ли ваша тема Gutenberg, откройте functions.php и найдите вызов add_theme_support('gutenberg') или add_theme_support('editor-styles'). Если их нет, то нужно добавить.

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

Добавляем базовую поддержку Gutenberg в старую тему

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

function wp_themes_add_gutenberg_support() {
    // Включить поддержку стилей редактора
    add_theme_support('editor-styles');

    // Подключить стили темы в редакторе
    add_editor_style('assets/css/editor-style.css');

    // Включить поддержку широких и полновысотных блоков
    add_theme_support('align-wide');

    // Добавить пользовательские цветовые палитры
    add_theme_support('editor-color-palette', array(
        array(
            'name'  => 'Основной синий',
            'slug'  => 'primary',
            'color' => '#0073aa'
        ),
        array(
            'name'  => 'Акцент',
            'slug'  => 'accent',
            'color' => '#d54e21'
        ),
        array(
            'name'  => 'Тёмный серый',
            'slug'  => 'dark-gray',
            'color' => '#222'
        ),
    ));
}
add_action('after_setup_theme', 'wp_themes_add_gutenberg_support');

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

Создание и подключение стилей для редактора Gutenberg

Для корректного отображения блоков в редакторе нужно подготовить отдельный CSS-файл, который будет содержать стили вашей темы в контексте редактора.

Создайте файл assets/css/editor-style.css и добавьте в него базовые стили для заголовков, параграфов, списков и ссылок, например:

/* Стили для редактора Gutenberg */
.editor-styles-wrapper {
    font-family: 'Open Sans', sans-serif;
    color: #333;
}
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3 {
    font-weight: 700;
    color: #0073aa;
}
.editor-styles-wrapper a {
    color: #d54e21;
    text-decoration: none;
}
.editor-styles-wrapper a:hover {
    text-decoration: underline;
}

Обратите внимание, что стили должны быть адаптированы под структуру редактора, поэтому рекомендуется использовать обёртку .editor-styles-wrapper.

Поддержка пользовательских шрифтов и типографики

Чтобы добавить в редактор кастомные шрифты, например из Google Fonts, подключите их аналогично фронтенду. В functions.php можно добавить:

function wp_themes_enqueue_editor_fonts() {
    wp_enqueue_style('wp-themes-google-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap', false);
}
add_action('enqueue_block_editor_assets', 'wp_themes_enqueue_editor_fonts');

Затем в editor-style.css используйте подключённый шрифт в стилях.

Поддержка кастомных блоков и расширение Gutenberg

Если вы хотите добавить свои блоки или расширить стандартные, понадобится создание плагина или интеграция через JavaScript. Для простоты рассмотрим добавление кастомного блока с помощью PHP и JS.

Создайте папку /blocks/my-custom-block/ в теме и добавьте туда файлы block.js и block.php. В functions.php добавьте регистрацию блока:

function wp_themes_register_custom_block() {
    wp_register_script(
        'wp-themes-my-block',
        get_template_directory_uri() . '/blocks/my-custom-block/block.js',
        array('wp-blocks', 'wp-element', 'wp-editor'),
        filemtime(get_template_directory() . '/blocks/my-custom-block/block.js')
    );
    register_block_type('wp-themes/my-custom-block', array(
        'editor_script' => 'wp-themes-my-block',
    ));
}
add_action('init', 'wp_themes_register_custom_block');

В JS-файле опишите структуру блока с использованием React-элементов WordPress.

Отладка и тестирование поддержки Gutenberg

После внесения изменений обязательно проверьте, как блоки отображаются в редакторе и на фронтенде. Включите режим отладки WP_DEBUG, чтобы видеть ошибки.

Если стили не применяются, проверьте правильность пути к editor-style.css и правильность селекторов.

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

Примеры полезных плагинов для расширения Gutenberg

• Clearfy Pro — улучшает производительность и добавляет полезные настройки для работы с редактором.
• WPStories — позволяет создавать визуальные stories, поддерживаемые в Gutenberg.
• Expert Review — интегрирует отзывы в блоки Gutenberg.

Все эти плагины совместимы с современными темами и могут значительно расширить функциональность редактора.

Итоги и рекомендации

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

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

Для дополнительной информации и скачивания полезных плагинов посетите WPShop.ru.