Prime Strategy Bread Crumb

Недавно мне поставили задачу реализовать на клиентском блоге "хлебные крошки" в стиле шаблона (популярный шаблон iNove). Для тех, кто не знает - в шаблоне iNove сделано довольно красивое навигационное css-меню. Позаимствовать стили этого меню из шаблона или найти их в интернете (я использовал этот туториал) оказалось легко, а вот подружить эти стили с плагинами "хлебных крошек" оказалось намного сложнее. Просмотрев два десятка плагинов, я нашел лишь один плагин, в котором можно без лишних телодвижений задать стиль панельки "хлебных крошек". Это плагин Prime Strategy Bread Crumb. Хотя должен сразу предупредить - по возможностям этот плагин уступает популярному в рунете плагину Breadcrumb NavXT, который, в свою очередь, имеет очень куцые возможности для настройки внешнего вида панели (этот плагин я опишу позднее отдельно).

Пара слов о том, что такое вообще эти "хлебные крошки". Это всего лишь навигационная цепочка, показывающая посетителю путь по сайту от его "корня" до текущей страницы, на которой находится посетитель. В рунете "хлебные крошки" используются, в основном, как дополнительный элемент навигации по сайту. И должен признать, что иногда эта панелька бывает весьма полезна в плане навигации по сайту. В остальном же мире "хлебные крошки" рекомендуют использовать не столько с целью улучшения навигации, сколько с целью улучшить SEO позиции сайта. Что имеется ввиду? Всего лишь сниппет выдачи гугла, который благодаря "хлебным крошкам" может применить к искомой ссылке ЧПУ, выглядит это примерно так:

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

Скачиваем плагин с его домашней страницы и устанавливаем его:

1. Распаковываем архив.

2. Копируем папку prime-strategy-bread-crumb в /wp-content/plugins/.

3. Заходим в админку блога на вкладку "Плагины" и активируем плагин.

Никаких настроек плагина в админке блога нет, он целиком настраивается параметрами в функции вызова. Самый простой пример использования (добавьте данный код в нужный файл шаблона, для большинства шаблонов код надо добавлять в конец файла header.php):

<?php if (function_exists('bread_crumb')) 
bread_crumb('home_label=Главная'); ?>

В результате будет выведена панелька "хлебных крошек", где ссылка на главную страницу будет иметь анкор "Главная". Теперь более подробно про параметры функции bread_crumb:

Параметры

type

(строка) (необязательный) - стиль отображения списка ссылок в панели. list формат выведет ссылки в тегах <li> и </li>, а формат string выведет ссылки в одну строку.

• list - по умолчанию
• string

home_label

(строка) (необязательный) - анкор ссылки на главную страницу сайта.

По умолчанию: Home

search_label

(строка) (необязательный) - текст, выводимый на страницах с результатами поиска.

По умолчанию: Search Results of "%s", где %s это поисковая строка.

404_label

(строка) (необязательный) - текст, выводимый на страницах с ошибкой 404.

По умолчанию: 404 Not Found

category_label

(строка) (необязательный) - текст, выводимый на страницах рубрик.

По умолчанию: %s, где %s это название рубрики.

tag_label

(строка) (необязательный) - текст, выводимый на страницах меток.

По умолчанию: %s, где %s это название метки.

taxonomy_label

(строка) (необязательный) - текст, выводимый на страницах таксономий.

По умолчанию: %s, где %s это название таксономии.

author_label

(строка) (необязательный) - текст, выводимый на страницах авторов.

По умолчанию: %s, где %s это ник автора.

attachment_label

(строка) (необязательный) - текст, выводимый на страницах вложений.

По умолчанию: %s, где %s это название вложения.

year_label

(строка) (необязательный) - текст, выводимый на страницах архивов за год.

По умолчанию: %s, где %s это год.

month_label

(строка) (необязательный) - текст, выводимый на страницах архивов за месяц.

По умолчанию: %s, где %s это месяц.

day_label

(строка) (необязательный) - текст, выводимый на страницах архивов за день.

По умолчанию: %s, где %s это день.

post_type_label

(строка) (необязательный) - текст, выводимый на страницах архивов произвольных типов записей.

По умолчанию: %s, где %s это название произвольного типа записи.

joint_string

(строка) (необязательный) - разделяющий ссылки текст (если параметр type задан как string).

По умолчанию: &gt;

navi_element

(строка) (необязательный) - css "обертка" для панели.

• none - по умолчанию
• div
• nav

elm_class

(строка) (необязательный) - название класса элемента <ul> (при незаданном параметре navi_element и при значении list у параметра type).

По умолчанию: bread_crumb

li_class

(строка) (необязательный) - название класса элемента <li> (при значении list у параметра type).

По умолчанию: none - значения нет

current_class

(строка) (необязательный) - название класса у текущей страницы в панели навигации.

По умолчанию: current

echo

(boolean) (необязательный) - вывод результата работы функции или сохранение этого результата, как переменной PHP.

• 1 (true) - по умолчанию
• 0 (false)

Более подробно о параметрах функции смотрите на странице плагина. Но не пугайтесь большого количества параметров и их "сложного" описания! На самом деле подавляющему большинству блогеров достаточно лишь кода:

<?php
 $args = array(
    'home_label'    => 'Главная',
    'search_label'  => 'Результат поиска по запросу "%s":',
    '404_label'     => 'Извините, страница не найдена'); 
 if (function_exists('bread_crumb')) bread_crumb($args);
?>

Этот код подходит почти всем и выглядит это так:

Если вы не желаете, чтобы панелька выводилась на главной странице блога (показывать посетителю, что он находится на главной странице блога, может быть глупо), то вы должны использовать код:

<?php
 if (is_home()) {} else {
 $args = array(
    'home_label'    => 'Главная',
    'search_label'  => 'Результат поиска по запросу "%s":',
    '404_label'     => 'Извините, страница не найдена'); 
 if (function_exists('bread_crumb')) bread_crumb($args);}
?>

Панель не будет выведена ни на главной странице блога, ни на страницах, образованных постраничной навигацией.

Теперь настала очередь поговорить об оформлении панели так, как у меня показано на скриншотах. Для этого откройте в папке вашего шаблона файл style.css и добавьте туда код:

.bread_crumb {
	width: 515px;
	margin:5px 5px 5px 22px;
	height:2.3em;
	border:1px solid #dedede;
	font: 11px 'Lucida Grande',Verdana,Arial,Sans-Serif;
	padding: 0;
	display: inline-block;
	white-space:nowrap;
	overflow: hidden;
}
.bread_crumb ul, .bread_crumb li {
	list-style-type:none;
	padding:0;
	margin:0;
}
.bread_crumb li {
	display: inline-block;
	white-space:nowrap;
	line-height:2.3em;
	color:#777;
	padding-left:.75em;
}
.bread_crumb li a {
	background:url(images/crumbs.gif) no-repeat right center;
	display:block;
	padding:0 15px 0 0;
}
.bread_crumb li a:link,
.bread_crumb li a:visited {
	color:#777;
	text-decoration:none;
}	
.bread_crumb a:link, .bread_crumb a:visited,	
.bread_crumb li a:hover,.bread_crumb li a:focus {
	color:#dd2c0d;
}

Не забудьте скачать картинку "уголка" здесь и поместить ее в папку images вашего шаблона. Поправьте ширину width у класса .bread_crumb, так как ширина в 515 пикселей настроена строго под мой шаблон.

При желании, панель можно настроить через css под себя, например, так:

Код вызова такой панели надо использовать такой:

<?php
 if (is_home()) {} else {
 $args = array(
    'home_label'    => 'Главная',
    'search_label'  => 'Результат поиска по запросу "%s":',
    '404_label'     => 'Извините, страница не найдена',  
    'type'          => 'string'); 
 if (function_exists('bread_crumb')) { ?>
 <div class="bread_crumb"><?php bread_crumb($args); ?></div>
<?php }} ?>

А стили для style.css будут такими:

.bread_crumb {
	font:bolder 11px 'Lucida Grande',Verdana,Arial,Sans-Serif;
	padding-bottom: 1px;
	padding: 4px 8px;
	color: #FFffff!important;
	background:#9C1718 ;
	border: 0 !important;
	width: 559px;
	margin-left: 1px;
}
.bread_crumb a{
	color: #ffffff;!important;
}
.bread_crumb a:hover {
	color: #ffffff;
}

И опять же - проверьте ширину и отступы панели, чтобы она идеально вписалась в ваш шаблон.

Мне нравится этот плагин, но если для вас не критично оформление панели "хлебных крошек" в определенном стиле, то советую использовать плагин Breadcrumb NavXT, так как он дает больше возможностей для настройки.

Автор плагина: jim912
Страница плагина: http://wordpress.org/extend/plugins/prime-strategy-bread..
Рассматриваемая версия: 1.0.3 от 08.08.2011
Совместимость с версией WordPress: 3.1 и выше.