WordPress breadcrumbs: how to enable them on your wordpress site

Плагин SEO by Yoast

В качестве альтернативы вышеописанному способу можно использовать плагин SEO by Yaost, который способен создавать очень привлекательные крошки. Его основные достоинства:

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

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

1. В админ панели переходим в раздел «SEO – Дополнительно»;
2. Произойдет загрузка дополнительных настроек плагина (он создан не только для отображения крошек), но конкретно нас интересует раздел «Навигационная цепочка»;
3. Активируем крошки, но для их появления на площадке необходимо будет разместить специальный код (найти его сможете в конце этого списка);
4. Выбираем один из разделителей, который поддерживается HTML5;
5. Далее выбираем текст главной страницы сайта (например, «Главная», «Домой» и т.д.);
6. Префикс – это символ или слово, которое будет отображаться перед всеми крошками на ресурсе (обычно ставят стрелочку);
7. Далее можно выбрать префиксы конкретно для архивов, страниц результатов поиска, страницы 404;
8. Выделять последний пункт жирным может и кому-то покажется полезным, но последняя страница часто идентична заголовку, поэтому тут решайте сами, как поступить;
9. Последний пункт настроек – таксономия (можно выбрать между рубриками, форматами, метками);
10. Сохраняем внесенные изменения.

После выполнения настройки необходимо добавить код в шаблон:

Вот и все, во всех остальных моментах работы с плагином разобраться не составит особого труда.

Инструкция по созданию

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

Первое, что нужно сделать, это создать файл breadcrumbs.php, задать ему кодировку UTF-8 и записать в него следующее:

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

Второе, помещаем созданный файл в папку wp-content/themes/название_темы/. Теперь у нас есть практически все, что нужно и осталось совсем немного.
Третье, заходим в консоль администратора Внешний вид — Редактор — Одна запись(single.php). И в нужное место, например, перед статьей, дописываем строку:

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

У меня она идет сразу после строки:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Как сделать хлебные крошки 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 и для чего они нужны?

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

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

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

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

Как добавить хлебные крошки WordPress с помощью Breadcrumb NavXT Plugin

Это гибкий и простой в использовании «хлебные крошки» WordPress плагин. Он имеет больше разнообразных функций, чем вы можете себе представить. Первое, что нужно сделать, это установить и активировать плагин Breadcrumb NavXT. После его активации необходимо перейти на страницу настроек плагина: Настройки — Breadcrumb NavXT:

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

Страница настроек разделена на несколько разделов. На вкладке «Общие» вы можете определить, каким образом плагин будет вести себя на сайте.

Здесь можно изменить шаблон ссылок. Эти шаблоны используют параметры Schema.org в теге ссылки.

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

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

Отображение Breadcrumb NavXT на вашем сайте

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

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

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

Как добавить хлебные крошки WordPress с помощью Yoast SEO Plugin

Установите и активируйте Yoast SEO Plugin. После активации плагина нужно перейти на страницу SEO > Дополнительно и установите флажок для опции «Включить хлебные крошки»:

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

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

Вывод хлебных крошек с помощью плагина Yoast SEO

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

Вставьте этот код в header.php своей темы в конце файла:

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

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

Надеемся, что эта статья помогла вам.

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

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

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

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

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

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

What Are WordPress Breadcrumbs Navigation Links?

WordPress breadcrumbs refer to navigational links located at the top of a page or post. They show site users their present location on the website by displaying the categories leading to the page they are currently on.

In addition to that, they create a trail that visitors can use to navigate back to the home page.

However, breadcrumb navigation links are not exclusive to WordPress sites – you can find them on other websites. Take a look at our knowledge base:

In the example, All Collections > Getting started > How to create a website? are links to the pages that lead to that post.

Instead of searching for other articles or clicking the back button, website visitors can simply click on Getting Started or other breadcrumbs to find more information about the topic.

О крошках

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

К примеру, сначала вы находите основную категорию. Допустим: «Товары для дома». Затем попадаете в раздел «Освещение», открываете заветные «Уличные светильники» и там отыскиваете фонарь своей мечты или возвращаетесь к одной из категорий, если забрели не туда.

Пример вы можете видеть на рисунке ниже.

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

Оформление «хлебных крошек»

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

Первый вариант

Вот код:

CSS

#br-crumb{
margin:20px 0px;
}
#br-crumb a, .page-name {
color:#449D44; /*цвет текста*/
text-transform:uppercase; /*текст заглавными буквами*/
}
#br-crumb a:hover, .page-name:hover{ /*смена цвета текста при наведении*/
color:#3498DB;
}

Второй вариант
Код:

CSS

#br-crumb{
margin:20px 0px;
}
#br-crumb a, .page-name {
padding:3px 5px; /*внутренний отступ*/
color:#fff; /*цвет текста*/
background:#2F73B6; /*цвет фона*/
border-radius:5px; /*скруглённые углы*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#br-crumb a:hover, .page-name:hover{
color:#2F73B6; /*цвет текста при наведениии*/
background:#fff; /*цвет фона при наведении*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

Третий вариант
Код:

CSS

#br-crumb{
margin:20px 0px;
}
#br-crumb a, .page-name {
display:inline-block;
padding:3px 5px;
color:#fff; /*цвет текста*/
background:#2F73B6; /*цвет фона*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
position: relative;
height:39px; /*высота*/
padding-left:30px;
}
#br-crumb span{
}
#br-crumb a:after, .page-name:after {
content: «»;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #2F73B6; /*цвет треугольников*/
position: absolute;
right: -19px;
top: 0;
z-index:2;
}
#br-crumb a:before, .page-name:before {
content: «»;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #fff;
position: absolute; left: 0; top: 0;
}

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

Итак, включить хлебные крошки на сайте при помощи этого плагина проще простого. Заходим в раздел «Дополнительно» и передвигаем тумблер с 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

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

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

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

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.

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

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

Заходим в админку –> «Внешний вид» -> «Редактор» -> functions.php. Здесь в любом месте (главное не внутрь другой функции) вставляем следующий код:

function the_breadcrumb() {
    echo 'You are here: ';
    if (!is_front_page()) {
        echo 'Home';
        echo " » ";
        if (is_category() || is_single()) {
            the_category(' ');
            if (is_single()) {
                echo " » ";
                the_title();
            }
        } elseif (is_page()) {
            echo the_title();
        }
    }
    else {
        echo 'Home';
    }
}

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

Теперь нужно вот этот код:

<?php the_breadcrumb();
?>

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

Можете перейти на сайт и посмотреть, что получилось. Как видите, You are here и Home тут явно не к месту и их нужно изменить на что-то более подходящее, например, на Путь и Главная (или название блога).

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

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

Всем спасибо за внимание!. P.S

В заключение статьи видео о том как поставить хлебные крошки на свой блог:

P.S. В заключение статьи видео о том как поставить хлебные крошки на свой блог:

https://youtube.com/watch?v=MVWNvgeSPJI

Автор статьи: Ирина Попова

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)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Breadcrumb NavXT

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

/wp-admin/options-general.php?page=breadcrumb-navxt

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

В шаблон требуется вставить вызов функции:

<div class=»breadcrumbs» typeof=»BreadcrumbList» vocab=»https://schema.org/»>
<?php
if(function_exists(‘bcn_display’)) bcn_display();
?>
</div>

Типичное место для вставки данного кода — конец файла header.php. Настройки едины для всего сайта, функция не требует каких либо параметров для вызова.

Если вы «не дружите» с php, то вас однозначно порадует подход автора.

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

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

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

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

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

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

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

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

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

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

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

Conclusion

WordPress breadcrumbs are navigational links located at the top of a web page to improve user experience, SEO, as well as to reduce bounce rate.

There are three ways to add breadcrumbs to WordPress websites:

• Manually, which requires using the file manager on your web hosting control panel or connecting via an FTP client.
• Using themes with built-in breadcrumb features, such as Astra and OceanWP.
• Using plugins like Yoast SEO, Breadcrumb NavXT, WooCommerce Breadcrumbs, or Breadcrumb.

We hope this article made it easier for you to add breadcrumbs to your site. Let us know in the comments which method you chose.