Помните сказку про Ганзель и Гретель и какую хитрость они использовали что бы вернуться домой и не заблудится в лесу? Правильно, хлебные крошки. То же самое необходимо для сайта, что бы пользователи находили дорогу к нужным им страницам. В данной статье я расскажу как реализовать навигацию по сайту при помощи плагина «Breadcrumb NavXT».

WordPress и хлебные крошки.

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

И так, приступим.

1. 1. Необходимо установить и активировать плагин, вбиваем в поиск «Breadcrumb NavXT», устанавливаем.
   2. В панели администратора появится новая вкладка, переходим в «Настройки» -> «Breadcrumb NavXT».
      

      WordPress «Breadcrumb NavXT»

       

   3. Далее можете произвести настройки плагина, там всего 4 вкладки, все вроде понятно. Вносим необходимые Вам правки и сохраняем.
   4. Дальше нам необходимо вставить следующий код в нужный нам файл шаблона:
      PHP

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

      1 2 3 4 5 6 7 8 9

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

   5. Например, добавим наши хлебные крошки на страницах записей, в этом случае размещаем наш код в файле «single.php» (файл может называться по другому, всё зависит от темы). Заходим во вкладку «Внешний вид» -> «Редактор», выбираем наш файл.
      

      WordPress редактируем файл

   6. Вставляем код после строки
      
      PHP

      get_header(); ?>

      1	get_header(); ?>

      
      Должно получится так:
      
      PHP

      … get_header(); ?> <div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/"> <?php if(function_exists('bcn_display')) { bcn_display(); }?> </div> <div class="wrap"> <div id="primary" class="content-area"> …

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

      ... get_header(); ?>   <div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">     <?php if(function_exists('bcn_display'))     {         bcn_display();     }?> </div>   <div class="wrap"> <div id="primary" class="content-area"> ...

      
      Сохраняем, в итоге на сайте выглядеть будет так:
      

      WordPress Breadcrumb NavXT вид на сайте

Собственно дальше добавляйте код куда Вам необходимо, остаётся только ещё поработать над CSS стилями, что бы всё выглядело хорошо. Для этого необходимо в файл «style.css» добавить описание стиля. К примеру сделаем текст посередине, фон жёлтым, текст красным, для этого вставляем следующий код:

Получим это:

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