Оформление «хлебных крошек»
Для того чтобы задать стили для нашей навигационной цепочки можно дописать в файл style.css вашей темы свои стили.
Я подготовила для вас несколько готовых вариантов, которые вы можете переделать под себя. Они подойдут независимо от того какой способ создания хлебных крошек вы выберите: с плагином или без.
Первый вариант
Вот код:
CSS
#br-crumb{
margin:20px 0px;
}
#br-crumb a, .page-name {
color:#449D44; /*цвет текста*/
text-transform:uppercase; /*текст заглавными буквами*/
}
#br-crumb a:hover, .page-name:hover{ /*смена цвета текста при наведении*/
color:#3498DB;
}
1 |
#br-crumb{ margin20px0px; } #br-crumb a, .page-name { color#449D44;/*цвет текста*/ text-transformuppercase;/*текст заглавными буквами*/ } #br-crumb a:hover, .page-name:hover{/*смена цвета текста при наведении*/ color#3498DB; } |
Второй вариант
Код:
CSS
#br-crumb{
margin:20px 0px;
}
#br-crumb a, .page-name {
padding:3px 5px; /*внутренний отступ*/
color:#fff; /*цвет текста*/
background:#2F73B6; /*цвет фона*/
border-radius:5px; /*скруглённые углы*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#br-crumb a:hover, .page-name:hover{
color:#2F73B6; /*цвет текста при наведениии*/
background:#fff; /*цвет фона при наведении*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
1 |
#br-crumb{ margin20px0px; } #br-crumb a, .page-name { padding3px5px;/*внутренний отступ*/ color#fff;/*цвет текста*/ background#2F73B6;/*цвет фона*/ border-radius5px;/*скруглённые углы*/ -webkit-transitionall0.5sease; -moz-transitionall0.5sease; transitionall0.5sease;
} #br-crumb a:hover, .page-name:hover{ color#2F73B6;/*цвет текста при наведениии*/ background#fff;/*цвет фона при наведении*/ -webkit-transitionall0.5sease; -moz-transitionall0.5sease; transitionall0.5sease; } |
Третий вариант
Код:
CSS
#br-crumb{
margin:20px 0px;
}
#br-crumb a, .page-name {
display:inline-block;
padding:3px 5px;
color:#fff; /*цвет текста*/
background:#2F73B6; /*цвет фона*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
position: relative;
height:39px; /*высота*/
padding-left:30px;
}
#br-crumb span{
}
#br-crumb a:after, .page-name:after {
content: «»;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #2F73B6; /*цвет треугольников*/
position: absolute;
right: -19px;
top: 0;
z-index:2;
}
#br-crumb a:before, .page-name:before {
content: «»;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #fff;
position: absolute; left: 0; top: 0;
}
1 |
#br-crumb{ margin20px0px; } #br-crumb a, .page-name { displayinline-block; padding3px5px; color#fff;/*цвет текста*/ background#2F73B6;/*цвет фона*/ -webkit-transitionall0.5sease; -moz-transitionall0.5sease; transitionall0.5sease; positionrelative; height39px;/*высота*/ padding-left30px; } #br-crumb span{
} #br-crumb a:after, .page-name:after { content»»; border-top20pxsolidtransparent; border-bottom20pxsolidtransparent; border-left20pxsolid#2F73B6;/*цвет треугольников*/ positionabsolute; right-19px; top; z-index2; #br-crumb a:before, .page-name:before { content»»; border-top20pxsolidtransparent; border-bottom20pxsolidtransparent; border-left20pxsolid#fff; positionabsolute;left;top; } |
Микроразметка хлебных крошек
Я не поленился, залез в поиск, проанализировал, как на разных сайтах сделаны Breadcrumb и как эти сайты выглядят в поиске. Моя теория оказалась верной:
Есть крошки на сайте – нет микроразметки – обычный сниппет с URL.
Есть крошки – есть микроразметка – улучшенный сниппет.
Я раскопал все что нужно и сегодня вам расскажу про хлебные крошки от А до Я. Поставить их технически на сайт – это даже не пол дела – это 10%. Главная фишка, которая принесет реальную пользу – это микроразметка.
Я с микроразметкой, как с понятием, познакомился всего пару месяцев назад. Мало чего понял тогда, но попробовал настроить основные элементы для статей и комментариев. Некоторые блогеры писали, что это чуть ли не волшебная кнопка толкающая сайты в ТОП (в основном ученики школы блогеров Александра Борисова) – не знаю с чего они так решили. Мне это сомнительным показалось сразу, теперь могу сказать точно – за 2 месяца наличия микроразметки на моем сайте никаких ощутимых движений в выдаче по продвигаемым запросам я не заметил.
В случае с разметкой хлебных крошек ситуация должна быть иной, мы не будем ждать каких-то движений в органической выдаче, а будем рассчитывать на то, что я говорил выше – на улучшение кликабельности сниппетов и соответствующие этому плюшки (рост за счет поведенческих факторов).
Как правильно создать хлебные крошки
Для сайта, функционирующего на любом движке, в том числе и WordPress, можно создать «хлебные крошки». Это осуществляется при помощи различных плагинов, CSS и PHP. Но какой бы способ не был выбран, следует придерживаться определенных правил, позволяющих повысить оптимизацию сайта, и предотвращающих ее снижение.
При использовании линейной цепочки нельзя пропускать страницы-звенья. Последняя страница, на которой посетитель находится в данный момент, это тоже звено цепочки, и оно должно быть отображено в навигации. Иногда на сайтах в навигацию не включают конечную страницу, если это карточка товара. С точки зрения логики это может быть и верно, но для посетителя такая «обрезанная» цепочка выглядит странно, и может сбить его с толку.
Еще один важный нюанс – не стоит при создании навигации вписывать ключевые фразы, если они не очень органично вписываются. Анкор навигационной ссылки должен иметь минимальную длину. К тому же он должен быть очень точным, и притягивать в него ключ не рекомендуется.
При разработке сайта, который будет оснащен «хлебными крошками», все равно нужно тщательно продумать основное меню. Крошки не заменят его, они будут работать просто как вспомогательный инструмент, и не всем посетителям он пригодится.
Для маленьких сайтов с простой и понятной структурой устанавливать навигацию не нужно. Посетители и без нее смогут легко ориентироваться по страницам, а лишний элемент будет создавать ощущение неоправданной перенасыщенности дизайна.
Навигационная цепочка должна выглядеть эстетично и по внешнему виду хорошо сочетаться с основной стилистикой ресурса. Ее должно быть хорошо видно, но при этом она не является ведущим элементом дизайна, а значит ей нужно придать ненавязчивый вид, отрегулировав ее расположение, шрифт, размер и цвет
Очень важно размещать цепочку на каждой странице в одном и том же месте
Для того чтобы сайт наилучшим образом выводился Гуглом, нужно сделать микроразметку строки навигации. То есть каждый шаг, ведущий от главной страницы до той, которая выводится в поисковике нужно оформить как отдельную ссылку. Это осуществляется путем обертывания каждого элемента в блок (div), и добавления атрибута (itemprop= «url»). В готовый блок нужно добавить атрибут itemprop= «title».
Навигационные ссылки не должны быть цикличными. Название конечной страницы должно иметь вид обычного текста, а не ссылки. Иначе получится, что последний пункт цепочки отправляет со страницы на нее же, а этого быть не должно.
При оформлении «хлебных крошек» нужно помнить о том, что они нужны в первую очередь для повышения удобства пользования ресурсом, и только потом они несут пользу для позиций сайта в поисковых системах. При помощи цепочки посетители могут в один клик переходить на нужные страницы, что положительным образом сказывается на конверсии сайта (соотношение количества посещений к количеству полезных действий посетителей, например, покупок). Однако некорректная реализация «хлебных крошек» может привести к обратному эффекту, снизив как юзабилити ресурса, так и его показатели SEO. Чтобы проверить качество установленной навигации, можно воспользоваться аудитом поискового продвижения.
Включаем хлебные крошки у себя на блоге
Итак, включить хлебные крошки на сайте при помощи этого плагина проще простого. Заходим в раздел «Дополнительно» и передвигаем тумблер с Disabled на Enabled. Если когда-нибудь потом захотите убрать их, достаточно просто передвинуть кнопку обратно.
Если вам нравится, как настроено меню по умолчанию, его можно оставить и сохранить изменения
Думаю, что здесь все понятно, так что не буду заострять свое внимание. Вы всегда можете потом попробовать тот или иной вариант и посмотреть к каким изменениям на сайте это приведет
Теперь необходимо изменить вашу тему, чтобы определиться с тем как и где будут отображаться хлебные крошки. Пока вы этого не сделаете, они не отобразятся, так что не пытайтесь. Переходим во «Внешний вид» – «Редактор».
Находим в правой части списка файл single.php (Отдельная запись).
И вставляем вот этот код:
<?php if ( function_exists(‘yoast_breadcrumb’) ) {yoast_breadcrumb(‘<p id=»breadcrumbs»>’,'</p>’);} ?>
Сейчас я вставил код в контентную часть и на сайте он будет отображаться вот так.
Давайте я поставлю его чуть выше.
Теперь хлебные крошки отображаются лучше.
Не забывайте сохранять изменения. Вы можете легко вставлять этот код в разные части single, перемещать их и смотреть какой вариант вам нравится больше. Для этого достаточно лишь обновить тестовую страницу в соседней вкладке после сохранения файла.
Вы можете снова зайти в настройки плагина и отредактировать название главной страницы, допустим, на home или заголовок вашего сайта. Больше в код лезть не понадобится. Все изменения можно производить в панели инструментов Seo Yoast.
Если вы хотите узнать больше про Yoast, посмотрите вот это видео. Здесь есть подробная инструкция по использованию этой программы и всем ее возможностям:
Если вас заинтересовала верстка и вы хотите изучить этот вопрос «от и до», чтобы не пугаться при виде кода, советую вам бесплатные курсы Евгения Попова.
Он уже давно занимается созданием уроков, которые пользуются широкой популярностью среди новичков за легкость и профессионализм. Вы смотрите за работой другого человека, слушаете и усваиваете информацию, которую вам объясняют не на пальцах, а на конкретных примерах.
Для начала вам понадобится понять «Основы html», разобраться в языке разметки.
Бесплатные уроки по CSS позволят понять что такое блочная разметка и как работать с каскадными таблицами.
По завершению вы освоите новую профессию и сможете начать создавать сайты, делать верстку. Выйдете на качественно новый уровень работы.
Ну вот и все. Если вам была полезна эта публикация подписывайтесь на рассылку. Присоединяйтесь, с момента основания моего блога это сделали уже 200 человек! Я проверяю информацию, прежде чем дать вам совет. Это большая редкость в интернете.
Пользуйтесь только проверенным софтом и актуальной информацией.
До новых встреч и удачи в ваших начинаниях!
Плагины разметки для разных CMS
Добавить навигационную цепочку в сниппет можно при помощи специальных плагинов для CMS.
WordPress
Самым популярным плагином хлебных крошек для WordPress считается Breadcrumb NavXT. Есть и другие: Instant Breadcrumbs, Flexy Breadcrumb, Surbma | Yoast SEO Breadcrumb Shortcode, Breadcrumb, breadcrumb simple и еще множество.
Код разметки хлебных крошек нужно поместить в файлы:
-
показать крошки везде — в файл header.php;
-
для всех записей — в файл single.php;
-
для статистических страниц — в файл page.php;
-
для всех рубрик — в файл category.php.
В меню плагинов можно настроить ссылки, задать значок разделителя для ссылок.
Joomla
Добавить хлебные крошки в CMS Joomla можно с помощью модуля «Навигатор сайта», тип модуля — «mod_breadcrumbs». Он находится в Панели управления > Расширения > Менеджер модулей.
Настройка модуля
Настройте модуль под свой сайт и укажите:
позицию модуля, в которой он будет выводиться на странице (отображение позиций включается так: Расширения — Менеджер шаблонов — Настройки — опция Просмотр позиций модулей — Включено);
-
название главной страницы;
-
разделитель текста для элементов навигации (обычно «/»).
На главной странице хлебные крошки отображать не нужно, поэтому на вкладке «Привязка к пунктам меню» выберите опцию «На всех страницах, кроме» и отметьте пункт с домашней страницей.
Opencart
Хлебные крошки для движка Opencart устанавливают с помощью модуля. Под разные версии CMS есть разные модули: «Умные хлебные крошки» для Opencart 3.0, Правильные хлебные крошки для Opencart 2.x. Есть бесплатный модификатор, который делает неактивной ссылку на текущую страницу в хлебных крошках.
1С Битрикс
Разметка крошек обычно находится в комплекте решений для SEO, но есть и отдельный компонент Умные хлебные крошки. Его можно использовать в каталоге или в многоуровневых разделах, которые связаны с инфоблоками.
Moguta
Для этого движка есть бесплатный плагин Хлебные крошки. Для установки в Панели управления сайтом зайдите в раздел Маркетплейс, там найдите бесплатный плагин и запустите установку.
Установка плагина
Проверьте правильность настройки с помощью валидатора Яндекса или Google.
Для чего нужны хлебные крошки на сайте
Перед тем как перейти непосредственно к обзору модулей, пару слов скажу о том, как и зачем применятся данное решение:
- Во-первых, оно полезно с точки зрения юзабилити — навигация сориентирует людей на сайте и прояснит его структуру.
- Во-вторых, эта фишка работает и для оптимизации, т.к. по сути, является еще одним вариантом перелинковки, а также увеличивает число переходов и время пребывания (+ может отображаться в выдаче).
Теоретически допускается вывод данного блока не на всех страницах. Например, у вас есть блог, где изначально предусмотрено несколько традиционных путей по сайту: теги и категории, архивы дат, авторов, а также конкретные посты. В разделах и заметках навигацию я бы оставил, тогда как в метках и датах ценность подобной информации минимальна, т.к. она просто дублирует заголовок. Если установленные плагины хлебных крошек для Вордпресс не позволяют сделать это напрямую, используйте условные операторы. Кроме того, желательно максимально и ненавязчиво оформить элемент через макет и стили.
Глупо получится, когда сразу же под цепочкой «Главная» — «Категория» — «Заголовок поста» вы видите тот же тайтл + указание текущей категории. Подобное отображение рубрик, кстати, часто встречается в стандартных WP шаблонах, поэтому после интеграции соответствующего решения желательно этот нюанс подправить.
Заменить Home в хлебных крошках на Главная
Доброго времени суток, Коллеги! Подскажите, как решить проблему. При создании новой страницы, в хлебных крошках этой страницы Главная указана на английском Home. Как это дело привести в порядок, подскажите, Гуру! ))) Всем здоровья!
Тема изменена 1 год, 7 месяцев назад пользователем vladseverrr .
Страница, с которой нужна помощь:
Для начала разобраться как создаются хлебные крошки — это фишка темы или работает сторонний плагин? А потом перевести нужное слово или вручную в файлах темы или плагина (не самое правильное и требующее опыта решение) или с его помощью
zoltsmaster спасибо, что не обошли мою проблему стороной.
Да, это фишка темы. И я бы поправил этот файл вручную, если бы дали направление, его его искать, в каком файле…
Для этого вам следует обратиться в ТП вашей коммерческой темы п.9 правил форума.
Если Вы задаете такие вопросы — вам не нужно этого делать. Подскажу ещё раз! Попробуйте плагин-переводчик https://ru.wordpress.org/plugins/loco-translate/
гораздо проще и удобней чем loco-translate для перевода небольшого количества фраз
Друзья, спасибо большое всем за помощь! Решил вопрос доскональным изучением папок темы и замены вручную данных слов! Всем хорошего настроения и не болеть.
Это до первого обновления темы.
А можно как-то зафиксировать же…?
Она есть. Добавить измененный код в неё. Правильно?
вам выше дали советы по переводу/замене, которые не требуют создания дочерней темы, но вы их даже не прочитали похоже…
Yui , прочитал, попробовал — не получилось. Я не привык игнорировать советы знающих людей и искренне за них благодарен! Так как сам являюсь модератором на одном из крупнейших форумов России. )
Да, если вносили изменения в одном из шаблонов темы, его нужно скопировать в дочернюю, иначе после обновления, все изменения исчезнут.
Как сделать хлебные крошки WordPress без плагина?
Делается все довольно просто и всего в 2 этапа.
На первом этапе необходимо добавить функцию этих самых «хлебных крошек» (англ. — breadcrumbs) в ваш шаблон WordPress, для чего в файл functions.php (в самый конец перед ?>) шаблона вставить следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function breadcrumbs() { $showOnHome = ; // 1 - показывать "хлебные крошки" на главной странице, 0 - не показывать $delimiter = '»'; // разделить между "крошками" $home = 'Главная'; // текст ссылка "Главная" $showCurrent = 1; // 1 - показывать название текущей статьи/страницы, 0 - не показывать $before = '<span class="current">'; // тег перед текущей "крошкой" $after = '</span>'; // тег после текущей "крошки" global $post; $homeLink = get_bloginfo('url'); if (is_home() || is_front_page()) { if ($showOnHome == 1) echo ' |
‘; } else { echo ‘
‘ . $home . ‘ ‘ . $delimiter . ‘ ‘; if ( is_category() ) { global $wp_query; $cat_obj = $wp_query->get_queried_object(); $thisCat = $cat_obj->term_id; $thisCat = get_category($thisCat); $parentCat = get_category($thisCat->parent); if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ‘ ‘ . $delimiter . ‘ ‘)); echo $before . single_cat_title(», false). $after; } elseif ( is_day() ) { echo ‘‘ . get_the_time(‘Y’) . ‘ ‘ . $delimiter . ‘ ‘; echo ‘‘ . get_the_time(‘F’) . ‘ ‘ . $delimiter . ‘ ‘; echo $before . get_the_time(‘d’) . $after; } elseif ( is_month() ) { echo ‘‘ . get_the_time(‘Y’) . ‘ ‘ . $delimiter . ‘ ‘; echo $before . get_the_time(‘F’) . $after; } elseif ( is_year() ) { echo $before . get_the_time(‘Y’) . $after; } elseif ( is_single() && !is_attachment() ) { if ( get_post_type() != ‘post’ ) { $post_type = get_post_type_object(get_post_type()); $slug = $post_type->rewrite; echo ‘‘ . $post_type->labels->singular_name . ‘ ‘ . $delimiter . ‘ ‘; if ($showCurrent == 1) echo $before . get_the_title() . $after; } else { $cat = get_the_category(); $cat = $cat; echo get_category_parents($cat, TRUE, ‘ ‘ . $delimiter . ‘ ‘); if ($showCurrent == 1) echo $before . get_the_title() . $after; } } elseif ( !is_single() && !is_page() && get_post_type() != ‘post’ && !is_404() ) { $post_type = get_post_type_object(get_post_type()); echo $before . $post_type->labels->singular_name . $after; } elseif ( is_attachment() ) { $parent = get_post($post->post_parent); $cat = get_the_category($parent->ID); $cat = $cat; echo get_category_parents($cat, TRUE, ‘ ‘ . $delimiter . ‘ ‘); echo ‘‘ . $parent->post_title . ‘ ‘ . $delimiter . ‘ ‘; if ($showCurrent == 1) echo $before . get_the_title() . $after; } elseif ( is_page() && !$post->post_parent ) { if ($showCurrent == 1) echo $before . get_the_title() . $after; } elseif ( is_page() && $post->post_parent ) { $parent_id = $post->post_parent; $breadcrumbs = array(); while ($parent_id) { $page = get_page($parent_id); $breadcrumbs[] = ‘‘ . get_the_title($page->ID) . ‘‘; $parent_id = $page->post_parent; } $breadcrumbs = array_reverse($breadcrumbs); foreach ($breadcrumbs as $crumb) echo $crumb . ‘ ‘ . $delimiter . ‘ ‘; if ($showCurrent == 1) echo $before . get_the_title() . $after; } elseif ( is_search() ) { echo $before . ‘Результаты поиска по запросу «‘ . get_search_query() . ‘»‘ . $after; } elseif ( is_tag() ) { echo $before . ‘Записи с тегом «‘ . single_tag_title(», false) . ‘»‘ . $after; } elseif ( is_author() ) { global $author; $userdata = get_userdata($author); echo $before . ‘Статьи автора ‘ . $userdata->display_name . $after; } elseif ( is_404() ) { echo $before . ‘Error 404’ . $after; } if ( get_query_var(‘paged’) ) { if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‘ (‘; echo __(‘Page’) . ‘ ‘ . get_query_var(‘paged’); if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‘)’; } echo ‘
‘; } }
На втором этапе необходимо сделать так, чтобы добавленная нами функция запускалась там, где нужно.
Для этого необходимо добавить в файлы single.php, page.php, archive.php, search.php шаблона следующий код:
1 |
<!--?php if (function_exists('breadcrumbs')) breadcrumbs(); ?--> |
Для того, чтобы «хлебные крошки» отображались как у меня на сайте (перед заголовками записей), необходимо добавлять данный код в перечисленные файлы сразу после конструкции, отвечающей за вывод контента, которая во многих шаблонах WordPress выглядит следующим образом (хотя может и отличаться от представленной):
То есть как показано на рисунке:
Теперь все должно заработать и выглядеть примерно так, как было показано на рисунке в начале статьи.
Напоследок добавлю, что разработчиком данной функции является известный блогер Dimox.
Как добавить разметку хлебных крошек на сайт
Для настройки используют разметку Breadcrumbs. Благодаря разметке поисковикам проще считывать информацию о странице.
Советы для создания правильных хлебных крошек
На главной крошки не нужны.
Главная страница — стартовая, в цепочке навигации на главной просто нечего отображать.
Главная и товарная страницы petshop.ru
Ссылка на страницу, где находится пользователь, не нужна.
Если в крошках будет кликабельная ссылка на текущую страницу, образуется циклическая ссылка. Страница будет ссылаться сама на себя, это бессмысленно и может ухудшить ранжирование сайта.
Есть два варианта оформления хлебных крошек, чтобы избежать циклической ссылки. Название текущей страницы делают некликабельным, как на сайте apteka.ru:
Страница товара
Второй вариант — текущую страницу убирают из цепочки. В этом примере с lamoda.ru крошки заканчиваются на разделе «Декор настольный», это предыдущая страница для товара Philippi.
Cтраница товара
Привычное место для хлебных крошек — верхняя часть страницы.
Так сложилось, что навигационную цепочку размещают под меню над информацией о товаре или над заголовком материала. В этом случае оригинальность не нужна, сделайте так, как пользователям привычно и удобно.
Новость на seroundtable.com
Замените первую ссылку на ключ или бренд.
Специалист по оптимизации Сергей Кокшаров (Devaka) советует использовать потенциал первой ссылки в хлебных крошках: вместо слова «Главная» писать основное ключевое слово сайта или название бренда, если один короткий ключ подобрать не получается.
Вместо крошек вида «Главная > Продукция > Пиломатериалы > Брус» сделать «Строительные материалы > Продукция > Пиломатериалы > Брус».
Как настроить разметку BreadcrumbList на сайте
Яндекс формирует крошки по своему алгоритму. Для Google настроить разметку можно вручную с помощью разметки Schema.org.
Разметка «BreadcrumbList» — разновидность «ItemList». Она предполагает использование форматов Microdata и RDFa.
Пример разметки «BreadcrumbList» через Microdata:
Типичная ошибка разметки хлебных крошек
Пользователи часто сталкиваются с ошибкой «Отсутствует поле «id»». Ошибка обычно связана с тем, что пользователи указывают в разметке последним пунктом текущую страницу, которая, логично, не имеет ссылки, чтобы не ссылаться сама на себя. Но все item — это ссылки, так что последний пункт тоже должен быть ссылкой, иначе появляется ошибка.
Что делать: если это активная текущая страница, то для нее не нужна ссылка, ее вообще не нужно вставлять в разметку. Последний пункт хлебных крошек должен вести на предыдущий раздел каталога.
Настройка хлебных крошек с плагином Really Simple Breadcrumb
Одно из наиболее легких решений для Вордпресс. Все делается быстро и без проблем. Работает корректно и без багов, отображается согласно CSS используемой темы.
Устанавливаем и активируем плагин Really Simple Breadcrumb удобным для себя способом. Я обычно это делаю через админ панель своего блога. Во вкладке «Плагины» кликаю на «Добавить новый», и в строке поиска набираю название плагина, жму на Enter.
Далее, устанавливаю, и активирую нужный мне плагин.
Для отображения хлебных крошек в файле single.php (статьи) и page.php (статические страницы), прописываем в нужном месте следующий код:
/* Убираем дубль в breadcrumbs*/
function adjust_single_breadcrumb( $link_output) { if(strpos( $link_output, ‘breadcrumb_last’ ) !== false ) { $link_output = »; } return $link_output; } add_filter(‘wpseo_breadcrumb_single_link’, ‘adjust_single_breadcrumb’ );
1 |
/* Убираем дубль в breadcrumbs*/ functionadjust_single_breadcrumb($link_output){if(strpos($link_output,’breadcrumb_last’)!==false){$link_output=»;}return$link_output;}add_filter(‘wpseo_breadcrumb_single_link’,’adjust_single_breadcrumb’); |
Я это делаю выше строки отвечающей за вывод заголовка. В моем случае она выглядит так:
<h1 class=»post-title»><?php the_title() ?></h1>,
где <?php the_title() ?>— выводит заголовок.
Вот и все. Плагин работает красиво и корректно.
Если хотите убрать дубли заголовков публикаций и статических страниц блога в навигационной строке, нужно будет закомментировать пару строчек в файле breadcrumb.php установленного плагина.
Тридцатая строка выглядит так the_title();,
после комментирования так /*the_title();*/
В наших статьях дублей теперь нет.
И сорок пятая строка выглядит так echo the_title();,
после комментирования так /*echo the_title();*/ .
Теперь на статических страницах дублей тоже нет.
Также в файле breadcrumb.php в 17 строке можно изменить внешний вид разделителя на свой.
Все хорошо, но в этом варианте отсутствует микроразметка. Для чего она нужна? С микроразметкой хлебные крошки в сниппете выдачи Гугл будут отображаться вместо URL. А это внешне намного привлекательнее и повышает CTR (кликабельность).
Как видите, сниппет второго сайта, отображающий цепочку навигации вместо ссылок, выглядит визуально приятнее.
Поэтому добавляем микроразметку или используем другой готовый вариант.
Как изменить название последней страницы в хлебных крошках
Если вы посмотрите на любую статью моего блога, то увидите, что название самой статьи и название в хлебных крошках отличаются. Взгляните на скриншот.
Стрелочками я их отметила. Хоть они и разные, но смысл несут один, а также содержат ключевые слова.
Для чего это делается? Чтобы не создавать дубли, которые могут быть не по нраву поисковым системам. Конечно, с помощью специального html-кода мы можем вообще скрыть последний пункт из цепочки хлебных крошек.
Но зачем, если можно просто её изменить с помощью плагина Yoast SEO? И тем самым положительно повлиять на продвижение в поисковиках.
А делается это в редакторе самой статьи. Спускаетесь ниже, где проводится анализ seo и читабельности. Находите вкладку Дополнительно и открываете.
В строке Заголовок для «хлебных крошек» пишете своё название. Я делаю таким образом. Перед написанием статьи сперва пишу обычный заголовок. Сразу же спускаюсь в этот раздел и вписываю заголовок для крошек, который содержит ключевое слово/фразу. А потом уже стряпаю статью.
Подведём итоги:
- Мы узнали о преимуществах хлебных крошек
- Подключили их в разделе «Отображение в поисковой выдаче»
- Вывели на сайт, использовав html-код
- Поменяли название последней страницы в редакторе статьи
И всё это с помощью отличного плагина Yoast SEO!
Кстати, вы можете подробнее изучить его возможности и работу в редакторе записи.
А в следующем уроке нас ждёт не менее важная задача — Установить SSL и настроить переход на HTTPS.
Что это такое?
Что ж начнем с самого начала, с понятия. «Хлебные крошки WordPress» что это такое? «Хлебные крошки» или как их еще называют, навигационная цепочка – это элемент навигации по сайту. Выглядит этот элемент как путь, проложенный от главной страницы до текущей страницы. Предыстория такого названия заключена в сказке, где маленькие дети заблудились и искали путь домой по хлебным крошкам.
Проведя аналогии, сразу становится очевидными, что «хлебные крошки» в нашей ситуации – это элементы, которые помогают пользователям найти путь к той или иной странице. Эти элементы в целом и создают навигационную цепочку. А чтобы Вам было еще понятней, то вот вам пример навигационной цепочки:
Главная страница » Раздел » Подраздел » Текущая страница.
или
Главная » Статьи » wordpress » Установка и настройка темы
Чаще всего данные элементы используют на сайтах со сложной структурой, где необходимо упростить путь для посетителей сайта.
Наличие хлебных крошек на сайте позволяет:
- Во-первых, улучшить перелинковку страниц сайта, что положительно сказывается на индексации сайта поисковыми системами.
- Во-вторых, упростить пользователям передвижение по разделам сайта. В любой момент посетитель сайта может вернуться в предыдущий раздел или подраздел.
Для их реализации можно воспользоваться специальным плагином или создать хлебные крошки wordpress без использования плагина.
Что такое хлебные крошки и какая у них структура
Хлебные крошки — дословный перевод английского термина breadcrumbs. Такое название прижилось для навигационной цепочки, размещенной в верхней части страницы сайта.
Обычно на этой цепочке отображается путь от главной страницы до той, на которой сейчас находится пользователь. Стандартно, выглядит это так: Главная страница — Раздел — Подраздел — Страница.
Но встречаются и другие варианты.
Динамические хлебные крошки. Это когда навигационная цепочка отображает вложенность страниц в зависимости от пути пользователя, а не от иерархии страниц. Например, на вашем сайте есть разделы с товарами «Подарки для парня» и «Подарки для друга». Носки могут одновременно находиться в двух разделах, поэтому навигационная цепочка для страницы с этим товаром может выглядеть по-разному — в зависимости от того, как на нее попал пользователь.
Хлебные крошки с выпадающим списком. Это навигационная цепочка с более расширенным функционалом. У каждого раздела списка при наведении отображается список смежных разделов. То есть пользователь может не просто вернуться на один уровень выше, но и перейти в смежный раздел любой категории.
Также встречаются варианты, когда слишком длинные хлебные крошки сокращают, удаляя очевидные подразделы, или же, наоборот, добавляют в них дополнительный элемент — например, с брендом товара.
Еще можно столкнуться с примерами, когда навигационная цепочка начинается не с главной страницы сайта, а с каталога.