Недавно нужно было организовать на одном из своих сайтов, сделанных на WordPress, хлебные крошки. Думал, что уже есть грамотное придуманное решение для этого. Сначала пошел в Google — он ничего мне не подсказал. Потом пошел на форумы, там то точно должно быть, нашел что-то корявенькое, с багами, недоработками, криво выводящее мои крошечки. В итоге подумал, а почему бы мне их самому не организовать?
Для начала, что такое хлебные крошки?
Хлебные крошки — иными словами навигационная цепочка, которая чаще всего встречается вверху сайта. Выглядит эта цепочка в виде блока внутренних ссылок, например Главная -> Раздел -> Статья. Какую же пользу из этого можно извлечь? Во-первых, самая прямая польза для посетителей вашего сайта, потому как хлебные крошки — это одна из важных составляющих юзабилити сайта (юзабили — это другими словами удобства сайта), т.е. человек, зашедший, допустим, из поисковой системы на ваш сайт прямо в статью — видел логическую цепочку и мог с легкостью перейти в раздел статей той же тематики. С другой стороны — это является элементом перелинковки сайта, т.е. помимо пользователей есть и поисковые системы и через хлебные крошки вы можете сообщить роботу дополнительно о ключевых фразах в анкорах ссылок.
Идею организации хлебных крошек именно этим способом подал мне Alex Volkov. На самом деле это простой php+html и держится это все на логических условиях «Если — То». Все довольно просто. Вот сам код:
<ul id=»breadcrumb»>
<!— Выводит название и ссылку на главную страницу —>
<li><a href=»/» title=»Женский журнал Украины»>Женский журнал Украины</a></li>
<!— Выводит главную страницу >> название категории —>
<?php if (is_category()) { ?>
<li>»</li>
<li><?php the_category(’, ‘) ?></li>
<?php } ?>
<!— Выводит главную страницу >> название категории >> название статьи —>
<?php if( (!is_home()) AND (!is_category()) AND (!is_tag()) ) { ?>
<li>»</li>
<li><?php the_category(’, ‘) ?></li>
<li>»</li>
<li><strong><?php the_title(); ?></strong></li>
<?php } ?>
<!— Выводит главную страницу >> название тега (метки) в кавычках —>
<?php if(is_tag()) { ?>
<li>»<strong>»<?php single_tag_title(); ?>»</strong></li>
<?php } ?>
</ul>
И CSS от моего сайта для него:
#breadcrumb {
background: #F5CADA url(i/content-top.gif) 3px no-repeat;
font: 12px Verdana;
height:30px;
line-height:30px;
color:#696969;
width: 98.7%;
overflow:hidden;
margin:0px;
padding-left: 10px;
}
#breadcrumb li {
list-style-type:none;
float:left;
padding-left:10px;
}
#breadcrumb a {
height:30px;
display:block;
background-image:url('/images/bc_separator.png');
background-repeat:no-repeat;
background-position:right;
text-decoration: none;
outline: none;
color:#E9508D;
}
.home {
border:none;
margin: 8px 0px;
}
#breadcrumb a:hover {
text-decoration: underline;
}
Подписал комментариями, какая часть кода и за что отвечает. Можно просто перестроить и для других страниц, если вы используете что-то кроме категорий, статей, страниц и меток (тэгов).
P.s. я не программист, поэтому может быть что-то неграмотно написал с точки зрения php, но это точно грамотнее, чем я находил в сети.
P.s.s. только смотрите внимательно комментарии, потому что WP урезал одно «-» везде.
