Создаем хлебные крошки на wordpress без плагина

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

Определение и история появления

Если кто-то все еще не понимает, что такое хлебные крошки, то напишу определение.

Вот, как это выглядит:

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

Инструкция по созданию

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

Первое, что нужно сделать, это создать файл breadcrumbs.php, задать ему кодировку UTF-8 и записать в него следующее:

<div id="breadcrumbs">
   <?php if (is_home()) { ?>  
  
  <?php } elseif (is_single()) { ?>
      <a href="<?php echo get_option('home'); ?>">Главная</a> »            
      <?php foreach((get_the_category()) as $cat) { 
      $cat=$cat->cat_ID; 
      echo(get_category_parents($cat, TRUE, ' » ')); } the_title(); ?>

     <?php } ?>
</div>

Второе, помещаем созданный файл в папку wp-content/themes/название_темы/. Теперь у нас есть практически все, что нужно и осталось совсем немного.
Третье, заходим в консоль администратора Внешний вид — Редактор — Одна запись(single.php). И в нужное место, например, перед статьей, дописываем строку:

<?php include (TEMPLATEPATH. '/breadcrumbs.php'); ?>

У меня она идет сразу после строки:

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

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

Настройка визуального оформления

Идем в админку сайта и открываем страницу: Внешний вид — Редактор — Список стилей(style.css), где добавляем в конец файла следующее:

#breadcrumbs {
border-bottom:1px solid #eee;
font-size:15px;
color:#777;
padding:10px 20px;
}

Это оформит только сам блок, но не коснется оформления ссылок внутри него. Если потребуется оформить и их, то вы всегда сможете это сделать самостоятельно. Тем, кто не сталкивался с редактированием HTML и CSS рекомендую почитать мои уроки.

Еще примеры оформления хлебных крошек на сайтах Интернет-магазинов:

Здесь последним элементом в цепочке является раздел товаров.

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

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