кнопка наверх

Хлебные крошки на WordPress с плагином и без

Хлебные крошки на WordPress Всем привет!

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

Значение и пример хлебных крошек

Для того чтоб вы имели представление о том, как выглядят хлебные крошки на сайте, приведу пример со своего блога:

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

Хлебные крошки выделены оранжевой рамочкой. Их также называют навигационной цепочкой.

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

Так, посетитель может легко понять, в каком разделе находится статья, которую он просматривает. Общая структура навигации «Хлебные крошки» следующая: Главная страница -> Раздел -> Название статьи. Она может быть усложнена, если, к примеру, в разделе появится подраздел, тогда структура будет такой: Главная страница –> Раздел –> Подраздел –> Название статьи.

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

Хлебные крошки: как сделать на своем блоге?

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

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

Вот образец кода, который нужно вставить в файл functions.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function my_breadcrumb() {
echo '<div class="breadcrumb"><a href="/"><span>Pro-wordpress</span></a>&nbsp;»&nbsp;</div>
<div class="breadcrumb">';
$categories = get_the_category();
if($categories[0]){
  echo '<a href="' . get_category_link($categories[0]->term_id ) . '">
  <span>'. $categories[0]->name . '</span></a>&nbsp;»&nbsp;';
}
echo '</div>
   <div class="breadcrumb">
    <span>';
      echo the_title(); 
echo '</span></div>';
}

Русские названия в коде можно заменить на свои. Например, вместо «Главная» подставить название сайта.

Далее для вывода хлебных крошек на странице добавьте следующий код в single.php или header.php в зависимости от вашего шаблона и места, где вы хотите распложить этот функционал:

1
2
3
4
5
<div class="breadcrumbs">
<?php
 my_breadcrumb();
?>
</div>

После этого на вашем сайте должна появиться навигационная цепочка. Однако чтоб получились красивые хлебные крошки, понадобиться внести изменения в файл стилей. Например, чтобы получилось, как на моем блоге, нужно вставить в styles.css такой код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.breadcrumbs{
margin: -5px 0 5px 3px; /* отступы */
overflow: hidden;
}
.breadcrumbs a {
color: #34a6d2; /* цвет ссылок - голубой */
text-decoration: underline;
}
.breadcrumb > span {
color: #000; /* цвет конечного пункта - черный */
}
.breadcrumb{
  float:left;
}

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

Хлебные крошки на WordPress: плагин

Наиболее распространенные плагины для вывода хлебных крошек: Yoast WordPress Seo, BreadCrumb NavXT. Плагин WordPress SEO by Yoast является многофункциональным и хлебные крошки в его арсенале – лишь малая часть. Поэтому, если данный плагин у вас уже установлен, то вы можете использовать и эту его функцию.

BreadCrumb XT же является отдельным плагином исключительно для хлебных крошек. Читайте о том, как правильно установить плагин.

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

1
2
3
4
5
6
7
8
<div class="breadcrumb">
<?php
if(function_exists('bcn_display'))
{
	bcn_display();
}
?>
</div>

Внести изменения в стили можно по аналогии с тем, как это было описано выше.

Микроразметка хлебных крошек

Мы уже говорили о том, насколько важна микроразметка сайта. Хлебные крошки в сниппете моего блога выглядят так:

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

Такой вид более понятен и приятен для пользователя, нежели просто url страницы.

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function my_breadcrumb() {
echo '<div xmlns:v="http://rdf.data-vocabulary.org/#">
<div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="/" itemprop="url">
    <span itemprop="title">Pro-wordpress</span></a>&nbsp;»&nbsp;</div>
<div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">';
 
$categories = get_the_category();
if($categories[0]){
  echo '<a href="' . get_category_link($categories[0]->term_id ) . '" itemprop="url">
  <span itemprop="title">'. $categories[0]->name . '</span></a>&nbsp;»&nbsp;';
}
echo '</div>
   <div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <span itemprop="title">';
      echo the_title(); 
echo '</span></div>
</div>';
}

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

Данный код позволяет поисковым системам определить, что это элемент «Хлебные крошки».
Каждый отдельный элемент цепочки обернут в div, содержащий код: itemscope itemtype="http://data-vocabulary.org/Breadcrumb".

itemprop="url" – определяет значение url, его нужно добавить в каждый тег a

itemprop="title – определяет значение заголовка элемента цепочки

Весь код оборачивается в div с параметром xmlns:v="http://rdf.data-vocabulary.org/#">, чтобы подключить словарь schema.org.

После добавления кода снова проверьте, распознали ли хлебные крошки Яндекс и Гугл.

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

Напоследок предлагаю посмотреть видео о внутренней перелинковке.


1 звезда2 звезды3 звезды4 звезды5 звезд (6 оценок, среднее: 3,67 из 5)
Загрузка...
like
Понравилось?
Подпишитесь на блог и получайте новые статьи!
Добавляйтесь в соц. сетях:
  1. Алена:

    Кто-нибудь знает, почему все теги микроразметки помечаются валидатором WC3 как ошибки? не знаю, что выбрать: микроразметку или код без ошибок.

    Ответить
    • Анна:

      Алена, я тоже уже сталкивалась с этой проблемой, но ответа не нашла. Микроразметка — довольно новое понятие и, возможно, валидатор еще не знает о ней:)

      Ответить
  2. Валентина:

    У меня почему то упорно не отображаются хлебные крошки на сайте...ни плагином, ни php-кодом. Прям черная магия какая то 🙁

    Ответить
  3. chrome-web:

    товарищ, у вас ошибочка в тексте

    Ответить
    • Анна:

      Спасибо, товарищ, исправила. Кстати, у меня на блоге работает система Орфус, нажатием ctrl+enter можно отправлять найденные ошибки.

      Ответить
  4. Рита:

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

    Главная — Страница — Подстраница (на ней размещены списком превью записей определенной категории) — Запись.

    Ответить
    • Саша:

      Кстати, мне бы такое тоже пригодилось.

      Ответить
  5. Den:

    У меня проблема в следующем. Каталог сайтов.

    Главная-вторая страница-рубрика-подрубрика

    Не отображается вторая страница. Как решить эту проблему? Заранее спасибо.

    Ответить
  6. антон:

    function kama_breadcrumbs( $sep=' » ' ){ global $post, $wp_query, $wp_post_types; // для локализации $l = array( 'home' => 'Техник' ,'paged' => 'Страница %s' ,'404' => 'Ошибка 404' ,'search' => 'Результаты поиска по запросу - <b>%s</b>' ,'author' => 'Архив автора: <b>%s</b>' ,'year' => 'Архив за <b>%s</b> год' ,'month' => 'Архив за: <b>%s</b>' ,'day' => '' ,'attachment' => 'Медиа: %s' ,'tag' => 'Записи по метке: <b>%s</b>' ,'tax_tag' => '%s из "%s" по тегу: <b>%s</b>'); $w1 = ''; $w2 = ''; $patt1 = '<a href="%s" rel="nofollow">'; $sep .= ''; // закрываем span после разделителя! $patt = $patt1.'%s</a>'; if( $paged = $wp_query->query_vars['paged'] ){ $pg_patt = $patt1; $pg_end = '</a>'. $sep . sprintf($l['paged'], $paged);} $out = ''; if( is_front_page() ) return print $w1.($paged?sprintf($pg_patt, get_bloginfo('url')):'') . $l['home'] . $pg_end .$w2; elseif( is_404() ) $out = $l['404']; elseif( is_search() ){ $out = sprintf( $l['search'], strip_tags($GLOBALS['s']) );} elseif( is_author() ){ $q_obj = &$wp_query->queried_object; $out = ($paged?sprintf( $pg_patt, get_author_posts_url($q_obj->ID, $q_obj->user_nicename) ):'') . sprintf($l['author'], $q_obj->display_name) . $pg_end;} elseif( is_year() || is_month() || is_day() ){ $y_url = get_year_link( $year=get_the_time('Y') ); $m_url = get_month_link( $year, get_the_time('m') ); $y_link = sprintf($patt, $y_url, $year); $m_link = sprintf($patt, $m_url, get_the_time('F')); if( is_year() ) $out = ($paged?sprintf($pg_patt, $y_url):'') . sprintf($l['year'], $year) . $pg_end; elseif( is_month() ) $out = $y_link . $sep . ($paged?sprintf($pg_patt, $m_url):'') . sprintf($l['month'], get_the_time('F')) . $pg_end; elseif( is_day() ) $out = $y_link . $sep . $m_link . $sep . get_the_time('l');} // Страницы и древовидные типы записей elseif( $wp_post_types[$post->post_type]->hierarchical ){ $parent = $post->post_parent; $crumbs=array(); while($parent){ $page = &get_post($parent); $crumbs[] = sprintf($patt, get_permalink($page->ID), $page->post_title); $parent = $page->post_parent; } $crumbs = array_reverse($crumbs); foreach ($crumbs as $crumb) $out .= $crumb.$sep; $out = $out . $post->post_title;} else // Таксономии, вложения и не древовидные типы записей { // Определяем термины if( is_singular() ){ if( ! $taxonomies ){ $taxonomies = get_taxonomies( array('hierarchical' => true, 'public' => true) ); if( count( $taxonomies ) == 1 ) $taxonomies = 'category'; } if( $term = get_the_terms( $post->post_parent ? $post->post_parent : $post->ID, $taxonomies ) ){ $term = array_shift( $term );}} else $term = &$wp_query->get_queried_object(); if( ! $term && ! is_attachment() ) return print "Error: Taxonomy is not defined!"; $pg_term_start = ($paged && $term->term_id) ? sprintf( $pg_patt, get_term_link( (int)$term->term_id, $term->taxonomy ) ) : ''; if( is_attachment() ){ if(!$post->post_parent) $out = sprintf($l['attachment'], $post->post_title); else $out = crumbs_tax($term->term_id, $term->taxonomy, $sep, $patt) . sprintf($patt, get_permalink($post->post_parent), get_the_title($post->post_parent) ).$sep.$post->post_title; } elseif( is_single() ) $out = crumbs_tax($term->parent, $term->taxonomy, $sep, $patt) . sprintf($patt, get_term_link( (int)$term->term_id, $term->taxonomy ), $term->name). $sep.$post->post_title; // Метки, архивная страница типа записи, произвольные одноуровневые таксономии elseif( ! is_taxonomy_hierarchical( $term->taxonomy ) ){ // метка if( is_tag() ) $out = $pg_term_start . sprintf($l['tag'], $term->name) . $pg_end; // архивная страница произвольного типа записи elseif( !$term->term_id ) $home_after = sprintf($patt, '/'. $term->name, $term->label). $pg_end; // таксономия else { $post_label = $wp_post_types[$post->post_type]->labels->name; $tax_label = $GLOBALS['wp_taxonomies'][$term->taxonomy]->labels->name; $out = $pg_term_start . sprintf($l['tax_tag'], $post_label, $tax_label, $term->name) . $pg_end;}} // Рубрики и таксономии else $out = crumbs_tax($term->parent, $term->taxonomy, $sep, $patt) . $pg_term_start . $term->name . $pg_end;} // замена ссылки на архивную страницу для типа записи if( $post->post_type == 'book' ) $home_after = sprintf($patt, '/about_book', 'Книжки'). $sep; // ссылка на архивную страницу произвольно типа поста if( ! $home_after && ! empty($post->post_type) && $post->post_type != 'post' && !is_page() && !is_attachment() ) $home_after = sprintf($patt, '/'. $post->post_type, $wp_post_types[$post->post_type]->labels->name ). $sep; $home = sprintf($patt, get_bloginfo('url'), $l['home'] ). $sep . $home_after; return print $w1. $home . $out .$w2;} function crumbs_tax($term_id, $tax, $sep, $patt){ $termlink = array(); while( (int)$term_id ){ $term2 = &get_term( $term_id, $tax ); $termlink[] = sprintf($patt, get_term_link( (int)$term2->term_id, $term2->taxonomy ), $term2->name). $sep; $term_id = (int)$term2->parent; } $termlinks = array_reverse($termlink); return implode('', $termlinks);}

    Ответить
  7. Инфо Стройка:

    Подскажите как из функции хлебных крошек убрать подкатегорию (Название статьи)? Так же как у вас

    Ответить
    • Анна:

      Я пользуюсь плагином «WP no category base»

      Ответить
Ваш комментарий: