“Хлебные крошки” для WordPress без использования плагина

3 февраля 2010 г.

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

Когда я решаю какую-либо задачу на WordPress-сайте, то всегда стараюсь обходится без плагинов, где это бывает возможно. Зачастую одна и та же задача может быть решена с меньшим количеством кода и бывает менее ресурсоемкой по сравнению с применением плагинов (кстати, пользуясь случаем, рекомендую еще один мой блог - WPhacks.name, на котором я публикую различные PHP-хаки для WordPress).

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

Особенности функции

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

    Главная » Рубрика » Подрубрика » Название статьи

    Во всех решениях, которые я встречал (за исключением плагинов), такая цепочка выглядела вот так:

    Главная » Подрубрика » Название статьи

    Т.е. одно звено потеряно.

    Аналогично у меня выглядят и “крошки” для страниц. К примеру, для страницы 3-го уровня вложенности цепочка будет такой:

    Главная » Страница 1-го уровня » Страница 2-го уровня » Страница 3-го уровня

  • “Хлебные крошки” выводятся для следующих типов страниц WordPress-сайта:

    • постраничная навигация с главной страницы (вида site.ru/page/2/);
    • архив рубрики;
    • архив тега;
    • архив за день;
    • архив за месяц;
    • архив за год;
    • архив автора;
    • страница;
    • пост;
    • результаты поиска;
    • страница с ошибкой 404.
  • Добавляется порядковый номер страницы, если это 2-я или больше страница архивов.
  • Можно задать любой символ разделителя между ссылками.
  • Можно задать текст для ссылка “Главная”.
  • Используется отдельный CSS-класс для текущей позиции.

Функция “Хлебные крошки” для WordPress

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
function dimox_breadcrumbs() {

  $delimiter = '»'; //разделить между ссылками
  $name = 'Главная'; //текст ссылка "Главная"
  $currentBefore = '<span class="current">';
  $currentAfter = '</span>';

  if ( !is_home() && !is_front_page() || is_paged() ) {

    echo '<div id="crumbs">';

    global $post;
    $home = get_bloginfo('url');
    echo '<a href="' . $home . '">' . $name . '</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 $currentBefore . 'Archive by category &#39;';
      single_cat_title();
      echo '&#39;' . $currentAfter;

    } 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 $currentBefore . get_the_time('d') . $currentAfter;

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

    } elseif ( is_year() ) {
      echo $currentBefore . get_the_time('Y') . $currentAfter;

    } elseif ( is_single() ) {
      $cat = get_the_category(); $cat = $cat[0];
      echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
      echo $currentBefore;
      the_title();
      echo $currentAfter;

    } elseif ( is_page() && !$post->post_parent ) {
      echo $currentBefore;
      the_title();
      echo $currentAfter;

    } 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 . ' ';
      echo $currentBefore;
      the_title();
      echo $currentAfter;

    } elseif ( is_search() ) {
      echo $currentBefore . 'Search results for &#39;' . get_search_query() . '&#39;' . $currentAfter;

    } elseif ( is_tag() ) {
      echo $currentBefore . 'Posts tagged &#39;';
      single_tag_title();
      echo '&#39;' . $currentAfter;

    } elseif ( is_author() ) {
      global $author;
      $userdata = get_userdata($author);
      echo $currentBefore . 'Articles posted by ' . $userdata->display_name . $currentAfter;

    } elseif ( is_404() ) {
      echo $currentBefore . 'Error 404' . $currentAfter;
    }

    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>';

  }
}

Функцию необходимо поместить в файл functions.php вашей WordPress-темы. После этого в то место шаблона, где хотите выводить “хлебные крошки”, добавьте следующий код:

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

Единственное, что теперь останется сделать - оформить их с помощью CSS. Для этого к блоку “хлебных крошек” предусмотрен идентификатор #crumbs, а для текущей “крошки” класс .current.

P.S. Функция работает на WordPress, начиная с версии 2.5 и выше.

P.P.S. Если вы публикуете посты сразу в несколько рубрик, то в цепочке будут отображаться все эти рубрики через запятую. Я посты публикую всегда только в одну рубрику, поэтому не пытался сделать так, чтобы отображалась только одна из рубрик.

Теги: , , автор: Dimox | рубрика WordPress

Комментарии (42): »

  1. Достаточно полезная функция. Взял на заметку. Иногда полезно видеть весь путь к статье, юзабилити повышает как никак :)

  2. Димк, а можно скрин или ссылку на пример? А то я что-то не воспринял на слух что и где будет выводится и как оно вообще выглядит.

  3. Не знал что это называется хлебные крошки=) Фишка такая я думаю мне не нужна, но вот ссылочка на php-хаки для wp вкусная=)))

  4. Спасибо, попробую. Обычно для своих проектов я выводил их через

    1
    wp_tag_cloud

    , а потом css прикручивал. Получается, что практическая разница только в длине ссылочного пути? Что-то еще от этого выигрываем по сравнению со стандартным вариантом?

  5. Я же в статье привел несколько примеров. Погугли по запросу “breadcrumbs examples”.

  6. wp_tag_cloud - это облако тегов, а “хлебные крошки” - это совсем другое.

  7. ссылка на википедию не работает

  8. Аааа… Понял о чем речь, спасибо за ликбез =)

  9. Я так понимаю, для постов с несколькими рубриками эта функция будет работать некорректно? и будет ли работать вообще?

  10. Будет работать, конечно, но выглядеть это будет некрасиво, например:

    Главная » Рубрика 1, Рубрика 2, Рубрика 3 » Название статьи

  11. 2 недели назад ломал голву над тем, как сделать это без плагина, в итоге сдался и поставил плагин)

  12. Я и сам собирался тока плагин качать, а теперь можно и без него обойтись! Пасибо

  13. Интересно, взял пост на заметку. У меня вопрос: стоит ли категории и подкатегории заключать в noindex? Не будут ли эти страницы считаться дублированным контентом?

  14. Я на своем блоге тоже написал подобную статью. Делал перевод одного зарубежного ресурса. Там для хлебных крошек используется такой код:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    function breadcrumbs() {
    $theFullUrl = $_SERVER["REQUEST_URI"];
    $urlArray=explode("/",$theFullUrl);
    echo ‘You Are Here: <a href="/">Home</a>’;
    while (list($j,$text) = each($urlArray)) {
    $dir=";
    if ($j > 1) {
    $i=1;
    while ($i < $j) {
    $dir .= ‘/’ . $urlArray[$i];
    $text = $urlArray[$i];
    $i++;
    }
    if($j < count($urlArray)-1) echo ‘ » <a href="’.$dir.‘">’.
    str_replace("-", " ", $text) . ‘</a>’;
    }
    }
    echo wp_title();
    }
    breadcrumbs();
    ?>

    Однако у меня не вышло. Буду пробовать Ваш метод ))

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

  16. 17
    Анна Светикова @ Израиль

    Обидно, что подходит только для WordPress версии 2.5 и выше. Меня и старая версия устраивала, но от хлебных крошек я бы не отказалась. Наверное, придется устанавливать новую версию, но я к своей старушке уже так привыкла…

    @
  17. Спасибо. Очень интересная информация

  18. Да, так однозначно криво выводится, а поэтому либо вообще их не использовать что не совсем правильное решение, либо использовать только одну рубрику для сообщения.

    Но вот что! Мб можно подкоректировать функцию и для постов, которые находятся в нескольких рубриках выводить только одну рубрику?

    @
  19. Полезно, но

    Отображается полная цепочка ссылок до текущей страницы.

    на самом деле отображается не цепочка ссылок( как я добрался до статьи), а ссылки на “развернутые” рубрики где находиться статья, ИМХО это не одно и тоже

  20. Супер! Очень полезная и необходимая вещь.

  21. А если представить что я до статьи добирался “через тернии”? Нужно ли вообще видеть всю цепочку ссылок? Правильным считаю отображать

    ссылки на “развернутые” рубрики где находиться статья

    @
  22. Спасибо большое за этот пост. Давным давно искал способ реализовать описанную функцию, но не мог сформулировать ее четко, поэтому ничего путнего не находил. Временами забывал о ней, потом снова вспоминал и опять ничего не находил. А тут вот в ридере как чудесный подарок ваша статейка. Ок. Будем устанавливать. Благодарствую.

  23. Пожалуйста =) Рад, что пригодилось.

  24. Сколько запросов к БД делает плагин?

    @
  25. 27
    Ильшат

    сорри за оффтоп: я думаю, почему ты не пишешь ничего, а у тебя оказывается RSS нерабочий через фидбёрнер http://feeds.feedburner.com/SupraBlog.

  26. Полезная вещь действительно очень. Может быть в виде плагина оформите?

    @
  27. 31
    Вильдан

    Смысл в том, что делать ничего не надо будет) Просто установил плагин и все. А в коде я не разбираюсь, поэтому сделать не смогу. А плагин установить - легко.

  28. Чтобы не таскать код из шаблона в шаблон, это не трудно. Но иногда надоедает. Да и у новичков с правкой function.php может быть затруднительно.

    @
  29. 33
    Ольга

    Анна Светикова, таже самая ситуация. Эхъ, придется идти в ногу со временем, что поделать.
    Спасибо за полезную функцию. Буду обновлять версию.

  30. 34
    Артемий

    Я подобным не пользуюсь, для меня WP - это способ выражать мысли.

  31. Если я что либо меняю в functions.php, я должен заново активировать тему, чтоб изменения увидеть или она автоматом “примутся” (как если изменять index.php).
    к примеру: убираю регистрацию 3х сайдбаров, обновляю страницу их все равно 4,
    и добавленные функции тоже не работают.

    Прощу прощения если оффтоп, только начал разбираться с WP, но тут Вы тоже вносите изменения в functions.php

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

  33. Изменения вступают автоматически, заново активировать не надо.

  34. Очень нравятся именно Ваши “хлебные крошки” .
    Попыталась поставить на свой блог - что-то не получилось.
    Скажите, пожалуйста, для “чайников”:

    Функцию в файл functions.php вашей WordPress-темы

    - это понятно.

    После этого в то место шаблона, где хотите выводить “хлебные крошки”, добавьте следующий код:

    Хочется, чтобы крошки отображались под заголовком поста - попыталась добавить в PAGE.php, но в какую его часть? - я “повозила” этот код по всему файлу )))), но результатов не добилась. Что не так?

    Единственное, что теперь останется сделать - оформить их с помощью CSS. Для этого к блоку “хлебных крошек” предусмотрен идентификатор #crumbs, а для текущей “крошки” класс .current.

    поставила в конец CSS (правильно?)
    /* хлебные крошки */
    #crumbs
    .current {font-size:12px;
    }
    Заранее спасибо :-)

    @
  35. полезная вещь Dimox …спасибо!

  36. Хочется, чтобы крошки отображались под заголовком поста - попыталась добавить в PAGE.php, но в какую его часть? - я “повозила” этот код по всему файлу )))), но результатов не добилась. Что не так?

    Шаблоны постов находится в файлах archive.php, home.php, index.php, search.php и single.php (если такие есть в папке с темой), вот туда и нужно вставлять код.

    поставила в конец CSS (правильно?)

    Правильно.

  37. Полезная штука.. поставил себе на новенький блог :) но как сделать чтобы на главной выводился URL главной с тайтлом?

    @
  38. Дабавил в закладки
    ПО мере наполнения блога думаю понадобятся эти “хлебные крошки”
    А вы применяете это в своем блоге?

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге dimox.name:

  1. Первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.

Подписаться, не комментируя

Предыдущие из рубрики