Делаем хлебные крошки на сайте!

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

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

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

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

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

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

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

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

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

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

Итак.

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

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

function the_breadcrumb() {   echo '';   if (!is_front_page()) {   echo '<a href="'; echo get_option('home'); echo '">Ваш сайт';   echo "</a> » ";   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 (для вывода хлебных крошек в страницах) перед кодом, выводящим контент, обычно он выглядит примерно так:

<?php while ( have_posts() ) : the_post(); ?>

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

<div class="kroshki">  <?php   the_breadcrumb();  ?>  </div>

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

<?php get_header(); ?>

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

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

.kroshki {   margin:5px 0px 0px 10px;  }

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

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

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

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

<div class="breadcrumb">  <?php  if(function_exists('bcn_display'))  {   bcn_display();  }  ?>  </div>

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

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

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

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