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

Хлебные крошки в WordPress

В WordPress хлебные крошки важны так же как и на любом другом сайте. Особенно это касается блогов с множеством рубрик и подрубрик, а так же новостных порталов. CMS в отличии от голого html позволяет динамически добавлять хлебные крошки в нужном месте. Для реализации данной функции существует множество плагинов, но так же их можно реализовать без использования плагинов. Ниже приводится оба примера и какой выбрать вам, надо решать из особенностей темы и поставленных задач.

Плагины хлебных крошек для WordPress

Если ваш сайт на WordPress, то существуют множество плагинов для хлебных крошек, например:

  • Breadcrumb NavXT
  • Yoast WordPress SEO
  • Breadcrumb Trail
  • Yummi «хлебные крошки»
  • Really Simple Breadcrumb
  • DP RDFa Breadcrumb Generator

Код хлебных крошек для WordPress без плагина

Так же данную функцию можно реализовать без плагина. Это самый простой вариант, который будет работать. Он без микроразметки. Микроразметку вы должны настроить сами по нуждам. Так же мы можем помочь вам с реализацией данной функции за дополнительную плату.

В файл  functions.php вставляете следующий код:

Второй код и размещаем его в то место, где нужно вывести сами хлебные крошки:

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

Это — навигационная цепочка (навигационное меню, «хлебные крошки», англ. Breadcrumbs) — элемент навигации по веб-сайту, представляющий собой путь по сайту от его «корня» до текущей страницы, на которой находится пользователь (Википедия). А вот Артем Лебедев называет так: дублирующая навигация — строка со ссылками, соответствующими иерархии структуры сайта. Такую строчку вы можете наблюдать у на большинстве веб-сайтов над заголовком статьи. Примерно, вот так:

Хлебные крошки на сайте ВордПресс

Кто то считает, что хлебные крошки не обязательно устанавливать на сайт, а кто то наоборот.

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

На известных блогах Breadcrumbs присутствует, значит и нам не противопоказано. Приступим.

«Хлебные крошки» с помощью функции плагина Yoast WordPress SEO

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

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

Yoast SEO предлагает функцию для получения навигационных ссылок на вашем сайте. Параметры хлебных крошек изначально не отображаются в Yoast для этого вам надо зайти в админпанели раздел SEO — «Отображение в поисковой выдаче » — вкладка «Хлебные крошки». После этого нужно включить хлебные крошки и настроить их:

Настройки Хлебных крошек в Yoast SEO

Установите разделитель между пунктами, какой вы захотите. Напишите текст ссылки на главную страницу, можно написать название вашего блога или просто «Главная». Далее, в «хлебных крошках» установить таксономию для рубрики. Нажмите «Сохранить изменения». Не забудьте добавить код в нужное место вашего шаблона (темы).

Как добавить «хлебные крошки» (Breadcrumbs) в вашу тему

Хлебные крошки не появятся, пока вы не вставите небольшой код на свой сайт. Начните с копирования следующего кода:

<?php if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '

‘,» );
}
?>

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

В примере возьмём тему Twenty Eleven. Идем: Внешний вид — Редактор тем. Открываем файл single.php (одна запись) и вставляем код:

Вставка кода в шаблон WP

Сохраняем файл и смотрим, что у нас получилось в итоге:

Хлебные крошки от Yoast SEO

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

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

Вот, как то, так получится:

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

Идём, далее. Если вы используете другой SEO плагин, не Yoast SEO, то добавить в ВорДпресс хлебные крошки можно с помощью специальных плагинов.

Преимущества «Хлебных крошек»

Пользователи с удовольствием их используют и считают удобными. Крошки помогают пользователям не теряться. Благодаря им мы с легкостью можем найти выход. Нет необходимости нажимать клавишу «Назад».
Помогают Гуглу (Google) понять структуру Вашего сайта. Кроме того, Гугл может использовать их для отображения в поисковой системе

Именно поэтому очень важно правильно подбирать слова для «Хлебных крошек». Снижают отказы

Это происходит за счет возможности нового способа просмотра вашего сайта. Людям проще искать необходимую информацию. Благодаря «Хлебным крошкам» мы можем найти короткий путь к другим разделам сайта. Если люди не найдут нужной информации на вашей странице, то они отправятся вводить запрос для поиска. Разве это Вам надо?
Помогают улучшать внутреннюю связь и структуру сайта. Они также указывают некоторые ключевые слова на разных веб-страницах и помогают поисковым системам видеть, как одна страница связана с другой. Использование иерархии улучшает СЕО страниц Вашего сайта. В любом случае «Хлебные крошки» красиво выглядят, привлекательны для пользователя и имеют множество преимуществ. Не забываем о главном. Целью любых действий является увеличение трафика. На эту тему есть прекрасное коротенькое видео, проясняющее особенности написания названий.

Как сделать микроразметку ХБ?

Существует три основных формата разметки:

  • микроданные;
  • RDFA;
  • JSON-LD.

Широкое распространение получили первые два типа микроразметки. Рассмотрим, как их применить на практике.

Разметка с микроданными

При разметке с микроданными можно использовать словарь schema.org или Data Vocabulary. Рассмотрим пример с использованием более современного schema.org.

Возьмем такую «хлебную» цепочку:

Главная – Смартфоны Samsung – Samsung Galaxy M20

Вот как выглядит код хлебных крошек (breadcrumbs) на сайте examplеcrosh.com

  1.         Главная
       
       
  2.         Смартфоны Samsung
       
       
  3.         Samsung Galaxy M20
       

1
2
3
4
5
6
7
8
9
10
11

ol id=»breadcrumbs»>
   li>

       ahref=»https://examplеcrosh.com/»>Главнаяa>

   li>

   li>

       ahref=»https://examplеcrosh.com/samsung»>СмартфоныSamsunga>

   li>

   li>

       ahref=»https://examplеcrosh.com/samsung/m20″>Samsung Galaxy M20a>

   li>

ol>

А дальше уже хлебные крошки с микроразметкой.

  
  
      
          Смартфоны Samsung
         
      
  
  
      
          Samsung Galaxy M20
         
      
  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

div itemscope=»»itemtype=»http://schema.org/BreadcrumbList»id=»breadcrumbs»>
  span itemscope=»»itemprop=»itemListElement»itemtype=»http://schema.org/ListItem»>

      arel=»nofollow»itemprop=»item»title=»Главная»href=»//examplеcrosh.com»>

         span itemprop=»name»>Главнаяspan>

         meta itemprop=»position»content=»1″>

      a>

  span>

  span itemscope=»»itemprop=»itemListElement»itemtype=»http://schema.org/ListItem»>

      aitemprop=»item»title=» Смартфоны Samsung»href=»//examplеcrosh.com/samsung»>

         span itemprop=»name»>СмартфоныSamsungspan>

         meta itemprop=»position»content=»2″>

      a>

  span>

  span itemscope=»»itemprop=»itemListElement»itemtype=»http://schema.org/ListItem»>

      aitemprop=»item»title=»Samsung Galaxy M20″href=»//examplеcrosh.com/samsung/m20″>

         span itemprop=»name»>Samsung Galaxy M20span>

         meta itemprop=»position»content=»3″>

      a>

  span>

div>

В первой строчке указываем поисковикам, что у нас разметка schema.org. Здесь:

  • Itemscope – указывает на то, что блок задает элемент;
  • Itemtype – тип элемента, здесь навигационный;
  • BreadcrumbList – список пунктов в хлебных крошках.

Параметр itemprop, которому присваивается “itemListElement” означает, что перед нами пункт списка элементов.

Разметка с RDFA

Возьмем цепочку:

Главная – Смартфоны Samsung – Samsung Galaxy M20

Здесь разметка выглядит следующим образом.

Главная

 
Смартфоны Samsung

 
Samsung Galaxy M20

1
2
3
4
5
6
7
8
9
10
11
12
13
14

div xmlnsv=»http://rdf.data-vocabulary.org/#»>
span typeof=»v:Breadcrumb»>
ahref=»http://examplеcrosh.com»rel=»v:url»property=»v:title»>Главная
a>
span>
 span typeof=»v:Breadcrumb»>

ahref=»http://examplеcrosh.com/samsung»rel=»v:url»property=»v:title»>СмартфоныSamsung
a>
span>
 span typeof=»v:Breadcrumb»>

ahref=»http://examplеcrosh.com /samsung/m20″rel=»v:url»property=»v:title»>Samsung Galaxy M20
a>
span>
div>

Здесь оформление еще проще и понятней, чем с микроданными:

  • атрибут xmlns:v=”http://rdf.data-vocabulary.org/# дает понять поисковику, что он имеет дело с разметкой RDF;
  • все пункты крошек заключены в тег span с атрибутом typeof=”v:Breadcrumb”;
  • атрибут rel=”v:url” прописывает ссылку пункта;
  • атрибут property=”v:title” прописывает наименование пункта.

Убирать ли дублирование заголовка в хлебных крошках?

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

По данным сайт xandeadx.ru 70% ТОП-20 сайтов не используют заголовок в хлебных крошках. wpschool.ru считает, это дублирование и советует убирать. Этот факт не подтвержден поисковиками, но все равно убирают заголовок «на всякий случай».

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

Четвёртый пример

#breadcrumbs-four{
 overflow: hidden;
 width: 100%;
 }

#breadcrumbs-four li{
 float: left;
 margin: 0 .5em 0 1em;
 }

#breadcrumbs-four a{
 background: #ddd;
 padding: .7em 1em;
 float: left;
 text-decoration: none;
 color: #444;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 position: relative;
 }

#breadcrumbs-four a:hover{
 background: #efc9ab;
 }

#breadcrumbs-four a::before,
 #breadcrumbs-four a::after{
 content:'';
 position:absolute;
 top: 0;
 bottom: 0;
 width: 1em;
 background: #ddd;
 transform: skew(-10deg);
 }

#breadcrumbs-four a::before{

left: -.5em;
 border-radius: 5px 0 0 5px;
 }

#breadcrumbs-four a:hover::before{
 background: #efc9ab;
 }

#breadcrumbs-four a::after{
 right: -.5em;
 border-radius: 0 5px 5px 0;
 }

#breadcrumbs-four a:hover::after{
 background: #efc9ab;
 }

#breadcrumbs-four .current,
 #breadcrumbs-four .current:hover{
 font-weight: bold;
 background: none;
 }

#breadcrumbs-four .current::after,
 #breadcrumbs-four .current::before{
 content: normal;
 }

Как сделать в YoastSEO

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

Переходим в раздел Отображение в поисковой выдаче и находим Вкладку Хлебные крошки

Отмечу несколько моментов, на которые обращаем внимание

Включаем Yoast

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

После сохранения настроек, на блоге ничего не появиться, потому что система не знает, где показывать крошки в WordPress. С помощью функции указываем где отобразить BC.

Добавим его в шаблон записей, по умолчанию это документ single.php. Хочу добавить сразу после заголовка h1, вот здесь.

Отсутствие надписи

Побродив по single.php тега h1 я не нашел. Пришлось рыть глубже, нашел в папке templates-parts и в ней content-single, определил тег h1 и вставил php, представленный выше.

Прописываем хлебные крошки в WordPress

  1. Открываем Редактор тем
  2. Находим документ WordPress для вставки
  3. Определяем место где нужен расположить
  4. Вставляем строчки
  5. Нажимаем Обновить

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

Проверка работы

Для более презентабельного вида советую добавить CSS. Так же Yoast добавил в редактор записей WordPress свой блок для изменения названия в конце цепочки. Переходим в редактор и идем в меню Дополнительно.

Изменение заголовка последнего элемента

Не забываем обновить, смотрим что получилось.

Последняя ссылка

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

Отображение подрубрик

Другой вариант крошек

Условно, этот код подойдет не только к WordPress, а вообще к любому движку. Для WordPress он подойдет:

  • во-первых, если включены ЧПУ;
  • во-вторых, если в ссылках присутствуют названия категории;
  • в-третьих, если названия статей и категорий в УРЛ пишутся в кириллице или это вообще англ. блог.

В других случаях будет работать, но, думаю, как-то не круто получится. Такие условия, потому что этот вариант разбирает ссылку на страницу (УРЛ) и по её элементам создает хлебные крошки. Ссылка разбивается разделителем .

Допустим у нас УРЛ на статью имеет вид:http://wptest.ru/рецепты/торт/готовим наполеон
тогда, мы получим цепочку крошек вида:Главная » Рецепты » Торт » Готовим наполеон

function breadcrumbs($separator = ' » ', $home = 'Главная') {

	$path = array_filter(explode('/', parse_url($_SERVER, PHP_URL_PATH)));
	$base_url = ($_SERVER ? 'https' : 'http') . '://' . $_SERVER . '/';
	$breadcrumbs = array("$home");

	$last = end( array_keys($path) );

	foreach( $path as $x => $crumb ){
		$title = ucwords(str_replace(array('.php', '_'), Array('', ' '), $crumb));
		if( $x != $last ){
			$breadcrumbs[] = ''.$title.'';
		}
		else {
			$breadcrumbs[] = $title;
		}
	}

	return implode( $separator, $breadcrumbs );
}

Используется аналогично моей функции, только на экран выводить надо через echo:

<?php echo breadcrumbs(' » '); ?>

Плагины и хлебные крошки в WordPress

Модули под данную задачу легко находятся по англоязычному названию функции Breadcrumbs — в WordPress репозитории или через поисковики. Разных вариантов реализации хватает, но бОльшая их часть не обновлялись несколько лет.

Возможно, авторам надоело конкурировать с бессменными лидерами Breadcrumb NavXT с 600тыс. загрузок и SEO by Yoast. К тому же достаточно сложно придумать что-то сверх оригинальное в данном вопросе, т.к. он максимально прост и даже можно реализовать хлебные крошки в WordPress без плагина. Как бы там ни было, подобрал 4 наиболее интересных решения:

Yoast SEO

Основная задача модуля, в принципе, никак не связана с нашей сегодняшней темой, но не упомянуть его нельзя. Одна из дополнительных фишек плагина Yoast SEO — хлебные крошки. То есть вам не придется устанавливать новый модуль, а просто активируете соответствующую опцию. В работе я использую именно этот вариант.

Breadcrumb NavXT

— самый популярный плагин по хлебным крошкам в WordPress с более чем 600 тысячами скачиваний. Обновляется регулярно и содержит множество функций для легкой настройки отображения навигации. Также в нем найдете встроенный виджет, поддержка bbPress, BuddyPress, локализации, возможность использования разработчиками фильтров/хуков и многое другое.

Breadcrumb

Prime Strategy Bread Crumb

Хлебные крошки в Yoast SEO

Я не буду детально описывать все тонкости работы, почитать об этом можете в обзоре SEO by Yoast, сосредоточусь исключительно на создании элемента с крошками. Процесс интеграции состоит из двух частей — установки в админке + правка шаблона.

После активации появится целый новый раздел SEO, где вам нужно выбрать пункт «Дополнительно». Далее переместите выключатель в пункте со странным названием «Включить Мякиш» в позицию «Включено»:

Разных опций здесь, в принципе не так уж и много. Вы определяете символ разделителя, название главной, префикс, текс для архивов и 404 страницы. Чуть ниже выбираете вариант таксономии, отображаемой в записи (рубрика — наиболее логична).

Затем переходите в файл шаблона, где собираетесь выводить навигационный блок и добавляете строки:

<?php if ( function_exists('yoast_breadcrumb') ) {
		yoast_breadcrumb('

,»);
}
?>

‘);
}
?>

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

Еще одно преимущество Yoast SEO — хлебные крошки могут задаваться в дополнительных параметрах постов блога:

То есть у вас есть шанс вручную определить любое значение заголовка WP записей через админку. Это полезно для длинных названий статей + позволяет избавиться от дублирующей информации.

Плагин Breadcrumb NavXT для WordPress

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

Здесь есть 4 закладки параметров:

  • В «Основных» можно выбрать тип разделителя, убрать линк на главную и настроить показ текущей страницы. Формат строки задается через шаблоны.
  • «Записи» — содержит опции для постов.
  • «Таксономии» — отвечают за метки / категории.
  • «Другое» — форматы страниц автора, архивов, 404 ошибки.

Советую пройтись по каждой вкладке, посмотреть все фишки. Формат отображения позволяет вносить любые изменения в данную навигацию — добавлять свой текст/символы, менять стили и т.п.

После указания параметров хлебных крошек Breadcrumbs в WordPress плагине нужно задать вывод информации в шаблоне — открываете соответствующий файл макета (как правило, header.php) и размещаете в нужном месте строки:

Аналогично работе с Yoast SEO выбор места размещения кода зависит от установленной темы. Если предполагается вывод блока в шапке, тогда используете header.php. Учитывая то, что этот файл общий для всех страниц макета, увидите цепочку ссылок на каждой из них. Также можно показывать элемент только в избранных разделах — в таком случае вставляете код в single.php, page.php, archive.php и т.п. В целом, Breadcrumb NavXT — неплохой инструмент. 

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

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

  1. Смотрим есть ли плагин хлебных крошек для Вордпресс сайта. Если да, то пробуем скрыть отображение цепочки ссылок в настройках и/или деактивируем его.
  2. Если разработчик грамотно выполнил интеграцию, то удаление модуля не приведет к ошибкам. В противном случае ищем в файлах шаблона код вывода навигации (WinGrep в помощь). Это могут быть, например, функции yoast_breadcrumb(), bcn_display(), bread_crumb() и т.п. Избавляемся от лишних строк.
  3. Еще раз проверяем отображение страниц проекта в браузере.

В принципе, отключить или убрать хлебные крошки в WordPress не так уж и сложно, главное разобраться как они добавлены

Внимательно правьте код, дабы не удалить ничего важного (можно предварительно закомментировать строки)

Итого. В статье детально разобрал как сделать хлебные крошки в WordPress, информации по настройке вам должно хватить с головой. Советую перед установкой подумать действительно ли вам необходим данный блок. Что касается реализации, то лично я не вижу смысла внедрять элемент пути по сайту в Вордпресс без плагина, учитывая, что в вашем веб-проекте наверняка будет присутствовать Yoast SEO. Что касается других модулей, то они пригодятся лишь в случае какой-то оригинальной функциональности. Breadcrumb NavXT кажется весьма неплохим, но я обеими руками за решение от Yoast.

Если у вас есть какие-то вопросы по работе с хлебными крошками Breadcrumbs и WordPress плагинами для них, пишите ниже, — будем разбирать.

P.S. Постовой. В наше время нужно использовать современные трубопроводные системы — газовые трубы представлены ТД «Евротрубпласт» отвечают всем стандартам качества.

Зачем нужна разметка ХБ?

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

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

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

Пример

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

Во всех примерах в стилях используется тег hover, который меняет цвет элемента при наведении, так же если Вам не нравится не один из представленных цветов, Вы с лёгкость сможете заменить его на свой.

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

Часть 2. Как прикрепить данные хлебные крошки на блог WordPress

И так, для начала нам нужно скачать плагин Breadcrumb NavXT, скачать его Вы сможете тут. После того как плагин будет скачан и активирован, нужно будет произвести некоторые настройки:

Настройки плагина находятся в параметрах. Во вкладке General нужно найти строчку Breadcrumb Separator и удалить стандартное значение, которое там стоит, другими словами, нужно оставить поле пустым.

Далее выбираем вторую вкладку Current Item и на против строчки Link Current Item ставим галочку. Обязательно после того как всё сделаете,  не забудьте сохраниться.

Это второй пример, который находится выше в статье.

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

Теперь нужно хлебные крошки добавить непосредственно на блог.

В админке блога находим внешний вид, затем редактор, и выбираем single.php. Далее добавьте следующее:

<?php if(function_exists('bcn_display'))
{
 bcn_display();
}
?>

Навигационная цепочка: что это такое?

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

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

В данной статье мы рассмотрим, что такое «хлебные крошки». Примеры удачного использования элемента на веб-ресурсах (что необходимо для оптимизации и продвижения сайта в поисковых системах) приведем обязательно и дадим некоторые советы и рекомендации касательно применения навигационных цепочек.

Первый пример

Сам вид элемента будет состоять из трёх частей, которые соединены в одну целую часть. Чтобы было понятнее смотрите рисунок ниже:

#breadcrumbs-one{
 background: #eee;
 border-width: 1px;
 border-style: solid;
 border-color: #f5f5f5 #e5e5e5 #ccc;
 border-radius: 5px;
 box-shadow: 0 0 2px rgba(0,0,0,.2);
 overflow: hidden;
 width: 100%;
 }

#breadcrumbs-one li{
 float: left;
 }

#breadcrumbs-one a{
 padding: .7em 1em .7em 2em;
 float: left;
 text-decoration: none;
 color: #444;
 position: relative;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 background-color: #ddd;
 background-image: linear-gradient(to right, #f5f5f5, #ddd);
 }

#breadcrumbs-one li:first-child a{
 padding-left: 1em;
 border-radius: 5px 0 0 5px;
 }

#breadcrumbs-one a:hover{
 background: #fff;
 }

#breadcrumbs-one a::after,
 #breadcrumbs-one a::before{
 content: "";
 position: absolute;
 top: 50%;
 margin-top: -1.5em;
 border-top: 1.5em solid transparent;
 border-bottom: 1.5em solid transparent;
 border-left: 1em solid;
 right: -1em;
 }

#breadcrumbs-one a::after{
 z-index: 2;
 border-left-color: #ddd;
 }

#breadcrumbs-one a::before{
 border-left-color: #ccc;
 right: -1.1em;
 z-index: 1;
 }

#breadcrumbs-one a:hover::after{
 border-left-color: #fff;
 }

#breadcrumbs-one .current,
 #breadcrumbs-one .current:hover{
 font-weight: bold;
 background: none;
 }

#breadcrumbs-one .current::after,
 #breadcrumbs-one .current::before{
 content: normal;
 }
Ссылка на основную публикацию