Хлебные крошки. навигация

How to Style Your WordPress Breadcrumbs

Styling your breadcrumbs is necessary if you’re coding them yourself. However, it can also be helpful if you’re using a plugin or a theme to add them. The default styling those tools provide may not be a good fit for your site, in which case you might want to tweak them to maintain consistency.

You can add custom CSS to style your breadcrumbs in your theme’s stylesheet (style.css) or in the Additional CSS area of the Customizer:

Incorporating additional CSS to style breadcrumbs via the Customizer

There are many ways you can adapt your breadcrumbs to match your site’s design, such as by tweaking their font, size, and color. You might also consider elements such as margins, padding, border, and icons.

Here’s an example of some CSS that can be used to style your breadcrumbs:

There are many possibilities when it comes to CSS. So it may take some experimenting to get your breadcrumbs looking exactly how you want them.

Описание

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).

Виды хлебных крошек

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

На основе расположения

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

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

На основе атрибутов

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

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

«Главная> Категория для мобильных устройств> Мелодии для мобильных> Размер для мобильных> и т.д. »

На основе истории

Этот вид хлебных крошек отображает маршрут, который вы прошли с момента посещения веб-сайта, и вы можете вернуться к предыдущим страницам в любое время. Например:

«Главная> Учебное пособие> Категория> Страница продукта> Научная статья> и т.д. »

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

На основе пути

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

«Вернуться на предыдущую страницу (домашняя страница)> Категория продукта> Цвет продукта> Размер продукта> и т.д. »

Установка на сайт

Процесс установки не сложный и отличается тем, что в данном случае оказывается не задействованным файл functions.php.  Хорошо это или плохо?  Дело в том, что ценность этого файла заключается в том, что все дополнения и записи внесенные вами в этот файл сохраняются пока Вы не смените тему оформления, в отличие от изменений в других файлах, которые могут быть потеряны при обновлениях версии WordPress.

Итак, для реализации элемента навигации нам понадобятся только лишь файлы style.css и single.php.

1. Открываем файл style.css вашей активной темы во встроенном редакторе WordPress или через файловый менеджер и вставляем данный код:

/* Хлебные крошки */
#breadcrumbs {
width: auto; /* Общая ширина страницы */
font-size: 17px; /* Размер шрифта */
color: #000000; /* Цвет текста, который не является ссылкой */
text-shadow: #000000 0px 0px 0px; /* Тени для текста (необязательно) */
text-align: left; /* Прижимаем текст к левому краю страницы */
margin: 3px 30px 20px 30px; /* Внешние отступы */
padding-bottom: 5px; /* Внутренние отступы */
border-bottom: 1px solid #20B2AA; /* Добавляем разделительную черту снизу */
}
/* цвет ссылок */
#breadcrumbs a, #breadcrumbs a:visited {
color: #00BFFF; /* Цвет ссылки */
text-decoration: underline; /* Подчеркивание ссылок */
}
/* цвет ссылок при наведении курсора */
#breadcrumbs a:hover, #breadcrumbs a:active {
color: #00BFFF; /* цвет ссылки при наведении курсора */
text-decoration: none; /* Отменяем подчеркивание ссылок при наведении курсора */
}

С этим кодом мы добавили стили для показа наших «крошек». В любой момент Вы сможете их подкорректировать согласно вашему художественному вкусу и предпочтениям, учитывая дизайн вашего блога. Для производства настроек непосредственно в файле есть объяснения на русском языке.

2. А в файл single.php в самом верху после участка кода  вставляем такой код:

<div id="breadcrumbs">
<?php if (is_home()) { ?>
<?php } elseif (is_single()) { ?>
<a href="<?php echo get_option('home'); ?>">Главная</a> »
<?php foreach((get_the_category()) as $cat) {
$cat=$cat->cat_ID;
echo(get_category_parents($cat, TRUE, ' » ')); } the_title(); ?>
<?php } ?>
</div>

Одна из возможных замен в коде — это название Главной страницы. А для «гурманов» есть предложение вставить изображения красивых стрелочек вместо невзрачного символа перехода (). Скачайте файлы стрелочек в Сети и сделайте в коде обычную вставку изображения:

<img  src="/images/файл изображения" width="" height="" alt="">

! Изображение должно загружаться из папки images, расположенной в корневой директории сайта.

В таком разе крошки могут выглядеть так:

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

На этом у меня всё. Тема исчерпана.
Удачи Вам! Пока. Ваш Л.М.

Включаем хлебные крошки у себя на блоге

Итак, включить хлебные крошки на сайте при помощи этого плагина проще простого. Заходим в раздел «Дополнительно» и передвигаем тумблер с Disabled на Enabled. Если когда-нибудь потом захотите убрать их, достаточно просто передвинуть кнопку обратно.

Если вам нравится, как настроено меню по умолчанию, его можно оставить и сохранить изменения

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

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

Находим в правой части списка файл single.php (Отдельная запись).

И вставляем вот этот код:

<?php if ( function_exists(‘yoast_breadcrumb’) ) {yoast_breadcrumb(‘<p id=»breadcrumbs»>’,'</p>’);} ?>

Сейчас я вставил код в контентную часть и на сайте он будет отображаться вот так.

Давайте я поставлю его чуть выше.

Теперь хлебные крошки отображаются лучше.

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

Вы можете снова зайти в настройки плагина и отредактировать название главной страницы, допустим, на home или заголовок вашего сайта. Больше в код лезть не понадобится. Все изменения можно производить в панели инструментов Seo Yoast.

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

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

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

Для начала вам понадобится понять «Основы html», разобраться в языке разметки.

Бесплатные уроки по CSS позволят понять что такое блочная разметка и как работать с каскадными таблицами.

По завершению вы освоите новую профессию и сможете начать создавать сайты, делать верстку. Выйдете на качественно новый уровень работы.

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

Пользуйтесь только проверенным софтом и актуальной информацией.

До новых встреч и удачи в ваших начинаниях!

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

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

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

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

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

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

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

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

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

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

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

Плагины разметки для разных CMS

Добавить навигационную цепочку в сниппет можно при помощи специальных плагинов для CMS.

WordPress

Самым популярным плагином хлебных крошек для WordPress считается Breadcrumb NavXT. Есть и другие: Instant Breadcrumbs, Flexy Breadcrumb, Surbma | Yoast SEO Breadcrumb Shortcode, Breadcrumb, breadcrumb simple и еще множество.

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

• показать крошки везде — в файл header.php;

• для всех записей — в файл single.php;

• для статистических страниц — в файл page.php;

• для всех рубрик — в файл category.php.

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

Joomla

Добавить хлебные крошки в CMS Joomla можно с помощью модуля «Навигатор сайта», тип модуля — «mod_breadcrumbs». Он находится в Панели управления > Расширения > Менеджер модулей.

Настройка модуля

Настройте модуль под свой сайт и укажите:

позицию модуля, в которой он будет выводиться на странице (отображение позиций включается так: Расширения — Менеджер шаблонов — Настройки — опция Просмотр позиций модулей — Включено);

• название главной страницы;

• разделитель текста для элементов навигации (обычно «/»).

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

Opencart

Хлебные крошки для движка Opencart устанавливают с помощью модуля. Под разные версии CMS есть разные модули: «Умные хлебные крошки» для Opencart 3.0, Правильные хлебные крошки для Opencart 2.x. Есть бесплатный модификатор, который делает неактивной ссылку на текущую страницу в хлебных крошках.

1С Битрикс

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

Moguta

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

Установка плагина

Проверьте правильность настройки с помощью валидатора Яндекса или Google.

Summary

Strong UX and SEO are both key to a successful website. Enabling WordPress breadcrumbs can make it easier for visitors to navigate throughout your site, while also helping search engines understand its structure and index your pages accurately.

In this post, we’ve covered four methods for adding breadcrumbs to your WordPress site:

1. Turn on breadcrumbs in Yoast SEO.
2. Install and configure a WordPress breadcrumbs plugin.
3. Use a theme that includes breadcrumbs.
4. Add your breadcrumbs manually using code.

Do you have any questions about WordPress breadcrumbs or how to use them? Let us know in the comments section below!

Save time, costs and maximize site performance with:

• Instant help from WordPress hosting experts, 24/7.
• Cloudflare Enterprise integration.
• Global audience reach with 28 data centers worldwide.
• Optimization with our built-in Application Performance Monitoring.

All of that and much more, in one plan with no long-term contracts, assisted migrations, and a 30-day-money-back-guarantee. Check out our plans or talk to sales to find the plan that’s right for you.

Changelog

Version Numbering

Version components:

• {major} = Major structural code changes / re-writes or incompatible API changes.
• {minor} = New functionality was added or improved in a backwards-compatible manner.
• {bugfix} = Backwards-compatible bug fixes or small improvements.
• {stage}.{level} = Pre-production release: dev < a (alpha) < b (beta) < rc (release candidate).

Changelog / Release Notes

Version 3.5.0 (2021/03/26)

• New Features

  None.

• Improvements

  None.

• Bugfixes

  None.

• Developer Notes

  Added new ‘wpsso_bc_add_home_url’ and ‘wpsso_bc_add_wp_url’ filters.

• Requires At Least
  • PHP v7.0.
  • WordPress v5.0.
  • WPSSO Core v8.34.0.

Version 3.4.1 (2021/02/25)

• New Features

  None.

• Improvements

  Updated the banners and icons of WPSSO Core and its add-ons.

• Bugfixes

  None.

• Developer Notes

  None.

• Requires At Least
  • PHP v7.0.
  • WordPress v4.5.
  • WPSSO Core v8.23.0.

Version 3.4.0 (2020/12/17)

• New Features

  Added a new “Breadcrumb Title” option in the Document SSO metabox.

• Improvements

  None.

• Bugfixes

  None.

• Developer Notes
  • Added support for from WPSSO Core v8.18.0.
  • Added a new function.
  • Added a new function.
  • Added a new method.
  • Added a new method.
• Requires At Least
  • PHP v7.0.
  • WordPress v4.5.
  • WPSSO Core v8.18.0.

Version 3.3.0 (2020/12/11)

• New Features

  None.

• Improvements

  None.

• Bugfixes

  None.

• Developer Notes

  Added support for the new $mod array elements in WPSSO Core v8.17.0.

• Requires At Least
  • PHP v5.6.
  • WordPress v4.5.
  • WPSSO Core v8.17.0.

Version 3.2.0 (2020/12/01)

• New Features

  None.

• Improvements

  None.

• Bugfixes

  None.

• Developer Notes

  Included the $addon argument for library class constructors.

• Requires At Least
  • PHP v5.6.
  • WordPress v4.5.
  • WPSSO Core v8.16.0.

Version 3.1.1 (2020/10/17)

• New Features

  None.

• Improvements

  Refactored the add-on class to extend a new WpssoAddOn abstract class.

• Bugfixes

  Fixed backwards compatibility with older ‘init_objects’ and ‘init_plugin’ action arguments.

• Developer Notes
  • Added a new WpssoAddOn class in lib/abstracts/add-on.php.
  • Added a new SucomAddOn class in lib/abstracts/com/add-on.php.
• Requires At Least
  • PHP v5.6.
  • WordPress v4.4.
  • WPSSO Core v8.13.0.

Version 3.0.1 (2020/09/15)

• New Features

  None.

• Improvements

  Updated the French plugin translations.

• Bugfixes

  None.

• Developer Notes

  Moved extracted translation strings from lib/gettext-*.php files to a new gettext/ folder.

• Requires At Least
  • PHP v5.6.
  • WordPress v4.4.
  • WPSSO Core v8.5.0.

Version 3.0.0 (2020/09/05)

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

Делается все довольно просто и всего в 2 этапа.

На первом этапе необходимо добавить функцию этих самых «хлебных крошек» (англ. — breadcrumbs) в ваш шаблон WordPress, для чего в файл functions.php (в самый конец перед ?>) шаблона вставить следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function breadcrumbs() {
$showOnHome = ; // 1 - показывать "хлебные крошки" на главной странице, 0 - не показывать
$delimiter = '»'; // разделить между "крошками"
$home = 'Главная'; // текст ссылка "Главная"
$showCurrent = 1; // 1 - показывать название текущей статьи/страницы, 0 - не показывать
$before = '<span class="current">'; // тег перед текущей "крошкой"
$after = '</span>'; // тег после текущей "крошки"
 
global $post;
$homeLink = get_bloginfo('url');
 
if (is_home() || is_front_page()) {
 
if ($showOnHome == 1) echo '

‘; } else { echo ‘

‘ . $home . ‘ ‘ . $delimiter . ‘ ‘; if ( is_category() ) { global $wp_query; $cat_obj = $wp_query->get_queried_object(); $thisCat = $cat_obj->term_id; $thisCat = get_category($thisCat); $parentCat = get_category($thisCat->parent); if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ‘ ‘ . $delimiter . ‘ ‘)); echo $before . single_cat_title(», false). $after; } elseif ( is_day() ) { echo ‘‘ . get_the_time(‘Y’) . ‘ ‘ . $delimiter . ‘ ‘; echo ‘‘ . get_the_time(‘F’) . ‘ ‘ . $delimiter . ‘ ‘; echo $before . get_the_time(‘d’) . $after; } elseif ( is_month() ) { echo ‘‘ . get_the_time(‘Y’) . ‘ ‘ . $delimiter . ‘ ‘; echo $before . get_the_time(‘F’) . $after; } elseif ( is_year() ) { echo $before . get_the_time(‘Y’) . $after; } elseif ( is_single() && !is_attachment() ) { if ( get_post_type() != ‘post’ ) { $post_type = get_post_type_object(get_post_type()); $slug = $post_type->rewrite; echo ‘‘ . $post_type->labels->singular_name . ‘ ‘ . $delimiter . ‘ ‘; if ($showCurrent == 1) echo $before . get_the_title() . $after; } else { $cat = get_the_category(); $cat = $cat; echo get_category_parents($cat, TRUE, ‘ ‘ . $delimiter . ‘ ‘); if ($showCurrent == 1) echo $before . get_the_title() . $after; } } elseif ( !is_single() && !is_page() && get_post_type() != ‘post’ && !is_404() ) { $post_type = get_post_type_object(get_post_type()); echo $before . $post_type->labels->singular_name . $after; } elseif ( is_attachment() ) { $parent = get_post($post->post_parent); $cat = get_the_category($parent->ID); $cat = $cat; echo get_category_parents($cat, TRUE, ‘ ‘ . $delimiter . ‘ ‘); echo ‘‘ . $parent->post_title . ‘ ‘ . $delimiter . ‘ ‘; if ($showCurrent == 1) echo $before . get_the_title() . $after; } elseif ( is_page() && !$post->post_parent ) { if ($showCurrent == 1) echo $before . get_the_title() . $after; } elseif ( is_page() && $post->post_parent ) { $parent_id = $post->post_parent; $breadcrumbs = array(); while ($parent_id) { $page = get_page($parent_id); $breadcrumbs[] = ‘‘ . get_the_title($page->ID) . ‘‘; $parent_id = $page->post_parent; } $breadcrumbs = array_reverse($breadcrumbs); foreach ($breadcrumbs as $crumb) echo $crumb . ‘ ‘ . $delimiter . ‘ ‘; if ($showCurrent == 1) echo $before . get_the_title() . $after; } elseif ( is_search() ) { echo $before . ‘Результаты поиска по запросу «‘ . get_search_query() . ‘»‘ . $after; } elseif ( is_tag() ) { echo $before . ‘Записи с тегом «‘ . single_tag_title(», false) . ‘»‘ . $after; } elseif ( is_author() ) { global $author; $userdata = get_userdata($author); echo $before . ‘Статьи автора ‘ . $userdata->display_name . $after; } elseif ( is_404() ) { echo $before . ‘Error 404’ . $after; } if ( get_query_var(‘paged’) ) { if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‘ (‘; echo __(‘Page’) . ‘ ‘ . get_query_var(‘paged’); if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‘)’; } echo ‘

‘; } }

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

Для этого необходимо добавить в файлы single.php, page.php, archive.php, search.php шаблона следующий код:

1

<!--?php if (function_exists('breadcrumbs')) breadcrumbs(); ?-->

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

То есть как показано на рисунке:

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

Напоследок добавлю, что разработчиком данной функции является известный блогер Dimox.

Как убрать хлебные крошки в WordPress

Для начала необходимо понять каким из способов были установлены “хлебные крошки”:

1. Перейдите в установленные плагины и посмотрите не был ли реализован способ установки с помощью плагина или . Если использовался такой способ, то необходимо в настройках плагина отключить функцию показа, либо деактивировать/удалить плагин.
2. Если плагин не был обнаружен, значит придется копаться в коде методом редактора тем и искать код в одном из файлов. В основном это: single.php, page.php или header.php. А пример кода вы можете посмотреть в , поднимитесь немного выше.

Если у вас возникнут сложности в реализации, вы можете ознакомиться с нашими уроками. Так же обратиться за помощью к нам, или оставить комментарий к статье.

Самые знаменитые плагины

Если вы не умеете или боитесь вставлять дополнительный код на сайт, поставить хлебные
крошки на wordpress можно с помощью плагинов. Большой популярностью пользуются вот эти
два плагина. Первый плагин Yoast SEO вообще является сео комбайном, в котором очень
много разных возможностей. Второй плагин устанавливает только хлебные крошки. Каким из
них будете пользоваться, решать уже вам.

1. Сео комбайн Yoast SEO.
2. Плагин BreadCrumb NavXT.

Плагин Yoast SEO

Раньше этот плагин назывался по другому, сейчас его название Yoast SEO. Если на других
ресурсах вы найдете старое название плагина, знайте это один и тот же плагин. Заходим в
админку сайта, «Плагины — Установить новый». После установки
плагина, слева в меню появится новая кнопка «SEO». Нажимаем на нее, раздел
«Дополнительно». Первая вкладка называется «Навигационная цепочка
(breadcrumbs)».

В первом пункте пишем разделитель внутри цепочки, я указал несколько вариантов, которые
мне приходилось встречать. Выбираем один из них, какой будет присутствовать на вашем
сайте. Текст ссылки на главную страницу — в этой ячейке пишем текст, который
будет вести на главную страницу. Ранее я уже приводил примеры ( Главная страница, Home,
Главная, адрес, название и т.д.). Остальные пункты оставляем как есть.

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

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

<?php if ( function_exists(‘yoast_breadcrumb’) )
{yoast_breadcrumb(‘<p id=»breadcrumbs»>’,'</p>’);} ?>

Плагин BreadCrumb NavXT

Если вы не можете установить первый плагин от Yoast из-за своих личных причин, можно
воспользоваться плагином BreadCrumb NavXT, который отвечает только за вывод на сайте
wordpress. Так же само заходим в админку, «Плагины — Установить новый
плагин».

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

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

<?php if ( function_exists(‘yoast_breadcrumb’) )
{yoast_breadcrumb(‘<p id=»breadcrumbs»>’,'</p>’);} ?>

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

Создание хлебных крошек с плагином 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’ );

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

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

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

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

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

Вывод «хлебных крошек» с использованием плагина.

Для создания этих элементов существует плагин Breadcrumb NavXT.

Устанавливается он также как и все остальные:

Плагины » Добавить новый » в поле поиска вводим название плагин » нажимаем «Установить», а затем «Активировать»

Для его настройки переходим в меню «Настройки» => «Breadcrumb NavXT»
После этого у меня он попросил обновить настройки

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

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

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

После того как вы внесёте все настройки будьте готовы к тому, что долгожданных хлебных крошек на своём сайте вы сразу не увидите.

Для того чтобы они появились нужно добавить в шаблон вашей темы специальный код.

А вот и он:

PHP

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

Его нужно поместить либо в самом конце шаблона header.php, либо в начале шаблонов page.php и single.php. Здесь всё зависит от особенностей вашего шаблона и того места в котором вы хотите чтобы они отображались.

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

В конце этой статьи я дам вам несколько готовых решений оформления.

Обратите внимание, то для корректной работы плагина у вас на сайте должны быть настроены ЧПУ (человеку понятные УРЛ).

Настраиваются они так:

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

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