Плагин создает цепочку ссылок от главной до текущей просматриваемой страницы. Такую цепочку принято называть «хлебные крошки». Это новая версия — более простой, стабильный, расширяемый и понятный код. Измененная система хуков. Дополнительный функционал. Прошлый код значительно доработан.
- Вывод крошек в теме (Использование)
- Параметры $args
- Параметры $l10n
- Фильтры (хуки)
- Примеры использования хуков
- Изменение параметров по умолчанию
- Локализация (строки перевода)
- Изменение/Добавление элементов крошек
- #1 Пример изменения элементов крошек
- #2 Добавим элементы крошек после ссылки на главную
- #3 Пример для woocommerce
- #4 Варианты добавить «крошку» после главной
- Массив $elms
- Удаление элементов из крошек
- Отключить крошки (по условию)
- Изменение классов под БЭМ верстку
- Как установить хлебные крошки на WordPress за 5 минут
- Что такое и почему называются – хлебные крошки
- Как сделать в Yoast SEO
- Настроить плагином Breadcrumb
- Создаем хлебные крошки без плагина
- Активируем функцию хлебных крошек с schema org
- Вставка кода вывода breadcrumb от Yoast
- Шорткод (shortcode) для вставки хлебных крошек
- Настройка внешнего вида
- Как удалить хлебные крошки от Йоаст СЕО
- Примеры использование фильтров
- #1 Установка параметров через фильтр
- #3 Пример перевода крошек на английский
- #3 Добавление произвольной ссылки в начало крошек
- #4 Добавление еще таксономий в крошки
- Другой вариант крошек
- Что такое и почему называются – хлебные крошки
- Как сделать в YoastSEO
Вывод крошек в теме (Использование)
Используйте следующий код в файле темы, там где нужно вывести крошки.
<?php do_action( 'echo_kama_breadcrumbs' ) ?>
Или можно вызвать с передачей параметров:
<?php $args = [ 'sep' => ' › ', 'on_front_page' => false, 'show_post_title' => false, //'markup' => 'Microdata', // RDFa, Microdata, data-vocabulary.org //'priority_tax' => [ 'category' ], //'number_tax' => [ 'category' => 2 ], //'disable_tax' => [ 'post_tags' ], ]; $l10n = [ 'tag' => 'Метка: <b>%s</b>', ]; do_action( 'echo_kama_breadcrumbs', $args, $l10n ); ?>
Когда нужно получить HTML крошек (не выводить на экран), используйте код:
$breadcrumbs = kama_breadcrumbs( $args, $l10n ); // теперь выводим там где нужно echo $breadcrumbs;
Параметры $args
Настройки вывода крошек указываются в виде массива, в параметре $args. Возможные элементы массива:
- sep (строка)
- Разделитель. Можно указать вместе с HTML оберткой:
<span> » </span>
.
По умолчанию: ‘ » ‘ - on_front_page (true/false)
- Выводить крошки на главной странице.
По умолчанию: true
- show_post_title (true/false)
- Показывать ли название записи в конце (последний элемент). Для записей, страниц, вложений.
По умолчанию: true
- show_term_title (true/false)
- Показывать ли название элемента таксономии в конце (последний элемент). Для меток, рубрик и других такс.
По умолчанию: true
- last_sep (true/false)
- показывать последний разделитель, когда заголовок в конце не отображается.
По умолчанию: true
- nofollow (true/false)
- Добавлять
rel=nofollow
к ссылкам?
По умолчанию: false - wrap_class (строка)
- CSS класс для главного
div
.
По умолчанию: ‘kama_breadcrumbs’ - link_class (строка)
- CSS класс для элемента крошек
a
.
По умолчанию: ‘kb_link’ - title_class (строка)
- CSS класс заголовка элемента.
По умолчанию: ‘kb_title’
- sep_class (строка)
- CSS класс разделителя.
По умолчанию: ‘kb_sep’
- priority_tax (массив)
- Приоритетные таксономии, нужно когда запись находится в нескольких таксономиях:
array( 'category', 'tax_name' )
.Порядок имеет значение — чем раньше тем важнее.
В значениях можно указать приоритетные элементы таксономий, тогда название таксономии нужно указывать в ключе.
Когда запись находится в нескольких элементах одной таксы одновременно. Например:
array( 'category' => [ 45, 'term_name', 'имя терма' ], 'tax_name' => [ 1, 2, 'name' ])
В этом коде
category
— это название таксономии для которой указываются приоритетные элементы.45
— ID терминаterm_name
— ярлыкимя терма
— заголовок.Порядок
45
,term_name
иимя терма
имеет значение: чем раньше тем важнее. Все указанные термины важнее неуказанных.
По умолчанию: array()
- disable_tax
- Таксономии которые нужно исключить из показа в крошках:
array( 'post_tag', 'tax_name' )
По умолчанию: array() - number_tax
- Позволяет выводить в крошках для записей сразу несколько таксономий.
Поменять порядок можно в параметре
priority_tax
По умолчанию: array()
- markup (string/array)
- Микроразметка. Может быть:
Microdata
— подробнее про разметку.RDFa
— подробнее про разметку.data-vocabulary.org
.''
— без микроразметки.
Можно указать свой массив разметки, например:
'markup' => [ 'wrappatt' => '<div class="kama_breadcrumbs">%s</div>', 'linkpatt' => '<a href="%s">%s</a>', 'titlepatt' => '<span class="kb_title">%s</span>', 'seppatt' => '<span class="kb_sep">%s</span>'],
По умолчанию: ‘Microdata’
- JSON_LD (true/false)
- Следует ли добавлять микроразметку JSON-LD
в HTML.
По умолчанию: true - use_the_title_filter (true/false)
- Использовать ли фильтр the_title
для заголовков записей.
По умолчанию: false
Параметры $l10n
Параметры строк (локализации) указываются в параметре $l10n в виде массива. Значения по умолчанию:
// Локализация $l10n = array( 'home' => 'Главная', 'paged' => 'Страница %d', '_404' => 'Ошибка 404', 'search' => 'Результаты поиска по запросу - <b>%s</b>', 'author' => 'Архив автора: <b>%s</b>', 'year' => 'Архив за <b>%d</b> год', 'month' => 'Архив за: <b>%s</b>', 'day' => 'Архив за <b>%1$s число</b>, %2$s', // Архив за 5 число, среда 'attachment' => 'Медиа: %s', 'tag' => 'Записи по метке: <b>%s</b>', 'tax_tag' => '%1$s из "%2$s" по тегу: <b>%3$s</b>', // tax_tag выведет: 'тип_записи из "название_таксы" по тегу: имя_термина'. // Если нужны отдельные холдеры, например только имя термина, пишем так: 'записи по тегу: %3$s');
Строки переводятся на англ. если у сайта выбран англ. язык.
Фильтры (хуки)
Все хуки плагина. Ниже показан код как хук определяется в плагине:
// Позволяет отключить вывод крошек if( apply_filters( 'disable_kama_breadcrumbs', null ) ) return;
// фильтрует строки локализации - $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', [ $elms, $this, $ptype ] );
// возможность изменить элементы крошек, // после того, как все элементы были собраны в одномерный (плоский) массив $flat_elms = apply_filters_ref_array( 'kama_breadcrumbs_filter_flat_elements', [ $flat_elms, $this, $ptype ] );
// фильтрует готовый HTML код крошек return apply_filters( 'kama_breadcrumbs', sprintf( $arg->wrappatt, $out ), $arg->sep, $loc, $arg );
Примеры использования хуков
Изменение параметров по умолчанию
// установим параметры по умолчанию add_filter( 'kama_breadcrumbs_args', 'my_kama_breadcrumbs_args' ); function my_kama_breadcrumbs_args( $args ){ $my_args = [ 'sep' => ' › ', // ▸ 'on_front_page' => 1, 'show_post_title' => 0, //'show_term_title' => 0, //'last_sep' => 0, 'markup' =>'RDFa', // или своя маркировка 'markup' => [ 'wrappatt' => '<div class="kama_breadcrumbs">%s</div>', 'linkpatt' => '<li><a href="%s">%s</a></li>', 'titlepatt' => '<li class="active">%s</li>', 'seppatt' => '<span class="kb_sep">%s</span>', ], 'priority_tax' => [ 'category', 'tplcat', 'wpfunccat' ], ]; return $my_args + $args;}
Локализация (строки перевода)
// изменим строки перевода add_filter( 'kama_breadcrumbs_l10n', 'my_kama_breadcrumbs_l10n' ); function my_kama_breadcrumbs_l10n( $l10n ){ $my_l10n = [ 'home' => '<i style="display:none;">Главная</i><span class="dashicons dashicons-admin-home"></span>', 'tax_tag' => 'По метке: <b>%3$s</b>', ]; return $my_l10n + $l10n;}
Изменение/Добавление элементов крошек
Чтобы изменить имеющие УРЛ в крошках или добавить свои крошки нужно использовать фильтр kama_breadcrumbs_filter_elements
.
Функция прикрепленная к этому фильтру получает массив и должна вернуть измененный массив. Этот массив — это и есть крошки, только в виде многомерного массива, он потом превратиться в HTML код крошек.
Для изменения или создания элементов крошек используются два метода (они автоматически создают указанную в параметре markup
микроразметку):
// для любого элемента крошек (кроме последнего) $class->makelink( $url, $title ) // для последнего элемента крошек (ссылка будет выводится, только если нужна) $class->maketitle( $url, $title )
Код нужно вставлять в файл темы functions.php
или куда-либо еще, главное до того как будут выведены крошки.
#1 Пример изменения элементов крошек
Чтобы все было понятно пройдусь по шагам.
Все изменения с крошками делаются через фильтр kama_breadcrumbs_filter_elements
. Для начала посмотрим что лежит в крошках, чтобы понимать какие ключи массива есть:
add_filter( 'kama_breadcrumbs_filter_elements', 'kama_breadcrumbs_filter_elms', 11, 3 ); function kama_breadcrumbs_filter_elms( $elms, $class, $ptype ){ die( print_r( $elms ) );}
В результате вы увидите такой массив (если мы на странице поста):
Array ( [home] => Array ( [0] => Kama_Breadcrumbs_Elem Object ( . ) ) [home_after] => Array( ) [single] => Array ( [category__tax_crumbs] => Array ( [0] => Kama_Breadcrumbs_Elem Object( . ) [1] => Kama_Breadcrumbs_Elem Object( . ) ) ) )
Как видим тут 3 крошки: home > category > category (орриентируйтесь по ключам массива — они не меняются и зависят от типа данных к которым относится конкретная крошка).
Теперь, например, нам нужно изменить ссылку на главную, для этого меняем крошку которая находится в ключе home
:
add_filter( 'kama_breadcrumbs_filter_elements', function( $elms, $class, $ptype ){ $elms['home'] = $class->makelink( 'https://site.com/path', 'Title' ); return $elms; // не забываем вернуть }, 11, 3 );
Или можно добавить еще одну крошку после ссылки на главную, для этого закидываем еще один элемент в массив с ключом home
:
add_filter( 'kama_breadcrumbs_filter_elements', function( $elms, $class, $ptype ){ $elms['home'][] = $class->makelink( 'https://site.com/path', 'Title' ); return $elms; // не забываем вернуть }, 11, 3 );
По такой системе можно удалять/изменять/добавлять крошки как угодно.
Важно отметить, что массив понимает любой уровень вложенности. Например, можно написать так и все будет работать:
add_filter( 'kama_breadcrumbs_filter_elements', function( $elms, $class, $ptype ){ $elms['home'][] = [ 'foo' => [ $class->makelink( 'https://site.com/path', 'Title' ) ] ]; return $elms; // не забываем вернуть }, 11, 3 );
#2 Добавим элементы крошек после ссылки на главную
// добавить свои ссылки в крошки add_filter( 'kama_breadcrumbs_filter_elements', 'breadcrumbs_add_elements', 10, 3 ); function breadcrumbs_add_elements( $elms, $class, $ptype ){ global $post; // смотрим какие элементы есть в массиве и добавляем куда и что нужно // print_r( $elms ); // запись находится в рубрике mycat if( is_single() && has_category( 'mycat', $post ) ){ // добавим 2 ссылки (2 элемента) после главной $elms['home'][] = [ $class->makelink( '/inventory', 'Инвентарь' ), $class->makelink( '/other', 'Другое' ) ]; } return $elms; }
#3 Пример для woocommerce
add_filter( 'kama_breadcrumbs_filter_elements', 'kama_breadcrumbs_add_elements', 10, 3 ); function kama_breadcrumbs_add_elements( $elms, $class, $ptype ){ if ( is_woocommerce() ) { $page = get_post( wc_get_page_id( 'shop' ) ); if ( is_shop() && ! is_paged() ) { $elms['home_after'] = $class->maketitle( get_the_permalink( $page ), get_the_title( $page ) ); } else { $elms['home_after'] = $class->makelink( get_permalink( $page ), get_the_title( $page ) ); } } return $elms; }
#4 Варианты добавить «крошку» после главной
add_filter( 'kama_breadcrumbs_filter_elements', 'kama_breadcrumbs_add_elements', 10, 3 ); function kama_breadcrumbs_add_elements( $elms, $class, $ptype ){ // можно так: $elms['home_after'][] = $class->makelink( 'http://example.com/functions', 'Функции' ); // или сотрем имеющиеся элементы и добавим свой: $elms['home_after'] = $class->makelink( 'http://example.com/functions', 'Функции' ); // или добавим сразу несколько ссылок: $elms['home_after'][] = [ $class->makelink('http://example.com/functions', 'Функции' ), $class->makelink('http://example.com/hooks', 'Хуки' ), ]; // или заменим на сразу несколько своих ссылок (удалим текущее значение home_after): $elms['home_after'] = [ $class->makelink('http://example.com/functions', 'Функции' ), $class->makelink('http://example.com/hooks', 'Хуки' ), ]; return $elms; }
Массив $elms
Как выглядит массив $elms
передаваемый в хук (элементы будут отличаться на разных страницах сайта):
Array( [home] => Главная [home_after] => Array( [0] => Функции [1] => Теги шаблона ) [single] => Array( [wpfunccat__tax_crumbs] => Array( [0] => Прочие функции [1] => Защита ) [title] => form_option ) )
В этот массив можно добавлять свои элементы
! В значении может быть строка или вложенный массив. В результате все значения этого многомерного массива будут собраны и выведены в крошках по порядку.
Названия ключей массива $elms
Например, home_after, нужны, чтобы проще было «сунуть» свою ссылку в нужное место, на работу кода они не влияют. Т.е. при добавлении своих элементов, ключ массива можно указать любой или вообще не указывать.
Удаление элементов из крошек
Когда нужно удалить существующие элементы, так же как и при добавлении используем фильтр kama_breadcrumbs_filter_elements
.
Так, чтобы например удалить ссылку Главная, нужно удалить элемент массива, точнее очистить его:
// изменяем крошки add_filter( 'kama_breadcrumbs_filter_elements', 'breadcrumbs_change_elements', 10, 3 ); function breadcrumbs_change_elements( $elms, $class, $ptype ){ global $post; // смотрим какие элементы есть в массиве и добавляем куда и что нужно // print_r( $elms ); // удалим ссылку на главную (очистим элемент home там лежит элемент "главная") $elms['home'] = []; return $elms; }
Отключить крошки (по условию)
Допустим нам нужно отключить вывод хлебных крошек на странице /profile
. Сделать это можно через фильтр disable_kama_breadcrumbs
:
add_filter( 'disable_kama_breadcrumbs', function(){ return is_page('profile'); } );
add_action( 'wp', function(){ if( is_page('profile') ){ remove_all_filters( 'echo_kama_breadcrumbs' ); } } );
Изменение классов под БЭМ верстку
## параметры по умолчанию — kama_breadcrumbs add_filter( 'kama_breadcrumbs_args', function( $args ) { $base = isset($args['bem']['base']) ? $args['bem']['base'] : 'breadcrumbs'; $mods = isset($args['bem']['mods']) ? $args['bem']['mods'] : []; $inner = $base . '__inner'; $item = $base . '__item'; $title = $base . '__title'; $link = $base . '__link'; $sep = $base . '__sep'; $base_mod = isset($mods['base']) ? ' ' . $base . '--' . $mods['base'] : ''; $inner_mod = isset($mods['inner']) ? ' ' . $inner . '--' . $mods['inner'] : ''; $item_mod = isset($mods['item']) ? ' ' . $item . '--' . $mods['item'] : ''; $title_mod = isset($mods['title']) ? ' ' . $title . '--' . $mods['title'] : ''; $link_mod = isset($mods['link']) ? ' ' . $link . '--' . $mods['link'] : ''; $sep_mod = isset($mods['sep']) ? ' ' . $sep . '--' . $mods['sep'] : ''; return array_merge( $args, [ 'sep' => ' — ', 'sep_class' => $sep . $sep_mod, // своя разметка 'markup' => [ 'wrappatt' => '
‘, ‘linkpatt’ => ‘ %s ‘, ‘titlepatt’ => ‘ %s ‘, ], ] ); } ); ## пример использования в шаблоне: $bc_args = [ ‘bem’ => [ ‘mods’ => [ ‘inner’ => ‘grey_class’, ‘link’ => ‘red_color’, ], ] ]; echo kama_breadcrumbs( $bc_args ); /** * Выведет: * — у враппера class=»breadcrumbs__inner breadcrumbs__inner—grey_class» * — у ссылок class=»breadcrumbs__link breadcrumbs__link—red_color» */
Как установить хлебные крошки на WordPress за 5 минут
https://Всем привет. Все администраторы и вебмастера хотят сделать свой сайт максимально удобным для посетителей, в этом деле важна каждая мелочь. Такой мелочью являются хлебные крошки, которые показывают путь пользователя, и не дадут ему заблудиться. В этом уроке я покажу, как их быстро сделать!
Breadcrumbs (английское название), указывают путь куда зашел пользователь на сайте, чтобы дать ему возможность вернуться и не забыть в каком разделе он сейчас находится.
Что такое и почему называются – хлебные крошки
Помните сказку про брата и сестру Гретель и Гензель, они шли, чтобы не потеряться сыпали на землю хлеб. Тут так же мы проставляем ссылки где сейчас находится человек и как ему вернутся.
Есть несколько причин зачем их добавлять:
- Дополнительная перелинковка.
- Удобство использования – при большом количестве рубрик в вордпресс, можно запутаться где был ранее, а такое дополнение покажет место.
- Поведенческие факторы, конечно не намного, но добиться большей открываемости можно.
- Улучшение снипета в поисковой выдаче (необходима разметка shema).
Единственный минус, что настроить их для новичка сложновато, но в статье мы разберем подробно все аспекты и проблемы.
Как сделать в Yoast SEO
В плагине Yoast SEO есть встроенный модуль добавления и управления хлебными крошками.
Если используете другой инструмент сео оптимизации в WordPress, то пролистайте ниже.
Переходим в раздел Отображение в поисковой выдаче и находим Вкладку Хлебные крошки. Отмечу несколько моментов, на которые обращаем внимание.
- Чтобы включить функцию, передвигаем ползунок в положение включено.
- Заполняем по желанию разделитель и задаем для разных страниц префиксы.
- Последний элемент в цепочке навигации можно вывести жирным цветом.
- Таксономию для записей лучше выставить Рубрика, чтобы показать подрубрику поста.
После сохранения настроек, на блоге ничего не появиться, потому что система не знает, где показывать крошки в WordPress. С помощью функции указываем где их отобразить.
<?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb( '<p id="breadcrumbs">','</p>' ); } ?>
Добавим его в шаблон записей, по умолчанию это документ single.php. Хочу добавить сразу после заголовка h1, вот здесь.
Побродив по single.php тега h1 я не нашел. Пришлось рыть глубже, нашел в папке templates-parts и в ней content-single, определил тег h1 и вставил php, представленный выше.
- Открываем Редактор тем.
- Находим документ WordPress для вставки.
- Определяем место где нужен расположить.
- Вставляем строчки.
- Нажимаем Обновить.
После обновления переходим в любой пост и смотрим, есть ли на экране результат. Не забываем включить в YoastSeo функцию хлебных крошек.
Для более презентабельного вида советую добавить CSS. Так же Yoast добавил в редактор записей WordPress свой блок для изменения названия в конце цепочки. Переходим в редактор и идем в меню Дополнительно.
Не забываем обновить, смотрим что получилось.
То есть название конечной надписи не совпадает с заголовком, что является преимуществом, и не дает переспама в статье. Так же Yoast поддерживает цепочки с подрубриками, что является плюсом когда путь длинный.
Настроить плагином Breadcrumb
Открытием стал плагин Breadcrumb, простой и постоянно обновляющийся. Устанавливается стандартно из панели в поиске, в выдаче выглядит так.
После установки в панели появится одноименный пункт, заходим в него и заполняем поля.
Все пункты интуитивно понятны, настраиваем на вкладке Options, что должно отображаться, в style внешний вид, в shortcodes копируем и вставляем на блог. Для вставки в шаблон используем php, а для постов и страниц шорткод. Инструмент может вывести подрубрики у любых элементов.
Куда заливать знаем, разбирались в разделе про Yoast. Существует еще один это NavXT, вебмастера скажут, что это отличный вариант, но мне не понравился, потому что такая мелочь создается быстро и легко, а в настройках NavXT много мусора.
Создаем хлебные крошки без плагина
Процедура добавления хлебных крошек без плагина, занимает времени не больше чем с ним, система та же, только вместо установки дополнения, мы прописываем функцию в тему. Берем конфигурацию написанную ниже и вставляем в function.php перед закрывающим тегом ?>, если его нет, то просто в самый низ.
function wpcourses_breadcrumb( $sep = ' > ' ) { global $post; $out = ''; $out .= '<div class="wpcourses-breadcrumbs">'; $out .= '<a href="' . home_url( '/' ) . '">Главная</a>'; $out .= '<span class="wpcourses-breadcrumbs-sep">' . $sep . '</span>'; if ( is_single() ) { $terms = get_the_terms( $post, 'category' ); if ( is_array( $terms ) && $terms !== array() ) { $out .= '<a href="' . get_term_link( $terms[0] ) . '">' . $terms[0]->name . '</a>'; $out .= '<span class="wpcourses-breadcrumbs-sep">' . $sep . '</span>'; } } if ( is_singular() ) { $out .= '<span class="wpcourses-breadcrumbs-last">' . get_the_title() . '</span>'; } if ( is_search() ) { $out .= get_search_query(); } $out .= '</div><!--.wpcourses-breadcrumbs-->'; return $out; }
Далее прописываем вывод ссылок в шаблон, куда вставлять знаем. Видите в скобках знак / он задает разделитель между элементами пути, можно его менять на свой.
Для красоты добавим стили для оформления, предусмотрены три параметра:
- Кс классом wpcourses-breadcrumbs, можно задать стили.
- Wpcourses-breadcrumbs-sep — класс у разделителя.
- Wpcourses-breadcrumbs-last — класс у последнего пункта.
Настраиваем по своему вкусу, если есть знания в CSS. Для примера дам свой вариант.
.wpcourses-breadcrumbs {background: #d2d2d2; padding: 3px 10px; margin-bottom:10px;} .wpcourses-breadcrumbs a {color:black} .wpcourses-breadcrumbs-sep {color:#09829e} .wpcourses-breadcrumbs-last {text-decoration:underline}
Вставляем в style.css, объясню что означает:
- Задал стили для всего блока хлебных крошек, задний фон, внутренний отступ и нижний, чтобы не прилипал к области контента.
- Ссылки сделал черного цвета.
- Цвет разделителя определил синим.
- У последнего пункта добавил подчеркивание.
Так выглядят крошки визуально на страницах ресурса.
На этом у меня все. Всем пока!
Навигационная цепочка отличный метод перелинковки и дополнения юзабилити сайта, если она не реализована в вашем шаблоне, то рекомендую сделать хлебные крошки от Yoast SEO.
Конечно если не пользуетесь самим YoastSEO плагином, то не стоит устанавливать его только ради этого, другие методы рассказаны в статье.
Активируем функцию хлебных крошек с schema org
Для начала нужно проверить, возможно тема поддерживает вывод хлебных крошек от Yoast SEO. Активируем соответствующий раздел.
Далее проверяйте сайт, возможно где-то крошки появились: в записях, категориях, архивах. Шаблоны бывают разные, некоторые разработчики криво или не до конца могут интегрировать такие мелочи, тем более в бесплатные продукты. Если они не появилось, то переходим к следующему шагу.
Вставка кода вывода breadcrumb от Yoast
Для вывода breadcrumbs есть специальный код, его вставляем в то место где нужно визуально их видеть.
<?php
/* breadcrumb Yoast */
if ( function_exists( 'yoast_breadcrumb' ) ) :
yoast_breadcrumb( '<div id="breadcrumbs">', '</div>' );
endif;
?>
Приведу на примере записей, за их вывод отвечает файл single php, но бывает, что он составляется из разных документов, поэтому искать придется глубже. Покажу на примере стандартного редактора в админке WordPress, но вы лучше действуйте через FTP с применением дочерней темы. Хочу вставить хлебные крошки после заголовка.
- Находим файл для показа, например, single.
- Нашел заголовок, об этом говорит инструкция the_title.
- Сохранил изменения.
- Проверяю работу.
Видим множество символов, надпись «Вы здесь», между крошками разделители, далее все это будем менять, не забудьте очистить кэш в плагине кэширования и обновить страницу в браузере с помощью ctrl+f5. Главной опасностью тут является полностью дублирующийся заголовок в последнем элементе, этого быть не должно, разберемся далее как исправить.
Чтобы убрать с главной показ ХБ, тут придется править код шаблона и создавать свой обработчик, потому что универсального метода нет, все темы разные.
Шорткод (shortcode) для вставки хлебных крошек
Если необходимо точечно вставить хлебные крошки от плагина Yoast SEO на сайт, но не во всех сущностях, то можно воспользоваться шорткодом, просто вставляете его, когда пишите или создаете рубрики, и он преобразуется в путь до документа.
Home »
Настройка внешнего вида
Когда вставляли код, то могли заметить, что есть идентификатор breadcrumbs, его не трогаем. Что нам мешает добавить класс, и стилизовать их с помощью стилей, можно в инструкцию добавить такой текст (возьму только одну строку).
yoast_breadcrumb( '<div id="breadcrumbs class="bradcrumbs-yoast">', '</div>' );
Если есть знания верстки, то сменить цвета и размеры всех элементов просто. Перейдем к встроенным настройкам в Yoast SEO.
- Переходим опять туда где включали хлебные крошки.
- Первые 6 полей делаем как хочется, чтобы отображались bredcrumbs, сравните тот скриншот, который показывал выше и поймете где и что выводится. Разделитель или separator можно менять разными методами, даже при помощи emoji.
- Показывать страницу блога – подразумевает что завершающий элемент не будет отображаться, то есть дубля заголовка. Но потестировав на множестве шаблонов, убедился что не работает, далее разберемся как этого добиться.
- Выделение жирный последней крошки, думаю понятный пункт.
- Таксономия – тут важно выбрать что будет отображаться в пути до статьи. Для записей советую поставить «Рубрика», чтобы был показан весь путь вложенности материала вплоть до подрубрик, ниже показал где это отображается.
- Если установлен WooCommerce, то для него так же будет раздел с настройкой вида основной таксономии.
Дальше идут аналогичные спойлеры для категорий, страниц, архивов и других сущностей, попробуйте менять значения и увидите как меняется навигационная цепочка.
Для начала разберемся с последней дублирующейся надписью вордпресс. Единственный способ это править каждую хлебную крошку в Yoast SEO вручную. В каждой сущности WordPress йоаст под редактором вставляет свой блок, нажимая на спойлер «Дополнительно», там открывается целая панель настроек, среди них canonical
, с которым нужно быть осторожней, и поле для изменения конечного пункта в цепочке.
Сохраняем и смотрим что изменилось на сайте.
Видим что изменения применились, теперь дубля нет. Но что делать если на сайте много статей, и править каждую огромный труд? По делу нужно все таки найти время, пройтись по всем страницам и исправить везде. Иначе предлагаю просто скрыть завершающую итерацию при помощи дополнительных инструментов.
Единственное решение нашел в плагине ClearfyPRO, вот все пункты которые он исправляет в Yoast.
Есть еще вариант заменить на тайтл, который прописываем в этом же блоке Yoast SEO. Но не считаю это правильно, потому что так же идет дубликат текста, хотя и не такой явный. В общем отметили первый переключатель и смотрим что получилось.
Видим завершающий пункт пропал, а остальное сохранилось. Считаю это лучшим методом если не хочется менять все вручную. Дополню что Clearfy не только правит ошибки Yoast SEO, но затрагивает еще 49 проблем, например теги Application. Для читателей предоставляю скидку, жмите на кнопку.
Как удалить хлебные крошки от Йоаст СЕО
Существует вопрос как удалить данную навигацию если она предусмотрена в шаблоне:
- Деактивируйте их отображение в панели настроек Yoast.
- Если первого пункта было не достаточно, то ищем код вывода в файлах темы и стираем его.
Закончу пост, мы научились работать с хлебными крошками в плагине Yoast SEO, инструмент универсальный, потому что дополнительно использует в себе микроразметку schema org, но не в формате microdata.
Вы наверняка уже знакомы с понятием «Хлебные крошки» в веб-разработке и возможно даже приходилось реализовывать эти самые «крошки» на WordPress.
Хлебные крошки (с англ. breadcrumbs) — это элемент навигации по сайту, выглядит как путь от главной страницы до текущей, на которой находится пользователь. Более логичное название — навигационная цепочка.
Хлебные крошки называются так по ироничной аналогии со сказкой, в которой дети, когда их завели в лес во второй раз, не смогли найти обратную дорогу, так как на этот раз вместо маленьких камешков они оставляли за собой хлебные крошки, впоследствии склеванные лесными птицами.
Выглядят «хлебные крошки» так:
Главная страница » Раздел » Подраздел » Текущая страница
«Хлебные крошки» наиболее рекомендуются сайтам со сложной структурой разделов (рубрик), ведь с ними гораздо легче и понятнее разобраться посетителю в каком разделе сайта он находится и если нужно, можно легко подняться на уровень выше и осмотреть ветку целиком.
Теперь, после короткого ликбеза, буду делиться очередной функцией для WordPress, реализовывающей всю цепочку от главной страницы до текущей на всех типах страниц, включая таксономии и произвольные типы записей.
Функция будет показывать «хлебные крошки» для страниц следующих типов:
- Главная страница;
- Постоянная страница;
- Страница любого древовидного типа записи;
- Страница поста;
- Страница вложения (учитывается прикреплено вложение к записи или нет);
- Любой не древовидный тип записи (прикрепленный к любой таксономии, например, к стандартным «рубрикам»);
- Страница рубрики;
- Страница меток;
- Страница таксономии (как древовидной, так и одноуровневой (метки));
- Страницы архивов по датам, авторам;
- Страница пагинации для всех типов где предусмотрена пагинация (отображается как: Главная» Рубрика» Страница 2,3,4).
- Поддерживает микроразметку. Инструменты для проверки: для Яндекса и для Google.
Из особенностей, которые я не встретил в аналогичных функциях представленных в сети, стоит отметить правильный показ «хлебных крошек» для произвольных типов записей и произвольных таксономий, также в аналогах страница пагинации отображалась как, например, «Рубрика (страница 2)», а не » Рубрика> Страница 2″, что, на мой взгляд, неправильно.
Для визуального восприятия, взгляните как выглядят «хлебные крошки» разных типов:
Также, я старался написать как можно менее прожорливый вариант функции.
Что касается плагина Breadcrumb NavXT, который повсеместно рекомендуется для вывода «хлебных крошек» — он мне не понравился из-за своей громоздкости. Моя функция не хуже, а в чем-то даже лучше: за счет функциональности, компактности и местами быстродействия!
Также функция поддерживает микроразметки: schema.org или RDF, смотрите параметр ‘markup’.
<?php /** * Хлебные крошки для WordPress (breadcrumbs) * * @param string $sep Разделитель. По умолчанию ' » '. * @param array $l10n Для локализации. См. переменную `$default_l10n`. * @param array $args Опции. Смотрите переменную `$def_args`. * * @return void Выводит на экран HTML код * * version 3.3.3 */ function kama_breadcrumbs( $sep = ' » ', $l10n = array(), $args = array() ){ $kb = new Kama_Breadcrumbs; echo $kb->get_crumbs( $sep, $l10n, $args ); } class Kama_Breadcrumbs { public $arg; // Локализация static $l10n = [ 'home' => 'Главная', 'paged' => 'Страница %d', '_404' => 'Ошибка 404', 'search' => 'Результаты поиска по запросу - <b>%s</b>', 'author' => 'Архив автора: <b>%s</b>', 'year' => 'Архив за <b>%d</b> год', 'month' => 'Архив за: <b>%s</b>', 'day' => '', 'attachment' => 'Медиа: %s', 'tag' => 'Записи по метке: <b>%s</b>', 'tax_tag' => '%1$s из "%2$s" по тегу: <b>%3$s</b>', // tax_tag выведет: 'тип_записи из "название_таксы" по тегу: имя_термина'. // Если нужны отдельные холдеры, например только имя термина, пишем так: 'записи по тегу: %3$s' ]; // Параметры по умолчанию static $args = [ // выводить крошки на главной странице 'on_front_page' => true, // показывать ли название записи в конце (последний элемент). Для записей, страниц, вложений 'show_post_title' => true, // показывать ли название элемента таксономии в конце (последний элемент). Для меток, рубрик и других такс 'show_term_title' => true, // шаблон для последнего заголовка. Если включено: show_post_title или show_term_title 'title_patt' => '<span class="kb_title">%s</span>', // показывать последний разделитель, когда заголовок в конце не отображается 'last_sep' => true, // 'markup' - микроразметка. Может быть: 'rdf.data-vocabulary.org', 'schema.org', '' - без микроразметки // или можно указать свой массив разметки: // array( 'wrappatt'=>'<div class="kama_breadcrumbs">%s</div>', 'linkpatt'=>'<a href="%s">%s</a>', 'sep_after'=>'', ) 'markup' => 'schema.org', // приоритетные таксономии, нужно когда запись в нескольких таксах 'priority_tax' => [ 'category' ], // 'priority_terms' - приоритетные элементы таксономий, когда запись находится в нескольких элементах одной таксы одновременно. // Например: array( 'category'=>array(45,'term_name'), 'tax_name'=>array(1,2,'name') ) // 'category' - такса для которой указываются приор. элементы: 45 - ID термина и 'term_name' - ярлык. // порядок 45 и 'term_name' имеет значение: чем раньше тем важнее. Все указанные термины важнее неуказанных. 'priority_terms' => [], // добавлять rel=nofollow к ссылкам? 'nofollow' => false, // служебные 'sep' => '', 'linkpatt' => '', 'pg_end' => '', ]; function get_crumbs( $sep, $l10n, $args ){ global $post, $wp_post_types; self::$args['sep'] = $sep; // Фильтрует дефолты и сливает $loc = (object) array_merge( apply_filters( 'kama_breadcrumbs_default_loc', self::$l10n ), $l10n ); $arg = (object) array_merge( apply_filters( 'kama_breadcrumbs_default_args', self::$args ), $args ); $arg->sep = '<span class="kb_sep">' . $arg->sep . '</span>'; // дополним // упростим $sep = & $arg->sep; $this->arg = & $arg; // микроразметка --- if(1){ $mark = & $arg->markup; // Разметка по умолчанию if( ! $mark ){ $mark = [ 'wrappatt' => '<div class="kama_breadcrumbs">%s</div>', 'linkpatt' => '<a href="%s">%s</a>', 'sep_after' => '', ]; } // rdf elseif( $mark === 'rdf.data-vocabulary.org' ){ $mark = [ 'wrappatt' => '<div class="kama_breadcrumbs" prefix="v: http://rdf.data-vocabulary.org/#">%s</div>', 'linkpatt' => '<span typeof="v:Breadcrumb"><a href="%s" rel="v:url" property="v:title">%s</a>', 'sep_after' => '</span>', // закрываем span после разделителя! ]; } // schema.org elseif( $mark === 'schema.org' ){ $mark = [ 'wrappatt' => '<div class="kama_breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">%s</div>', 'linkpatt' => '<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="%s" itemprop="item"><span itemprop="name">%s</span></a></span>', 'sep_after' => '', ]; } elseif( ! is_array( $mark ) ){ die( __CLASS__ . ': "markup" parameter must be array.' ); } $wrappatt = $mark['wrappatt']; $arg->linkpatt = $arg->nofollow ? str_replace( '<a ', '<a rel="nofollow"', $mark['linkpatt'] ) : $mark['linkpatt']; $arg->sep .= $mark['sep_after'] . "\n"; } $linkpatt = $arg->linkpatt; // упростим $q_obj = get_queried_object(); // может это архив пустой таксы $ptype = null; if( ! $post ){ if( isset( $q_obj->taxonomy ) ){ $ptype = $wp_post_types[ get_taxonomy( $q_obj->taxonomy )->object_type[0] ]; } } else{ $ptype = $wp_post_types[ $post->post_type ]; } // paged $arg->pg_end = ''; $paged_num = get_query_var( 'paged' ) ?: get_query_var( 'page' ); if( $paged_num ){ $arg->pg_end = $sep . sprintf( $loc->paged, (int) $paged_num ); } $pg_end = $arg->pg_end; // упростим $out = ''; if( is_front_page() ){ return $arg->on_front_page ? sprintf( $wrappatt, ( $paged_num ? sprintf( $linkpatt, get_home_url(), $loc->home ) . $pg_end : $loc->home ) ) : ''; } // страница записей, когда для главной установлена отдельная страница. elseif( is_home() ){ $out = $paged_num ? ( sprintf( $linkpatt, get_permalink( $q_obj ), esc_html( $q_obj->post_title ) ) . $pg_end ) : esc_html( $q_obj->post_title ); } elseif( is_404() ){ $out = $loc->_404; } elseif( is_search() ){ $out = sprintf( $loc->search, esc_html( $GLOBALS['s'] ) ); } elseif( is_author() ){ $tit = sprintf( $loc->author, esc_html( $q_obj->display_name ) ); $out = ( $paged_num ? sprintf( $linkpatt, get_author_posts_url( $q_obj->ID, $q_obj->user_nicename ) . $pg_end, $tit ) : $tit ); } elseif( is_year() || is_month() || is_day() ){ $y_url = get_year_link( $year = get_the_time( 'Y' ) ); if( is_year() ){ $tit = sprintf( $loc->year, $year ); $out = ( $paged_num ? sprintf( $linkpatt, $y_url, $tit ) . $pg_end : $tit ); } // month day else{ $y_link = sprintf( $linkpatt, $y_url, $year ); $m_url = get_month_link( $year, get_the_time( 'm' ) ); if( is_month() ){ $tit = sprintf( $loc->month, get_the_time( 'F' ) ); $out = $y_link . $sep . ( $paged_num ? sprintf( $linkpatt, $m_url, $tit ) . $pg_end : $tit ); } elseif( is_day() ){ $m_link = sprintf( $linkpatt, $m_url, get_the_time( 'F' ) ); $out = $y_link . $sep . $m_link . $sep . get_the_time( 'l' ); } } } // Древовидные записи elseif( is_singular() && $ptype->hierarchical ){ $out = $this->_add_title( $this->_page_crumbs( $post ), $post ); } // Таксы, плоские записи и вложения else { $term = $q_obj; // таксономии // определяем термин для записей (включая вложения attachments) if( is_singular() ){ // изменим $post, чтобы определить термин родителя вложения if( is_attachment() && $post->post_parent ){ $save_post = $post; // сохраним $post = get_post( $post->post_parent ); } // учитывает если вложения прикрепляются к таксам древовидным - все бывает :) $taxonomies = get_object_taxonomies( $post->post_type ); // оставим только древовидные и публичные, мало ли. $taxonomies = array_intersect( $taxonomies, get_taxonomies( [ 'hierarchical' => true, 'public' => true, ] ) ); if( $taxonomies ){ // сортируем по приоритету if( ! empty( $arg->priority_tax ) ){ usort( $taxonomies, static function( $a, $b ) use ( $arg ) { $a_index = array_search( $a, $arg->priority_tax ); if( $a_index === false ){ $a_index = 9999999; } $b_index = array_search( $b, $arg->priority_tax ); if( $b_index === false ){ $b_index = 9999999; } return ( $b_index === $a_index ) ? 0 : ( $b_index ID, $taxname ) ){ // проверим приоритетные термины для таксы $prior_terms = &$arg->priority_terms[ $taxname ]; if( $prior_terms && count( $terms ) > 2 ){ foreach( (array) $prior_terms as $term_id ){ $filter_field = is_numeric( $term_id ) ? 'term_id' : 'slug'; $_terms = wp_list_filter( $terms, [ $filter_field => $term_id ] ); if( $_terms ){ $term = array_shift( $_terms ); break; } } } else{ $term = array_shift( $terms ); } break; } } } // вернем обратно (для вложений) if( isset( $save_post ) ){ $post = $save_post; } } // вывод // все виды записей с терминами или термины if( $term && isset( $term->term_id ) ){ $term = apply_filters( 'kama_breadcrumbs_term', $term ); // attachment if( is_attachment() ){ if( ! $post->post_parent ){ $out = sprintf( $loc->attachment, esc_html( $post->post_title ) ); } else{ if( ! $out = apply_filters( 'attachment_tax_crumbs', '', $term, $this ) ){ $_crumbs = $this->_tax_crumbs( $term, 'self' ); $parent_tit = sprintf( $linkpatt, get_permalink( $post->post_parent ), get_the_title( $post->post_parent ) ); $_out = implode( $sep, [ $_crumbs, $parent_tit ] ); $out = $this->_add_title( $_out, $post ); } } } // single elseif( is_single() ){ if( ! $out = apply_filters( 'post_tax_crumbs', '', $term, $this ) ){ $_crumbs = $this->_tax_crumbs( $term, 'self' ); $out = $this->_add_title( $_crumbs, $post ); } } // не древовидная такса (метки) elseif( ! is_taxonomy_hierarchical( $term->taxonomy ) ){ // метка if( is_tag() ){ $out = $this->_add_title( '', $term, sprintf( $loc->tag, esc_html( $term->name ) ) ); } // такса elseif( is_tax() ){ $post_label = $ptype->labels->name; $tax_label = $GLOBALS['wp_taxonomies'][ $term->taxonomy ]->labels->name; $out = $this->_add_title( '', $term, sprintf( $loc->tax_tag, $post_label, $tax_label, esc_html( $term->name ) ) ); } } // древовидная такса (рибрики) elseif( ! $out = apply_filters( 'term_tax_crumbs', '', $term, $this ) ){ $_crumbs = $this->_tax_crumbs( $term, 'parent' ); $out = $this->_add_title( $_crumbs, $term, esc_html( $term->name ) ); } } // влоежния от записи без терминов elseif( is_attachment() ){ $parent = get_post( $post->post_parent ); $parent_link = sprintf( $linkpatt, get_permalink( $parent ), esc_html( $parent->post_title ) ); $_out = $parent_link; // вложение от записи древовидного типа записи if( is_post_type_hierarchical( $parent->post_type ) ){ $parent_crumbs = $this->_page_crumbs( $parent ); $_out = implode( $sep, [ $parent_crumbs, $parent_link ] ); } $out = $this->_add_title( $_out, $post ); } // записи без терминов elseif( is_singular() ){ $out = $this->_add_title( '', $post ); } } // замена ссылки на архивную страницу для типа записи $home_after = apply_filters( 'kama_breadcrumbs_home_after', '', $linkpatt, $sep, $ptype ); if( '' === $home_after ){ // Ссылка на архивную страницу типа записи для: отдельных страниц этого типа; архивов этого типа; таксономий связанных с этим типом. if( $ptype && $ptype->has_archive && ! in_array( $ptype->name, [ 'post', 'page', 'attachment' ] ) && ( is_post_type_archive() || is_singular() || ( is_tax() && in_array( $term->taxonomy, $ptype->taxonomies ) ) ) ){ $pt_title = $ptype->labels->name; // первая страница архива типа записи if( is_post_type_archive() && ! $paged_num ){ $home_after = sprintf( $this->arg->title_patt, $pt_title ); } // singular, paged post_type_archive, tax else{ $home_after = sprintf( $linkpatt, get_post_type_archive_link( $ptype->name ), $pt_title ); $home_after .= ( ( $paged_num && ! is_tax() ) ? $pg_end : $sep ); // пагинация } } } $before_out = sprintf( $linkpatt, home_url(), $loc->home ) ! ( $home_after ? $sep . $home_after : ( $out ? $sep : '' ) ); $out = apply_filters( 'kama_breadcrumbs_pre_out', $out, $sep, $loc, $arg ); $out = sprintf( $wrappatt, $before_out . $out ); return apply_filters( 'kama_breadcrumbs', $out, $sep, $loc, $arg ); } function _page_crumbs( $post ) { $parent = $post->post_parent; $crumbs = []; while( $parent ){ $page = get_post( $parent ); $crumbs[] = sprintf( $this->arg->linkpatt, get_permalink( $page ), esc_html( $page->post_title ) ); $parent = $page->post_parent; } return implode( $this->arg->sep, array_reverse( $crumbs ) ); } function _tax_crumbs( $term, $start_from = 'self' ) { $termlinks = []; $term_id = ( $start_from === 'parent' ) ? $term->parent : $term->term_id; while( $term_id ){ $term = get_term( $term_id, $term->taxonomy ); $termlinks[] = sprintf( $this->arg->linkpatt, get_term_link( $term ), esc_html( $term->name ) ); $term_id = $term->parent; } if( $termlinks ){ return implode( $this->arg->sep, array_reverse( $termlinks ) ); } return ''; } // добалвяет заголовок к переданному тексту, с учетом всех опций. Добавляет разделитель в начало, если надо. function _add_title( $add_to, $obj, $term_title = '' ) { // упростим. $arg = &$this->arg; // $term_title чиститься отдельно, теги моугт быть. $title = $term_title ?: esc_html( $obj->post_title ); $show_title = $term_title ? $arg->show_term_title : $arg->show_post_title; // пагинация if( $arg->pg_end ){ $link = $term_title ? get_term_link( $obj ) : get_permalink( $obj ); $add_to .= ( $add_to ? $arg->sep : '' ) . sprintf( $arg->linkpatt, $link, $title ) . $arg->pg_end; } // дополняем - ставим sep elseif( $add_to ){ if( $show_title ){ $add_to .= $arg->sep . sprintf( $arg->title_patt, $title ); } elseif( $arg->last_sep ){ $add_to .= $arg->sep; } } // sep будет потом. elseif( $show_title ){ $add_to = sprintf( $arg->title_patt, $title ); } return $add_to; } } /** * Изменения: * 3.3 - новые хуки: attachment_tax_crumbs, post_tax_crumbs, term_tax_crumbs. Позволяют дополнить крошки таксономий. * 3.2 - баг с разделителем, с отключенным 'show_term_title'. Стабилизировал логику. * 3.1 - баг с esc_html() для заголовка терминов - с тегами получалось криво. * 3.0 - Обернул в класс. Добавил опции: 'title_patt', 'last_sep'. Доработал код. Добавил пагинацию для постов. * 2.5 - ADD: Опция 'show_term_title' * 2.4 - Мелкие правки кода * 2.3 - ADD: Страница записей, когда для главной установлена отделенная страница. * 2.2 - ADD: Link to post type archive on taxonomies page * 2.1 - ADD: $sep, $loc, $args params to hooks * 2.0 - ADD: в фильтр 'kama_breadcrumbs_home_after' добавлен четвертый аргумент $ptype * 1.9 - ADD: фильтр 'kama_breadcrumbs_default_loc' для изменения локализации по умолчанию * 1.8 - FIX: заметки, когда в рубрике нет записей * 1.7 - Улучшена работа с приоритетными таксономиями. */
Вставлять этот код нужно в файл шаблона functions.php
или непосредственно в тот файл где вызывается функция.
Вызывать функцию нужно в шаблоне, в том месте, где должны выводится крошки, так:
<?php if( function_exists('kama_breadcrumbs') ) kama_breadcrumbs(); ?>
Если нужно поменять разделитель между ссылками, укажите первый параметр:
<?php if( function_exists('kama_breadcrumbs') ) kama_breadcrumbs(' » '); ?>
Примеры использование фильтров
#1 Установка параметров через фильтр
Измени дефолтные параметры через фильтр
add_filter( 'kama_breadcrumbs_default_args', function( $args ){ $args['on_front_page'] = 0; $args['show_post_title'] = ''; $args['priority_tax'] = array('mytax'); return $args; } );
#3 Пример перевода крошек на английский
Эти примеры показывают как перевести крошки на нужный язык или просто изменить дефолтные значения:
Вариант 1
При вызове функции нужно указать строки локализации так:
// Локализация if( function_exists( 'kama_breadcrumbs' ) ){ $myl10n = array( 'home' => 'Front page', 'paged' => 'Page %d', '_404' => 'Error 404', 'search' => 'Search results by query - <b>%s</b>', 'author' => 'Author archve: <b>%s</b>', 'year' => 'Archive by <b>%d</b> год', 'month' => 'Archive by: <b>%s</b>', 'day' => '', 'attachment' => 'Media: %s', 'tag' => 'Posts by tag: <b>%s</b>', 'tax_tag' => '%1$s from "%2$s" by tag: <b>%3$s</b>', // tax_tag выведет: 'тип_записи из "название_таксы" по тегу: имя_термина'. // Если нужны отдельные холдеры, например только имя термина, пишем так: 'записи по тегу: %3$s' ); kama_breadcrumbs( ' » ', $myl10n ); }
Вариант 2
C версии 1.9. Можно использовать хук kama_breadcrumbs_default_loc
, чтобы для каждого вызова одно и тоже не указывать. Для этого рядом с исходным кодом крошек добавьте такой хук:
add_filter( 'kama_breadcrumbs_default_loc', function( $l10n ){ // Локализация return array( 'home' => 'Front page', 'paged' => 'Page %d', '_404' => 'Error 404', 'search' => 'Search results by query - <b>%s</b>', 'author' => 'Author archve: <b>%s</b>', 'year' => 'Archive by <b>%d</b> год', 'month' => 'Archive by: <b>%s</b>', 'day' => '', 'attachment' => 'Media: %s', 'tag' => 'Posts by tag: <b>%s</b>', 'tax_tag' => '%1$s from "%2$s" by tag: <b>%3$s</b>', // tax_tag выведет: 'тип_записи из "название_таксы" по тегу: имя_термина'. // Если нужны отдельные холдеры, например только имя термина, пишем так: 'записи по тегу: %3$s' ); } );
Далее, используйте вызов в шаблоне как обычно, крошки будут переведены на англ.:
function_exists( 'kama_breadcrumbs' ) && kama_breadcrumbs();
Установки через хук имеют меньший приоритет, чем через вызов функции из варианта 1. Это значит, что если указать локализацию через хук, то потом через вызов можно перебить локализацию отдельных строк.
#3 Добавление произвольной ссылки в начало крошек
Допустим нам нужно добавить после пункта «Главная» ссылку на страницу 7, если в текущий момент мы находимся в категории 5 или в её дочерней категории (учитывается один уровень вложенности).
Для этого добавьте такой хук рядом с кодом крошек:
add_action( 'kama_breadcrumbs_home_after', 'my_breadcrumbs_home_after', 10, 4 ); function my_breadcrumbs_home_after( $false, $linkpatt, $sep, $ptype ){ // если мы в рубрике с ID 5 или в дочерней рубрике, // то дополним начало крошек ссылкой на страницу с ID 7 $qo = get_queried_object(); if( is_category() && ( $qo->term_id == 5 || $qo->parent == 5 ) ){ $page = get_post
; return sprintf( $linkpatt, get_permalink($page), $page->post_title ) . $sep; } return $false; }
#4 Добавление еще таксономий в крошки
По умолчанию в крошках обрабатывается только одна таксономи. Но иногда нужно несколько, для этого в версии 3.3 я вставил хуки: ‘attachment_tax_crumbs’
, ‘post_tax_crumbs’
, ‘term_tax_crumbs’
.
add_filter( 'term_tax_crumbs', 'more_tax_crumbs', 10, 3 ); add_filter( 'post_tax_crumbs', 'more_tax_crumbs', 10, 3 ); function more_tax_crumbs( $empty, $term, $that ){ $is_post_filter = doing_filter('post_tax_crumbs'); // else 'term_tax_crumbs' if( ( $is_post_filter && is_singular('realty') ) || is_tax('country') ){ global $post; $out = ''; $out = $that->_tax_crumbs( $term, 'self' ) . $that->arg->sep; // базовая такса - country // тип сделки $term = get_query_var('type_deal'); if( $term && ( $term = get_term_by('slug', $term, 'type_deal') ) ) $out .= $that->_tax_crumbs( $term, 'self' ) . $that->arg->sep; // тип сделки // тип недвижимости $term = get_query_var('type_realty'); if( $term && ( $term = get_term_by('slug', $term, 'type_realty') ) ){ // запись if( $is_post_filter ){ $_crumbs = $that->_tax_crumbs( $term, 'self' ); $out .= $that->_add_title( $_crumbs, $post ); } // такса else { $_crumbs = $that->_tax_crumbs( $term, 'parent' ); $out .= $that->_add_title( $_crumbs, $term, esc_html($term->name) ); } } return $out; } return $empty; }
Другой вариант крошек
Этот код подойдет не только к WordPress, а вообще к любому движку.
Для WordPress он подойдет:
- во-первых, если включены ЧПУ
; - во-вторых, если в ссылках присутствуют названия категории;
- в-третьих, если названия статей и категорий в УРЛ пишутся в кириллице
или это вообще англ. блог.
В других случаях будет работать, но, думаю, как-то не очень получится. Такие условия, потому что этот вариант разбирает ссылку на страницу
(УРЛ) и по её элементам создает хлебные крошки. Ссылка разбивается разделителем /
.
Допустим у нас УРЛ на статью имеет вид:
http://example.com/рецепты/торт/готовим наполеон
тогда, мы получим цепочку крошек вида:
» » » Готовим наполеон
function breadcrumbs( $separator = ' » ', $home = 'Главная' ) { $path = array_filter( explode( '/', parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH ) ) ); $base_url = ( $_SERVER['HTTPS'] ? 'https' : 'http' ) . '://' . $_SERVER['HTTP_HOST'] . '/'; $breadcrumbs = array("$home"); $last = end( array_keys( $path ) ); foreach( $path as $x => $crumb ){ $title = ucwords( str_replace( [ '.php', '_' ], [ '', ' ' ], $crumb ) ); if( $x != $last ){ $breadcrumbs[] = ''. $title .''; } else { $breadcrumbs[] = $title; } } return implode( $separator, $breadcrumbs ); }
Breadcrumbs (английское название), указывают путь куда зашел пользователь на сайте, чтобы дать ему возможность вернуться и не забыть в каком разделе он сейчас находится.
Что такое и почему называются – хлебные крошки
Помните сказку про брата и сестру Дензель и Греттель, они шли, чтобы не потеряться сыпали на землю хлеб. Тут так же мы проставляем ссылки где сейчас находится человек и как ему вернутся.
Есть несколько причин зачем их добавлять:
- Дополнительная перелинковка
- Удобство использования – при большом количестве рубрик в вордпресс, можно запутаться где был ранее, а такое дополнение покажет место
- Поведенческие факторы, конечно не намного, но добиться большей открываемости можно
- Улучшение снипета в поисковой выдаче (необходима разметка shema)
Единственный минус, что настроить их для новичка сложновато, но в статье мы разберем подробно все аспекты и проблемы.
Как сделать в YoastSEO
В плагине YoastSEO есть встроенный модуль добавления и управления хлебными крошками. Если используете другой инструмент сео оптимизации в WordPress
, то пролистайте ниже.
Переходим в раздел Отображение в поисковой выдаче и находим Вкладку Хлебные крошки. Отмечу несколько моментов, на которые обращаем внимание.
- Чтобы включить функцию, передвигаем ползунок в положение включено
- Заполняем по желанию разделитель и задаем для разных страниц префиксы
- Последний элемент в цепочке навигации можно вывести жирным цветом
- Таксономию для записей лучше выставить Рубрика, чтобы показать подрубрику поста
После сохранения настроек, на блоге ничего не появиться, потому что система не знает, где показывать крошки в WordPress. С помощью функции указываем где отобразить BC.
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
Добавим его в шаблон записей, по умолчанию это документ single.php. Хочу добавить сразу после заголовка h1, вот здесь.
Побродив по single.php тега h1 я не нашел. Пришлось рыть глубже, нашел в папке templates-parts и в ней content-single, определил тег h1 и вставил php, представленный выше.
- Открываем Редактор тем
- Находим документ WordPress для вставки
- Определяем место где нужен расположить
- Вставляем строчки
- Нажимаем Обновить
После обновления переходим в любой пост и смотрим, есть ли на экране результат. Не забываем включить в YoastSeo функцию хлебных крошек.
Для более презентабельного вида советую добавить CSS. Так же Yoast добавил в редактор записей WordPress свой блок для изменения названия в конце цепочки. Переходим в редактор и идем в меню Дополнительно.
Не забываем обновить, смотрим что получилось.
То есть название конечной надписи не совпадает с заголовком, что является преимуществом, и не дает переспама в статье. Так же Yoast поддерживает цепочки с поддрубриками, что является плюсом когда путь длинный.