Как создать кастомный языковой переключатель в WordPress

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

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

Большинство популярных плагинов для мультиязычности, таких как WPML, Polylang или TranslatePress, предоставляют стандартные виджеты переключения языков. Однако, они часто ограничены в настройках визуала и поведения. Создание собственного переключателя позволяет:

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

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

Получение списка доступных языков в WordPress

Первое, что нам нужно — получить список языков, которые поддерживаются на вашем сайте. В WordPress по умолчанию нет встроенной мультиязычности, поэтому чаще всего используются плагины. В зависимости от плагина API для получения языков отличается. Ниже пример для Polylang:

function wplang_get_languages_polylang() {
    if ( function_exists('pll_get_the_languages') ) {
        return pll_get_the_languages(array('hide_empty' => 0));
    }
    return array();
}

Эта функция возвращает массив языков с необходимыми данными для вывода, включая slug, имя, код и URL для переключения.

Если вы используете WPML, можно получить языки так:

function wplang_get_languages_wpml() {
    if (defined('ICL_LANGUAGE_CODE')) {
        return apply_filters('wpml_active_languages', NULL, array('skip_missing' => 0));
    }
    return array();
}

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

Создание базового языкового переключателя на PHP

Рассмотрим пример вывода переключателя для Polylang:

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

Этот код выводит простой список языков с выделением текущего. Чтобы добавить переключатель на сайт, вызовите wplang_render_language_switcher() в нужном шаблоне.

Стилизация переключателя

Для удобства добавим минимальные стили:

.wplang-language-switcher {
    list-style: none;
    display: flex;
    gap: 15px;
}
.wplang-language-switcher li.active a {
    font-weight: bold;
    text-decoration: underline;
}

Эти стили делают переключатель горизонтальным и визуально выделяют активный язык.

Добавление AJAX для плавного переключения языка

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

PHP: обработчик AJAX-запроса

add_action('wp_ajax_wplang_switch_language', 'wplang_ajax_switch_language');
add_action('wp_ajax_nopriv_wplang_switch_language', 'wplang_ajax_switch_language');
function wplang_ajax_switch_language() {
    $lang = isset($_POST['lang']) ? sanitize_text_field($_POST['lang']) : '';
    if (!$lang) {
        wp_send_json_error('Язык не указан');
    }

    // Пример для Polylang: получить URL на выбранном языке
    if (function_exists('pll_get_post')) {
        $current_post_id = get_the_ID();
        $translated_post_id = pll_get_post($current_post_id, $lang);
        $url = $translated_post_id ? get_permalink($translated_post_id) : home_url('/' . $lang . '/');
    } else {
        $url = home_url('/' . $lang . '/');
    }

    wp_send_json_success(array('url' => $url));
}

JavaScript: отправка запроса и переход

document.querySelectorAll('.wplang-language-switcher a').forEach(function(link) {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        var lang = this.getAttribute('href').split('/').filter(Boolean).pop();

        fetch(wplang_ajax_object.ajax_url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: new URLSearchParams({
                action: 'wplang_switch_language',
                lang: lang
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.href = data.data.url;
            } else {
                alert('Ошибка переключения языка');
            }
        });
    });
});

Для работы этого скрипта нужно локализовать скрипт в functions.php:

wp_localize_script('your-script-handle', 'wplang_ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));

Обзор плагинов для кастомизации языкового переключателя

Если писать код не хочется, можно использовать плагины, которые позволяют гибко настраивать переключатель:

• WPGPT — помимо функционала ИИ, поддерживает создание кастомных виджетов, в том числе для языков;
• Clearfy Pro — оптимизация и расширение возможностей WordPress, включая мультиязычные функции;
• Expert Review — позволяет создавать пользовательские блоки, которые можно адаптировать под языковой переключатель;
• Polylang — один из самых популярных плагинов с возможностью настройки переключателя;
• WPML — мощный мультиязычный плагин с гибкой кастомизацией.

Использование таких плагинов ускорит реализацию и позволит сосредоточиться на дизайне и UX.

Советы по улучшению UX языкового переключателя

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

• Отображайте текущий язык — пользователь должен видеть, на каком языке он сейчас находится;
• Используйте флаги с осторожностью — флаги стран не всегда точно отражают языки, лучше текст или иконки;
• Обеспечьте доступность — переключатель должен быть удобен для всех пользователей, в том числе с клавиатуры и экранных читалок;
• Сохраняйте выбор языка — с помощью куков или localStorage, чтобы пользователю не приходилось выбирать язык повторно;
• Оптимизируйте скорость — минимальный вес скриптов и стилей, чтобы переключатель не замедлял загрузку.

Например, сохранение выбора языка в localStorage:

document.querySelectorAll('.wplang-language-switcher a').forEach(function(link) {
    link.addEventListener('click', function(e) {
        localStorage.setItem('wplang_selected_lang', this.getAttribute('href'));
    });
});

И при загрузке страницы можно делать редирект или менять язык автоматически.