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

Зачем применять AJAX для автоперевода в WordPress

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

Диагностика проблемы с автопереводом без AJAX

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

• Увеличенное время загрузки страниц;
• Перевод не обновляется сразу при смене языка;
• Сложности с кешированием, приводящие к показу устаревших переводов;
• Большая нагрузка на хостинг при одновременных запросах.

Для проверки можно отключить AJAX и сравнить время загрузки и отзывчивость интерфейса.

Пошаговое решение: реализация AJAX автоперевода контента

1. Регистрация AJAX обработчика в functions.php или в плагине

add_action('wp_ajax_translate_content', 'wptranslate_ajax_translate_content');
add_action('wp_ajax_nopriv_translate_content', 'wptranslate_ajax_translate_content');

function wptranslate_ajax_translate_content() {
    if ( ! isset($_POST['text']) || empty($_POST['text']) ) {
        wp_send_json_error('Empty text');
    }

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

    // Здесь вызываем API автоперевода, например, DeepL, Google Translate и т.п.
    $translated_text = wptranslate_call_translation_api($text, $target_lang);

    if (!$translated_text) {
        wp_send_json_error('Translation failed');
    }

    wp_send_json_success(['translated' => $translated_text]);
}

2. Клиентский JavaScript для отправки AJAX запроса и обновления контента

jQuery(document).ready(function($){
    $('#translate-button').on('click', function(){
        var originalText = $('#original-text').text();
        var targetLang = $('#language-select').val();

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

3. Локализация AJAX URL для JS

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_ajax', [
        'ajax_url' => admin_url('admin-ajax.php')
    ]);
}
add_action('wp_enqueue_scripts', 'wptranslate_enqueue_scripts');

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

• Нажмите на кнопку перевода и убедитесь, что контент обновляется без перезагрузки страницы.
• Проверьте в консоли браузера отсутствие ошибок AJAX.
• Сравните время отклика с предыдущей реализацией без AJAX — должно быть заметно быстрее.
• Проверьте работу на разных языках и с разными объемами текста.

Частые ошибки при реализации AJAX автоперевода и их исправление

• Ошибка 0 или 400 в AJAX запросе: отсутствует параметр action или неправильный URL. Проверьте локализацию wp_localize_script и URL admin-ajax.php.
• Нет ответа от API автоперевода: проверьте ключ API, лимиты и корректность запроса к внешнему сервису.
• Неверная обработка данных POST: используйте sanitize_text_field и проверяйте наличие параметров.
• Кэширование AJAX ответов: если используется кэширование на уровне сервера или плагинов, убедитесь, что AJAX запросы не кэшируются.

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

• Используйте nonce для защиты AJAX запросов от CSRF атак. Например, wp_create_nonce('wptranslate_nonce') и проверка в обработчике через check_ajax_referer.
• Кешируйте результаты перевода в базе или transient API, чтобы не перегружать API и снизить задержки.
• Ограничьте длину текста для перевода, чтобы избежать таймаутов и чрезмерных затрат API.
• Регулярно обновляйте используемые библиотеки и проверяйте совместимость с WordPress.

Сравнение вариантов реализации автоперевода контента WordPress