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

Хлебные крошки: как сделать на своем блоге?

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


Для начала рассмотрим, как вывести хлебные крошки с php-кодом. Сразу скажу, что ниже будет приведен этот же код, но с элементами микроразметки, советую сразу взять .

Вот образец кода, который нужно вставить в файл functions.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function my_breadcrumb() {
echo '<div class="breadcrumb"><a href="/"><span>Pro-wordpress</span></a>&nbsp;»&nbsp;</div>
<div class="breadcrumb">';
$categories = get_the_category();
if($categories){
  echo '<a href="' . get_category_link($categories->term_id ) . '">
  <span>'. $categories->name . '</span></a>&nbsp;»&nbsp;';
}
echo '</div>
   <div class="breadcrumb">
    <span>';
      echo the_title(); 
echo '</span></div>';
}

Русские названия в коде можно заменить на свои. Например, вместо «Главная» подставить название сайта.

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

1
2
3
4
5
<div class="breadcrumbs">
<?php
 my_breadcrumb();
?>
</div>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.breadcrumbs{
margin -5px  5px 3px; /* отступы */
overflow hidden;
}
.breadcrumbs a {
color #34a6d2; /* цвет ссылок - голубой */
text-decoration underline;
}
.breadcrumb > span {
color #000; /* цвет конечного пункта - черный */
}
.breadcrumb{
  floatleft;
}

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

Зачем нужны хлебные крошки?

Что касается хлебных крошек, то существует множество мнений, от важности данной функции для перелинковки до необходимости установки при сложной структуре сайта

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

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

В большинстве случаев мы не встретим обычных сайтов со сложной структурой. Как правило, это идут обычные ресурсы на движке WordPress, где структура контента идет таким образом: Главная — Рубрика — Статья.

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

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

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

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

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

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

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

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

Влияют ли хлебные крошки на СЕО продвижение

Мнение большинства оптимизаторов – да, влияют. 

Это важный элемент навигации. Посетитель сайта может в любой момент понять, в каком разделе он находится, и вернуться на предыдущую страницу. Хорошая навигация улучшает один из важнейших SEO параметров – поведенческие факторы. Хлебные крошки дают возможность просмотреть больше разделов, и, соответственно, увеличивают время и глубину просмотра. Чем больше эти параметры, тем выше ценится ресурс поисковыми системами.  Внедрение микроразметки позволяет улучшить сниппет в выдаче Google. Это повышает привлекательность сайта, увеличивает количество его посетителей. Цепочка навигации будет показана под заголовком продвигаемой страницы. Для оформления лучше применять форматы Microdata и RDFa .  Яндекс на данный момент не поддерживает такую микроразметку. Хлебные крошки влияют на продвижение как элемент внутренней seo перелинковки. Каждый раздел в строке – это отдельная ссылка, которая влияет на статический вес других разделов. Используя ключевые слова в навигации, можно улучшить позиции отдельных страниц по категорийным запросам. Люди любят, когда о них заботятся. Удобство обязательно оценят постоянные посетители вашего ресурса, и вернутся снова

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

How To Create a Breadcrumb Navigation

A breadcrumb navigation provide links back to each previous page the user navigated through, and shows the user’s current location in a website.

  • Home
  • Pictures
  • Summer 15
  • Italy
Step 1) Add HTML:

Example

<ul class=»breadcrumb»>  <li><a href=»#»>Home</a></li>  <li><a href=»#»>Pictures</a></li>  <li><a href=»#»>Summer 15</a></li>  <li>Italy</li> </ul>

Step 2) Add CSS:

Example


/* Style the list */ul.breadcrumb {  padding: 10px 16px;  list-style: none;  background-color: #eee;}/* Display list items side by side */ ul.breadcrumb li {  display: inline;  font-size: 18px;}/* Add a slash symbol (/) before/behind each list item */ul.breadcrumb li+li:before {  padding: 8px;  color: black;  content: «/\00a0»;}/* Add a color to all links inside the list */ ul.breadcrumb li a {  color: #0275d8;  text-decoration: none;} /* Add a color on mouse-over */ul.breadcrumb li a:hover {  color: #01447e;  text-decoration: underline;}

Go to our CSS Pagination Tutorial to learn more about pagination.

Плагины хлебные крошки для ВордПресс сайта

Самый популярный модуль на сегодняшний день — это Breadcrumb NavXT.

Плагин для WordPress Breadcrumb NavXT

Breadcrumb NavXT — это плагин совместимый с WordPress версий 4.0 и выше. Он генерирует локальные цепочки для вашего блога/сайта на ВордПресс. Поскольку Breadcrumb NavXT последовательно отображает иерархию страниц, она поможет обеспечить преимущества SEO.

Устанавливаете и активируете его стандартным способом. Далее, по желанию, можно его настроить под себя. Настройки — Breadcrumb NavXT. Плагин на русском языке. Думаю большинству пользователей подойдут настройки по умолчанию.

И снова нам понадобится редактировать файл Отдельная запись ( single.php ) и/или Отдельная страница ( page.php ). Можно использовать файл Заголовок ( header.php ). Берём код:

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

Установка кода Breadcrumb NavXT на страницу сайта

Сохраняетесь. Открываем страницу блога и смотрим результат:

Навигационные ссылки на странице блога

Добавьте этот же код в файл Отдельная запись ( single.php, ) как показано для Yoast SEO. Хороший плагин? О, да! Не подходит? Да, без проблем.

Заходим Плагины — Добавить новый и в поле поиска по плагинам вбиваем ключевое слово Breadcrumb. Выбирайте, друзья:

Плагины хлебных крошек для WordPress

Ориентируйтесь по обновлениям

Обратите внимание на plugin SEO Breadcrumbs:

SEO Breadcrumbs (хлебные крошки)


Плагин WordPress SEO Breadcrumbs

SEO Breadcrumbs — это мощный и простой в использовании плагин, который может добавить пять различных навигаций по хлебным крошкам на ваш сайт WordPress. Он полностью настраиваемый и отзывчивый. Плагин показывает панировочные сухари в сообщениях, страницах, пользовательских таксономии, архивах, вложениях. Так же в ошибках 404, результатах поиска.

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

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

Этот хак (нашел за бугром) подойдет для тех, кто не пользуется плагином . Открываем файл «Функции темы» ( functions.php ) и перед закрывающим тегом (в самом низу) ?> вставляем такой длинный код (не забудьте сделать резервную копию файла):

Обновите файл. Для вызова функции так же, как описано выше, в файлы single.php (одна запись); page.php (шаблон страницы); archive.php (архивы); search.php (результаты поиска) вставьте код:

Всё. Если понадобится задать стиль CSS для хлебных крошек (под дизайн вашей темы) заключите строчку в:

Откройте файл «Таблица стилей» ( style.css ) и в конце кода вставьте:

Настройте стиль под ваш дизайн блога/сайта.

В заключение

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

Благодаря микроразметке Breadcrumbs (навигационная цепочка) встраивается в выдачу Google. В Яндекс такой функции нет, но поисковик может самостоятельно подстроить структуру сайта под шаблон микроразметки.

На этом у меня все. До новых встреч. Удачи.

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

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

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

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

Breadcrumb NavXT русская версия

Breadcrumb NavXT это самый продвинутый и популярный плагин «хлебных крошек» для блога на WordPress. У него всего один недостаток – нет никаких встроенных стилей оформления. Этот недостаток плагина вы можете исправить, взяв готовые к использованию стили из этой статьи. В плагине достаточно много тонких настроек, так что я перевел его на русский язык, чтобы в настройках могли разобраться даже новички. Также читайте как оформить панель «хлебных крошек» в разметке RDFa, которая поможет поисковикам найти и использовать эту панель при формировании сниппета.

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

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


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

1. Распаковываем архив.

2. Копируем папку breadcrumb-navxt в /wp-content/plugins/.

3. Заходим в админку блога на вкладку «Плагины» и активируем плагин.

Настроить плагин вы можете в «ПараметрахBreadcrumb NavXT«. Я тут все перевел на русский язык и особых проблем с настройкой у вас возникнуть не должно. Тем более, что подавляющему большинству пользователей и не понадобится ничего настраивать — настройки по умолчанию вполне адекватны.

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

Из настроек по умолчанию я бы исправил лишь одну вещь – на вкладке «Текущая позиция» поставьте галку на «Постраничная навигация«, чтобы в панели отображалась текущая страница. Во избежание ситуаций, когда вы просматриваете 50-ую страницу сайта, а в панели все еще показывается, что вы находитесь на главной странице сайта. Так выглядит логичнее:

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

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

Вставьте в нужный файл шаблона вот этот код:

После этого будет выведена довольно кривая панель «хлебных крошек«:

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

1. Скачайте картинку (правая кнопка мышки и «Сохранить как«). 2. Закачайте ее себе на сайт куда-нибудь в папку images. 3. Измените в настройках плагина опцию «Шаблон ссылки на главную» на:

4. Опцию «Шаблон ссылки на главную (некликабельная)» поставьте:

%htitle%

Где «http://www.site.ru/home.png» будет указывать на вашу картинку.

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

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements

Что нужно знать при создании хлебных крошек

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

  1. Последнее звено цепочки (текущее положение посетителя) делайте некликабельным. В противном случае появится циклическая ссылка, которая может пагубно влиять на продвижение.
  2. На главной странице не должно быть хлебных крошек. Иначе цепочка будет включать одно звено со ссылкой на главную страницу.
  3. Расположите хлебные крошки так, чтобы они были заметны пользователям. По стандарту все привыкли видеть навигационную цепочку под шапкой. Для удобства можно продублировать её в нижней части страницы.
  4. Сочетайте хлебные крошки с микроразметкой. Поисковым системам проще считать размеченную информацию об описываемом объекте. Благодаря микроразметке поисковики узнают, что относится к цене, какая информация описывает объект, и что входит в хлебные крошки.

    Используйте популярный словарь разметки — Schema.org. Его поддерживают все поисковые системы. В WordPress для создания микроразметки хлебных крошек добавьте участок кода в нижнюю часть раздела functions.php. Пример кода:

    <div itemscope=»» itemtype=»http://schema.org/BreadcrumbList» id=»breadcrumbs»> <span itemscope=»» itemprop=»itemListElement» itemtype=»http://schema.org/ListItem»> <a rel=»nofollow» itemprop=»item» title=»Главная» href=»//yoursite.com»> <span itemprop=»name»>Главная</span> <meta itemprop=»position» content=»1″> </a> </span> <span itemscope=»» itemprop=»itemListElement» itemtype=»http://schema.org/ListItem»> <a itemprop=»item» title=»Товары» href=»//yoursite.com/tovary»> <span itemprop=»name»>Товары</span> <meta itemprop=»position» content=»2″> </a> </span> </div> В данном случае itemscope указывает на тип объекта, а itemprop описывает раздел, который нужно указать в цепочке хлебных крошек.

Google использовать форматы Microdata, RDF и JSON-LD для создания хлебных крошек. Пример кода Microdata с использованием словаря schema.org:

<ol itemscope itemtype=»http://schema.org/BreadcrumbList»> <li itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»> <a itemprop=»item» href=»/»> <span itemprop=»name»>Главная</span></a> <meta itemprop=»position» content=»1″ /> </li> <li itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»> <a itemprop=»item» href=»/catalog/»> <span itemprop=»name»>Каталог</span></a> <meta itemprop=»position» content=»2″ /> </li> <li itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»> <a itemprop=»item» href=»/catalog/planshety/»> <span itemprop=»name»>Планшеты</span></a> <meta itemprop=»position» content=»3″ /> </li> <li itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem»> <a itemprop=»item» href=» /catalog/stolovaya/iPad/»> <span itemprop=»name»>iPad</span></a> <meta itemprop=»position» content=»4″ /> </li> </ol>


С этим читают