Создание многоязычного хлебные крошки (breadcrumb) в WordPress с примерами

Хлебные крошки (breadcrumbs) — важный элемент навигации на сайте, который помогает пользователям и поисковым системам понимать структуру страниц. Для многоязычных сайтов на WordPress особенно важно правильно реализовать хлебные крошки, чтобы они корректно отображали путь на выбранном языке и учитывали особенности мультиязычности.

Почему важен многоязычный breadcrumb для WordPress

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

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

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

Использование плагинов для многоязычных хлебных крошек

Самые популярные плагины для хлебных крошек в WordPress:

• Yoast SEO — включает в себя функцию хлебных крошек с поддержкой WPML и Polylang.
• Breadcrum NavXT — позволяет настраивать крошки, интегрируется с мультиязычными плагинами.
• Breadcrumb NavXT + WPML/Polylang — совместное использование для корректной локализации крошек.

Пример настройки Yoast SEO для многоязычного сайта с WPML:

• Включите хлебные крошки в настройках Yoast SEO.
• Убедитесь, что WPML корректно переводит названия страниц и категорий.
• Добавьте вызов хлебных крошек в тему, например, в header.php:

if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb('<p id="breadcrumbs">', '</p>');
}

Yoast SEO автоматически подставит пути на нужном языке, если переводы сделаны через WPML.

Создание кастомного многоязычного breadcrumb с поддержкой Polylang и WPML

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

Основные задачи такой функции:

• Определить текущий язык сайта.
• Получить и вывести правильные переводы названий страниц, категорий и таксономий.
• Сформировать цепочку ссылок с учетом структуры сайта и языка.

Пример функции wplang_get_breadcrumb() с поддержкой WPML

function wplang_get_breadcrumb() {
    if (is_front_page()) {
        return '<a href="' . home_url() . '">' . __('Главная', 'wplang') . '</a>';
    }

    $breadcrumb = '<a href="' . home_url() . '">' . __('Главная', 'wplang') . '</a> » ';

    if (is_category()) {
        $category = get_queried_object();
        $ancestors = get_ancestors($category->term_id, 'category');
        $ancestors = array_reverse($ancestors);

        foreach ($ancestors as $ancestor_id) {
            $ancestor = get_category($ancestor_id);
            $translated_name = apply_filters( 'wpml_translate_single_string', $ancestor->name, 'Taxonomy name', $ancestor->slug );
            $breadcrumb .= '<a href="' . get_category_link($ancestor_id) . '">' . esc_html($translated_name) . '</a> » ';
        }

        $translated_name = apply_filters( 'wpml_translate_single_string', $category->name, 'Taxonomy name', $category->slug );
        $breadcrumb .= esc_html($translated_name);
    } elseif (is_single()) {
        $post_type = get_post_type();

        if ($post_type != 'post') {
            $post_type_obj = get_post_type_object($post_type);
            $post_type_name = apply_filters('wpml_translate_single_string', $post_type_obj->labels->singular_name, 'Post Type', $post_type);
            $breadcrumb .= '<a href="' . get_post_type_archive_link($post_type) . '">' . esc_html($post_type_name) . '</a> » ';
        } else {
            $category = get_the_category();
            if ($category) {
                $category = $category[0];
                $breadcrumb .= '<a href="' . get_category_link($category->term_id) . '">' . esc_html($category->name) . '</a> » ';
            }
        }

        $breadcrumb .= get_the_title();
    } elseif (is_page()) {
        $ancestors = get_post_ancestors(get_the_ID());
        $ancestors = array_reverse($ancestors);

        foreach ($ancestors as $ancestor_id) {
            $breadcrumb .= '<a href="' . get_permalink($ancestor_id) . '">' . get_the_title($ancestor_id) . '</a> » ';
        }

        $breadcrumb .= get_the_title();
    } else {
        $breadcrumb .= get_the_title();
    }

    return $breadcrumb;
}

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

Как вывести хлебные крошки в теме

Добавьте в нужное место шаблона (например, в header.php или page.php) следующий код:

echo wplang_get_breadcrumb();

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

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

• Все названия страниц, категорий и таксономий должны быть переведены в системе перевода (WPML, Polylang, Loco Translate и др.).
• Используйте системные функции для перевода, чтобы избежать жестко прописанных строк.
• Проверяйте, что ссылки корректно ведут на соответствующие языковые версии страниц.
• Если в вашем проекте используется плагин Clearfy Pro, его функционал оптимизации может помочь убрать лишние языковые параметры из URL и улучшить работу breadcrumbs.
• Для удобства администрирования и контроля качества перевода можно использовать плагин Expert Review с интеграцией перевода хлебных крошек.

Пример интеграции хлебных крошек с плагином WPML и Clearfy Pro

После настройки WPML для перевода страниц и категорий, включите хлебные крошки Yoast SEO и активируйте Clearfy Pro для оптимизации URL:

• В Clearfy Pro включите опцию «Оптимизация URL мультиязычности» для удаления лишних параметров.
• В шаблоне добавьте вызов yoast_breadcrumb().
• Проверьте, что хлебные крошки корректно показывают язык и ссылки.

Если хотите добавить кастомный стиль или изменить структуру, можно использовать фильтры Yoast либо заменить вывод на собственный, используя функцию wplang_get_breadcrumb() из примера выше.

Заключение

Многоязычные хлебные крошки — это важный элемент, который улучшает навигацию и SEO вашего WordPress сайта с несколькими языками. Использование готовых решений в связке с WPML или Polylang упрощает задачу, но создание собственной функции даст полный контроль и гибкость.

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

Полезные ссылки:

• <a href="https://wpshop.ru/plugins/clearfy-pro/?utm_source=wplang.ru&utm_medium=article&utm_campaign=kak-sozdat-mnogoyazychnyj-breadcrumb-v-wordpress">Clearfy Pro на WPSHOP</a>
• <a href="https://wpshop.ru/plugins/expert-review/?utm_source=wplang.ru&utm_medium=article&utm_campaign=kak-sozdat-mnogoyazychnyj-breadcrumb-v-wordpress">Expert Review на WPSHOP</a>