плагин хлебных крошек - Breadcrumb NavXT

Приветствую вас, уважаемые читатели блога firstprize.ru. В этой статье я покажу вам, как сделать навигационную строку, которую вы можете наблюдать у меня вверху перед началом заголовков статей. Данную цепочку навигаций мне делает простой плагин для WordPress Breadcrumb NavXT, который переводится как «хлебные крошки».

плагин хлебных крошек - Breadcrumb NavXT

Данное название плагин получил из-за того, что его автору Джону Хавлику понравилась сказка про братьев Гримм, где мальчик Гензель сыпал хлебные крошки, чтобы по ним найти обратный путь. Правда было бы логичнее назвать плагин «камушки», так как по истории сказки Гензель и Гретель не смогли найти путь назад, так как хлебные крошки съели птицы. Ну да ладно, не в этом суть, главное, что этот плагин поможет посетителям не потеряться на вашем сайте и точно даст знать, где и в какой категории (части сайта) они сейчас находятся.

К тому же плагин Breadcrumb NavXT помогает равномерно распределить статический вес по всем страницам сайта, что очень важно для его внутренней оптимизации и продвижения в поисковых системах. На всякий случай, если вы считаете, что внутренняя перелинковка (оптимизация) сайта не так важна, то рекомендую почитать вам вот эту статью, из которой вы поменяете свою точку зрения.

Итак, в этой статье я покажу вам, как реализовать данную навигацию у вас на сайте или блоге при помощи плагина Breadcrumb NavXT, а также простого кода.

 

Установка плагина хлебных крошек Breadcrumb NavXT.

1) Как обычно скачиваем плагин здесь и закачиваем его на блог, активируем.

2) Теперь нам нужно разместить специальный код в том месте, где вы хотите видеть строчку хлебных крошек. Для этого перейдите во «внешний вид» «редактор» и выберите файл, в который будете вставлять код. Чаще всего код плагина вставляют в файл «одна запись» (single.php) непосредственно перед или после заголовка статьи. Если вы совсем не разбираетесь в кодах, то просто ищите в самом начале кода два тега <h2> и <title>, которые отвечают за вывод названия публикаций. У меня данный код выглядит так:

<h2><a href="<?php the_permalink (); ?>" title="<?php the_title (); ?>"><?php the_title (); ?></a></h2>

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

<?php
if (function_exists ('bcn_display'))
{ bcn_display (); }
?>

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

<?php if (function_exists ('bcn_display_list'))
{
bcn_display_list ();
}?>

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

Пример:

<?php
if (function_exists ('bcn_display'))
{ bcn_display (); }
?>&gt; <span>Опубликовано <?php the_time (' j F Y'); ?></span></div><p></p>

Если что-то непонятно, то &gt; — выводит у меня такую вот стрелку > а буква j – обозначает день, F- месяц,  Y- год. Думаю после таких объяснений, вам и самим не будет трудно найти такой код.

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

<divclass="breadcrumb"></div>

В итоге у вас должен будет получиться такой код:

<divclass="breadcrumb">
<?php
if (function_exists ('bcn_display'))
{
bcn_display ();>
}
?>
</div>

Теперь зайдите во «внешний вид» «редактор» и откройте файл «таблица стилей» (style.css). И вставьте данный код практически в самый низ и обновите файл.

.breadcrumb {
font:bolder 12px «Trebuchet MS», Verdana, Arial;
padding-bottom: 10px;
}
.breadcrumb a{
color: #1B7499;
}
.breadcrumb a:hover {
color: #EF0E0E;
}

Это код стилей оформления навигационной строки. Вот вам немного его расшифровка, если вы не понимаете, что значат все эти строчки.

.breadcrumb { — отвечает за вывод функций.

font:bolder 12px "Trebuchet MS", Verdana, Arial; — отвечает за размер и тип шрифта который вы можете взять из простого Word.

padding-bottom: 10px; — отвечает за отступы от соседних элементов дизайна, измеряющихся в пикселях.

color: #1B7499; — отвечает за цвет ссылок.

color: #EF0E0E; — отвечает  за цвет ссылок при наведении на них курсором.

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

плагин хлебные крошки

Настройка плагина хлебных крошек Breadcrumb NavXT.

Итак, переходим в «настройки» «Breadcrumb NavXT». Тут вы увидите четыре вкладки: основные, записи и страницы, таксономии, другое. Так как плагин полностью переведен на русский язык, то я затрону только самые нужные настройки.

Основные.

Разделитель – тут вы указываете код, который будет выводить нужный вам символ для разделения строк навигации. Как вы помните я, уже вставлял такой код &gt; который выводи вот такую стрелочку >.

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

Код                     Символ
&quot;          "
&amp;           &
&lt;            <
&gt;            >
&curren;        ¤
&brvbar;        ¦
&sect;          §
&copy;          ©
&ordf;          ?
&laquo;         «
&reg;           ®
&deg;           °
&plusmn;        ±
&micro;         µ
&para;          ¶
&middot;        •
&sup1;          ?
&euro;          €
&#124;          |
&#125;          }
&#126;          ~
&#169;          ©
&#171;          «
&#187;          «
&#174;          ®
&mdash;         —

 

Записи и страницы.

Иерархия записи – тут выбираете, по каким критериям будет выводиться навигация хлебных крошек. У меня лично стоит по рубрикам (категориям), но вы можете поменять ее, например на подстраницы, тогда у вас будет сразу идти название статьи без вывода строчки категории.

 

Как сделать хлебные крошки без плагина Breadcrumb NavXT?

1) Для этого вам нужно будет создать текстовый файл с разрешением php и назвать его breadcrumbs. Пример: breadcrumbs.php

2) Затем нужно открыть его в любом html-редакторе и установить кодировку UTF-8 (без BOM) если у вас блог на WordPress. Если же у вас сайт на чем-то другом стоит, то нужно узнать его кодировку, а то у вас будут каракули вместо навигационной строки.

3) После этого вам нужно будет скачать этот текстовый файл, скопировать из него код и вставить в breadcrumbs.php. Данный код был слишком большим для публикации в статье, поэтому мне пришлось поместить его в отдельный файл. Если что заранее извиняюсь за неудобства.

4) Ок, теперь закиньте файл breadcrumbs.php через программу FTP в папку вашей темы блога. Если вы впервые работаете с FTP, то вам нужно закинуть его по такому адресу: httpdocs (или public_html , www, domains,) => wp-content => themes=>(папка вашей темы).

5) Гуд, теперь зайдите во «внешний вид» «редактор» и выберите файл «одна запись» (single.php) и вставьте перед заголовком статьи, как я вас учил выше, вот этот код, и сохраните файл.

<?php include (TEMPLATEPATH. '/breadcrumbs.php'); ?>

После этого у вас должна будет появиться навигационная строка хлебных крошек. Если вдруг вам не понравится их стиль оформления, то зайдите в «таблица стилей» (style.css) и вставьте туда этот код и заодно настройте его под свой вкус.

.breadcrumbs {
width: auto;
font-size: 13px;
color: #000;
text-align : left;
overflow : hidden;
}
#breadcrumbs a, #breadcrumbs a:visited {
color : #808080;
text-decoration : none;
outline:none;
}
#breadcrumbs a:hover, #breadcrumbs a:active {
color : #000;
text-decoration : none;
outline:none;
}

На этом все, если будут вопросы, задавайте.

Похожие публикаций:

Плагин защиты от спама - Math Comment Spam Protection
Как найти скрытые ссылки в теме оформления WordPress?
Семь хороших способов как поставить на WordPress форму обратной связи.

Поделиться с друзьями и коллегами.

Система Orphus

Прокомментировать

Сергей Журавлев – автор блога firstprize.ru, вольный SEO специалист, вебмастер, Web-разработчик на WordPress и человек-оркестр с опытом в некоторых других областях. Личное кредо — хочешь сделать что-нибудь хорошо, сделай это сам. В моменты особого вдохновения создаю видеоклипы и ковыряюсь в кодах. Основные профессиональные инструменты —Dreamweaver, Adobe Photoshop, Site-аuditor. Спасибо за внимание, заходите снова!