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

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

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

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

О том, что хлебные крошки wordpress еще отличная вариация внутренней перелинковки, я писала в этой статье. Они помогают:

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

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

Их установка значительно улучшает поведенческие факторы.

Традиционно для создания хлебных крошек на сайте wordpress используется плагин Breadcrumb Nav XT. Закачать его на блог можно по инструкции, которая находится на этой странице. Затем требуется его настройка и ручная вставка кодов в файлы редактора, поэтому лучше вставить хлебные крошки на нужные страницы без плагина.

К тому же я не люблю плагины, слишком уж они нагружают блог.

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

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

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

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

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

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

$showOnHome = 0; // 1 - показывать "хлебные крошки" на главной странице, 0 - не показывать
$delimiter = '&raquo;'; // разделить между "крошками"
$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()

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


Хлебные крошки могут быть ПОЛЕЗНЫ для Seo оптимизации. Для этого слово ГЛАВНАЯ страница ЗАМЕНИТЕ названием блога.

Чтобы в навигации страниц не отображался заголовок поста, ПОМЕНЯЙТЕ в строке

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".

ВСТАВЬТЕ такие строки в файл 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;   } }

Метки:

Создать сайт на WordPress

ПОХОЖИЕ СТАТЬИ:

ДРУЗЬЯ, СПАСИБО, ЧТО ПОДЕЛИЛИСЬ СТАТЬЕЙ:

10 отзывов к “Хлебные крошки на сайте wordpress без плагина

  • Ольга:

    Навигация по сайту — как еще можно ее улучшить?
    Напишите свое мнение в комментариях.

  • Алекс:

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

    • Ольга:

      Алекс, я насчитала у себя 17 активных плагинов. Это при том, что стараюсь всегда заменять плагины внесением дополнительного кода в шаблон. А сколько же плагинов у тех, кто этого не делает! И как отрицательно это влияет на скорость блогов.

  • Максим:

    Спасибо за совет, обязательно попробую у себя. И с CSS по шаманю!

  • Александр:

    А можно сделать хлебные крошки, чтобы они были завязаны на меню, а не на страницах и рубриках. Просто у меня в меню так
    Страница:
    Страница:
    Рубрика
    Рубрика
    Рубрика
    А в рубриках сами записи.
    Пробую установить код, а он мне выдает:
    Главная / запись.
    Без промежуточных.

    • Ольга:

      Нужно вносить изменения в код. Как, к сожалению, не знаю.

  • Ира:

    Здраствуйте, подскажите пожалуйста нужно ли ставить ссылку на главную страницу в конце статьи для продвижения, если в плагине хлебные крошки уже есть ссылка на главную страницу в статье?

    • Ольга:

      Я считаю, не надо. У Вас название блога — ссылка на главную, в хлебных крошках — ссылка на главную. Зачем еще-то?

  • Николай:

    Здравствуйте. Если поставить этот код крошек, будет ли дубль H1 или будет отображаться title страницы?

    • Ольга:

      Дубля H1 точно не будет. Посмотрите код крошек, там ведь нет этого тега.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *