Хлебные крошки на сайте: что это такое, как сделать, как добавить на сайт

Приветствую читателей блога. Сегодня речь о хлебных крошках на сайте — что это такое, как они влияют на seo блога? Как сделать breadcrumbs на wordpress, какие инструменты использовать?
Каким образом эти крошки относятся к сказке? Обо всех этих моментах в сегодняшнем посте.
Навигационную ленту можно увидеть на многих сайтах, обычно ее вставляют под шапкой над заголовком.

Что значит термин

Обычно с английского breadcrumbs переводят как «хлебные крошки». Это подсказки, показывают читателю, в каком месте ресурса он находится. Располагаются на страницах записей, в таксономиях (категории, метки).

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

Я попробовала ввести слово breadcrumbs в переводчик Google. Перевод был такой: «панировочные сухари».

Допустим. Все равно можно предположить аналогию с детской сказкой про поход детишек в лес. С помощью цепочки хлебных крошек ГЛАВНАЯ, РУБРИКА, СТАТЬЯ посетитель, подобно Гензелю и Грете, найдет путь хоть на главную, хоть в нужную рубрику.

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

Именно на таких веб-ресурсах, используя навигационную цепочку из крошек, можно переходить на другие уровни:

СТАТЬИ ПО ТЕМЕ:

.Htaccess: настройка, установка файла

Как сделать, изменить wordpress главную страницу

Html выделить текст цветом (фон), рамкой

• легко попасть на главную;
• поискать дополнительную информацию в рубрике;
• затем вернуться на страничку товара.

Как влияют на seo

Наличие навигационной цепочки положительно оценивают поисковики. Она появляется в сниппете в результатах поиска. Пользователи скорее кликнут на привлекательный сниппет. Поисковики быстрее распознают структуру сайта.

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

Кроме названия поста (страница, где находится посетитель) все ссылки хлебных крошек wordpress активны, кликабельны.

Они — отличная вариация внутренней перелинковки, помогают:

РОБОТАМ — быстрее понять структуру веб-сайта, проиндексировать страницы;

ПОСЕТИТЕЛЯМ — проще ходить, перемещаться по разделам.

Их установка значительно улучшает поведенческие факторы (один из главных показателей качества сайта). Когда навигация понятна и удобна, посетители дольше остаются на веб-ресурсе.

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

Есть несколько вариантов.

Выберите шаблон с включенной в него навигационной лентой. Обычно такие темы платные.

Установите плагин.

Breadcrumb Nav XT. Закачайте его на блог по инструкции. Сделайте настройки. Задайте путь (метки, рубрики, даты), максимальную длину заголовка. Выберите вид разделителя разделов. Настройте внешний вид отображаемых элементов цепочки.

Breadcrumb простой, легкий плагин, есть возможность менять цвет ленты.

Yoast SEO — сео плагин, но в нем есть опция установки breadcrumbs, надо лишь правильно настроить функционал. Включите их на вкладке SEO: отображение в поисковой выдаче — хлебные крошки. Ползунок перетащите на ВКЛЮЧЕНО. Изменения сохраните.

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

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

Как сделать хлебные крошки на сайте без плагина

Один из блогеров — dimox, очень удачно извлек код из плагина Breadcrumb Nav XT. Он показал нам места в редакторе для вставки кода.

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

СДЕЛАЙТЕ бекап сайта, потому что работать будем с редактором Вордпресс, мало ли что пойдет неправильно;

ВСТАВЬТЕ КОД в functions.php (Функции темы) после первого <?php

// хлебные крошки
function dimox_breadcrumbs() {

$showOnHome = 0; // 1 - показывать "хлебные крошки" 
на главной странице, 
0 - не показывать
$delimiter = '»'; // разделить между "крошками"
$home = 'Главная'; // текст ссылка "Главная"
$showCurrent = 1; // 1 - показывать название текущей 
статьи/страницы, 
0 - не показывать
$before = '<span class="current">'; // тег перед текущей
 "крошкой"
$after = '</span>'; // тег после текущей "крошки"
global $post;
$homeLink = get_bloginfo('url');

if (is_home() || is_front_page()) {

if ($showOnHome == 1) echo '<div id="crumbs">
<a href="' . $homeLink . '">' . $home . '</a></div>';

} else {

echo '<div id="crumbs">
<a href="' . $homeLink . '">' . $home . '</a> ' 
. $delimiter . ' ';

if ( is_category() ) {
global $wp_query;
$cat_obj = $wp_query->get_queried_object();
$thisCat = $cat_obj->term_id;
$thisCat = get_category($thisCat);
$parentCat = get_category($thisCat->parent);
if ($thisCat->parent != 0) 
echo(get_category_parents($parentCat, TRUE, ' ' 
. $delimiter . ' '));
echo $before . single_cat_title('', false). $after;

} elseif ( is_day() ) {
echo '<a href="' . get_year_link(get_the_time('Y')) 
. '">' 
. get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo '<a href="' . get_month_link(get_the_time('Y'),
get_the_time('m')) . '">' . get_the_time('F') . '</a> ' 
. $delimiter . ' ';
echo $before . get_the_time('d') . $after;

} elseif ( is_month() ) {
echo '<a href="' . get_year_link(get_the_time('Y')) 
. '">' 
. get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo $before . get_the_time('F') . $after;
} elseif ( is_year() ) {
echo $before . get_the_time('Y') . $after;

} elseif ( is_single() && !is_attachment() ) {
if ( get_post_type() != 'post' ) {
$post_type = get_post_type_object(get_post_type());
$slug = $post_type->rewrite;
echo '<a href="' . $homeLink . '/' . $slug['slug'] 
. '/">' 
. $post_type->labels->singular_name . '</a> ' . $delimiter 
. ' ';
if ($showCurrent == 1) echo $before . get_the_title() 
. $after;
} else {
$cat = get_the_category(); $cat = $cat[0];
echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
if ($showCurrent == 1) echo $before . get_the_title() 
. $after;
}
} elseif ( !is_single() && !is_page() && get_post_type() !=
 'post' && !is_404() ) {
$post_type = get_post_type_object(get_post_type());
echo $before . $post_type->labels->singular_name . $after;

} elseif ( is_attachment() ) {
$parent = get_post($post->post_parent);
$cat = get_the_category($parent->ID); $cat = $cat[0];
echo get_category_parents($cat, TRUE, ' ' . $delimiter 
. ' ');
echo '<a href="' . get_permalink($parent) . '">' 
. $parent->post_title 
. '</a> ' . $delimiter . ' ';
if ($showCurrent == 1) echo $before . get_the_title() 
. $after;

} elseif ( is_page() && !$post->post_parent ) {
if ($showCurrent == 1) echo $before . get_the_title() 
. $after;
} elseif ( is_page() && $post->post_parent ) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' 
. get_the_title($page->ID) . '</a>';
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) echo $crumb . ' ' 
. $delimiter . ' ';
if ($showCurrent == 1) echo $before . get_the_title() 
. $after;

} elseif ( is_search() ) {
echo $before . 'Результаты поиска по запросу "' 
. get_search_query()
 . '"' . $after;

} elseif ( is_tag() ) {
echo $before . 'Записи с тегом "' 
. single_tag_title('', false) . '"' 
. $after;

} elseif ( is_author() ) {
global $author;
$userdata = get_userdata($author);
echo $before . 'Статьи автора ' . $userdata->display_name 
. $after;

} elseif ( is_404() ) {
echo $before . 'Error 404' . $after;
}
if ( get_query_var('paged') ) {
if ( is_category() || is_day() || is_month() || is_year() 
|| is_search() || is_tag() || is_author() ) echo ' (';
echo __('Page') . ' ' . get_query_var('paged');
if ( is_category() || is_day() || is_month() || is_year() 
|| is_search() || is_tag() || is_author() ) echo ')';
}

echo '</div>';

}
} // end dimox_breadcrumbs()

Посмотрите на скриншоте

Хлебные крошки ПОЛЕЗНЫ для оптимизации. Слово ГЛАВНАЯ страница ЗАМЕНИТЕ названием блога.
Чтобы в навигации страниц не отображался заголовок поста, ПОМЕНЯЙТЕ в строке

showCurrent = 1; // 1 - показывать название текущей статьи/страницы, 
0 - не показывать

цифру 1 на 0.

Я у себя оставила 1, поэтому название поста как бы дублируется, вы можете сами посмотреть в сервисе MegaIndex.ru.

Если в названии статьи вы используете ключевые слова (очень рекомендуется), заголовок поста в хлебных крошках продублируется. Релевантность поста запросам повышается.

Не забудьте СОХРАНИТЬ изменения в коде и functions.php.

Куда вставить код

ДОБАВЬТЕ код после фразы <div id="content"> во все файлы, где требуется улучшить навигацию:

(page.php) ШАБЛОН СТРАНИЦЫ,

(single.php) ОДНА ЗАПИСЬ,

(search.php) РЕЗУЛЬТАТЫ ПОИСКА,

(arhvie.php) АРХИВЫ

Вот этот КОД

<?php if (function_exists('dimox_breadcrumbs')) 
dimox_breadcrumbs(); ?>

как на скриншоте

На каждой странице сохраняйте изменения. После этого крошки станут видны на всех этих страничках.

Хлебные крошки посредством php

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

Создайте на рабочем столе компьютера пустой текстовый файл, назовите его breadcrumbs.php. Вставьте в него этот код

<?php if ( have_posts() )

<div id="breadcrumbs">
  <?php if (is_home()) { ?>  

 <?php } elseif (is_single()) { ?>
     <a href="<?php echo get_option('home'); ?>">Главная</a> &laquo;            
     <?php foreach((get_the_category()) as $cat) { 
     $cat=$cat->cat_ID; 
     echo(get_category_parents($cat, TRUE, ' &laquo; ')); } 
?> Пост "<?php the_title(); ?>"

 <?php } elseif (is_page()) { ?>
     <a href="<?php echo get_option('home'); ?>">Главная</a> &laquo;
 Страница "<?php the_title(); ?>"    

 <?php 
     } elseif (is_category() and get_category($cat)->parent) { ?>
     <a href="<?php echo get_option('home'); ?>">Главная</a> &laquo;            
     Рубрика <?php foreach((get_the_category()) as $cat) { 
                    $cat=$cat->cat_ID; 
     echo(get_category_parents($cat, TRUE, ' &laquo; ')); } ?>

 <?php 
     } elseif (is_category()) { ?>
     <a href="<?php echo get_option('home'); ?>">Главная</a> &laquo;            
     Рубрика "<?php {echo single_cat_title();} ?>"

 <?php } elseif (is_tag()) { ?><a href="<?php echo get_option('home'); 
?>">Главная</a> &laquo; Архив тега     

 <?php } elseif (is_day()) { ?><a href="<?php echo get_option('home'); 
?>">Главная</a> &laquo;  Архив записей

 <?php } elseif (is_month()) { ?><a href="<?php echo get_option('home'); 
?>">Главная</a> &laquo; Архив записей

 <?php } elseif (is_year()) { ?><a href="<?php echo get_option('home'); 
?>">Главная</a> &laquo;  Архив записей

 <?php } elseif (is_author()) { ?>
       <a href="<?php echo get_option('home'); ?>">Главная</a> &laquo; 
Страница автора 

 <?php } elseif (is_search ()) { ?>
       <a href="<?php echo get_option('home'); ?>">Главная</a> &laquo;
 Результаты поиска

 <?php } elseif (is_404()) { ?>
       <a href="<?php echo get_option('home'); ?>">Главная</a> &laquo; 
Ошибка 404 

 <?php } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<h3>Архивы</h3>
    <?php } ?>
</div>

Залейте файл breadcrumbs.php в шаблон вашей темы с помощью ftp клиента filezilla. Подробно о загрузке через ftp клиент написано здесь.

После того как файл отобразится в редакторе вашей темы, откройте файл single.php, найдите в нем строчку

<?php if ( have_posts() )

Это начало цикла вордпресс, перед ним и надо вставить код, который присоединит созданный нами файл breadcrumbs.php к файлам темы.

<?php include (TEMPLATEPATH. '/breadcrumbs.php'); ?>

ЗА ДИЗАЙН крошек отвечает элемент DIV с оформлением id="breadcrumbs".

ВСТАВЬТЕ такие строки в таблицу стилей style.css

/*breadcrumbs - start*/

/* цвет шрифта и его размер, отступы, ширина */ 
#breadcrumbs {
margin:10px 10px 10px 10px;
width:auto;
font-size:12px;
color:#232323;
text-align:left;
overflow:hidden;}

/* цвет ссылок */
#breadcrumbs a, #breadcrumbs a:visited {
color:#232323;
text-decoration:none;
outline:none;} 

/* цвет ссылок при подведении к ним курсора */
#breadcrumbs a:hover, #breadcrumbs a:active {
color:#50988f;
text-decoration:none;
outline:none;}

/*breadcrumbs - end*/

Отредактируйте стили в соответствии со стилями своего блога.

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

/* микроразметка хлебных крошек*/
function dimox_breadcrumbs() {
  /* === ОПЦИИ === */
  $text['home'] = 'Главная'; // текст ссылки "Главная"
  $text['category'] = '%s'; // текст для страницы рубрики
  $text['search'] = 'Результаты поиска по запросу "%s"'; 
// текст для страницы с результатами поиска
  $text['tag'] = 'Записи с тегом "%s"'; // текст для страницы тега
  $text['author'] = 'Статьи автора %s'; // текст для страницы автора
  $text['404'] = 'Ошибка 404'; // текст для страницы 404
  $text['page'] = 'Страница %s'; // текст 'Страница N'
  $text['cpage'] = 'Страница комментариев %s'; 
// текст 'Страница комментариев N'

  $wrap_before = '<div class="breadcrumbs" itemscope 
itemtype="http://schema.org/BreadcrumbList">'; 
// открывающий тег обертки
  $wrap_after = '</div><!-- .breadcrumbs -->'; 
// закрывающий тег обертки
  $sep = '›'; // разделитель между "крошками"
  $sep_before = '<span class="sep">'; // тег перед разделителем
  $sep_after = '</span>'; // тег после разделителя
  $show_home_link = 1; // 1 - показывать ссылку "Главная", 
0 - не показывать
  $show_on_home = 0; // 1 - показывать "хлебные крошки" 
на главной странице, 0 - не показывать
  $show_current = 0; // 1 - показывать название текущей страницы, 
0 - не показывать
  $before = '<span class="current">'; // тег перед текущей "крошкой"
  $after = '</span>'; // тег после текущей "крошки"
  /* === КОНЕЦ ОПЦИЙ === */

  global $post;
  $home_url = home_url('/');
  $link_before = '<span itemprop="itemListElement" 
itemscope itemtype="http://schema.org/ListItem">';
  $link_after = '</span>';
  $link_attr = ' itemprop="item"';
  $link_in_before = '<span itemprop="name">';
  $link_in_after = '</span>';
  $link = $link_before . '<a href="%1$s"' . $link_attr . '>' 
. $link_in_before . '%2$s' . $link_in_after . '</a>' . $link_after;
  $frontpage_id = get_option('page_on_front');
  $parent_id = ($post) ? $post->post_parent : '';
  $sep = ' ' . $sep_before . $sep . $sep_after . ' ';
  $home_link = $link_before . '<a href="' . $home_url . '"' 
. $link_attr . ' class="home">' . $link_in_before . $text['home'] 
. $link_in_after . '</a>' . $link_after;

  if (is_home() || is_front_page()) {

    if ($show_on_home) echo $wrap_before . $home_link . $wrap_after;

  } else {

    echo $wrap_before;
    if ($show_home_link) echo $home_link;

    if ( is_category() ) {
      $cat = get_category(get_query_var('cat'), false);
      if ($cat->parent != 0) {
        $cats = get_category_parents($cat->parent, TRUE, $sep);
        $cats = preg_replace("#^(.+)$sep$#", "$1", $cats);
        $cats = preg_replace('#<a([^>]+)>([^<]+)<\/a>#', $link_before 
. '<a$1' . $link_attr .'>' . $link_in_before . '$2' . $link_in_after 
.'</a>' . $link_after, $cats);
        if ($show_home_link) echo $sep;
        echo $cats;
      }
      if ( get_query_var('paged') ) {
        $cat = $cat->cat_ID;
        echo $sep . sprintf($link, get_category_link($cat), 
get_cat_name($cat)) . $sep . $before . sprintf($text['page'], 
get_query_var('paged')) . $after;
      } else {
        if ($show_current) echo $sep . $before 
. sprintf($text['category'], single_cat_title('', false)) . $after;
      }

    } elseif ( is_search() ) {
      if (have_posts()) {
        if ($show_home_link && $show_current) echo $sep;
        if ($show_current) echo $before . sprintf($text['search'], 
get_search_query()) . $after;
      } else {
        if ($show_home_link) echo $sep;
        echo $before . sprintf($text['search'], get_search_query()) 
. $after;
      }

    } elseif ( is_day() ) {
      if ($show_home_link) echo $sep;
      echo sprintf($link, get_year_link(get_the_time('Y')), 
get_the_time('Y')) . $sep;
      echo sprintf($link, get_month_link(get_the_time('Y'), 
get_the_time('m')), get_the_time('F'));
      if ($show_current) echo $sep . $before . get_the_time('d') 
. $after;

    } elseif ( is_month() ) {
      if ($show_home_link) echo $sep;
      echo sprintf($link, get_year_link(get_the_time('Y')), 
get_the_time('Y'));
      if ($show_current) echo $sep . $before . get_the_time('F') 
. $after;

    } elseif ( is_year() ) {
      if ($show_home_link && $show_current) echo $sep;
      if ($show_current) echo $before . get_the_time('Y') . $after;

    } elseif ( is_single() && !is_attachment() ) {
      if ($show_home_link) echo $sep;
      if ( get_post_type() != 'post' ) {
        $post_type = get_post_type_object(get_post_type());
        $slug = $post_type->rewrite;
        printf($link, $home_url . $slug['slug'] . '/', 
$post_type->labels->singular_name);
        if ($show_current) echo $sep . $before . get_the_title() 
. $after;
      } else {
        $cat = get_the_category(); $cat = $cat[0];
        $cats = get_category_parents($cat, TRUE, $sep);
        if (!$show_current || get_query_var('cpage')) 
$cats = preg_replace("#^(.+)$sep$#", "$1", $cats);
        $cats = preg_replace('#<a([^>]+)>([^<]+)<\/a>#', 
$link_before . '<a$1' . $link_attr .'>' . $link_in_before . '$2' 
. $link_in_after .'</a>' . $link_after, $cats);
        echo $cats;
        if ( get_query_var('cpage') ) {
          echo $sep . sprintf($link, get_permalink(), 
get_the_title()) . $sep . $before . sprintf($text['cpage'],
 get_query_var('cpage')) . $after;
        } else {
          if ($show_current) echo $before . get_the_title() . $after;
        }
      }

    // custom post type } 
elseif ( !is_single() && !is_page() && get_post_type() != 'post' && 
!is_404() ) {
      $post_type = get_post_type_object(get_post_type());
      if ( get_query_var('paged') ) {
        echo $sep . sprintf($link, 
get_post_type_archive_link($post_type->name), $post_type->label) 
. $sep . $before . sprintf($text['page'], get_query_var('paged')) 
. $after;
      } else {
        if ($show_current) echo $sep . $before . $post_type->label 
. $after;
      }

    } elseif ( is_attachment() ) {
      if ($show_home_link) echo $sep;
      $parent = get_post($parent_id);
      $cat = get_the_category($parent->ID); $cat = $cat[0];
      if ($cat) {
        $cats = get_category_parents($cat, TRUE, $sep);
        $cats = preg_replace('#<a([^>]+)>([^<]+)<\/a>#', 
$link_before . '<a$1' . $link_attr .'>' . $link_in_before . '$2' 
. $link_in_after .'</a>' . $link_after, $cats);
        echo $cats;
      }
      printf($link, get_permalink($parent), $parent->post_title);
      if ($show_current) echo $sep . $before . get_the_title() 
. $after;

    } elseif ( is_page() && !$parent_id ) {
      if ($show_current) echo $sep . $before . get_the_title() 
. $after;

    } elseif ( is_page() && $parent_id ) {
      if ($show_home_link) echo $sep;
      if ($parent_id != $frontpage_id) {
        $breadcrumbs = array();
        while ($parent_id) {
          $page = get_page($parent_id);
          if ($parent_id != $frontpage_id) {
            $breadcrumbs[] = sprintf($link, get_permalink($page->ID), 
get_the_title($page->ID));
          }
          $parent_id = $page->post_parent;
        }
        $breadcrumbs = array_reverse($breadcrumbs);
        for ($i = 0; $i < count($breadcrumbs); $i++) {
          echo $breadcrumbs[$i];
          if ($i != count($breadcrumbs)-1) echo $sep;
        }
      }
      if ($show_current) echo $sep . $before . get_the_title() 
. $after;

    } elseif ( is_tag() ) {
      if ( get_query_var('paged') ) {
        $tag_id = get_queried_object_id();
        $tag = get_tag($tag_id);
        echo $sep . sprintf($link, get_tag_link($tag_id), $tag->name) 
. $sep . $before . sprintf($text['page'], get_query_var('paged')) 
. $after;
      } else {
        if ($show_current) echo $sep . $before . sprintf($text['tag'], 
single_tag_title('', false)) . $after;
      }

    } elseif ( is_author() ) {
      global $author;
      $author = get_userdata($author);
      if ( get_query_var('paged') ) {
        if ($show_home_link) echo $sep;
        echo sprintf($link, get_author_posts_url($author->ID),
 $author->display_name) . $sep . $before . sprintf($text['page'],
 get_query_var('paged')) . $after;
      } else {
        if ($show_home_link && $show_current) echo $sep;
        if ($show_current) echo $before . sprintf($text['author'], 
$author->display_name) . $after;
      }

    } elseif ( is_404() ) {
      if ($show_home_link && $show_current) echo $sep;
      if ($show_current) echo $before . $text['404'] . $after;

    } elseif ( has_post_format() && !is_singular() ) {
      if ($show_home_link) echo $sep;
      echo get_post_format_string( get_post_format() );
    }

    echo $wrap_after;   } }

Заключение

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