УСТАНОВИТЬ ХЛЕБНЫЕ КРОШКИ НА WORD PRESS ЗА 5 МИНУТ ПОШАГОВАЯ ИНСТРУКЦИЯ

Содержание
  1. Как установить хлебные крошки на WordPress за 5 минут
  2. Что такое и почему называются – хлебные крошки
  3. Как сделать в Yoast SEO
  4. Настроить плагином Breadcrumb
  5. Создаем хлебные крошки без плагина
  6. Активируем функцию хлебных крошек с schema org
  7. Вставка кода вывода breadcrumb от Yoast
  8. Шорткод (shortcode) для вставки хлебных крошек
  9. Настройка внешнего вида
  10. Как удалить хлебные крошки от Йоаст СЕО
  11. Вывод крошек в теме (Использование)
  12. Параметры $args
  13. Параметры $l10n
  14. Фильтры (хуки)
  15. Примеры использования хуков
  16. #1 Пример изменения элементов крошек
  17. #2 Добавим элементы крошек после ссылки на главную
  18. Удаление элементов из крошек
  19. Отключить крошки (по условию)
  20. Как сделать в YoastSEO
  21. Код для WooCommerce
  22. Хлебные крошки в BBpress
  23. Как убрать хлебные крошки
  24. Хлебные крошки с помощью функции плагина Yoast WordPress SEO
  25. Как добавить «хлебные крошки» (Breadcrumbs) в вашу тему
  26. Включаем хлебные крошки в Rank Math SEO
  27. Хлебные крошки WordPress плагин Breadcrumb NavXT
  28. Плагин SEO Breadcrumbs (хлебные крошки) для WordPress
  29. Как добавить хлебные крошки WordPress без плагина
  30. В заключение

Как установить хлебные крошки на WordPress за 5 минут

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

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

Что такое и почему называются – хлебные крошки

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

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

Как сделать в Yoast SEO

В плагине Yoast SEO есть встроенный модуль добавления и управления хлебными крошками.

Если используете другой инструмент сео оптимизации в WordPress, то пролистайте ниже.

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

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

Добавим его в шаблон записей, по умолчанию это документ 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

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

Так выглядят крошки визуально на страницах ресурса.

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

Конечно если не пользуетесь самим YoastSEO плагином, то не стоит устанавливать его только ради этого, другие методы рассказаны в статье.

Активируем функцию хлебных крошек с schema org

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

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

Вставка кода вывода breadcrumb от Yoast

Для вывода breadcrumbs есть специальный код, его вставляем в то место где нужно визуально их видеть.

Приведу на примере записей, за их вывод отвечает файл single php, но бывает, что он составляется из разных документов, поэтому искать придется глубже. Покажу на примере стандартного редактора в админке WordPress, но вы лучше действуйте через FTP с применением дочерней темы. Хочу вставить хлебные крошки после заголовка.

Прописываем код показа.

Видим множество символов, надпись «Вы здесь», между крошками разделители, далее все это будем менять, не забудьте очистить кэш в плагине кэширования и обновить страницу в браузере с помощью ctrl+f5. Главной опасностью тут является полностью дублирующийся заголовок в последнем элементе, этого быть не должно, разберемся далее как исправить.

Чтобы убрать с главной показ ХБ, тут придется править код шаблона и создавать свой обработчик, потому что универсального метода нет, все темы разные.

Шорткод (shortcode) для вставки хлебных крошек

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

Настройка внешнего вида

Когда вставляли код, то могли заметить, что есть идентификатор breadcrumbs, его не трогаем. Что нам мешает добавить класс, и стилизовать их с помощью стилей, можно в инструкцию добавить такой текст (возьму только одну строку).

Если есть знания верстки, то сменить цвета и размеры всех элементов просто. Перейдем к встроенным настройкам в Yoast SEO.

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

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

Сохраняем и смотрим что изменилось на сайте.

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

Единственное решение нашел в плагине ClearfyPRO, вот все пункты которые он исправляет в Yoast.

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

Убрали последний элемент.

Видим завершающий пункт пропал, а остальное сохранилось. Считаю это лучшим методом если не хочется менять все вручную. Дополню что Clearfy не только правит ошибки Yoast SEO, но затрагивает еще 49 проблем, например теги Application. Для читателей предоставляю скидку, жмите на кнопку.

Как удалить хлебные крошки от Йоаст СЕО

Существует вопрос как удалить данную навигацию если она предусмотрена в шаблоне:

Закончу пост, мы научились работать с хлебными крошками в плагине Yoast SEO, инструмент универсальный, потому что дополнительно использует в себе микроразметку schema org, но не в формате microdata.

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

Это новая версия — более простой, стабильный, расширяемый и понятный код. Измененная система хуков. Дополнительный функционал. Прошлый код значительно доработан.

Вывод крошек в теме (Использование)

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

Или можно вызвать с передачей параметров:

Когда нужно получить HTML крошек (не выводить на экран), используйте код:

Параметры $args

Настройки вывода крошек указываются в виде массива, в параметре $args. Возможные элементы массива:

Выводить крошки на главной странице.
По умолчанию: true

Показывать ли название записи в конце (последний элемент). Для записей, страниц, вложений.
По умолчанию: true

Показывать ли название элемента таксономии в конце (последний элемент). Для меток, рубрик и других такс.
По умолчанию: true

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

CSS класс для главного div.
По умолчанию: ‘kama_breadcrumbs’

CSS класс для элемента крошек a.
По умолчанию: ‘kb_link’

CSS класс заголовка элемента.
По умолчанию: ‘kb_title’

CSS класс разделителя.
По умолчанию: ‘kb_sep’

Приоритетные таксономии, нужно когда запись находится в нескольких таксономиях: array( ‘category’, ‘tax_name’ ).
Порядок имеет значение — чем раньше тем важнее.

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

Когда запись находится в нескольких элементах одной таксы одновременно. Например:

В этом коде category — это название таксономии для которой указываются приоритетные элементы.

По умолчанию: array()

Таксономии которые нужно исключить из показа в крошках: array( ‘post_tag’, ‘tax_name’ )
По умолчанию: array()

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

Поменять порядок можно в параметре priority_tax.
По умолчанию: array()

Микроразметка. Может быть:

Можно указать свой массив разметки, например:

По умолчанию: ‘Microdata’

Следует ли добавлять микроразметку JSON-LD в HTML.
По умолчанию: true

Использовать ли фильтр the_title для заголовков записей.
По умолчанию: false

Параметры $l10n

Параметры строк (локализации) указываются в параметре $l10n в виде массива. Значения по умолчанию:

Строки переводятся на англ. если у сайта выбран англ. язык.

Фильтры (хуки)

Все хуки плагина. Ниже показан код как хук определяется в плагине:

// Позволяет отключить вывод крошек
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 );

Примеры использования хуков

Чтобы изменить имеющие УРЛ в крошках или добавить свои крошки нужно использовать фильтр kama_breadcrumbs_filter_elements.

Функция прикрепленная к этому фильтру получает массив и должна вернуть измененный массив. Этот массив — это и есть крошки, только в виде многомерного массива, он потом превратиться в HTML код крошек.

Для изменения или создания элементов крошек используются два метода (они автоматически создают указанную в параметре markup микроразметку):

Код нужно вставлять в файл темы functions.php или куда-либо еще, главное до того как будут выведены крошки.

#1 Пример изменения элементов крошек

Чтобы все было понятно пройдусь по шагам.

Все изменения с крошками делаются через фильтр kama_breadcrumbs_filter_elements. Для начала посмотрим что лежит в крошках, чтобы понимать какие ключи массива есть:

В результате вы увидите такой массив (если мы на странице поста):

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

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

По такой системе можно удалять/изменять/добавлять крошки как угодно.

Важно отметить, что массив понимает любой уровень вложенности. Например, можно написать так и все будет работать:

#2 Добавим элементы крошек после ссылки на главную

Как выглядит массив $elms передаваемый в хук (элементы будут отличаться на разных страницах сайта):

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

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

Удаление элементов из крошек

Когда нужно удалить существующие элементы, так же как и при добавлении используем фильтр kama_breadcrumbs_filter_elements.

Так, чтобы например удалить ссылку Главная, нужно удалить элемент массива, точнее очистить его:

Отключить крошки (по условию)

Допустим нам нужно отключить вывод хлебных крошек на странице /profile. Сделать это можно через фильтр disable_kama_breadcrumbs:

Как сделать в YoastSEO

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

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

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

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

Куда заливать знаем, разбирались в разделе про Yoast. Существует еще один это NavXT, вебмастера скажут, что это отличный вариант, но мне не понравился, потому что такая мелочь создается быстро и легко, а в настройках NavXT много мусора.

Отмечу что функция авторская от нашего руководителя Сергея Алейникова.

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

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

https://youtube.com/watch?v=kShMh3CJIes%3Ffeature%3Doembed

Код для WooCommerce

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

add_action( ‘название области для вставки’, ‘woocommerce_breadcrumb’, 5, 0 );

Видим есть пометка, ее заменяем на место показа хлебных крошек. Используем плагин Woo Visual Hook Guide, устанавливаем и активируем из . Переходим на страницу товара.

Работа Woo Visual Hook Guide

add_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_breadcrumb’, 5, 0 );

Записываем его в function.php в самый низ и сохраняем.

Вставка хука WooCommerce

При успешном завершении операции WordPress покажет путь до товара, у меня вышло так. Прописываем CSS, как определить class написано ниже, оформляем под дизайн магазина.

Показ ХК на карточке товара

Метод универсальный, потому что используем встроенные возможности в WooCommerce, на его же страницах. В дополнение приложу свое видео.

https://youtube.com/watch?v=BvR5LONl8Fw%3Ffeature%3Doembed

Хлебные крошки в BBpress

Знаменитый модуль BBPress для формирования форумов на WordPress, имеет свои хлебные крошки.

Рекомендую пользоваться данным вариантом, потому что он правильно выстраивает цепочку навигации разделов. Бывает что не отображается, причин может быть несколько:

Старайтесь использовать темплейты, сделанный специально под продукт, это касается всех дополнительных инструментов.

Как убрать хлебные крошки

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

Для последнего советую использовать инструмент разработчиков в Google Chrome, нажимаем правой кнопкой и выбираем Просмотреть код.

Откроется окно и в нем смотрим какой div оборачивает весь блок с ссылками.

Похожее ищем в теме, где именно не могу сказать, но советую в single, page, index – это самые распространенные места.

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

Но если ничего не помогает и удалить не удается, то остается один способ, это скрыть визуально, но в коде они останутся. Выше мы определили, что класс крошек называется breadcrumb-container. Соответственно в style.css активной темы вписываем:

Переходим в запись и обязательно обновляем с помощью кнопок ctrl+F5, видим что надпись пропала.

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

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

Читатели блога ВордПресс Мания — Привет! Если у вас, друзья, на сайте не реализованы хлебные крошки WordPress — не беда. Вы сами можете установить навигационную цепочку (ссылки) при помощи данной инструкции. Выводить хлебные крошки на сайте ВордПресс нужно обязательно. И так, сегодня я покажу вам: как добавить хлебные крошки (Breadcrumbs) на сайт WordPress с помощью функции плагина Yoast WordPress SEO и Rank Math SEO (надеюсь вы установили тот или другой SEO плагин).

А так же расскажу вам какие специальные плагины Breadcrumbs (хлебные крошки WordPress) существуют для этой цели. А для опытных пользователей есть возможность добавить хлебные крошки на сайт без плагина. И так, дамы и господа, читайте: Как сделать хлебные крошки в WordPress?

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

Так как этот блог для новичков объясню сначала:

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

Хлебные крошки на сайте ВордПресс

Кто то считает, что хлебные крошки не обязательно устанавливать на сайт, а кто то наоборот.

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

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

Google и Яндекс подчеркивают важность хлебных крошек во всех своих документах и руководствах по SEO. Причина проста: трассы Breadcrumb состоят из слов, причем чаще всего из ключевых и им есть что предложить, как роботам поисковиков, так и пользователям.

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

И так, приступим. Сначала хлебные крошки WordPress Yoast seo.

Хлебные крошки с помощью функции плагина Yoast WordPress SEO

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

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

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

Настройки Хлебных крошек в Yoast SEO

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

Специалист по оптимизации Devaka (Сергей Кокшаров) советует использовать потенциал первой ссылки в хлебных крошках: вместо слова Главная или Домашняя писать основное ключевое слово сайта или название бренда.

Далее, в «хлебных крошках» установить таксономию для рубрики. Нажмите «Сохранить изменения». Не забудьте добавить код в нужное место вашего шаблона (темы).

Как добавить «хлебные крошки» (Breadcrumbs) в вашу тему

Хлебные крошки не появятся, пока вы не вставите небольшой код на свой сайт. Начните с копирования следующего кода:

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

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

Код разметки хлебных крошек нужно поместить в файлы ВордПресс:

Другой вариант, который делает это действительно простым в некоторых темах, это просто вставка кода в .

В примере возьмём тему Twenty Eleven. Идем: Внешний вид — Редактор тем. Открываем файл single.php (одна запись) и вставляем код:

Вставка кода в шаблон WP

Сохраняем файл и смотрим, что у нас получилось в итоге:

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

Заголовок этой страницы, который будет выводиться в хлебных крошках

Вот, как то, так получится:

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

Идём, далее. Если вы используете другой SEO плагин, не Yoast SEO, а например, Rank Math.

Включаем хлебные крошки в Rank Math SEO

Переходите Общие настройки — Хлебные крошки. Включение функции Breadcrumbs в SEO плагине Rank Math позволяет вам настроить хлебные крошки под ваши нужды:

Включить функцию хлебных крошек

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

Вставка кода хлебных крошек также как написано выше, для Yoast SEO. Если вы хотите также отображать в хлебных крошках другой заголовок статьи, то используйте Breadcrumb Title. Впишите свой SEO заголовок для статьи:

Название для этого поста

Также добавить в ВорДпресс хлебные крошки можно с помощью специальных плагинов.

Хлебные крошки WordPress плагин Breadcrumb NavXT

Самый популярный модуль на сегодняшний день — это Breadcrumb NavXT.

Плагин для WordPress Breadcrumb NavXT

Breadcrumb NavXT — это плагин совместимый с WordPress версий 4.0 и выше. Он генерирует локальные цепочки для вашего блога/сайта на ВордПресс. Поскольку Breadcrumb NavXT последовательно отображает иерархию страниц, она поможет обеспечить преимущества SEO.

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

И снова нам понадобится редактировать файл Отдельная запись () и/или Отдельная страница (). Можно использовать файл Заголовок (). Берём код:

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

Установка кода Breadcrumb NavXT на страницу сайта

Сохраняетесь. Открываем страницу блога и смотрим результат:

Навигационные ссылки на странице блога

Добавьте этот же код в файл Отдельная запись () как показано для Yoast SEO. Хороший плагин? О, да! Не подходит? Да, без проблем.

Заходим Плагины — Добавить новый и в поле поиска по плагинам вбиваем ключевое слово Breadcrumb. Выбирайте, друзья:

Плагины хлебных крошек для WordPress

Ориентируйтесь по обновлениям. Самым популярным плагином хлебные крошки для сайта WordPress — Breadcrumb NavXT. Вы можете использовать и другие. Например, Flexy Breadcrumb, Breadcrumb.

Обратите внимание на plugin SEO Breadcrumbs:

Плагин SEO Breadcrumbs (хлебные крошки) для WordPress

SEO Breadcrumbs — это мощный и простой в использовании плагин, который может добавить пять различных навигаций по хлебным крошкам на ваш сайт WordPress.

Плагин WordPress SEO Breadcrumbs

Плагин SEO Breadcrumbs WordPress полностью настраиваемый и отзывчивый. Он показывает хлебные крошки в сообщении, странице, пользовательских таксономиях, архивах, вложениях, ошибке 404, результатах поиска и многом другом.

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

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

Выбор Breadcrumbs Style

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

Rich Snippets (синоним «богатые результаты») — это обычные результаты выдачи Google с отображением параметров структурной разметки. Эти дополнительные данные обычно берутся из информации, полученной роботом из HTML-кода страницы. Наиболее популярные разновидности Rich Snippet включают аналитику, рейтинги, рецепты, рекомендации и события.

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

Этот хак (нашел за бугром) подойдет для тех, кто не пользуется плагином. Для вставки PHP кода лучше использовать дочерние темы или использовать специальный инструмент. Если тему не будите обновлять, то вставляйте код напрямую.

Открываем файл «Функции темы» () и перед закрывающим тегом (в самом низу) вставляем такой длинный код (не забудьте сделать резервную копию файла):

Обновите файл. Для вызова функции так же, как описано выше, в файлы  (одна запись);   (шаблон страницы);  (архивы);  (результаты поиска) вставьте код:

Всё. Если понадобится задать стиль CSS для хлебных крошек (под дизайн вашей темы) заключите строчку в:

Откройте файл «Таблица стилей» () и в конце кода вставьте:

Настройте стиль под ваш дизайн блога/сайта.

В заключение

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

Благодаря микроразметке Breadcrumbs (навигационная цепочка) встраивается в выдачу Google. В Яндекс такой функции нет, но поисковик может самостоятельно подстроить структуру сайта под шаблон микроразметки.

На этом у меня все. До новых встреч. Удачи.

Оцените статью
NaWordpress.ru
Добавить комментарий