Flector

Prime Strategy Bread Crumb

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);
?>

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

Хлебные крошки плагина Prime Strategy Bread Crumb

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

<?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 под себя, например, так:

Хлебные крошки плагина Prime Strategy Bread Crumb 2

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

<?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 и выше.

Понравился пост? Подпишись на обновления по Обновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Комментарии (всего 7 комментариев)
Написать комментарий

(обязательно)

(обязательно, не публикуется)

Для вставки кода используйте кнопку "Код", по умолчанию используется синтаксис подсветки языка "php", вы можете поменять его на любой другой поддерживаемый GeSHi язык, например "javascript", "css", "html4strict", "sql" и тд. Используйте предпросмотр!
 


Подписаться на уведомления без комментирования.