«Хлебные крошки» для записей на WordPress

За столь необычным названием кроется знакомая многим цепочка из ссылок. «Хлебные крошки» позволяют показать полный путь до открытой записи WordPress, что актуально для веб-ресурсов использующих подкатегории.

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

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

Самая простая функция «Хлебных крошек»

Так как нам требуется вывести цепочку ссылок только в записях, то нам не требуется тяжеловесная функция под всевозможные типы страниц. И помещать код станем непосредственно в шаблон «single.php», отвечающий за формирование записей на WordPress.

Нижеприведённый код размещаем после строки:

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

но до мета-данных публикации. Функция готова к работе, но вы можете внести собственные изменения.

<div id="crumbs">
Вы здесь: 
<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(); ?>
</div>

Примечание! Перед внесением любых изменений в исходный код шаблона WordPress, рекомендуем делать резервную копию. В данном случае, можно скопировать оригинальный файл «single.php» через FTP доступ к сайту.

Теперь остаётся лишь добавить стили для «хлебных» ссылок. А для этого в коде отвечает идентификатор (id) — “”. Предлагаем свои параметры CSS, которые можно будет отредактировать в соответствии с вашей темой оформления WP.

#crumbs {
width: 100%;
float: left;
margin-bottom: 25px;
color: #999;
font-size: 11px;
}
#crumbs a{
color: #666;
font-size: 11px;
}

После редактирования файлов «single.php» и «style.css» не забываем сохранить изменения. А если у вас появились вопросы в ходе реализации «хлебных крошек», то пишите о них в комментариях. Также будем признательны за собственные наработки.