Как добавить “хлебные крошки” на свой сайт WordPress

Привет, друзья!

Сегодня я бы хотел рассказать вам о “хлебных крошках» (breadcrumbs) – где их взять, как их использовать и как настроить.

Как добавить хлебные крошки на свой сайт WordPress

Термин “хлебные крошки” относится к эффективному навигационному инструменту веб-сайта, который (как научили нас Гензель и Гретель) предназначен для того, чтобы помочь отследить свои шаги назад к “главной странице” (или домашней странице) веб-сайта. Они позволяют пользователям видеть, как текущая страница вписывается во всю структуру сайта, предоставляя встроенный трек ссылок (или ярлыков), ведущих обратно на домашнюю страницу.

хлебные крошки

“Хлебные крошки” на самом деле важнее для вашего сайта WordPress, чем вы думаете. Они не только улучшают пользовательский опыт, но и могут повысить ваш рейтинг в поисковых системах. Google любит этот структурный элемент на веб-сайте, и посетители получат важную навигационную помощь, когда наткнутся на одну из ваших страниц органически (снизив показатель отказов).

Вы могли бы подумать, что добавить такую интегрированную систему нативности на ваш сайт будет сложно, но на самом деле это довольно просто с использованием плагина. Фактически, если вы используете плагин Yoast SEO, у вас есть преимущество, потому что функциональность хлебных крошек уже встроена в Yoast! И добавление “хлебных крошек” через Yoast, безусловно, является одним из предпочтительных методов. Помимо Yoast SEO, плагин Breadcrumb NavXT является еще одним отличным вариантом, который легко настраивается и также хорошо работает.

Как добавить “хлебные крошки” на свой сайт WordPress с помощью Yoast

Чтобы добавить “хлебные крошки” на ваш сайт WordPress с помощью Yoast SEO, вам нужно выполнить три простых шага:

  • Установите и активируйте плагин Yoast SEO
  • Добавьте фрагмент кода “breadcrumbs” (хлебные крошки) в вашу тему WordPress
  • Включите/Настройте “хлебные крошки” в настройках плагина

Установите и активируйте плагин Yoast SEO

Чтобы установить плагин Yoast SEO, перейдите на панель управления WordPress и выберите “Плагины – Добавить новый”. Затем найдите в WordPress-репозитории с помощью поиска “yoast”. Когда вы увидите плагин “Yoast SEO”, нажмите, чтобы установить и активировать плагин.

Установите и активируйте плагин Yoast SEO

Добавьте фрагмент кода “хлебных крошек” в свою или дочернюю тему WordPress

Далее нам нужно добавить небольшой фрагмент кода в файлы вашей темы WordPress. Поэтому, если вы этого еще не сделали, рекомендуется создать дочернюю тему. В этом примере я собираюсь показать вам, как добавить фрагмент кода “хлебные крошки” в стандартную тему WordPress “TwentyNineteen”. Вы можете добавить код в любой файл/шаблон темы, но по большей части вы захотите добавить его в файл “single.php” (для отображения на всех сообщениях), файл “page.php” (для отображения на всех страницах) или в ваш файл “header.php” (чтобы показать везде).

Для этого примера я собираюсь добавить код “хлебных крошек” в файл “header.php” моей дочерней темы. Как только вы скопируете файл “header.php” из родительской темы, откройте его, чтобы отредактировать файл в редакторе кода по вашему выбору.

Затем в самом низу файла “header.php” добавьте следующий фрагмент php, предоставленный Yoast для активации функции Breadcrumbs:

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

код хлебных крошек

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

Включить и настроить “Yoast Breadcrumbs” в настройках плагина

После того, как фрагмент кода был добавлен в вашу дочернюю тему WordPress, все, что вам осталось сделать, это активировать “хлебные крошки” в настройках плагина Yoast SEO. Для этого перейдите на панель управления WordPress и перейдите в раздел “СЕО – Отображение в поисковой выдаче”, а затем перейдите на вкладку “Хлебные крошки”. В настройках “хлебных крошек” обязательно включите их, переключив опцию на “Включено”. Затем вы можете настроить параметры хлебных крошек в соответствии с вашими потребностями. Вы также можете выбрать таксономию, которая будет отображаться в “крошках” для вашего сообщения. Для этого примера я собираюсь настроить свои посты так, чтобы они отображали название категории в “хлебных крошках”.

отображали название категории

Теперь давайте посмотрим, как выглядят “хлебные крошки” в одном из постов, которые я создал в теме “TwentyNineteen”.

Вот как выглядит этот пост перед включением “хлебных крошек”.

пост перед включением хлебных крошек

Вот как выглядит этот пост после включения хлебных крошек. Этот конкретный пример публикации имеет категорию (“WordPress”) и родительскую категорию (“Веб-дизайн”), чтобы показать вам таксономию категории “хлебных крошек”, которые я выбрал в настройках “хлебных крошек”.

пост после включения хлебных крошек

Возможно, вам придется настроить стиль ваших хлебных крошек, используя некоторые внешние CSS. Для этого вы можете использовать CSS ID “хлебных крошек”, который был включен в код php. Откройте файл style.css вашей дочерней темы (или вы можете добавить его в настройщике тем в разделе “Дополнительные CSS”) и добавить следующее:

    #breadcrumbs {
        /* Добавьте сюда стили для "хлебных крошек" */
    }

Для темы “TwentyNineteen” я могу захотеть сопоставить поля моего текста заголовка, добавив следующий пользовательский CSS:

    #breadcrumbs {
        margin: 0 calc(10% + 60px);
    }

добавив следующий пользовательский CSS

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

    [ wpseo_breadcrumb ]

Добавление хлебных крошек на ваш сайт WordPress с помощью плагина Breadcrumb NavXT

Если по какой-то причине вы не хотите устанавливать “Yoast SEO” или ищете другой простой вариант, плагин “Breadcrumb NavXT” является отличным выбором.

Чтобы установить плагин, перейдите на панель управления WordPress и выберите “Плагины – Добавить новый”. Затем найдите в хранилище WordPress “Breadcrumb NavXT”. Когда вы увидите плагин, нажмите, чтобы установить и активировать его.

Breadcrumb NavXT

Чтобы вызвать хлебные крошки, и чтобы они отображались на вашем сайте, вы можете использовать встроенный виджет Breadcrumb NavXT, представленный на странице виджетов. Это позволит вам перетащить виджет в различные области виджетов, предоставляемые вашей темой. Для этого перейдите на панель управления WordPress и перейдите на вкладку “Внешний вид – Виджеты”. Затем перетащите виджет в область виджетов или на ваш выбор и обновите настройки виджета.

обновите настройки виджета

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

отображения хлебных крошек в верхней части боковой панели

Как и в примере с “Yoast Breadcrumb”, вы также можете вызвать цепочку хлебных крошек на свой сайт, добавив необходимый код в свою дочернюю тему. Вот код, который они предоставляют, который совместим с “schema.org breadcrumblist”:

    <div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
        <?php if(function_exists('bcn_display'))
        {
                bcn_display();
        } ?>
    </div>

Поскольку я использую тему Divi для этого примера, я собираюсь добавить код в файл “single.php” моей темы Divi Child прямо над тегом “article”. Это будет отображать “хлебные крошки” в верхней части всех моих сообщений.

в верхней части всех моих сообщений

Вот как выглядит сообщение после добавления кода.

Вот как выглядит сообщение после добавления кода

Настройка “хлебных крошек” с помощью настроек плагина

Плагин “Breadcrumb NavXT” имеет несколько мощных опций для настройки ваших хлебных крошек. Вы можете настроить весь шаблон своих хлебных крошек для различных таксономий и многого другого. Вы можете получить доступ к этим настройкам с панели управления WordPress, перейдя во вкладку “Настройки – Breadcrumb NavXT”.

Настройка хлебных крошек

Стили “хлебных крошек”

Если вы хотите стилизовать хлебные крошки, вы можете выбрать класс “breadcrumbs”, который включен в код.

Просто добавьте следующий CSS в файл style.css вашей дочерней темы или в дополнительный настройщик CSS:

    .breadcrumbs {
        /* Добавьте сюда стили для "хлебных крошек" */
    }

Добавление хлебных крошек на ваш сайт без плагина

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

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

Теперь тут есть поддержка для:

  • родительские и дочерние страницы
  • архивы
  • пользовательские типы сообщений
  • таксономии

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

// Breadcrumbs
function custom_breadcrumbs() {
// Настройки
$separator          = '>'; // Разделитель крошек
$breadcrums_id      = 'breadcrumbs'; // id блока
$breadcrums_class   = 'breadcrumbs'; // class крошек
$home_title         = 'Главная'; // Название главной страницы в хлебных крошках
// Если у вас есть какие-либо типы таксономией, добавьте код в переменную ниже (например, product_cat для Woocommerce)
$custom_taxonomy    = 'product_cat';
// Получаем запись и запрос
global $post,$wp_query;
// Не отображать на главной
if ( !is_front_page() ) {
// Начало хлебных крошек
echo '<ul id="' . $breadcrums_id . '" class="' . $breadcrums_class . '">';
// Главная
echo '<li class="item-home"><a class="bread-link bread-home" href="' . get_home_url() . '" title="' . $home_title . '">' . $home_title . '</a></li>';
echo '<li class="separator separator-home"> ' . $separator . ' </li>';
if ( is_archive() && !is_tax() && !is_category() && !is_tag() ) {
echo '<li class="item-current item-archive"><strong class="bread-current bread-archive">' . post_type_archive_title($prefix, false) . '</strong></li>';
} else if ( is_archive() && is_tax() && !is_category() && !is_tag() ) {
// Если запись - пользовательский другой тип записи
$post_type = get_post_type();
if($post_type != 'post') {
$post_type_object = get_post_type_object($post_type);
$post_type_archive = get_post_type_archive_link($post_type);
echo '<li class="item-cat item-custom-post-type-' . $post_type . '"><a class="bread-cat bread-custom-post-type-' . $post_type . '" href="' . $post_type_archive . '" title="' . $post_type_object->labels->name . '">' . $post_type_object->labels->name . '</a></li>';
echo '<li class="separator"> ' . $separator . ' </li>';
}
$custom_tax_name = get_queried_object()->name;
echo '<li class="item-current item-archive"><strong class="bread-current bread-archive">' . $custom_tax_name . '</strong></li>';
} else if ( is_single() ) {
// Если запись - пользовательский другой тип записи
$post_type = get_post_type();
// If it is a custom post type display name and link
if($post_type != 'post') {
$post_type_object = get_post_type_object($post_type);
$post_type_archive = get_post_type_archive_link($post_type);
echo '<li class="item-cat item-custom-post-type-' . $post_type . '"><a class="bread-cat bread-custom-post-type-' . $post_type . '" href="' . $post_type_archive . '" title="' . $post_type_object->labels->name . '">' . $post_type_object->labels->name . '</a></li>';
echo '<li class="separator"> ' . $separator . ' </li>';
}
// Получить информацию о категории сообщений
$category = get_the_category();
if(!empty($category)) {
// Получить сообщение в последней категории
$last_category = end(array_values($category));
// Get parent any categories and create array
$get_cat_parents = rtrim(get_category_parents($last_category->term_id, true, ','),',');
$cat_parents = explode(',',$get_cat_parents);
// Цикл через родительские категории и храниться в переменной $cat_display
$cat_display = '';
foreach($cat_parents as $parents) {
$cat_display .= '<li class="item-cat">'.$parents.'</li>';
$cat_display .= '<li class="separator"> ' . $separator . ' </li>';
}
}
// Если это пользовательский тип записи в пользовательской таксономии
$taxonomy_exists = taxonomy_exists($custom_taxonomy);
if(empty($last_category) && !empty($custom_taxonomy) && $taxonomy_exists) {
$taxonomy_terms = get_the_terms( $post->ID, $custom_taxonomy );
$cat_id         = $taxonomy_terms[0]->term_id;
$cat_nicename   = $taxonomy_terms[0]->slug;
$cat_link       = get_term_link($taxonomy_terms[0]->term_id, $custom_taxonomy);
$cat_name       = $taxonomy_terms[0]->name;
}
// Проверяем, находится ли сообщение в категории
if(!empty($last_category)) {
echo $cat_display;
echo '<li class="item-current item-' . $post->ID . '"><strong class="bread-current bread-' . $post->ID . '" title="' . get_the_title() . '">' . get_the_title() . '</strong></li>';
// Иначе, если post находится в пользовательской таксономии
} else if(!empty($cat_id)) {
echo '<li class="item-cat item-cat-' . $cat_id . ' item-cat-' . $cat_nicename . '"><a class="bread-cat bread-cat-' . $cat_id . ' bread-cat-' . $cat_nicename . '" href="' . $cat_link . '" title="' . $cat_name . '">' . $cat_name . '</a></li>';
echo '<li class="separator"> ' . $separator . ' </li>';
echo '<li class="item-current item-' . $post->ID . '"><strong class="bread-current bread-' . $post->ID . '" title="' . get_the_title() . '">' . get_the_title() . '</strong></li>';
} else {
echo '<li class="item-current item-' . $post->ID . '"><strong class="bread-current bread-' . $post->ID . '" title="' . get_the_title() . '">' . get_the_title() . '</strong></li>';
}
} else if ( is_category() ) {
// Рубрика
echo '<li class="item-current item-cat"><strong class="bread-current bread-cat">' . single_cat_title('', false) . '</strong></li>';
} else if ( is_page() ) {
// Стандартная страница
if( $post->post_parent ){
// Если дочерняя страница, получаем родителей
$anc = get_post_ancestors( $post->ID );
// Приводим родителей в правильный порядок
$anc = array_reverse($anc);
// Цикл родительской страницы
if ( !isset( $parents ) ) $parents = null;
foreach ( $anc as $ancestor ) {
$parents .= '<li class="item-parent item-parent-' . $ancestor . '"><a class="bread-parent bread-parent-' . $ancestor . '" href="' . get_permalink($ancestor) . '" title="' . get_the_title($ancestor) . '">' . get_the_title($ancestor) . '</a></li>';
$parents .= '<li class="separator separator-' . $ancestor . '"> ' . $separator . ' </li>';
}
// Показать родительские страницы
echo $parents;
// Текущая страница
echo '<li class="item-current item-' . $post->ID . '"><strong title="' . get_the_title() . '"> ' . get_the_title() . '</strong></li>';
} else {
// Просто отобразить текущую страницу, если не родитель
echo '<li class="item-current item-' . $post->ID . '"><strong class="bread-current bread-' . $post->ID . '"> ' . get_the_title() . '</strong></li>';
}
} else if ( is_tag() ) {
// Страница тегов
// Получаем информацию о теге
$term_id        = get_query_var('tag_id');
$taxonomy       = 'post_tag';
$args           = 'include=' . $term_id;
$terms          = get_terms( $taxonomy, $args );
$get_term_id    = $terms[0]->term_id;
$get_term_slug  = $terms[0]->slug;
$get_term_name  = $terms[0]->name;
// Показать имя тега
echo '<li class="item-current item-tag-' . $get_term_id . ' item-tag-' . $get_term_slug . '"><strong class="bread-current bread-tag-' . $get_term_id . ' bread-tag-' . $get_term_slug . '">' . $get_term_name . '</strong></li>';
} elseif ( is_day() ) {
// Дневной архив
// Ссылка на год
echo '<li class="item-year item-year-' . get_the_time('Y') . '"><a class="bread-year bread-year-' . get_the_time('Y') . '" href="' . get_year_link( get_the_time('Y') ) . '" title="' . get_the_time('Y') . '">' . get_the_time('Y') . ' Archives</a></li>';
echo '<li class="separator separator-' . get_the_time('Y') . '"> ' . $separator . ' </li>';
// Ссылка на месяц
echo '<li class="item-month item-month-' . get_the_time('m') . '"><a class="bread-month bread-month-' . get_the_time('m') . '" href="' . get_month_link( get_the_time('Y'), get_the_time('m') ) . '" title="' . get_the_time('M') . '">' . get_the_time('M') . ' Archives</a></li>';
echo '<li class="separator separator-' . get_the_time('m') . '"> ' . $separator . ' </li>';
// Ссылка на день
echo '<li class="item-current item-' . get_the_time('j') . '"><strong class="bread-current bread-' . get_the_time('j') . '"> ' . get_the_time('jS') . ' ' . get_the_time('M') . ' Archives</strong></li>';
} else if ( is_month() ) {
// Архив Месяца
// Ссылка на год
echo '<li class="item-year item-year-' . get_the_time('Y') . '"><a class="bread-year bread-year-' . get_the_time('Y') . '" href="' . get_year_link( get_the_time('Y') ) . '" title="' . get_the_time('Y') . '">' . get_the_time('Y') . ' Archives</a></li>';
echo '<li class="separator separator-' . get_the_time('Y') . '"> ' . $separator . ' </li>';
// Ссылка на месяц
echo '<li class="item-month item-month-' . get_the_time('m') . '"><strong class="bread-month bread-month-' . get_the_time('m') . '" title="' . get_the_time('M') . '">' . get_the_time('M') . ' Archives</strong></li>';
} else if ( is_year() ) {
// Показать архив года
echo '<li class="item-current item-current-' . get_the_time('Y') . '"><strong class="bread-current bread-current-' . get_the_time('Y') . '" title="' . get_the_time('Y') . '">' . get_the_time('Y') . ' Archives</strong></li>';
} else if ( is_author() ) {
// Архив авторов
// Получаем информацию об авторе
global $author;
$userdata = get_userdata( $author );
// Выводим имя автора
echo '<li class="item-current item-current-' . $userdata->user_nicename . '"><strong class="bread-current bread-current-' . $userdata->user_nicename . '" title="' . $userdata->display_name . '">' . 'Author: ' . $userdata->display_name . '</strong></li>';
} else if ( get_query_var('paged') ) {
// Пагинация архива
echo '<li class="item-current item-current-' . get_query_var('paged') . '"><strong class="bread-current bread-current-' . get_query_var('paged') . '" title="Page ' . get_query_var('paged') . '">'.__('Page') . ' ' . get_query_var('paged') . '</strong></li>';
} else if ( is_search() ) {
// Страница результатов поиска
echo '<li class="item-current item-current-' . get_search_query() . '"><strong class="bread-current bread-current-' . get_search_query() . '" title="Search results for: ' . get_search_query() . '">Search results for: ' . get_search_query() . '</strong></li>';
} elseif ( is_404() ) {
// 404 страница
echo '<li>' . 'Error 404' . '</li>';
}
echo '</ul>';
}
}

Затем, чтобы вызвать хлебные крошки на свою страницу (обычно в файле header.php), просто используйте следующий код:

<?php custom_breadcrumbs(); ?>

Стилизуем “хлебные крошки”

#breadcrumbs{
list-style:none;
margin:10px 0;
overflow:hidden;
}
#breadcrumbs li{
display:inline-block;
vertical-align:middle;
margin-right:15px;
}
#breadcrumbs .separator{
font-size:18px;
font-weight:100;
color:#ccc;
}

Некоторые люди могут увидеть белый экран или нежелательное поведение после добавления этой функции. Я рекомендую всем, кто добавляет это на свой сайт, делать это через FTP, а не редактор файлов WordPress. Используйте этот код на свой страх и риск, но если у вас есть какие-либо проблемы с этим кодом, пожалуйста, сообщите мне об этом в комментариях, и я постараюсь помочь всем, чем смогу.

И напоследок

“Хлебные крошки” являются важной частью сайта как для удобства использования, так и для СЕО. Поэтому, если вы планируете добавить крошки на свой сайт WordPress, я бы посоветовал вам начать с методов, предоставляемых плагинами, упомянутыми в этой статье (Yoast SEO и Breadcrumb NavXT). Лучше всего использовать хлебные крошки Yoast, если вы уже используете их плагин СЕО, так как он уже в вашем распоряжении. Тем не менее, Breadcrumb NavXT также очень настраиваемый вариант. Конечно, вам, возможно, придется получить доступ к файлам вашей темы, но в целом процесс прост. Во всяком случае, я надеюсь, что это поможет облегчить страдания от получения “хлебных крошек” на вашем собственном сайте WordPress.

Я с нетерпением жду ответа от вас в комментариях.

До скорых встреч!

Вам понравилась статья?
плохохорошо (Пока оценок нет)
Загрузка...
Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на WordPress, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!
3 комментария к статье "Как добавить “хлебные крошки” на свой сайт WordPress"
  1. Юрич: 04.06.2019 в 16:43 - Ответить

    Добрый!
    1 код добавляется в functions.php
    второй код – в файл стилей style.css

  2. Sergey: 04.06.2019 в 16:27 - Ответить

    И ещё- куда добавить 2 кода – самый длинный первый и третий-для стилизации, видно только куда добавлять средний код-2-й в хеадер http://prntscr.com/nxghqk

  3. Sergey: 04.06.2019 в 16:20 - Ответить

    http://prntscr.com/nxgd4d код не копируется полностью, только знаки и спецсимволы.