Создаем хлебные крошки для wordpress сайта

Описание

Breadcrumb NavXT, the successor to the popular WordPress plugin Breadcrumb Navigation XT, was written from the ground up to be better than its ancestor. This plugin generates locational breadcrumb trails for your WordPress powered blog or website. These breadcrumb trails are highly customizable to suit the needs of just about any website running WordPress. The Administrative interface makes setting options easy, while a direct class access is available for theme developers and more adventurous users.

Features (non-exhaustive)

  • RDFa format Schema.org BreadcrumbList compatible breadcrumb generation.
  • Extensive breadcrumb customization control via a settings page with appropriate default values for most use cases.
  • Network admin settings page for managing breadcrumb settings for all subsites with configurable global priority.
  • Built in WordPress Widget.
  • Extensible via OOP and provided and .
  • WPML compatible (enhanced compatibility with WPML extensions plugin).
  • Polylang compatible (enhanced compatibility with Polylang extensions plugin).
  • bbPress compatible (enhanced compatibility with bbPress extensions plugin).
  • BuddyPress compatible (enhanced compatibility with BuddyPress extensions plugin).

Description

Breadcrumb is easy and light-weight plugin to display breadcrumb navigation to your WordPress site, easy to customize and change style for breadcrumb. You can use filter hook and action hook to rewrite the plugin without editing the plugin code. This plugin almost working on all WordPress pages like archive, category, tags, custom taxonomies, custom post types, defult post, date, year, month, author and search page to display breadcrumb dynamically.

Breadcrumb by http://pickplugins.com

  • Buy Premium »
  • Live Demo »
  • Support »
  • Documentation »

Tutorials

  • Install & setup
  • Limit link text
  • Customize home text
  • Change style
  • Install pro and setup (Premium)
  • Hide on archives (Premium)
  • Hide by post types (Premium)
  • Hide by post ids (Premium)

Plugin Features

Use via short-codes
You can display breadcrumb anywhere via shortcodes.

Display anywhere
Breadcrumb display on home page, any post type, page, parent pages, author page, archive page, tag page, custom taxonomy page, search page, woocommerce shop, product pages.

Custom front text
You can display custom prefix text before breadcrumb start.

Custom separator text
You can set custom separator text as you need and match with your theme. you can also hide the last separator if you want.

Limit word link text
You can limit word count or character count on link text and use set custom ending text.

Hide “Home” text
you can hide or display “Home” elements on breadcrumb

Custom font size for link text
you can set custom font size for link text

Container padding margin
Set custom margin and padding for breadcrumb container.

Custom color
you can set custom text color for link text, separator and link background color

Override via filter hook
You can override breadcrumb element via filter hook.

Premium features

Hide on archives
You can dynamically hide breadcrumb on archive pages like Front page, Home page, Blog, Author, Search, Year, Month, Date, Categories, Tags

Hide by post types
Hide breadcrumb based on different post types.

Hide by post ids
Hide breadcrumb based on post ids, you can use any post ids to hide breadcrumb to hide any specific post, Custom post types also supported.

Другие плагины для установки «хлебных крошек» на сайт

Установить на веб-сайте навигационное меню можно не только с помощью Yoast SEO, но и пользуясь другими плагинами.

  1. Breadcrumb NavXT

Простой и доступный плагин для создания «хлебных крошек» уже оценили около миллиона интернет-пользователей по всему миру. Модуль совместим с большинством сайтов на WP, поэтому его можно найти в онлайн-магазине и бесплатно установить.

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

Breadcrumb

Еще один функциональный модуль, который загружается из каталога. Он не столь популярен, как Breadcrumb NavXT, – плагином пользуются около 10 000 человек. Однако учитывая, что многие разработчики и администраторы сайтов предпочитают добавлять «хлебные крошки» другими способами, то для данного плагина и такая аудитория – достаточно неплохой показатель.

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

jQueryrCrumbs

Данный способ чаще всего применяют пользователи, знакомые с сервисом GitHub, на котором представлено множество бесплатных репозиториев с фрагментами кода и плагинами под любую задачу.

Для начала необходимо создать контейнер с перечнем ссылок. Используем #breadCrumb в качестве ID и объединяем функцию rCrumb и список, который автоматически попадает в раздел «хлебных крошек». Этот плагин дает возможность менять настройки, поэтому подойдет опытным разработчикам.

Bootsnipp

Кажется, что «хлебные крошки», представленные на портале, дублируют друг друга. Это объясняется тем, что фрагменты дополняются работами разработчиков, которые бесплатно выпустили свои коды для копирования и обмена. Фрагменты полезны только тем программистам, которые работают с Bootstrap.

Помимо описанных, есть и другие плагины, менее востребованные, но также позволяющие встроить в сайт «хлебные крошки». Чтобы выбрать подходящий, зайдите в каталог плагинов WP и в строку поиска введите breadcrumbs. Система предложит вам множество разных модулей.

Вас также может заинтересовать: Файл htaccess: применение, включение, настройка

Фильтры (хуки)

// фильтрует строки локализации - $l10n - это массив
$l10n = apply_filters( 'kama_breadcrumbs_l10n', $l10n );

// фильтрует параметры - $args - это массив
$args = apply_filters( 'kama_breadcrumbs_args', $args );

// вывод: все виды записей с терминами, или термины
$term = apply_filters( 'kama_breadcrumbs_term', $term );

// возможность изменить элементы крошек
$elms = apply_filters_ref_array( 'kama_breadcrumbs_filter_elements',  );

// возможность изменить элементы крошек, 
// после того, как все элементы были собраны в одномерный (плоский) массив
$flat_elms = apply_filters_ref_array( 'kama_breadcrumbs_filter_flat_elements',  );

// фильтрует готовый HTML код крошек
return apply_filters( 'kama_breadcrumbs', sprintf( $arg->wrappatt, $out ), $arg->sep, $loc, $arg );

Для чего нужны хлебные крошки?

Иногда заказчики просят убрать этот элемент страницы. Приходится им объяснять в чем его смысл.

Основная роль крошек — это помощь в навигации пользователя по сайту. Большинство из них открывает сайт с одной из внутренних страниц. Хорошо, если это именно та страница, которую пользователь ищет. Если нет — то у вас совсем не много вариантов того, как удержать его на сайте. Один из таких способов — это показать место страницы в иерархии всего сайта — хлебные крошки.

К примеру, пользователь искал нужный ему товар — монитор для компьютера. Он попал на карточку товара в вашем каталоге с описанием — Samsung G24. Посмотрел описание и решил продолжить поиск…

Вероятно, что он интересуется мониторами, мониторами Samsung, профессиональными мониторами. Возможно, какими то другими комплектующими для компьютера…

Было бы не плохо в начале страницы показать, что все это у вас есть. 🙂 Например, так:

Главная / Каталог / Компьютеры / Комплектующие / Мониторы / Профессиональные мониторы / Мониторы Самсунг / Монитор Samsung G24

Каждый из пунктов «крошек» ведет в соответствующий раздел каталога. Помимо удобной навигации это улучшает т.н. внутреннюю перелинковку. Вы получаете дополнительный инструмент для улучшения ранжирования страниц в ПС. Многие SEO-специалисты сходятся во мнении, что это позволяет выиграть у конкурентов борьбу за низкочастотные запросы при прочих равных условиях.

Description

SEO Breadcrumbs is powerful and easy to use plugin that can add five different breadcrumbs navigation to your wordpress website. This plugin fully customizable and responsive. Plugin shows breadcrumbs on post, page, custom taxonomies, archives, attachements, error 404, search results and more. You can control display for different types of breadcrumbs styles, you get five styling features from this plugin in-built. Plugin allows use of any colors combinations, with different effects to style the breadcrumbs. Plugin also supports schema specification for rich snippets markup used by Google and other search engines to identify breadcrumbs and use them in the search results.

General Features :

  • 100% seo navigation markup.
  • Sutible for all kinds of WordPress sites.
  • Breadcrumbs for all post, page, archives, custom toxonomy, search, error 404 etc.
  • Responsive with mobile/touch devices support.
  • Default style for smaller screens.
  • Home icon control font aweasome of boostrap icons.
  • Full styling control over colors, effects…
  • Google Rich Snippets compatable breadcrumbs.

Extra Features :

  • Less Markup for breadcrumbs.
  • Schema.org breadcrumbs orderlist mode.
  • Simple Settings menu.
  • SEO Breadcrumbs Widget.
  • Shortcode also available.
  • Faster generation time.
  • Customize colors with directly by colorpicker.

If you need any help see Plugin Website.

Плагин Breadcrumb NavXT

Для установки плагина Breadcrumb NavXT нужно войти в «Админ-панель WordPress» => «Плагины» => «Добавить новый». В поле «Поиск» нужно ввести выражение «Breadcrumb NavXT», а после этого нужно нажать на кнопку «Поиск плагинов». В окне «Установить плагин» под названием плагина «Breadcrumb NavXT» следует нажать на ссылку «Установить».

Далее в окне подтверждения установки плагина нужно нажать на кнопку «ОК».

В открывшемся окне «Установка плагина: Breadcrumb NavXT» необходимо нажать на ссылку «Активировать плагин». После этого в боковой панели «Админ-панели WordPress» появился новый пункт «Breadcrumb NavXT». Если нажать на этот пункт, то тогда можно будет войти в настройки плагина хлебных крошек.

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

В подпункте «Заголовок ссылки на главную» можно поменять выражение «Главная» на другое, например, на название вашего сайта. Но это изменение настроек вносить совсем не обязательно, все зависит от вашего желания.

Теперь нужно вставить в файлы вашей темы, в те места, где должны будут отображаться хлебные крошки, следующий код:

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

Для того, чтобы вставить этот код нужно войти в «Админ-панель WordPress» => «Внешний вид» => «Редактор» => «Шаблоны».

В шаблон «Одна запись (single.php)», который отвечает за страницы со статьями, код вставляется так, как показано на этом изображении.

После вставки кода, нажимаете на кнопку «Обновить файл».

Далее нужно будет вставить код в файл «Шаблон страницы (page.php)», который отвечает за статические страницы (например, страницы «О сайте», «Обо мне», «Рекомендую» и т. п.).

Код вставлен, затем нужно нажать на кнопку «Обновить файл».

В файл «Архивы (arhvie.php)», который отвечает за рубрики, также нужно будет вставить этот код.

После того, как код вставлен, нажимаете на кнопку «Обновить файл».

И в завершении установки кода в файлы темы WordPress, код вставляется в файл «Результаты поиска (search.php)», который отвечает за поиск по сайту. Вставляете код в то место, как это показано на изображении.

Далее нажимаете на кнопку «Обновить файл».

На этом изображении видно как выглядит навигация хлебные крошки. Имя главной страницы не было изменено на название сайта.

Можно также вставить в файл «Таблица стилей (style.ccs)» такой код (это делать необязательно):

.breadcrumb {
font:bolder 12px  "Trebuchet MS", Verdana, Arial;
padding-bottom: 10px;
}

.breadcrumb a{

color: #1B7499;
}
.breadcrumb a:hover {
color: #EF0E0E;
}

В этом коде можно менять размер и шрифт (font:bolder 12px  «Trebuchet MS», Verdana, Arial), отступы (padding-bottom: 10px), а также цвет ссылок хлебных крошек в статическом состоянии и при наведении на них курсора мыши (можно менять цифровые значения).

Показания в этом коде можно менять по своему усмотрению, или найти другой подобный код в Интернете. Также можно вообще обойтись и без установки этого кода в файл «Таблица стилей (style.ccs)». В установленной у меня теме, после установки кода, немного изменился шрифт.

В этой статье было рассмотрена установка хлебных крошек на сайт с помощью плагина Breadcrumb NavXT. В следующей статье будет рассмотрен такой вопрос — как установить хлебные крошки без использования плагина.

Description

Breadcrumb NavXT, the successor to the popular WordPress plugin Breadcrumb Navigation XT, was written from the ground up to be better than its ancestor. This plugin generates locational breadcrumb trails for your WordPress powered blog or website. These breadcrumb trails are highly customizable to suit the needs of just about any website running WordPress. The Administrative interface makes setting options easy, while a direct class access is available for theme developers and more adventurous users.

Features (non-exhaustive)

  • RDFa format Schema.org BreadcrumbList compatible breadcrumb generation.
  • Extensive breadcrumb customization control via a settings page with appropriate default values for most use cases.
  • Network admin settings page for managing breadcrumb settings for all subsites with configurable global priority.
  • Built in WordPress Widget.
  • Extensible via OOP and provided and .
  • WPML compatible (enhanced compatibility with WPML extensions plugin).
  • Polylang compatible (enhanced compatibility with Polylang extensions plugin).
  • bbPress compatible (enhanced compatibility with bbPress extensions plugin).
  • BuddyPress compatible (enhanced compatibility with BuddyPress extensions plugin).

Как правильно создать хлебные крошки

Для сайта, функционирующего на любом движке, в том числе и WordPress, можно создать «хлебные крошки». Это осуществляется при помощи различных плагинов, CSS и PHP. Но какой бы способ не был выбран, следует придерживаться определенных правил, позволяющих повысить оптимизацию сайта, и предотвращающих ее снижение.

При использовании линейной цепочки нельзя пропускать страницы-звенья. Последняя страница, на которой посетитель находится в данный момент, это тоже звено цепочки, и оно должно быть отображено в навигации. Иногда на сайтах в навигацию не включают конечную страницу, если это карточка товара. С точки зрения логики это может быть и верно, но для посетителя такая «обрезанная» цепочка выглядит странно, и может сбить его с толку.

Еще один важный нюанс – не стоит при создании навигации вписывать ключевые фразы, если они не очень органично вписываются. Анкор навигационной ссылки должен иметь минимальную длину. К тому же он должен быть очень точным, и притягивать в него ключ не рекомендуется.

При разработке сайта, который будет оснащен «хлебными крошками», все равно нужно тщательно продумать основное меню. Крошки не заменят его, они будут работать просто как вспомогательный инструмент, и не всем посетителям он пригодится.

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

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

Очень важно размещать цепочку на каждой странице в одном и том же месте

Для того чтобы сайт наилучшим образом выводился Гуглом, нужно сделать микроразметку строки навигации. То есть каждый шаг, ведущий от главной страницы до той, которая выводится в поисковике нужно оформить как отдельную ссылку. Это осуществляется путем обертывания каждого элемента в блок (div), и добавления атрибута (itemprop= «url»). В готовый блок нужно добавить атрибут itemprop= «title».

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

При оформлении «хлебных крошек» нужно помнить о том, что они нужны в первую очередь для повышения удобства пользования ресурсом, и только потом они несут пользу для позиций сайта в поисковых системах. При помощи цепочки посетители могут в один клик переходить на нужные страницы, что положительным образом сказывается на конверсии сайта (соотношение количества посещений к количеству полезных действий посетителей, например, покупок). Однако некорректная реализация «хлебных крошек» может привести к обратному эффекту, снизив как юзабилити ресурса, так и его показатели SEO. Чтобы проверить качество установленной навигации, можно воспользоваться аудитом поискового продвижения.

Reviews

http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»plugin-reviews»>

simple navigation with simple installation

I really love this plugin and his paid extensions. It help me a lot with my inter-linking building. Thanks

I’ve been using Breadcrumb NavXT for many years on many websites, and always very happy with it. Didn’t realise i hadn’t done a review, bad me! This plugin «does one thing and does it well,» my first requirement! Then, it has everything i need, with different ways to implement the breadcrumb trail. Added functionality is relevant to its purpose (such as, working well with WPML). Support is great. Works fine with non-gutenberg WordPress and ClassicPress. Thank you!

Использую плагин более 5 лет и нет проблем!

I found this plugin that does EXACTLY what I needed! It worked «straight out of the box» Makes navigation look super professional, nothing else I tried comes even close. Thank you, thank you , thank you. Donation is on the way! Keep up the great work!

Just so easy to implement and bang..! Job done.

Reviews

http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»plugin-reviews»>

The settings page gives you just enough to style it and make them look good. Great job!

I’ve been looking everywhere for the perfect breadcrumbs plugin for ages. Either they were all wrong or screwed up my installation when they updated. This one is perfect, and I couldn’t be happier with it.

All I suggest is that in your display instructions, you post the full code to add to your .php files. You say that all you have to do is add the short code. That’s true if you add it within the editor, but it took me awhile to figure out that to add it to the file itself, you have to add it in this way:

<?php
echo do_shortcode( » );
?>

This little bit of detail won’t be self-evident to some people, so I think you should let them know that this is how you add it. Otherwise, job well done!

After Using yoast for years (2013-2020) finally made the move and I am very happy with the results !

After wasting hours on Parent category> Child category> issue of yoast which is breaking the hierarchy , tried Navxt on recommendation of WP-beginner, it was breaking so many things.

Then enter Flexy Breadcrumb, works like a charm ,super clean, allows customization and solved the issues in every way.

Hope more people will see it as a better alternative and use it, and updated regularly too ! Good luck and thank you for a wonderful plugin.

Great plugin, excellent and fast support, you guys rock !

Wonderful. So far it seems like a tremendous plugin, simple and practical. I hope I don’t do something negative later. But definitely, so far it is going very well.

Great customisations, considering it’s free — support was quick to offer advice too

Reviews

http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»plugin-reviews»>

Hello,

easy to use, very useful. Working with every template (Divi also ;))

** old review bollow, but problem fixed very quickly by the team (very reactive! good job!!)
I spend 2 days looking for a bug on one of my websites, it could not save any changes :'(
— wp 5.3.2
— template Divi 4.2.2
We just found the problem : this extension, Breadcrumb, is not compatible with Divi template.
Have a nice day,
Rashel

Easy to use, custom breadcrumbs on any page u want.
We use it on our product and category pages for easy navigation.
Perfect plugin!

This plugin displays whatever you have in your permalink (user friendly URL) and if you have a generated date in your URL it will break it down and it will show you that the day is a page, the month is another page and the year another page. I don’t recommend it…

Great Plugin

I’ve installed and configured in zero time the plugin.
I choose it because have also the shortcode option!
Is very lightweight.
Support was very fast to fix some css Astra theme problem.

Good Job

Simple and reliable!

Плагин Breadcrumb NavXT

Плагин имеет огромное количество настроек, а главное – работает как качественные часики за несколько тысяч долларов. Как уже упоминалось выше, постраничная навигация WordPress возможна и без установки сторонних модулей, но с помощью Breadcrumb NavXT все упрощается – каждый пользователь сможет настроить навигационную цепь так, как ему нравится.

Загрузить плагин можно на странице: http://wordpress.org/extend/plugins/breadcrumb-navxt/ (работает на Вордпресс не ниже 3.0 и PHP 5). После скачивания заливаем плагин в папку wp-content/plugins и активируем его в админ панели. Заметим, что если у вас уже стояла старая версия модуля, то ее необходимо отключить, или же плагин может немного глючить (не сохраняются настройки). Если выключить все же забыли и ничего не работает, то после установки выключаем его и ставим по-новому. Теперь все будет корректно запускаться.

Далее необходимо отобразить крошки в вашем шаблоне. Для этого открываем файл header.php и добавляем следующий код:

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

Итак, заходим админку ресурса, смотрим на левую панель и выбираем там пункт «Breadcrumb NavXT». Тут будет показано несколько вкладок по типу «Общие», «Текущая позиция» и т.п. На главной вкладке «Общие» расположены параметры, которые будут затрагивать все страницы сайта. Поле «Разделитель» позволяет указать символ, который будет как разделитель хлебных крошек (на наш взгляд, наиболее удачный символ – «>» – простой и понятный каждому).

Поле «Максимальная длинна» указывает длину анкора в символах. Мы рекомендуем указать ограничение в 60 символов, что полезно в плане оптимизации. Выше мы уже упоминали о пользе крошек для SEO; то есть крошки будут индексироваться поисковыми машинами, и использоваться они будут не только для передачи пустого веса. Оговоримся, что поисковые машины могут непредсказуемо относиться к ссылкам с идентичными анкорами, поэтому рекомендуем их укорачивать (это необязательно, но все же можно немного потратить времени на это).

Если проставить галочку напротив «Домашняя ссылка», то в крошках будет показываться ссылка на главную. И при необходимости можно выбрать анкор. Поля «Префикс» и «Суффикс» позволяют указать текст, который будет стоить перед или после линка на главную. Ну а поле «Текст домашней ссылки» позволит указать текст, который будет показан при наведении на линк домашней страницы.

Стоит взять во внимание: этот текст может учитываться поисковыми системами, как анкор. То есть, стоит указать ключевики, которые касаются вашей главной страницы

После этого сохраняем все внесённые изменения при помощи соответствующей кнопки.

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

Следующее поле «Текст текущей позиции» можно не трогать, просто потому, что оно хорошо показывает смысл перехода (этот текст будет видеть посетитель, когда наведет курсор мыши на ссылку). Вкладка «Записи/Страницы» позволяет настроить показ ссылок на страницы со контентом и статические страницы площадки (для статей можно задать надпись «Текущая статья»).

На вкладке «Рубрики», по сути, все настройки походят на те, которые были на предыдущих страницах. При настройке мы не стали задавать префиксы и суффиксы, но внесли изменения в поле «Архивы». В результате всего этого, мы получили такие привлекательные крошки, где все исправно работает.

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Что такое «хлебные крошки» на сайте

Почти 25 лет назад Якоб Нильсен, программист, инженер и гуру юзабилити, представил миру свои десять основных принципов удобства любого веб-сайта. Первым в списке является правило информированности о состоянии системы. Иными словами, пользователю всегда должно быть понятно, в каком разделе он находится. Для этой задачи и используется навигационная цепочка, именуемая «хлебными крошками». Дублирующая навигация необходима и информационному, и коммерческому ресурсу.

Упомянутая выше навигационная цепочка – это элемент, который показывает путь от стартовой площадки (корня файловой системы, главной страницы сайта) до того уровня, на котором располагается нужный объект (веб-страница, файл и пр.). Такая понятная и наглядная иерархия помогает пользователю ориентироваться в системе, быстро перемещаться по каталогу или веб-сайту. Именно благодаря возможности в любой момент вернуться к корню данная навигация получила название «хлебные крошки», которое в английской терминологии звучит как breadcrumbs.

Найти путь от главной страницы до нужного раздела интернет-пользователь может тремя способами: через основное меню, карту или «хлебные крошки». Навигационные цепочки в первую очередь необходимы для тех веб-ресурсов, где размещен большой объем контента или присутствует множество страниц. Такая наглядная навигация улучшает юзабилити сайта: делает структуру понятной, помогает пользователю сориентироваться и быстро перейти на нужный уровень вложенности. Кроме того, breadcrumbs имеет положительное влияние на SEO: повышает позиции веб-сайта в поисковой выдаче и поведенческие показатели пользователей, используется для перелинковки с другими веб-страницами.

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

Еще один аргумент в пользу breadcrumbs – возможность отражать путь к нужному разделу в сниппете (информационный блок о ресурсе, который выводится в поисковой выдаче), если выполнена микроразметка.

Вас также может заинтересовать: Шпаргалка по настройке 301 редиректа

Какими бывают «хлебные крошки»

Часто на сайтах используется навигация по принципу кнопки браузера «назад». В этом случае посетитель не видит весь путь от стартовой страницы, но может воспользоваться кнопкой, отправляющей на предыдущую локацию. Такая кнопка может быть подписана как «назад в каталог» или «на предыдущую страницу». Принцип возврата на предыдущую удобен для ресурсов с функцией поиска.

Иногда веб мастера применяют оба принципа. При этом для навигации по сайту в целом применяется линейная функция, а для страниц, на которые посетитель попал через поиск по сайту, работает кнопка «назад». Если на страницах будут присутствовать оба варианта одновременно, это будет негативно сказываться на SEO и юзабилити. На каждой из них должен быть реализован один из вариантов.

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

Changelog

1.1.1

  • Fix – Added slash at the end of the URL – Google Recommendation
  • Fix – Wrapping the admin style to avoid from any style conflict.
  • Tweak – Update the schema links to https.

1.1.0

  • Feature – Added breadcrumb trail for default posts page.
  • Feature – Display category in post detail page having highest count.
  • Fix – Fixed Google Structured Schema for Breadcrumbs.
  • Fix – Remove archive link for custom post type if archive parameter is false.
  • Tweak – Display only highest category count in post detail page.

1.0.3

WP 4.9 Compatibility – Resolved the color picker issue in settings’s typography tab.
* Fix – Resolved the space issue between the attributes.

1.0.1

  • Fix – Resolved the floating issues in breadcrumb template.
  • Fix – Fixed the styling glitches of settings tab’s layout.
  • Fix – Resolved the 404 error in case of home page.

Создание хлебных крошек с плагином Yoast WordPress SEO

Если на вашем вордпрессовском движке установлен лучший на сегодняшний день SEO — комбайн SEO BY YOAST, считайте ваша задача уже решена.

У меня на блоге стоит именно этот плагин. Рассмотрим все действия пошагово.

В админ панели WordPress во вкладке SEO, где находятся настройки плагина Yoast WordPress SEO выбираем пункт «Расширенный», и кликаем на него. В открывшейся вкладке включаем breadcrumbs поставив галочку в чекбокс напротив надписи — Включить «хлебные крошки». После этого откроется окно в котором нужно произвести настройки.

Я заполнил их следующим образом:

Разделитель оставил по умолчанию. В качестве текста ссылки на главную выбрал наименование домена своего блога — seversantana.ru. Следующие поля оставил пустыми. В пункте таксономии для записи выбрал «Рубрика». Вот и все настройки. Жмем на «Сохранить изменения».

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

Для того чтобы хлебные крошки отображались в статьях блога редактируем файл одиночной записи. Обычно в темах это single.php. Открываем этот файл на редактирование, находим в верхней части строку, отвечающую за вывод заголовка и вставляем перед ней или после нее следующий код:Я разместил код перед заголовком статьи, получилось так:

Замечательно и красиво. Можно оставить и так, а можно убрать дубль, выделенный мной на скриншоте красной чертой (решение подсмотрел на http://mojwp.ru/). Получится так:

Для того чтобы удалить дубль названия статьи в файле functions.php используемой темы прописываем следующий код:

/* Убираем дубль в breadcrumbs*/
function adjust_single_breadcrumb( $link_output) { if(strpos( $link_output, ‘breadcrumb_last’ ) !== false ) { $link_output = »; } return $link_output; } add_filter(‘wpseo_breadcrumb_single_link’, ‘adjust_single_breadcrumb’ );

1
2

/* Убираем дубль в  breadcrumbs*/

functionadjust_single_breadcrumb($link_output){if(strpos($link_output,’breadcrumb_last’)!==false){$link_output=»;}return$link_output;}add_filter(‘wpseo_breadcrumb_single_link’,’adjust_single_breadcrumb’);

Первую строку можете не использовать. Я пишу это для себя, чтобы позже в случае чего было легче разобраться где что есть.

Для отображения хлебных крошек на статичных страницах сайта, таких как «Карта сайта», «О блоге» и др., редактируем файл используемой темы page.php. Я, как и в случае с записями блога, вставил предлагаемый код плагина отвечающий за вывод выше строки выводящей заголовок, т. е. выше этой строки:

<h1 class=”post-title”><?php the_title() ?></h1>

Но это так для интереса, breadcrumbs в окончательном варианте я реализовал только в статьях.

Не во всех темах WordPress все будет сладко и гладко. Я в своей теме правил стили CSS для того, чтобы все отображалось так, как мне хочется. Для этого открыл свой сайт в браузере Мозилла, и при помощи расширения Firebug где и, что можно сделать. После этого подправил стили CSS используемой темы, в основном изменив отступы между элементами.
Давайте рассмотрим варианты для тех, кто не использует плагин Yoast WordPress SEO.

Выводы

Следует помнить, что Гретель из сказки «Пряничный домик» потерялась даже несмотря на хлебные крошки. Не стоит допускать таких же ситуаций и с пользователями Ваших сайтов.

Надеюсь, что Вам была ясна и понятна описанная информация. Теперь можем подытожить, чему Вы научились и чего достигли после изучения статьи.

  • Поняли, что такое «Хлебные крошки» и зачем нас с Вами нужно их использовать.

  • Разобрали классификацию «Хлебных крошек» и поняли, какой именно тип Вам подходит.

  • Научились не только применять их, но и использовать различные системы для реализации применения.

  • Изучили различные дизайны «Хлебных крошек».

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

Оцените статью
Рейтинг автора
5
Материал подготовил
Андрей Измаилов
Наш эксперт
Написано статей
116
Добавить комментарий