Как использовать AJAX для автоперевода контента в WordPress

Автоматический перевод контента — востребованная функция для многоязычных сайтов на WordPress. Часто перевод нужно делать динамически, без перезагрузки страницы, чтобы улучшить пользовательский опыт. В этой статье рассмотрим, как организовать автоперевод с помощью AJAX, используя собственные хуки и API популярных переводчиков.

Почему AJAX подходит для автоперевода

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

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

Кроме того, AJAX-запросы легко интегрируются с WordPress API и популярными плагинами, например, WPML или Polylang, а также позволяют подключать внешние сервисы перевода, такие как Google Cloud Translate или DeepL.

Реализация AJAX автоперевода: основные шаги

Для примера создадим функцию wptranslate_ajax_translate_text, которая будет принимать текст, отправлять его на внешний API и возвращать перевод.

Основные шаги:

• Создать AJAX-обработчик в WordPress.
• Подключить JavaScript на фронтенде для отправки AJAX-запроса.
• Обработать ответ и заменить текст на странице.
• Добавить обработку ошибок и кеширование переводов.

1. Регистрация AJAX-обработчика в WordPress

В файле functions.php или в собственном плагине регистрируем обработчик запросов:

add_action('wp_ajax_wptranslate_translate_text', 'wptranslate_ajax_translate_text');
add_action('wp_ajax_nopriv_wptranslate_translate_text', 'wptranslate_ajax_translate_text');

function wptranslate_ajax_translate_text() {
    // Проверяем nonce для безопасности
    check_ajax_referer('wptranslate_nonce', 'security');

    $text = isset($_POST['text']) ? sanitize_text_field(wp_unslash($_POST['text'])) : '';
    $target_lang = isset($_POST['lang']) ? sanitize_text_field($_POST['lang']) : 'en';

    if (empty($text)) {
        wp_send_json_error('Empty text');
    }

    // Здесь вызываем функцию перевода
    $translated = wptranslate_call_translate_api($text, $target_lang);

    if ($translated) {
        wp_send_json_success(['translated_text' => $translated]);
    } else {
        wp_send_json_error('Translation failed');
    }
}

2. Создание функции для вызова API перевода

Для примера используем бесплатный API LibreTranslate (https://libretranslate.com/docs/), который не требует ключа:

function wptranslate_call_translate_api($text, $target_lang) {
    $api_url = 'https://libretranslate.de/translate';
    $response = wp_remote_post($api_url, [
        'body' => [
            'q' => $text,
            'source' => 'auto',
            'target' => $target_lang,
            'format' => 'text'
        ]
    ]);

    if (is_wp_error($response)) {
        return false;
    }

    $body = wp_remote_retrieve_body($response);
    $data = json_decode($body, true);

    return isset($data['translatedText']) ? $data['translatedText'] : false;
}

3. JavaScript для отправки AJAX-запроса

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

jQuery(document).ready(function($) {
    $('#wptranslate-translate-btn').on('click', function() {
        var text = $('#wptranslate-source-text').text();
        var lang = $('#wptranslate-lang-select').val();

        $.ajax({
            url: wptranslate_vars.ajax_url,
            method: 'POST',
            data: {
                action: 'wptranslate_translate_text',
                text: text,
                lang: lang,
                security: wptranslate_vars.nonce
            },
            success: function(response) {
                if (response.success) {
                    $('#wptranslate-translated-text').text(response.data.translated_text);
                } else {
                    alert('Ошибка перевода: ' + response.data);
                }
            },
            error: function() {
                alert('Ошибка AJAX-запроса');
            }
        });
    });
});

В PHP нужно передать локализацию скрипта с nonce и URL AJAX:

function wptranslate_enqueue_scripts() {
    wp_enqueue_script('wptranslate-ajax', get_template_directory_uri() . '/js/wptranslate-ajax.js', ['jquery'], null, true);
    wp_localize_script('wptranslate-ajax', 'wptranslate_vars', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wptranslate_nonce')
    ]);
}
add_action('wp_enqueue_scripts', 'wptranslate_enqueue_scripts');

Улучшения и расширения

Кеширование переводов

Чтобы не перегружать API и ускорить работу, можно кешировать переводы в базе данных или транзиентами. Пример кеширования с помощью транзиентов:

function wptranslate_call_translate_api($text, $target_lang) {
    $cache_key = 'wptranslate_trans_' . md5($text . $target_lang);
    $cached = get_transient($cache_key);
    if ($cached) {
        return $cached;
    }

    // Запрос к API, как ранее
    $api_url = 'https://libretranslate.de/translate';
    $response = wp_remote_post($api_url, [
        'body' => [
            'q' => $text,
            'source' => 'auto',
            'target' => $target_lang,
            'format' => 'text'
        ]
    ]);

    if (is_wp_error($response)) {
        return false;
    }

    $body = wp_remote_retrieve_body($response);
    $data = json_decode($body, true);

    if (isset($data['translatedText'])) {
        set_transient($cache_key, $data['translatedText'], DAY_IN_SECONDS);
        return $data['translatedText'];
    }

    return false;
}

Интеграция с WPML и Polylang

Если на сайте установлен WPML или Polylang, можно расширить функционал, чтобы автоматически переводить содержимое их строк и записей через AJAX без перезагрузки. Для этого следует использовать их API для получения нужных языков и идентификаторов, а затем запускать перевод для каждого блока.

Обработка ошибок и UX

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

Выводы

Использование AJAX для автоперевода в WordPress — мощный способ сделать сайт удобнее для пользователей на разных языках. Простая реализация с вызовом внешнего API и минимальным кодом на стороне клиента уже даёт заметный эффект. Дополнительное кеширование и интеграция с мультиязычными плагинами сделают решение масштабируемым и производительным.

Для расширения функционала рекомендую изучить плагины, например, Clearfy Pro, который оптимизирует работу сайта и позволяет тонко настраивать AJAX-запросы, а также WP Remark для улучшения взаимодействия пользователя с переведённым контентом.