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

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

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

Перенос языкового кода в URL — это не просто визуальный вопрос. От правильной структуры URL зависит:

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

Например, URL https://example.com/ru/category/post-name должен корректно отображаться и на мобильных устройствах, и при копировании в соцсети.

Как WordPress обрабатывает языковые коды в URL

В большинстве случаев языковые плагины, такие как Polylang или WPML, добавляют языковой код в префикс URL. Это реализуется через правила перезаписи (rewrite rules) и фильтры WordPress. Но стандартно WordPress не умеет управлять переносом части URL на новую строку — это задача CSS и HTML.

Для улучшения отображения можно использовать специальные символы переноса или CSS-свойства, чтобы URL автоматически разбивался на удобочитаемые части.

Решение задачи: перенос языкового кода с помощью CSS и фильтров WordPress

Самый простой способ — добавить в ссылку элемент, который позволит браузеру делать переносы. Например, используя тег <wbr> (word break opportunity). Мы можем выступить на стороне вывода URL, добавив <wbr> после языкового кода.

Пример функции для вывода URL с переносом языка

function wplangs_add_wbr_to_lang_in_url($url) {
    // Регулярное выражение для нахождения языкового кода в URL
    // Предполагаем, что язык — это двухбуквенный код после домена
    return preg_replace('#/(ru|en|de|fr|es)(/)#', '/$1<wbr>$2', $url);
}

Эту функцию можно использовать при выводе ссылок, например, в меню или в хлебных крошках.

Пример использования фильтра для меню

add_filter('nav_menu_link_attributes', function($atts, $item, $args, $depth) {
    if (!empty($atts['href'])) {
        $atts['href'] = wplangs_add_wbr_to_lang_in_url($atts['href']);
    }
    return $atts;
}, 10, 4);

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

Дополнительные приемы CSS для управления переносом URL

Сам тег <wbr> поддерживается не всеми старыми браузерами, поэтому дополнительно стоит использовать CSS:

• word-break: break-all; — разрывает строку в любом месте;
• overflow-wrap: break-word; — позволяет переносить длинные слова;
• hyphens: auto; — добавляет переносы для текста.

Пример CSS для блока с URL:

.wplangs-url {
    word-break: break-word;
    overflow-wrap: break-word;
}

Оборачивайте URL в элемент с этим классом, чтобы обеспечить корректный перенос.

Использование плагина Clearfy Pro для оптимизации ссылок и SEO

Плагин Clearfy Pro позволяет гибко настраивать ЧПУ, исключать дубли и оптимизировать ссылки. В частности, в нем есть опции для управления префиксом языка, что дополнительно упрощает работу с URL.

Если нужно более продвинутое управление языковыми URL, советую изучить возможности Clearfy Pro и настроить правила, которые будут автоматически корректировать структуру ссылок под ваши нужды.

Итоги и рекомендации

Перенос языкового кода в URL WordPress — задача, которую нельзя решить только средствами PHP. Необходимо сочетать изменения в выводе ссылок (например, вставлять <wbr>) и использовать CSS для контроля переноса текста.

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

Также рекомендую обратить внимание на специализированные плагины, такие как Clearfy Pro, для комплексной оптимизации URL и SEO.

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