Хлебные крошки вордпресс. Хлебные крошки WordPress — настройка плагина Breadcrumb NavXT. Что такое хлебные крошки

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

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

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

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

На своем блоге я уже описывал установку хлебных крошек с помощью плагина .

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

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

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

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

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

Установка хлебных крошек на сайт

Два варианта кода потребуется вставить в следующие файлы темы: «Функции темы (functions.php)», «Одна запись (single.php)», «Шаблон страницы (page.php)», «Архивы (arhvie.php)», «Результаты поиска (search.php)».

Первый код нужно будет вставить в файл «Функции темы (functions.php)», установленной на вашем блоге темы WordPress.

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

" . $home . "

"; } 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 = "ID) . "">" . 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 "

"; } } // end dimox_breadcrumbs()

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

В окне «Редактировать темы», в файл «Функции темы ((functions.php)» потребуется вставить первый код в самом верху файла, после

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

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

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

Следующий код нужно будет вставить в несколько файлов установленной у вас темы: «Одна запись (single.php)», «Шаблон страницы (page.php)», «Архивы (arhvie.php)», «Результаты поиска (search.php)».

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

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

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

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

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

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

В файл «Шаблон страницы (page.php)», отвечающий за статические страницы, вставляете код, как это показано на изображении.

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

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

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

/* Хлебные крошки */ #crumbs { padding:10px 10px 0 15px; max-height:20px; overflow:hidden; line-height: 180%; border-radius:0 0 8px 8px; -moz- border-radius:0 0 8px 8px; -webkit- border-radius:0 0 8px 8px;}

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

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

Выводы статьи

Теперь на вашем блоге установлены Хлебные крошки без использования плагина. Создателем этой функции является известный блогер Dimox (Дмитрий).

Раз уж этот блог в первую очередь ориентирован на чайников новичков, то давайте сначала ответим на вопрос, не как сделать хлебные крошки в WordPress (breadcrumb) , а для чего их делать)

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

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

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

Почему они так называются, думаю, многие догадались, если любили сказки в детстве 🙂

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

Но и это еще не все. Благодаря хлебным крошкам (по англ. они называются breadcrumbs ) в результатах поиска Google в сниппете вместо ссылки на страницу будет показываться название категории, примерно так это выглядит:

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

И что всё это даст нам в сумме? Верно, увеличит количество переходов с поисковых систем на наш сайт, что совсем не помешает)

Ну а теперь о главном.

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

Есть несколько путей решения данной задачи.

1. С помощью функции плагина Yoast WordPress SEO

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

< ?php if (function_exists(‘yoast_breadcrumb’)) {
yoast_breadcrumb(‘

‘,»);
} ?>

Я использую именно этот способ. Код вставил в файл single.php темы оформления, в самом верху страницы. Если вас не устраивает внешний вид крошек, то можете задать им свои css-стили, для них присваивается идентификатор #breadcrumbs которому и можем прописывать все что душа пожелает.

Внимание . Если вы новичок, то перед внесением изменений в файлы WordPressa, советую всегда делать их резерные копии, на всякий случай) В данном случае скопируйте и сохраните на компьютере single.php перед изменением.

2. Плагин Breadcrumb NavXT

Если вы не используете Yoast WordPress SEO то можете просто установить отдельный плагин для хлебных крошек. К таким плагинам относится Breadcrumb NavXT но можете использовать и аналоги.

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

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

или

или что-то похожее, все зависит от вашей темы, сразу после них и вставляем. Вот и сам код:

< ?php
if(function_exists(‘bcn_display’))
{
bcn_display();
}
?>

 
В настройках плагина можно менять разделители, иерархию и шаблоны вывода текста в ссылках, если что-то не устраивает. Для настройки внешнего вида опять же можно прописывать стили, только тут уже к классу .breadcrumb
3. Хлебные крошки с помощью хаков в WordPress
Вы можете внести самостоятельно нужный код в функции вашей темы — файл functions.php
 и вызвать крошки там, где вам нужно без всяких плагинов.
Из плюсов данного способа – уменьшаем нагрузку на блог, т.к. избавляемся от лишнего плагина. Из минусов – использование хаков, и тем более их настройка под себя может вызвать трудности у новичков.
В сети присутствует немало разных хаков с вариантами хлебных крошек.
Один из лучших вариантов на мой взгляд это скрипт от . Разрешение на размещение скрипта от автора получено, так что выкладываю:

 function dimox_breadcrumbs() {
/* === ОПЦИИ === */
 $text[‘home’] = ‘Главная’; // текст ссылки "Главная"
 $text[‘category’] = ‘Архив рубрики "%s"’; // текст для страницы рубрики
 $text[‘search’] = ‘Результаты поиска по запросу "%s"’; // текст для страницы с результатами поиска
 $text[‘tag’] = ‘Записи с тегом "%s"’; // текст для страницы тега
 $text[‘author’] = ‘Статьи автора %s’; // текст для страницы автора
 $text[‘404’] = ‘Ошибка 404’; // текст для страницы 404
$showCurrent = 1; // 1 — показывать название текущей статьи/страницы, 0 — не показывать
 $showOnHome = 0; // 1 — показывать "хлебные крошки" на главной странице, 0 — не показывать
 $delimiter = ‘ » ‘; // разделить между "крошками"
 $before = »; // тег перед текущей "крошкой"
 $after = »; // тег после текущей "крошки"
 /* === КОНЕЦ ОПЦИЙ === */
global $post;
 $homeLink = get_bloginfo(‘url’) . ‘/’;
 $linkBefore = »;
 $linkAfter = »;
 $linkAttr = ‘ rel="v:url" property="v:title"’;
 $link = $linkBefore . ‘
 if (is_home() || is_front_page()) {
if ($showOnHome == 1) echo ‘

’ . $text[‘home’] . ‘

echo ‘

’ . sprintf($link, $homeLink, $text[‘home’]) . $delimiter;

if (is_category()) {
$thisCat = get_category(get_query_var(‘cat’), false);
if ($thisCat->parent != 0) {
$cats = get_category_parents($thisCat->parent, TRUE, $delimiter);
echo $cats;
}
echo $before . sprintf($text[‘category’], single_cat_title(», false)) . $after;

} elseif (is_search()) {
echo $before . sprintf($text[‘search’], get_search_query()) . $after;

} elseif (is_day()) {
echo sprintf($link, get_month_link(get_the_time(‘Y’),get_the_time(‘m’)), get_the_time(‘F’)) . $delimiter;
echo $before . get_the_time(‘d’) . $after;

} elseif (is_month()) {
echo sprintf($link, get_year_link(get_the_time(‘Y’)), 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’) {
$slug = $post_type->rewrite;
printf($link, $homeLink . ‘/’ . $slug[‘slug’] . ‘/’, $post_type->labels->singular_name);
} else {
$cat = get_the_category(); $cat = $cat;
if ($showCurrent == 0) $cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats);
$cats = str_replace(‘ $cats = str_replace(», » . $linkAfter, $cats);
echo $cats;
}

} 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;
$cats = get_category_parents($cat, TRUE, $delimiter);
$cats = str_replace(‘ $cats = str_replace(», » . $linkAfter, $cats);
echo $cats;
printf($link, get_permalink($parent), $parent->post_title);
if ($showCurrent == 1) echo $delimiter . $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 = sprintf($link, get_permalink($page->ID), get_the_title($page->ID));
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
for ($i = 0; $i < count($breadcrumbs); $i++) { echo $breadcrumbs[$i]; if ($i != count($breadcrumbs)-1) echo $delimiter; } if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after; } elseif (is_tag()) { echo $before . sprintf($text[‘tag’], single_tag_title(», false)) . $after; } elseif (is_author()) { global $author; $userdata = get_userdata($author); echo $before . sprintf($text[‘author’], $userdata->display_name) . $after;

} elseif (is_404()) {
echo $before . $text[‘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 ‘

}
} // end dimox_breadcrumbs()

Вставлять данный код нужно, как вы уже догадались, в functions.php вашего шаблона (не забываем делать резервную копию ) в любое место между и ?> (Для новичков - копировать левую колонку с цифрами не нужно, они лишь для удобства, показывают номер строки кода на блоге) Как вы заметили, в строчках с 3 по 16ю идут настройки скрипта, которые вы можете менять по своему усмотрению. И теперь для вывода навигации делаем уже знакомую процедуру - вставляем в single.php следующий код:

< ?php if (function_exists(‘dimox_breadcrumbs’)) dimox_breadcrumbs(); ?>

Сам скрипт проверил, все отлично работает, так что если вы предпочитаете обходиться без плагинов, то этот вариант для вас. Теперь вы знаете, что такое хлебные крошки, для чего они нужны, и как их сделать для своего блога на WordPress. А если нет, то перечитайте все сначала:) Если после 2-3 прочтений вы что-то так и не поняли, то задавайте вопросы в комментариях, постараюсь помочь) Думаю этот гусь тоже не отказался бы от хлебных крошек, глядишь не такой злой был бы:)

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

Что такое хлебные крошки

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

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

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

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

Установка и настройка плагина Breadcrumb NavXT

Установка Breadcrumb NavXT несколько отличается от , поэтому рассмотрим ее подробно:

2. Распакуйте архив и загрузите папку с файлами плагина на сервер в директорию wp-content/plugins. Для этого воспользуйтесь — FileZilla.

3. Активируйте плагин через раздел «Плагины» панели администратора WordPress.

4. Теперь необходимо вставить следующий код:

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

Некоторые продвинутые темы по умолчанию выводят хлебные крошки на блоге, но я бы посоветовал все-таки использовать плагин Breadcrumb NavXT, потому что он имеет более гибкие настройки. В таких случаях следует заменить стандартный код в шаблонах темы, отвечающий за вывод хлебных крошек, на код плагина, указанный выше. Стандартный код во многом должен быть похож на приведенный код плагина, поэтому найти его не составит труда (обычно он заключен в тег div, ID или class которого имеет тоже название — breadcrumb).

После добавления кода, можно изменить внешний вид хлебных крошек WordPress. Для этого следует добавить стили к классу breadcrumb в файл style.css используемой темы. Конечно, для этого необходимо знать основы CSS, поэтому советую ознакомиться с бесплатным самоучителем по CSS от Влада Мержевича, который вы можете скачать с моего блога.

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

Первая закладка называется «General» — Общие.

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

Breadcrumb Max Title Length — в качестве звена навигационной цепочки используется заголовок страницы, эта опция задает максимальную длину заголовка, 0 — используется заголовок целиком, не обрезая его.

Home Breadcrumb — указывать или нет в хлебных крошках главную блога. Советую включить и задать ей имя в соответствии с названием вашего блога.

— текст, который будет виден на главной блога, если это не ссылка.

Переходим на вкладку Current Item , что означает «Текущей пункт» или «Текущее местоположение».

Link Current Item — выводить название текущей страницы в качестве ссылки на нее же или нет.

Paged Breadcrumb — поддержка постраничной навигации. После включения будут отображаться номера в хлебных крошках.

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

Следующий раздел называется «Post & Pages» — Записи и страницы.

Post Taxonomy Display — показывать все варианты путей, ведущих к записи.

Post Taxonomy — в вариантах путей к записи можно отображать. Для своего блога выбрал стандартный вариант — Рубрики.

Page Template и Page Template (Unlinked) — аналогичны рассмотренным выше Post Template и Post Template (Unlinked), только выводится будут для опубликованных статей.

На очереди раздел «Categories & Tags» .

В этом разделе задаются шаблоны для формирования хлебных крошек рубрик и тэгов. Просто действуйте по аналогии с рассмотренными выше шаблонами для записей.

В разделе можно задать шаблоны для страницы автора (Author ), даты/архива (Date ), результатов поиска (Search ) и ошибки 404 .

Остальные опции я не использую, поэтому умничать о их назначении не буду.

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

«Хлебные крошки» — это важный элемент навигации веб-сайта, который повышает его юзабилити. Особенно это касается сайтов со сложной структурой. Я, к сожалению (а, может, и не к сожалению), не использую их на большинстве своих сайтов, возможно, потому, что у них слишком простая структура (для такого сайта, как этот, они, вроде бы, и не нужны).
Когда я решаю какую-либо задачу на WordPress-сайте, то всегда стараюсь обходится без плагинов , где это бывает возможно. Зачастую одна и та же задача может быть решена с меньшим количеством кода и бывает менее ресурсоемкой по сравнению с применением плагинов.
Особенности функции
Отображается полная цепочка ссылок до текущей страницы. Например, если текущая страница находится в рубрике второго уровня, то цепочка будет выглядеть следующим образом:
Во всех решениях, которые я встречал (за исключением плагинов), такая цепочка выглядела вот так:
Т.е. одно звено потеряно.
Аналогично у меня выглядят и «крошки» для страниц. К примеру, для страницы 3-го уровня вложенности цепочка будет такой:
Главная > Страница 1-го уровня > Страница 2-го уровня > Страница 3-го уровня
«Хлебные крошки» выводятся для следующих типов страниц WordPress-сайта:
постраничная навигация с главной страницы (вида site.ru/page/2/);
архив рубрики;
архив тега;
архив за день;
архив за месяц;
архив за год;
архив автора;
произвольный тип записи;
страница;
пост;
результаты поиска;
страница с ошибкой 404.

Добавляется порядковый номер страницы, если это 2-я или больше страница архивов.
Можно задать любой символ разделителя между ссылками.
Можно задать текст для ссылка «Главная».
Интегрирована микроразметка Schema.org.

Функция «Хлебные крошки» для WordPress (обновлено: 03.03.2019)
/* * "Хлебные крошки" для WordPress * автор: Dimox * версия: 2019.03.03 * лицензия: MIT */ function dimox_breadcrumbs() { /* === ОПЦИИ === */ $text["home"] = "Главная"; // текст ссылки "Главная" $text["category"] = "%s"; // текст для страницы рубрики $text["search"] = "Результаты поиска по запросу "%s""; // текст для страницы с результатами поиска $text["tag"] = "Записи с тегом "%s""; // текст для страницы тега $text["author"] = "Статьи автора %s"; // текст для страницы автора $text["404"] = "Ошибка 404"; // текст для страницы 404 $text["page"] = "Страница %s"; // текст "Страница N" $text["cpage"] = "Страница комментариев %s"; // текст "Страница комментариев N" $wrap_before = "
"; // открывающий тег обертки $wrap_after = "
"; // закрывающий тег обертки $sep = " › "; // разделитель между "крошками" $before = ""; // тег перед текущей "крошкой" $after = ""; // тег после текущей "крошки" $show_on_home = 0; // 1 - показывать "хлебные крошки" на главной странице, 0 - не показывать $show_home_link = 1; // 1 - показывать ссылку "Главная", 0 - не показывать $show_current = 1; // 1 - показывать название текущей страницы, 0 - не показывать $show_last_sep = 1; // 1 - показывать последний разделитель, когда название текущей страницы не отображается, 0 - не показывать /* === КОНЕЦ ОПЦИЙ === */ global $post; $home_url = home_url("/"); $link = ""; $link .= "%2$s"; $link .= ""; $link .= ""; $parent_id = ($post) ? $post->post_parent: ""; $home_link = sprintf($link, $home_url, $text["home"], 1); if (is_home() || is_front_page()) { if ($show_on_home) echo $wrap_before . $home_link . $wrap_after; } else { $position = 0; echo $wrap_before; if ($show_home_link) { $position += 1; echo $home_link; } if (is_category()) { $parents = get_ancestors(get_query_var("cat"), "category"); foreach (array_reverse($parents) as $cat) { $position += 1; if ($position > 1) echo $sep; echo sprintf($link, get_category_link($cat), get_cat_name($cat), $position); } if (get_query_var("paged")) { $position += 1; $cat = get_query_var("cat"); echo $sep . sprintf($link, get_category_link($cat), get_cat_name($cat), $position); echo $sep . $before . sprintf($text["page"], get_query_var("paged")) . $after; } else { if ($show_current) { if ($position >= 1) echo $sep; echo $before . sprintf($text["category"], single_cat_title("", false)) . $after; } elseif ($show_last_sep) echo $sep; } } elseif (is_search()) { if (get_query_var("paged")) { $position += 1; if ($show_home_link) echo $sep; echo sprintf($link, $home_url . "?s=" . get_search_query(), sprintf($text["search"], get_search_query()), $position); echo $sep . $before . sprintf($text["page"], get_query_var("paged")) . $after; } else { if ($show_current) { if ($position >= 1) echo $sep; echo $before . sprintf($text["search"], get_search_query()) . $after; } elseif ($show_last_sep) echo $sep; } } elseif (is_year()) { if ($show_home_link && $show_current) echo $sep; if ($show_current) echo $before . get_the_time("Y") . $after; elseif ($show_home_link && $show_last_sep) echo $sep; } elseif (is_month()) { if ($show_home_link) echo $sep; $position += 1; echo sprintf($link, get_year_link(get_the_time("Y")), get_the_time("Y"), $position); if ($show_current) echo $sep . $before . get_the_time("F") . $after; elseif ($show_last_sep) echo $sep; } elseif (is_day()) { if ($show_home_link) echo $sep; $position += 1; echo sprintf($link, get_year_link(get_the_time("Y")), get_the_time("Y"), $position) . $sep; $position += 1; echo sprintf($link, get_month_link(get_the_time("Y"), get_the_time("m")), get_the_time("F"), $position); if ($show_current) echo $sep . $before . get_the_time("d") . $after; elseif ($show_last_sep) echo $sep; } elseif (is_single() && ! is_attachment()) { if (get_post_type() != "post") { $position += 1; $post_type = get_post_type_object(get_post_type()); if ($position > 1) echo $sep; echo sprintf($link, get_post_type_archive_link($post_type->name), $post_type->labels->name, $position); if ($show_current) echo $sep . $before . get_the_title() . $after; elseif ($show_last_sep) echo $sep; } else { $cat = get_the_category(); $catID = $cat->cat_ID; $parents = get_ancestors($catID, "category"); $parents = array_reverse($parents); $parents = $catID; foreach ($parents as $cat) { $position += 1; if ($position > 1) echo $sep; echo sprintf($link, get_category_link($cat), get_cat_name($cat), $position); } if (get_query_var("cpage")) { $position += 1; echo $sep . sprintf($link, get_permalink(), get_the_title(), $position); echo $sep . $before . sprintf($text["cpage"], get_query_var("cpage")) . $after; } else { if ($show_current) echo $sep . $before . get_the_title() . $after; elseif ($show_last_sep) echo $sep; } } } elseif (is_post_type_archive()) { $post_type = get_post_type_object(get_post_type()); if (get_query_var("paged")) { $position += 1; if ($position > 1) echo $sep; echo sprintf($link, get_post_type_archive_link($post_type->name), $post_type->label, $position); echo $sep . $before . sprintf($text["page"], get_query_var("paged")) . $after; } else { if ($show_home_link && $show_current) echo $sep; if ($show_current) echo $before . $post_type->label . $after; elseif ($show_home_link && $show_last_sep) echo $sep; } } elseif (is_attachment()) { $parent = get_post($parent_id); $cat = get_the_category($parent->ID); $catID = $cat->cat_ID; $parents = get_ancestors($catID, "category"); $parents = array_reverse($parents); $parents = $catID; foreach ($parents as $cat) { $position += 1; if ($position > 1) echo $sep; echo sprintf($link, get_category_link($cat), get_cat_name($cat), $position); } $position += 1; echo $sep . sprintf($link, get_permalink($parent), $parent->post_title, $position); if ($show_current) echo $sep . $before . get_the_title() . $after; elseif ($show_last_sep) echo $sep; } elseif (is_page() && ! $parent_id) { if ($show_home_link && $show_current) echo $sep; if ($show_current) echo $before . get_the_title() . $after; elseif ($show_home_link && $show_last_sep) echo $sep; } elseif (is_page() && $parent_id) { $parents = get_post_ancestors(get_the_ID()); foreach (array_reverse($parents) as $pageID) { $position += 1; if ($position > 1) echo $sep; echo sprintf($link, get_page_link($pageID), get_the_title($pageID), $position); } if ($show_current) echo $sep . $before . get_the_title() . $after; elseif ($show_last_sep) echo $sep; } elseif (is_tag()) { if (get_query_var("paged")) { $position += 1; $tagID = get_query_var("tag_id"); echo $sep . sprintf($link, get_tag_link($tagID), single_tag_title("", false), $position); echo $sep . $before . sprintf($text["page"], get_query_var("paged")) . $after; } else { if ($show_home_link && $show_current) echo $sep; if ($show_current) echo $before . sprintf($text["tag"], single_tag_title("", false)) . $after; elseif ($show_home_link && $show_last_sep) echo $sep; } } elseif (is_author()) { $author = get_userdata(get_query_var("author")); if (get_query_var("paged")) { $position += 1; echo $sep . sprintf($link, get_author_posts_url($author->ID), sprintf($text["author"], $author->display_name), $position); echo $sep . $before . sprintf($text["page"], get_query_var("paged")) . $after; } else { if ($show_home_link && $show_current) echo $sep; if ($show_current) echo $before . sprintf($text["author"], $author->display_name) . $after; elseif ($show_home_link && $show_last_sep) echo $sep; } } elseif (is_404()) { if ($show_home_link && $show_current) echo $sep; if ($show_current) echo $before . $text["404"] . $after; elseif ($show_last_sep) echo $sep; } elseif (has_post_format() && ! is_singular()) { if ($show_home_link && $show_current) echo $sep; echo get_post_format_string(get_post_format()); } echo $wrap_after; } } // end of dimox_breadcrumbs()
Функцию необходимо поместить в файл functions.php вашей WordPress-темы. После этого в то место шаблона, где хотите выводить «хлебные крошки», добавьте следующий код:
Единственное, что теперь останется сделать — оформить их с помощью CSS. Для этого к блоку «хлебных крошек» предусмотрен класс.breadcrumbs , для разделителя — .breadcrumbs__separator а для текущей «крошки» — .breadcrumbs__current .

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

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

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

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

Главная страница > Рубрика > Подрубрика > Текущая страница

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

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

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

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

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

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

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

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

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

Самый простой способ установить хлебные крошки на блог – установить специальный плагин. Для WordPress обычно используют Breadcrumb NavXT.

Способ его установки стандартный: заходим в админку блога -> Плагины -> Добавить новый. В появившееся окно вставляем название плагина и нажимаем «Найти плагины».

Вот он, наш плагин, нажимаем «Установить сейчас», затем «Активировать».

и над этой строчкой вставляем следующий кусочек кода:

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

После этого переходим в «Настройки» — > «Настройки Breadcrumb NavXT» и в графе «Название ссылки» меняем название на свое и сохраняем изменения.

Осталось перейти на блог и полюбоваться на результат.

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

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

Заходим в админку –> «Внешний вид» -> «Редактор» -> 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"; } }
и сохраняем. Если боитесь запутаться, просто вставьте его в самом конце над последней скобкой.

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

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

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

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

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

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