Хлебные крошки? Покушаем?

CMS Wordpress
Всем привет, дорогие друзья, сегодня я хотел бы с вами поговорим об еще одной фишке грамотной перелинковки. Эта фишка называется хлебные крошки. Многие из вас наверняка видели уже такие штуки, многие реализовали такую штуку, кто плагином, кто кодом, не важно. Но для начала, лирическое отступление, пройдемся по новостям.

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

В прошлый раз в блиц конкурсе победила Юлия, она уносит 100 рублей, Юлия, мне нужен ваш кошелек Вебмани или Яндекс.Деньги. А также я бы очень хотел слышать победительницу конкурса на лучший фон для твиттера – тоже Юлия, – так от вас не дождался вашего кошелька, чтобы вы получили ваш приз! Ну а мы возвращаемся к нашим баранам, а точнее к хлебным крошкам!

Что такое хлебные крошки?

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

Главная | Категория | Название статьи

У меня в блоге, к сожалению, я еще не реализовал подобное. Хотя, я думаю, подобные вещи для блога не нужны. Но пример я вам добыл:

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

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

Вот например:

Главная >> Бытовая техника >> Телевизоры >> Жидко-кристаллические >> Samsung >> Телевизор Samsung UE22F5000AK

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

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

Потому что краем глаза не могу найти основное меню (это конечно маразм, но и такие блоги тоже бывают).

Читайте также:  Структура шаблона WordPress

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

Банально – плагином! Плагины для хлебных крошек есть разные. Самый распространенный – Breadcrumb NavXT – я уверен, он стоит у большинства из вас!

Напишите в каментах, у кого какой плагин стоит для этих целей, давайте обсудим!

Чтобы он у вас заработал, нужно всего лишь пару кликов:

1. Скачать плагин.

2. Установить его на блоге.

3. По идее крошки уже должны появится у вас автоматически. Но увы, у меня они не появились, когда надо, поэтому мне пришлось искать какие-то другие решения.

И о чудо! Решение нашлось!

Теперь для вывода хлебных крошек я не использую плагины вообще!

Я использую код. И вот как это делается.

Открываем файл functions.php и прописываем в него следующее:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
/* Хлебные крошки для WordPress (breadcrumbs) 
 * $sep - Pазделитель. 
 * $term - Eсли заранее определен массив терминов то передаем его. get_the_terms( $post->ID, array('category','new_tax') ); По умолчанию, первый попавшийся термин для отдельных записей и если это страница термина. 
 * $taxonomies - Таксономии, хлебные крошки для которых нужно показать (указываем только древовидные таксономии (как категорий)) array('category', 'new_tax'). По умолчанию, все публичные таксономии, включая category. 
*/  
function kama_breadcrumbs( $sep=' » ', $term=false, $taxonomies=false ){  
    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 = '<div xmlns:v="http://rdf.data-vocabulary.org/#">';  
    $w2 = '</div>';  
    $patt1 = '<span typeof="v:Breadcrumb"><a href="http://in4wp.ru/xlebnye-kroshki/" rel="v:url" property="v:title">';  
    $sep .= '</span>'; // закрываем span после разделителя!  
    $patt = $patt1.'%s</a>';  
 
    if( $paged = $wp_query->query_vars['paged'] ){  
        $pg_patt = $patt1;  
        $pg_end = '</a>'. $sep . sprintf($l['paged'], $paged);  
    }  
 
    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() ){  
        $s = preg_replace('@<script@i', '<script>alert("запрос не верный!"); </script>', $GLOBALS['s']);  
        $out = sprintf($l['search'], $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(!$term){  
            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 isn`t 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, '/?post_type='. $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( !empty($post->post_type) && $post->post_type!='post' && !is_page() && !is_attachment() && !$home_after )  
        $home_after = sprintf($patt, '/?post_type='. $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);  
}

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

Насколько я понял – в комменариях этого кода написано “Начало поста”. Поэтому перед этим кодом я вставил следующий код:

1
<?php kama_breadcrumbs(); ?>

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

1
2
3
4
5
.bread {
font-size:14px;
position:absolute;
top:155px;
}

Пользуясь случаем, хочу объявить о том, что у меня есть БЕСПЛАТНЫЙ курс по созданию блога с нуля — ПОЛУЧИТЬ КУРС. Помогаю новичкам в развитии.

Ну вот в принципе и все. Кому понравилось – тот ставит лайк :).

Может быть кто-то подскажет более лучшее место для расположения хлебных крошек у меня в блоге? Пишите, не стесняйтесь!

Если у вас что-то не получилось при установке – обращайтесь по бесплатной программе. Помогу за даром, я сегодня добрый! И не забываем подписываться на [urlspan]обновления блога[/urlspan].

Встретимся в будущих статьях!
Всегда ваш, Денис Тумилович!

Оцените статью
Добавить комментарий для Олег Отменить ответ

  1. Артём

    Очень интересная статья!Удачи вам в продвижении)

    Ответить
  2. Александр

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

    Ответить
  3. Сергей Оксак

    Интересный способ, для пользователей мне кажется довольно удобный. Мне на сайте он очень нужен, попробую оба варианта — сначала с плагином, а потом без (все-таки лучше чтобы плагинов было поменьше…).

    Ответить
  4. Юрий автор

    всегда использую хлебный крошки от wp-kama.ru, считаю их доцельно использовать в сайтах-магазинах и больших проектах как говорится что бы не заблудится, а знаете от чего пошло такое названия?

    Ответить
    1. Олег

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

      Ответить
    2. Сергей Оксак

      Читайте внимательнее, в самом начале статьи об этом было сказано — откуда взялось и почему :)

      Ответить
  5. Олег

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

    Ответить
    1. Сергей Оксак

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

      Ответить
      1. Олег

        Согласен, я просто забыл уточнить. Например, в моем случае блог расположен на платформе Blogger (не сочтите за рекламу). Так там 2-ой уровень вложенности – максимальный. Конечно, на WordPress всё иначе, но речь шла за cms blogspot. В общем, забыл уточнить))

        Ответить
        1. Сергей Оксак

          Ок, принимается :) Я просто с другими вариантами cms не очень дружу, поэтому все и воспринимаю, как для WP

          Ответить
  6. роман

    а в WP этот код выдает ошибку в строке где $term = array_shift( $term );
    получается что у Вас элемент массива и есть массив? Это Ваш код или откуда взяли? Я его уже не в одном месте вижу, но не могу найти первоисточник чтобы понять в чем ошибка и найти правильный рабочий вариант.

    Ответить
    1. Код по-моему с wp-kama — попробуйте там

      Ответить