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

Автор: Вадим Васильев | Опубликовано: 11.04.2026

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

Зачем нужны адаптивные языковые виджеты в WordPress

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

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

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

Выбор плагинов для создания адаптивных языковых переключателей

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

Polylang — бесплатный и мощный плагин с возможностью вывода языкового переключателя виджетом или шорткодом. Позволяет кастомизировать внешний вид через CSS и использовать разные типы отображения.
WPML — премиум-решение с расширенными настройками. Поддерживает адаптивные переключатели, которые можно настроить в разделе «Языковые переключатели» и интегрировать в меню или сайдбар.
TranslatePress — удобный плагин с визуальным редактором перевода и возможностью кастомизации виджета. Имеет встроенную адаптацию под мобильные устройства.

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

Реализация адаптивного языкового виджета на примере Polylang

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

Polylang позволяет вывести языковой переключатель с помощью функции pll_the_languages(). Для адаптивного виджета создадим свой виджет, который будет использовать эту функцию и добавим кастомный CSS.

function wplang_custom_language_switcher() {
    echo '<div class="wplang-language-switcher">';
    pll_the_languages(array(
        'dropdown' => 1, // включаем выпадающий список на мобильных
        'show_flags' => 1, // показываем флаги
        'show_names' => 0 // скрываем названия языков для компактности
    ));
    echo '</div>';
}

Такой переключатель будет отображаться в виде выпадающего списка с флагами, что экономит пространство на мобильных устройствах.

Добавление CSS для адаптивности

Теперь подключим стили, которые обеспечат адаптивность виджета:

.wplang-language-switcher {
    max-width: 200px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .wplang-language-switcher select {
        width: 100%;
        font-size: 16px;
        padding: 8px;
    }
}

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

Регистрация виджета в теме

Для удобства выведем переключатель как виджет, добавив следующий код в файл functions.php вашей темы:

class WPLang_Language_Switcher_Widget extends WP_Widget {
    function __construct() {
        parent::__construct(
            'wplang_language_switcher',
            'Адаптивный языковой переключатель'
        );
    }
    public function widget($args, $instance) {
        echo $args['before_widget'];
        wplang_custom_language_switcher();
        echo $args['after_widget'];
    }
}
add_action('widgets_init', function() {
    register_widget('WPLang_Language_Switcher_Widget');
});

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

Как улучшить адаптивность с помощью JavaScript

Иногда CSS недостаточно, чтобы обеспечить удобство переключателя. Можно добавить JavaScript, который будет менять поведение виджета в зависимости от ширины экрана.

Например, при больших экранах показывать полный список языков, а на мобильных — только выпадающий список.

function wplang_toggle_language_switcher() {
    const container = document.querySelector('.wplang-language-switcher');
    if (!container) return;

    function updateSwitcher() {
        if (window.innerWidth <= 768) {
            container.classList.add('dropdown-mode');
        } else {
            container.classList.remove('dropdown-mode');
        }
    }

    window.addEventListener('resize', updateSwitcher);
    updateSwitcher();
}
document.addEventListener('DOMContentLoaded', wplang_toggle_language_switcher);

В CSS можно переключать стили для .dropdown-mode, чтобы менять вид переключателя динамически.

Альтернативы: использование плагина WPGPT для языковых виджетов

Если вы хотите добавить языковой переключатель с автоматическим переводом и AI-поддержкой, посмотрите плагин WPGPT. Он умеет создавать интерактивные языковые виджеты с поддержкой GPT-переводов и хорошей адаптивностью.

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

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