Как создать динамический языковой выбор в WordPress для многоязычных сайтов

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

Почему нужен динамический выбор языка: преимущества и задачи

Статические переключатели языка часто создаются вручную и не учитывают изменения в структуре сайта или добавление новых языков. Динамический выбор языка решает следующие задачи:

• Автоматическое получение списка активных языков без ручного обновления кода.
• Изменение языка страницы с сохранением текущего URL и параметров.
• Поддержка SEO-дружественных URL с языковыми префиксами или поддоменами.
• Гибкость для интеграции с разными плагинами многоязычности (WPML, Polylang, TranslatePress и др.).

Мы рассмотрим пример реализации на базе Polylang — популярного бесплатного плагина, а также универсальный способ через WP REST API и JavaScript.

Создание динамического языкового выбора на PHP и JavaScript для Polylang

Получение списка языков через Polylang API

Polylang предоставляет удобную функцию pll_get_the_languages(), которая возвращает массив доступных языков, их коды, названия, URL для текущей страницы с выбранным языком и активность.

Пример функции с префиксом wplangs_ для получения языков:

function wplangs_get_available_languages() {
    if (function_exists('pll_get_the_languages')) {
        return pll_get_the_languages(array('raw' => 1));
    }
    return array();
}

Вывод языкового переключателя с HTML и CSS

Создадим функцию, которая выведет список языков в виде кнопок или выпадающего списка. Активный язык выделим классом active.

function wplangs_render_language_switcher() {
    $languages = wplangs_get_available_languages();
    if (empty($languages)) return;

    echo '<ul class="wplangs-language-switcher">';
    foreach ($languages as $lang) {
        $active_class = $lang['current_lang'] ? 'active' : '';
        echo '<li class="'.$active_class.'"><a href="'.esc_url($lang['url']).'">'.esc_html($lang['name']).'</a></li>';
    }
    echo '</ul>';
}

Для стилизации добавим CSS:

.wplangs-language-switcher {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 10px;
}
.wplangs-language-switcher li a {
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #333;
}
.wplangs-language-switcher li.active a {
    background-color: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

Динамическая смена языка без перезагрузки страницы через AJAX

Чтобы улучшить UX, можно реализовать переключение языка с подгрузкой контента через AJAX. Для этого создадим JS-скрипт, который будет перехватывать клики и запрашивать контент на нужном языке.

Пример использования AJAX + REST API:

document.addEventListener('DOMContentLoaded', function () {
    const switcher = document.querySelector('.wplangs-language-switcher');
    if (!switcher) return;

    switcher.addEventListener('click', function(e) {
        if (e.target.tagName !== 'A') return;
        e.preventDefault();
        const url = e.target.href;

        fetch(url + '?ajax=1')
            .then(response => response.text())
            .then(html => {
                document.querySelector('#content').innerHTML = html;
                // Обновим URL без перезагрузки
                history.pushState(null, '', url);
                // Обновим активный класс
                switcher.querySelectorAll('li').forEach(li => li.classList.remove('active'));
                e.target.parentElement.classList.add('active');
            })
            .catch(console.error);
    });
});

На стороне PHP нужно добавить поддержку AJAX-запросов. В файле functions.php или плагине:

function wplangs_ajax_content_loader() {
    if (isset($_GET['ajax']) && $_GET['ajax'] == 1) {
        // Выводим только контент
        while(have_posts()) {
            the_post();
            the_content();
        }
        wp_die();
    }
}
add_action('wp', 'wplangs_ajax_content_loader');

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

Альтернативные плагины и решения для языкового выбора

Кроме Polylang, популярны WPML и TranslatePress. У каждого из них есть собственные функции для вывода языкового переключателя, но при необходимости можно использовать похожие методы динамического вывода и AJAX.

Для WPML пример получения языков:

function wplangs_get_wpml_languages() {
    if (function_exists('icl_get_languages')) {
        return icl_get_languages('skip_missing=0&orderby=code');
    }
    return array();
}

Реализация AJAX-обновления контента аналогична, но для WPML нужно учитывать особенности URL и API.

Советы по SEO и UX для языковых переключателей

При создании языкового переключателя важно:

• Использовать SEO-дружественные URL с префиксами языка (/en/, /ru/ и др.).
• Добавлять атрибут hreflang в HTML для указания поисковикам языковой версии страниц.
• Обеспечивать доступность переключателя для клавиатурного управления и скринридеров.
• Минимизировать время загрузки при смене языка, используя AJAX и кэширование.

Плагины, такие как Clearfy Pro, помогают настроить SEO параметры и оптимизировать работу сайта.

Выводы и практические рекомендации

Создание динамического языкового выбора на WordPress — задача, которая требует понимания структуры сайта, используемого плагина многоязычности и особенностей UX. Использование стандартных API плагинов, дополнение их AJAX-подгрузкой и правильное оформление HTML/CSS обеспечит удобство пользователей и сохранит SEO эффективность.

Для быстрого старта рекомендуем использовать готовые функции Polylang или WPML для вывода языков, а затем расширять функционал с помощью JS и AJAX. Это позволит создать современный многоязычный сайт с удобным интерфейсом переключения языков.