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

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

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

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

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

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

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

Теперь приступим к написанию кода. так как весь 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 рекомендую почитать мои уроки.

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

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

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

Комментарии:

  1. Антон — 24.09.2011 11:22

    У вас стоит уже?

  2. myblaze — 24.09.2011 11:39

    Не совсем понял вопроса, но если речь о хлебных крошках, то да, они у меня есть. Взгляните в начало статьи :)

  3. XZender — 24.09.2011 11:48

    Круто, эти крошки реально упрощают перемещение по сайту. А за ролик спасибо, я такого не видел, долго смеялся и в офисе всем показывал ))

  4. Сергей — 26.09.2011 09:26

    а почему модуль не использовать? тоже самое делает…

  5. myblaze — 26.09.2011 12:35

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

  6. Gomerton — 28.09.2011 23:15

    Очень хорош ои удобно все расписано, а главное понятно.
    P.S. Ролик очень смешной,долго смеялся :D

  7. IceClockQ — 29.09.2011 13:34

    оч помогло,спасибо))
    и видео прикольное))

  8. blair — 27.10.2011 18:05

    спасибо )
    а видео классное )

  9. Артём — 20.12.2011 22:19

    спасибо большое, есть один вопрос, а как добавить крошки и на страницы сайта? какие строчки дописать в файл breadcrumbs?

  10. myblaze — 21.12.2011 10:09

    Артем, привет. Сам файл breadcrumbs изменять не нужно. Для добавления на страницы требуется следующее:
    Заходим в консоль администратора Внешний вид — Редактор — Одна запись (single.php).
    Дописываем сюда строку:
    < ?php include (TEMPLATEPATH. '/breadcrumbs.php'); ?>

    У меня она идет сразу после строки:
    < ?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    ну и естественно файл breadcrumbs.php закидываем в папку с темой. Если еще какие-то вопросы- спрашивайте! =)
    Удачи.

  11. Zalexi — 26.07.2012 19:58

    Благодарю за прекрасную инструкцию по «хлебным крошкам».
    Но есть такая ситуация.
    В меню у меня стоят статические страницы (к примеру): Экскурсии — Развлечения — Новости.
    Каждая страница имеет по два вложения, т.е. наведя указатель на «Экскурсии», появятся два подпункта — «Экускурсии по России» и «Экскурсии по Украине». Но эти два подпункта и все последующие относятся к категориям (или рубрикам).
    Открыв статью из подрубрики «Экскурсии по России» в «хлебных крошках» должно отображаться:
    «Главная >> Экскурсии >> Экскурсии по России >> Статья»
    Но отображается:
    «Главная >> Экскурсии по России >> Статья»
    Т.е. выпала из «крошек» статическая страница. И это правильно, т.к. она не прописана в коде «крошек»
    Меня интересует, как можно реализовать «крошки» в данной ситуации, когда в пути присутствуют и страницы и рубрики?

  12. myblaze — 02.08.2012 13:18

    Честно, не знаю. Не думал над этим.

  13. Ирина — 21.04.2013 01:41

    Отличная статья! Протестировала несколько вариантов. Ваш понравился больше всех! Спасибо :)

  14. myblaze 21.04.2013 10:04

    Не за что :) Рад, что вам пригодились мои заметки)

  15. alex — 11.08.2013 23:07

    спасибо, поставил себе на сайт …..

  16. Danila — 20.06.2017 16:03

    Спасибо! Вы очень помогли

Добавить комментарий