Почему важно создавать многоязычные мобильные сайты на WordPress
В современном мире мобильный трафик превалирует, и многие пользователи заходят на сайты с мобильных устройств. Если ваш сайт рассчитан на международную аудиторию, важно обеспечить удобство использования на мобильных устройствах для пользователей с разными языковыми предпочтениями. Многоязычность помогает расширить охват, улучшить SEO и повысить конверсию, особенно если сайт адаптирован под мобильные устройства.
Однако создание такого сайта сопряжено с рядом трудностей: необходимо грамотно организовать переключение языков, обеспечить быстрый загрузочный мобильный опыт и сохранить SEO-оптимизацию. В этой статье мы разберём, как реализовать многоязычный мобильный сайт на WordPress, рассмотрим популярные решения и приведём пример собственного кода для переключателя языков с учётом мобильной оптимизации.
Выбор плагина для многоязычности с учётом мобильной оптимизации
На рынке WordPress есть несколько популярных плагинов для создания многоязычности. Рассмотрим основные с акцентом на мобильную адаптивность:
- WPML — мощный и функциональный плагин, поддерживает мобильные темы и позволяет настраивать языковые переключатели с адаптивным дизайном. Но может быть тяжеловесным, что сказывается на скорости загрузки.
- Polylang — бесплатный и легковесный плагин, хорошо подходит для небольших сайтов. Позволяет создавать собственные языковые переключатели, что даёт возможность адаптировать их под мобильные устройства.
- TranslatePress — визуальный плагин с удобным интерфейсом, оптимизирован для мобильных устройств, поддерживает динамическую смену языков без перезагрузки страницы.
Для мобильных сайтов важно не только иметь языковой переключатель, но и сделать его компактным, удобным и быстро загружаемым. Мы рекомендуем использовать Polylang для легковесности или TranslatePress для удобства, а также дополнительно оптимизировать вывод переключателя через кастомный код.
Создание кастомного мобильного языкового переключателя на WordPress
Если вы хотите полностью контролировать внешний вид и поведение переключателя языков на мобильных устройствах, можно создать собственный переключатель с помощью PHP и JavaScript. Рассмотрим пример, который работает с плагином Polylang, но легко адаптируется и под другие решения.
Основные задачи переключателя:
- Отображать текущий язык
- Показывать список доступных языков в мобильном удобном виде (например, выпадающее меню)
- Обеспечивать быструю смену языка без перезагрузки или с минимальной задержкой
Пример кода переключателя
<?php
function wpmobile_get_language_switcher() {
if ( ! function_exists('pll_the_languages') ) {
return 'Полилингва не активен';
}
ob_start();
?>
<div id="wpmobile-language-switcher" style="position:relative; display:inline-block;">
<button id="wpmobile-lang-btn" style="padding:8px 12px; font-size:16px; cursor:pointer;" aria-haspopup="true" aria-expanded="false"><?php echo pll_current_language('name'); ?> ▼</button>
<ul id="wpmobile-lang-list" style="
display:none;
position:absolute;
background:#fff;
border:1px solid #ccc;
list-style:none;
margin:0;
padding:0;
width:120px;
z-index:9999;
">
<?php
$languages = pll_get_the_languages(array('hide_if_empty'=>0));
foreach ( $languages as $lang ) :
if ( $lang['slug'] === pll_current_language() ) continue;
?>
<li style="padding:8px 10px; cursor:pointer;"><a href="<?php echo esc_url($lang['url']); ?>" style="color:#333; text-decoration:none; display:block;"><?php echo esc_html($lang['name']); ?></a></li>
<?php endforeach; ?>
</ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const btn = document.getElementById('wpmobile-lang-btn');
const list = document.getElementById('wpmobile-lang-list');
btn.addEventListener('click', function(e) {
e.preventDefault();
const expanded = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', String(!expanded));
list.style.display = expanded ? 'none' : 'block';
});
document.addEventListener('click', function(e) {
if (!btn.contains(e.target) && !list.contains(e.target)) {
btn.setAttribute('aria-expanded', 'false');
list.style.display = 'none';
}
});
});
</script>
<style>
@media (max-width: 768px) {
#wpmobile-language-switcher {
font-size: 14px;
}
#wpmobile-lang-list {
width: 100%;
box-sizing: border-box;
}
}
</style>
<?php
return ob_get_clean();
}
// Вывод переключателя в теме
add_shortcode('wpmobile_lang_switcher', 'wpmobile_get_language_switcher');
?>Этот код создаёт компактный языковой переключатель, который можно разместить в любом месте сайта через шорткод [wpmobile_lang_switcher]. При нажатии на кнопку появляется список языков, адаптированный под мобильный экран. Такой подход даёт вам контроль над стилями и поведением, минимизирует загрузку лишних скриптов и повышает скорость.
Оптимизация многоязычного мобильного сайта: советы и хитрости
Кэширование и минимизация запросов
Многоязычные сайты часто дублируют контент, что увеличивает нагрузку на сервер и время загрузки. Используйте грамотное кэширование страниц с учётом языка пользователя. Рекомендуется настроить кэширование с плагинами вроде Clearfy Pro, которые умеют оптимизировать работу WordPress и совместимы с многоязычными плагинами.
Также минимизируйте количество запросов к серверу: объединяйте CSS и JS, используйте Lazy Load для изображений и видео, особенно для мобильных пользователей с ограниченной скоростью интернета.
SEO-оптимизация для мобильных многоязычных сайтов
Обязательно настройте правильные теги hreflang для каждой языковой версии, чтобы поисковые системы корректно индексировали разные языки и не считали их дублирующим контентом. Многие многоязычные плагины делают это автоматически, но лучше проверить в исходном коде страниц.
Кроме того, используйте адаптивные темы, например, Root или Bono, которые обеспечивают отличную мобильную поддержку и совместимость с многоязычностью.
Тестирование и UX на мобильных устройствах
Обязательно тестируйте работу переключателя языков и всего сайта на разных мобильных устройствах и браузерах. Убедитесь, что переключение происходит быстро, меню не перекрывает важные элементы, а шрифты и кнопки удобны для нажатия пальцем.
Используйте инструменты Google Mobile-Friendly Test и Lighthouse, чтобы оценить мобильную доступность и производительность сайта.
Дополнительные плагины и инструменты для многоязычных мобильных сайтов на WordPress
Помимо основных многоязычных плагинов, есть полезные инструменты для улучшения мобильного опыта:
- WPStories — плагин для создания мобильных сториз, который можно использовать для привлекательного контента на разных языках.
- My Popup — позволяет показывать всплывающие окна с предложениями на нужном языке, повышая конверсию.
- ABC Pagination — удобный плагин для пагинации, поддерживающий многоязычность и адаптивность для мобильных устройств.
Все эти плагины доступны на WPSHOP.ru и совместимы с популярными многоязычными решениями.