Как сделать хлебные крошки в Wordpress (breadcrumb)

Опубликовано: 01.09.2018

видео Как сделать хлебные крошки в Wordpress (breadcrumb)

Хлебные крошки wordpress || Плагин Yoast Seo

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



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

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


22.Хлебные крошки - плагин Yoast SEO

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

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

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

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

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

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

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

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

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   Мы размещаем навигацию в самом верху контейнера, отвечающего за вывод страниц с записью на экран.  Как правило эти контейнеры называются <div id=»container»> или <div id=»content»> или что-то похожее, все зависит от вашей темы, сразу после них и вставляем.  Вот и сам код:

</pre> <div>< ?php if(function_exists('bcn_display')) { bcn_display(); } ?></div> <pre>

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

3. Хлебные крошки с помощью хаков в WordPress

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

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

В сети присутствует немало разных хаков с вариантами хлебных крошек.

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

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 '</pre> <div id="crumbs"><a href="' . $homeLink . '">' . $text['home'] . '</a></div> <pre>'; } else { echo '</pre> <div id="crumbs">' . 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); $cats = str_replace(' $cats = str_replace('', '' . $linkAfter, $cats); 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_year_link(get_the_time('Y')), get_the_time('Y')) . $delimiter; 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' ) { $post_type = get_post_type_object(get_post_type()); $slug = $post_type->rewrite; printf($link, $homeLink . '/' . $slug['slug'] . '/', $post_type->labels->singular_name); if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after; } else { $cat = get_the_category(); $cat = $cat[0]; $cats = get_category_parents($cat, TRUE, $delimiter); if ($showCurrent == 0) $cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats); $cats = str_replace(' $cats = str_replace('', '' . $linkAfter, $cats); echo $cats; 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[0]; $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 '</div> <pre>'; } } // end dimox_breadcrumbs() Вставлять данный код нужно, как вы уже догадались, в functions.php вашего шаблона ( не забываем делать резервную копию ) в любое место между <?php и ?> (Для новичков - копировать левую колонку с цифрами не нужно, они лишь для удобства, показывают номер строки кода на блоге) Как вы заметили, в строчках с 3 по 16ю идут настройки скрипта, которые вы можете менять по своему усмотрению. И теперь для вывода навигации делаем уже знакомую процедуру - вставляем в single.php следующий код: < ?php if (function_exists('dimox_breadcrumbs')) dimox_breadcrumbs(); ?> Сам скрипт проверил, все отлично работает, так что если вы предпочитаете обходиться без плагинов, то этот вариант для вас. Теперь вы знаете, что такое хлебные крошки, для чего они нужны, и как их сделать для своего блога на WordPress. А если нет, то перечитайте все сначала :) Если после 2-3 прочтений вы что-то так и не поняли, то задавайте вопросы в комментариях, постараюсь помочь) Думаю этот гусь тоже не отказался бы от хлебных крошек, глядишь не такой злой был бы :)
rss