n-wp.ru — блог о WordPress
Как сделать "хлебные  крошки" | n-wp.ru

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

Есть такое понятие в сайтостроении, как «хлебные крошки».  «Хлебные крошки» (breadcrumbs) — это серия навигационных ссылок, которая указывает, как вы попали на текущую страницу, или же к какому разделу она относится. Кликнув по любой из этих ссылок, вы можете попасть в раздел, который является главным для текущей страницы. То есть это своеобразный след, по которому можно понять, как далеко вглубь структуры сайта вы зашли.

Как сделать

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

Не обязательно использовать плагины для создания «хлебных крошек» — можно их сделать самостоятельно.

Чтобы сделать «хлебные крошки» без плагинов, создайте пустой текстовый файл, и назовите его breadcrumbs.php. Вставьте в него следующий код:

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

Как сделать

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

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

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

В принципе, на этом все. Однако «хлебные крошки» нужно как-то оформить, а то эти ссылки могут не вписаться в общий дизайн. Именно для этого в breadcrumbs.php используется элемент DIV с оформлением id=»breadcrumbs». Откройте файл style.css и добавьте в него несколько строчек:

Это оформление подойдет для светлой темы. Вот теперь «хлебные крошки» стали выглядеть хорошо. Пользуйтесь!

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

18 комментариев

  • Прописываю в файле строчку как у меня на странице поста тат же выводится пустая страница. Что за «TEMPLATEPATH@? может вместо нее нужно что-то прописывать?

  • Подскажите, а какая php функция выводит вспомогательные страницы? Т.е. те страницы, на которые переходим при клике на 1, 2, 3 в квадратиках? А то я поставил плагин для Вордпресс и везде настроить хлебные крошки удалось, кроме этих страниц. Если просто вставляю код вызова хлебных крошек в шаблон, там где осуществляется вывод страниц начиная со 2-й, то в итоге получаю надпись «Главная», а вот «страница 2» — нет. Пробовал прописать ссылку на главную, но за ней нужен какой-то пхп код с функцией. А какой именно функцией выводятся эти страницы — никак не удается «догнать»

    • У вас ссылка отображается правильно (/page2), а вот ее заголовок — неправильно (Главная, а должно быть Главная — страница2). Так?

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

  • Работать-то оно работает… но я правильно понимаю, что код страдает «врождённым» дефектом: у всех страниц родительской является Главная?

    • А разве это не так? Разве главная страница блога не является для всех внутренних страниц действительно главной? С какой страницы вы попадаете на все остальные? Какая страница отображается при загрузке блога? Главная.

  • Как считаете правильно ли добавить в Архив эту функцию, и чтобы над каждой запись была хлебная крошка?

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

  • Можно попробовать сделать хлебные крошки, учитывающие суб-категории, так.

    functions.php:

    шаблон:

    Ну и css оформить.

  • Спасибо, получилось. Только со стилями заморочка, я в скриптах понимаю чуть-чуть еще, не пойму что в css вписывать.

    • Нужно в файле style.css создать описание стилей элементов, используемых в коде. Например
      [cc lang=»css»]
      #crumbs {font-size:14px;}
      .current {font-weight:600;}

  • В хлебных крошках отображается только главная и текущая страница а путь к ним не отображается(на страницах сайта) в записях же отображается

/* ]]> */