Как создать динамический блок Gutenberg с поддержкой мультиязычности в WordPress

Создание динамических блоков в редакторе Gutenberg — одна из наиболее востребованных задач при разработке современных сайтов на WordPress. Но что если у вас мультиязычный сайт и нужно сделать блок, который корректно будет выводиться на разных языках? В этой статье мы детально разберём, как создать динамический Gutenberg блок с поддержкой мультиязычности, используя популярный плагин WPML, а также рассмотрим примеры кода для реализации.

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

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

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

Основная задача — определить текущий язык, получить переводы и вывести актуальный контент.

Как работать с мультиязычностью в динамических блоках: обзор подходов

Существует несколько способов добавить мультиязычность в динамический блок:

• Использовать функции плагинов мультиязычности (например, WPML, Polylang) для определения текущего языка и получения переведённых строк.
• Хранить переводы в виде мета-полей или в JSON и загружать их программно в зависимости от языка.
• Подключать разные версии шаблонов PHP для каждого языка.

Оптимальный подход — использовать API плагина, например WPML, который позволяет легко получать текущий язык и переводить строки с помощью icl_t или функций локализации.

Пример создания динамического блока Gutenberg с поддержкой мультиязычности на WPML

Рассмотрим пошагово, как создать блок, который выводит приветствие на текущем языке сайта.

1. Регистрация блока

function wpblock_register_multilang_block() {
    register_block_type('wpblock/multilang-greeting', [
        'render_callback' => 'wpblock_render_multilang_greeting_block',
    ]);
}
add_action('init', 'wpblock_register_multilang_block');

2. Функция рендера с поддержкой мультиязычности

function wpblock_render_multilang_greeting_block($attributes) {
    // Проверяем, активен ли WPML
    if (function_exists('ICL_LANGUAGE_CODE')) {
        $current_lang = ICL_LANGUAGE_CODE; // Получаем текущий язык
    } else {
        $current_lang = 'en'; // Язык по умолчанию
    }

    // Определяем приветствие в зависимости от языка
    $greetings = [
        'en' => 'Hello, welcome to our site!',
        'ru' => 'Привет, добро пожаловать на наш сайт!',
        'de' => 'Hallo, willkommen auf unserer Webseite!',
    ];

    $greeting = isset($greetings[$current_lang]) ? $greetings[$current_lang] : $greetings['en'];

    // Можно использовать WPML функцию для перевода строки
    if (function_exists('icl_t')) {
        $greeting = icl_t('wpblock-multilang-greeting', 'Greeting text', $greeting);
    }

    return '<div class="wpblock-multilang-greeting">' . esc_html($greeting) . '</div>';
}

Таким образом, блок отобразит приветствие на языке, который выбран в WPML. При необходимости добавьте переводы через интерфейс WPML для строки 'Greeting text'.

Добавление атрибутов и переводимых параметров в блок

Часто нужно, чтобы не только фиксированный текст переводился, но и параметры, задаваемые пользователем в блоке (например, заголовок, описание). Для этого в редакторе блока передаём атрибуты, а на сервере используем WPML API для их перевода.

Пример: в редакторе блок получает атрибут title. В PHP функции рендера мы можем применить icl_t, чтобы получить перевод.

function wpblock_render_multilang_greeting_block($attributes) {
    $title = isset($attributes['title']) ? $attributes['title'] : '';

    if (function_exists('icl_t')) {
        $title = icl_t('wpblock-multilang-greeting', 'Block title', $title);
    }

    return '<h2>' . esc_html($title) . '</h2>';
}

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

Отладка и полезные советы

Работая с мультиязычностью, учитывайте:

• Текущий язык может быть получен не только функцией ICL_LANGUAGE_CODE, но и через get_locale() или API плагина.
• Переводы строк, добавленные динамически через icl_t, нужно зарегистрировать заранее с помощью icl_register_string.
• Если блок активно кэшируется, учитывайте, что на странице с разными языками должен быть разный вариант кэша.
• Для работы с другими плагинами мультиязычности (Polylang, TranslatePress) подходы могут отличаться, но идея остаётся той же — определение языка и получение перевода.

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

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

• Clearfy Pro — оптимизация и улучшение совместимости мультиязычных сайтов.
• WPRemark — удобные инструменты для кастомизации блоков и их перевода.

Заключение

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

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