Зачем нужны Breadcrumbs (хлебные крошки) для сайта и как их реализовать для WordPress.

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

Хлебные крошки (breadcrumds) для сайта на WordPress

Хлебные крошки (breadcrumds) для сайта на WordPress

Вот для всего выше описанного и создаются хлебные крошки (Breadcrumbs). Давайте более подробно разберемся в вопросе.

Что такое хлебные крошки (Breadcrumbs) и для чего они нужны на сайте.

“Хлебные крошки” (Breadcrumbs, навигационная цепочка) — это навигационная цепочка (путь) по сайту, начиная от главной страницы и заканчивая страницей на которой находится пользователь. Они могут быть разной длинны, так как зависят от того, как глубоко от главной страницы находится страница на которой находится посетитель. Пример, Вы можете увидеть на нашем сайте в каждой статье над заголовком статьи h1.

breadcrumbs на сайте Loleknbolek

breadcrumbs на сайте Loleknbolek

Навигационную цепочку важно использовать так как она улучшают юзабилити сайта в полной мере. Помогают пользователю ориентироваться на сайте, а именно знать раздел (категорию), где он находится без возврата на главную страницу. Представьте себе ситуацию, что Вы зашли на сайт, а именно в рубрику или категорию с поисковой системы и нашли необходимую информацию. Вот “хлебные крошки” помогут сразу сориентироваться, где вы находитесь и быстро перебраться в раздел, где можно найти похожую информацию.

Так же можно использовать в продвижении сайта, поскольку они являются так называемым элементов внутренней перелинковки сайта. А с помощью одной только внутренней перелинковки можно выйти в ТОП по НЧ запросам. Но нужно смотреть на стратегию которую вы выбираете для перелинковки и не всегда крошки могут помочь в улучшении передачи веса со страницы.

Типы “хлебных крошек”.

Существует несколько типов, которые используются как в Рунете так и в зарубежном интернете.

  1. Location breadcrumbs — тип который определяет для каждой страницы свой пусть и он является постоянным. Этот путь не зависит от того как движется пользователь по сайту. На сайте Loleknbolek мы используем именно этот тип.
  2. Path breadcrumbs — отображаются крошки, которые показывают пользователю, путь который он прошел. Минус этого типа заключается в том, что при попадании пользователя из поисковой системы, “хлебные крошки” не будут отображаться.
  3. Attribute breadcrumbs — отображаются в виде меток на определенных страницах и помогают определить рубрику (категорию) страницы на сайте. Этот тип наиболее удобный и как правило используется у многих.

Как реализовать “хлебные крошки” на сайте WordPress.

Вы наверное уже прочитали текст выше и думаю решили на Вашем сайте они должны быть или нет. Так как у меня на сайте стоят, то покажу и расскажу как их реализовать. К этому вопросу можно подойти с двух сторон, использовать плагины или модули для cms или попробовать самому создать их.Я же буду показывать как создать “хлебные крошки” с помощью плагина Breadcrumd NavXT для WordPress.

Для начала необходимо скачать плагин здесь. После того как скачали плагин, необходимо его по ftp загрузить на сервер в папку:

/wp-content/plugins

Теперь переходим в админку и в левом меню ищем пункт “Плагины”. При нажатии на пункт нас перекинет на страницу плагинов, где необходимо найти Breadcrumd NavXT и нажать “Активировать”. Плагин установлен и готов к работе, нам необходимо его настроить.

Для начала необходимо вставить код, в ту часть страницы где хотите, что бы выводились “хлебные крошки”. Вот код для вставки:

<div class=»breadcrumbs»>
<?php if(function_exists(‘bcn_display’))
{
bcn_display();
}?>
</div>

Я свои крошки вывожу в верхней части статьи над заголовком h1 в шаблоне single.php. В вашем случае возможно нужно будет вставлять в другой шаблон.

Вставка кода в шаблон

Вставка кода в шаблон

Теперь когда вставили код, можете увидеть, что цепочка  отображается, но необходимо немного ее модифицировать под свои нужды. Для этого переходим в админ. панель WordPress, ищем пункт “Настройки” и там находим Breadcrumd NavXT и нажимаем на него.

плагин Breadcrumd NavXT

плагин Breadcrumd NavXT

Во вкладке “Основные” выбираем пункт разделитель и прописываем код на символ, который будет отображаться между страницами крошек. Код можно посмотреть в интернете по запросу “специальные символы html” и выбрать для себя. Дальше убираем галочку с длинны заголовка, для того, что бы не обрезать ее и ставим галочку, что бы показывать текущую позицию (страницу на которой находится посетитель).

Вкладка "Основные"

Вкладка «Основные»

Так же ставим галочку “Ссылка на главную”, на блог и на главный сайт убираем галочки если стоят.

Cсылки на главную

Cсылки на главную

На вкладке “Записи и страницы” в пункте «Иерархии записи» ставим галочку на “Рубрики”, дальше вкладки оставляем без изменений.

Вкладка "Записи и страницы"

Вкладка «Записи и страницы»

Что бы красиво оформить под стиль сайта “хлебные крошки” breadcrumbs необходимо в таблице стилей в моем случае style.css, прописать стили для класса .breadcrumbs. Вот мои стили:

.breadcrumbs {
margin: 11px 30px 0 30px;
border-bottom: 2px solid #3b8dbd;
}
.breadcrumbs a {
color: #aaa;
text-transform: uppercase;
margin: 0 10px;
text-decoration: none;
}
.breadcrumbs a.home {
margin: 0 10px 0 0;
}
.breadcrumbs a:hover {
color: #444;
}

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

Оцените статью:

Очень плохоПлохоНормальноХорошоОтлично (5 Рейтинг: 4,20 из 5)
Loading...Loading...

Если Вам понравилась статья, поделитесь с друзьями в соц. сетях:

Вам также может понравиться...

Не хотите пропустить новую статью? Тогда подписывайтесь...

Комментариев: 2

  1. Гуля:

    Здравствуйте, где взять коды крошек которые нужно вставлять?

  2. Bolek:

    Скачать плагин breadcrubms. Вот ссылка http://loleknbolek.com/wp-content/uploads/files/plugins/breadcrumb-navxt.rar

Добавить комментарий

Уважаемые пользователи!


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


С уважением, Администрация сайта.


Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Связаться с нами

Если у Вас возникли какие либо вопросы, предложения и пожелания для развития нашего ресурса, связаться с нами Вы можете по e-mail: loleknbolek.com@gmail.com, или заполните форму что находиться ниже.

Пишите мы будем рады Вам ответить!