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

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

Хлебные крошки или навигационная цепочка (от англ. — breadcrumbs) – это цепочка навигации по сайту, от главной страницы, до текущей, на которой находиться пользователь.

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

На сайте хлебные крошки выглядят примерно так:

Главная >> Раздел >> Подраздел >> Текущая страница

Конечно в зависимости от уровня вложенности страниц, эта навигационная цепочка может отличаться.

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

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

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

Для начала будем устанавливать навигационную цепочку при помощи кода. Это способ мне нравиться больше.

1) Сделайте бекап блога! На всякий случай, ведь придеться работать с кодом, который влияет на функционирование вашего шаблона.

2) Скопируйте вот этот код и вставьте в файл functions.php перед знаком ?> (Этот код создает навигационную цепочку)

Function the_breadcrumb() { echo ""; if (!is_front_page()) { echo "Ваш сайт"; echo " » "; if (is_category() || is_single()) { the_category(" "); if (is_single()) { echo " » "; the_title(); } } elseif (is_page()) { echo the_title(); } } else { echo "Home"; } }

Только не забудьте вместо надписи «Ваш сайт» вписать свое доменное имя или просто — «Главная».

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

Код для вставки:

Можете просто вставить после кода:

Кроме этого по желанию, можете вставить этот код в файлы — search.php (страница поиска информации по блогу и archive.php (страница архива блога)

4) Скопируйте код и вставьте его в самый низ файла style.css (этот код выравнивает расположение хлебных крошек — делает отступ от остальных блоков)

Kroshki { margin:5px 0px 0px 10px; }

Вот и все. Не пугайтесь, что так много кода, это намного проще чем кажеться 🙂

Установка хлебных крошек при помощи плагина Breadcrumb NavXT

Здесь все так же просто. Нужно скачать и активировать плагин Breadcrumb NavXT на блог. Думаю у вас не возникнет вопросов, как скачивать и устанавливать плагин. Все делается стандартным образом.

А вот и сам код:

Как видите все очень просто, справиться даже новичок. При желании, можно подредактировать стили, чтобы хлебные крошки выводились как-то оригинально. Например, вставив вот этот код в файл style.css

Breadcrumb { font:bolder 12px "Trebuchet MS", Verdana, Arial; padding-bottom: 10px; } .breadcrumb a{ color: #1B7499; } .breadcrumb a:hover { color: #EF0E0E; }

У меня при помощи плагина получилось как-то так:

А вы выводите хлебные крошки у себя на блоге?

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

CSS

Всё, первый не маловажный шаг сделали. А сейчас давайте всё таки добавим красивый вид нашим крошкам.

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

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

#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; }

Второй пример

Тут как и в первом примере, элемент состоит из трёх частей, которые соеденяются в одну часть с помощью CSS.

#breadcrumbs-two{ overflow: hidden; width: 100%; } #breadcrumbs-two li{ float: left; margin: 0 .5em 0 1em; } #breadcrumbs-two 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-two a:hover{ background: #99db76; } #breadcrumbs-two a::before{ content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-width: 1.5em 0 1.5em 1em; border-style: solid; border-color: #ddd #ddd #ddd transparent; left: -1em; } #breadcrumbs-two a:hover::before{ border-color: #99db76 #99db76 #99db76 transparent; } #breadcrumbs-two a::after{ 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 #ddd; right: -1em; } #breadcrumbs-two a:hover::after{ border-left-color: #99db76; } #breadcrumbs-two .current, #breadcrumbs-two .current:hover{ font-weight: bold; background: none; } #breadcrumbs-two .current::after, #breadcrumbs-two .current::before{ content: normal; }

Третий пример

В третьем предмете элементы состоят из двух частей.

#breadcrumbs-three{ overflow: hidden; width: 100%; } #breadcrumbs-three li{ float: left; margin: 0 2em 0 0; } #breadcrumbs-three a{ padding: .7em 1em .7em 2em; float: left; text-decoration: none; color: #444; background: #ddd; position: relative; z-index: 1; text-shadow: 0 1px 0 rgba(255,255,255,.5); border-radius: .4em 0 0 .4em; } #breadcrumbs-three a:hover{ background: #abe0ef; } #breadcrumbs-three a::after{ background: #ddd; content: ""; height: 2.5em; margin-top: -1.25em; position: absolute; right: -1em; top: 50%; width: 2.5em; z-index: -1; transform: rotate(45deg); border-radius: .4em; } #breadcrumbs-three a:hover::after{ background: #abe0ef; } #breadcrumbs-three .current, #breadcrumbs-three .current:hover{ font-weight: bold; background: none; } #breadcrumbs-three .current::after{ content: normal; }

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

#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; }

Пример

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

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

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

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

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

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

Всё, с плагином закончили, теперь нужно выбрать то оформление, которое Вам больше всего понравилось. В данном случае на примере будет вот этот стиль:

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

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

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

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

Важно

Обратите внимание, что сама функция вызова крошек стоит между тегами