Хлебные крошки в WordPress средствами плагина Breadcrumb NavXT и

Плагин Breadcrumb NavXT выводит хлебные крошки в WordPress

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

Для поисковых систем плагин Breadcrumb NavXT предоставляет информацию о структуре сайта, он говорит, Вы находитесь на страничке поста, вот ссылка на страницу категории, а вот главная страница. Как видите сайт не использует какую-то запутанную иерархию страниц, где конечная страница, на которой размещен полезный материал, находиться в 5 — 6 кликах от главной. Это хороший сайт, проиндексируй его быстрее.

Установка плагина Breadcrumb NavXT и вывод хлебных крошек на блоге.

Плагин доступен к скачиванию по адресу — http://wordpress.org/extend/plugins/breadcrumb-navxt /, устанавливается на блог, но чтобы хлебные крошки заработали на блоге, необходимо внести изменения в код шаблона.

Определитесь, где должны отображаться хлебные крошки на блоге. В зависимости от принятого решения откройте на редактирование (рекомендую использовать программу NotePad++) такие файлы:

  • single.php — чтобы они выводились на странице одиночных заметок
  • archive.php — если желаете выводить хлебные крошки на страницах архивов
  • search.php — и крошки будут выводиться на страницах с результатами поиска
  • page.php – навигационная цепочка будет размещена на страницах блога
  • category.php — если желаете выводить хлебные крошки на страницах рубрик и меток

В эти файлы или какой-то один файл вставьте этот код:

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

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

Панель настройки плагина Breadcrumb NavXT находится «Параметры» пункт «Breadcrumb NavXT» Когда Вы зайдете в панель впервые, он попросит обновить настройки — перейдите по ссылке. Она состоит из 4-х вкладок: Основные, Записи и страницы, Таксономии, Другие. Каждая вкладка состоит из несколько разделов.

  • Разделитель — значок, который будет выводится между ссылками в хлебных крошках(1)
  • Длина заголовка — если Вы даете очень длинные названия постам, навигационная цепочка может образовать 2 строки, а могут ссылки перекрыть боковую панель(иногда такое можете наблюдать на блогах под управлением WordPress. Поэтому ставьте флажок и ограничьте количество выводимых символов в крошках(2).

  • Показывать текущую позицию в виде ссылки — если да, то когда, Вы будете читать заметку, но в навигационной цепочке ее название будет ссылкой, если находитесь на странице рубрики — то ссылкой на страницу рубрики(тоесть саму на себя. Я не ставлю флажок.(3)
  • Постраничная навигация — опция полезна(4), если на блоге хлебные крошки отображаются на страницах рубрик или меток. Тогда на втором развороте и последующем в навигационной цепи ссылок будет выводиться номер страницы рубрики. Он определяется плагином PageNavi или другим дополнением, которое выводит постраничную навигацию на блоге. Пример виден на скриншоте ниже(6). Он отображает хлебные крошки, которые выводятся на втором развороте рубрики Автоновости.

Интересно выполнена настройка вывода ссылок или текста в цепочке с ссылками.

  • В поле Шаблон — определяется как именно будет форматироваться ссылка или надпись на второй разворот страницы рубрики: если в поле ввода стереть слово страница(5), то надпись на блоге изменит вид — со «страница 2» на просто «2».(6) Вместо слова «Страница» можно написать слово «часть», «разворот» и так далее.

Ссылка на главную — блок отвечает за форматирование ссылки на главную страницу блога.

  • Ссылка на главную — да, будет выводиться ссылка на главную страницу блога, нет — выводится как текст.
  • Шаблон ссылки на главную – Если ссылка на главную да, — прописываем каким будет анкор ссылки(7). Редактируется только слово, которое размещено между тегами
  • Шаблон ссылки на главную (некликабельная) — если флажок снят, то приписываем, каким будет текст (8), который будет размещен в начале хлебных крошек.

Ссылка на блог в блоке размещены такие опции Ссылка на блог, Шаблон ссылки на блог, Шаблон ссылки на блог (некликабельная) выполняет только ознакомительную функцию. Значение невозможно изменить.

Ссылка на главный сайт в блоке размещены такие опции Ссылка на главный сайт , Шаблон ссылки на главный сайт, Шаблон ссылки на главный сайт (некликабельная) выполняет только ознакомительную функцию. Значение невозможно изменить.

Вкладка «Записи и страницы»

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

  • Шаблон ссылки на запись — изменить код ссылки, которая будет выводиться на страницах записей.
  • Шаблон ссылки на запись (некликабельная) — определить, каким образом будет оформляться название поста, если он, согласно с настройками(3), выводиться текстом.
  • Вывод иерархии — да, если посты привязываются к нескольким категориям или меткам одновременно.
  • Иерархия записи — выбрать лучший вариант выборки для построения хлебных крошек плагином Breadcrumb NavXT, варианты: Рубрики, Даты, Метки, Под-страницы. Последний вариант мне не очень понятен, я не мог добиться построения крошек по этому принципу. Не рекомендую использовать выборку «Даты», так как создается хлебные крошки, где между главной страницей и постом создаются отдельные ссылки на страницу архивов по годам, потом месяцам, потом дням.

Страницы — возможно изменить оформление хлебных крошек, которые будут выводиться на страницах.

Вкладка «Таксономии» состоит из 3-х разделов. В них можно настроить внешний вид хлебных крошек, которые будут выводиться на страницах рубрик, меток, архивов. Не забывайте, перед внесением изменений в свойства этой вкладки, Вы должны вставить код(он размещен выше по тексту) в файлы archive.php, category.php, search.php, создать метки и/или рубрики

Вкладка «Другое» — настройка внешнего вида и кода хлебных крошек, которые будут формироваться плагином Breadcrumb NavXT на архивных страницах страницах, выборка материалов на которых выполняется по имени автора постов. Обратите внимание, что в навигационной цепочке ссылок используется имя автора, разместившего посты, которое размещено в профиле(опция «Отображать как»).

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

Breadcrumb NavXT русская версия

Breadcrumb NavXT это самый продвинутый и популярный плагин “хлебных крошек” для блога на WordPress. У него всего один недостаток – нет никаких встроенных стилей оформления. Этот недостаток плагина вы можете исправить, взяв готовые к использованию стили из этой статьи. В плагине достаточно много тонких настроек, так что я перевел его на русский язык, чтобы в настройках могли разобраться даже новички. Также читайте как оформить панель “хлебных крошек” в разметке RDFa, которая поможет поисковикам найти и использовать эту панель при формировании сниппета.

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

Также “хлебные крошки” помогают в плане SEO – поисковики зачастую определяют навигацию в виде “хлебных крошек” и могут вывести ее в поисковом сниппете. Например, практически все движки форумов выводят “хлебные крошки” и поисковики используют их при оформлении сниппета:

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

Скачиваем плагин по ссылке в конце страницы и устанавливаем его:

1. Распаковываем архив.

2. Копируем папку breadcrumb-navxt в /wp-content/plugins/.

3. Заходим в админку блога на вкладку “Плагины” и активируем плагин.

Настроить плагин вы можете в “ПараметрахBreadcrumb NavXT“. Я тут все перевел на русский язык и особых проблем с настройкой у вас возникнуть не должно. Тем более, что подавляющему большинству пользователей и не понадобится ничего настраивать – настройки по умолчанию вполне адекватны.

Кнопка “Помощь” в правом верхнем углу админки выведет перед вами маленькую памятку по использованию плагина: код вызова панели, пример оформления панели и некоторые другие вещи.

Из настроек по умолчанию я бы исправил лишь одну вещь – на вкладке “Текущая позиция” поставьте галку на “Постраничная навигация“, чтобы в панели отображалась текущая страница. Во избежание ситуаций, когда вы просматриваете 50-ую страницу сайта, а в панели все еще показывается, что вы находитесь на главной странице сайта. Так выглядит логичнее:

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

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

Вставьте в нужный файл шаблона вот этот код:

После этого будет выведена довольно кривая панель “хлебных крошек“:

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

1. Скачайте картинку (правая кнопка мышки и “Сохранить как“).
2. Закачайте ее себе на сайт куда-нибудь в папку images.
3. Измените в настройках плагина опцию “Шаблон ссылки на главную” на:

4. Опцию “Шаблон ссылки на главную (некликабельная)” поставьте:

%htitle%

Где “http://www.site.ru/home.png” будет указывать на вашу картинку.

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

Установить хлебные крошки на WordPress за 5 минут пошаговая инструкция

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

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

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

Что даст добавление breadcrumbs

Есть несколько причин зачем их добавлять:

  • Дополнительная перелинковка
  • Удобство использования – при большом количестве рубрик в вордпресс, можно запутаться где был ранее, а такое дополнение покажет место
  • Поведенческие факторы, конечно не намного, но добиться большей открываемости можно
  • Улучшение снипета в поисковой выдаче (необходима разметка shema)

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

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

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

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

  • Чтобы включить функцию, передвигаем ползунок в положение включено
  • Заполняем по желанию разделитель и задаем для разных страниц префиксы
  • Последний элемент в цепочке навигации можно вывести жирным цветом
  • Таксономию для записей лучше выставить Рубрика, чтобы показать подрубрику поста

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

Добавим его в шаблон записей, по умолчанию это документ single.php. Хочу добавить сразу после заголовка h1, вот здесь.

Побродив по single.php тега h1 я не нашел. Пришлось рыть глубже, нашел в папке templates-parts и в ней content-single, определил тег h1 и вставил php, представленный выше.

  1. Открываем Редактор тем
  2. Находим документ WordPress для вставки
  3. Определяем место где нужен расположить
  4. Вставляем строчки
  5. Нажимаем Обновить

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

Для более презентабельного вида советую добавить CSS. Так же Yoast добавил в редактор записей WordPress свой блок для изменения названия в конце цепочки. Переходим в редактор и идем в меню Дополнительно.

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

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

Настроить плагином Breadcrumb

Открытием стал плагин Breadcrumb, простой и постоянно обновляющийся. Устанавливается стандартно из панели в поиске, в выдаче выглядит так.

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

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

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

Создаем хлебные крошки без плагина

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

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

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

Для красоты добавим стили для оформления, предусмотрены три параметра:

Настраиваем по своему вкусу, если есть знания в CSS. Для примера дам свой вариант.

Вставляем в style.css, объясню что означает:

  1. Задал стили для всего блока хлебных крошек, задний фон, внутренний отступ и нижний, чтобы не прилипал к области контента
  2. Ссылки сделал черного цвета
  3. Цвет разделителя определил синим
  4. У последнего пункта добавил подчеркивание.

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

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

Код для WooCommerce

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

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

  1. Нажимаем Start visual hooks
  2. Выбираем область куда вставлять хлебные крошки, выберу перед заголовком
  3. Вставляем название, так он будет выглядеть

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

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

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

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

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

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

  • В активной теме есть запрет на вывод
  • Спор с другими дополнениями, например, с Yoast
  • Активный шаблон не предназначен для установки BBPress

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

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

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

  1. Отключить по одному какие–либо дополнения SEO оптимизации, потому что в большинстве случаем они подгружают такой функционал
  2. Отключить модули, если не добавляли, то они могут остаться от предыдущих вебмастеров или вшиты в сборку
  3. Если не помогло, то ищем в файлах темы, для этого узнаем какой div с классом отвечает за вывод.

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

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

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

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

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

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

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

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

Хлебные крошки на сайте с помощью плагина Breadcrumb NavXT

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

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

Лично я решил сделать хлебные крошки с микроразметкой на всех своих сайтах в основном для SEO. Подробнее о микроразметке хлебных крошек читайте здесь.

Изучив существующие плагины для wordpress, остановился на Breadcrumb NavXT. В общем-то, это единственный подходящий плагин с микроразметкой.

Установка плагина

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

Для вывода хлебных крошек в нужном месте сайта нужно вставить в код функцию bcn_display(). Описание этой функции и ее параметров, а также всю документацию к плагину можно найти на странице https://mtekk.us/code/breadcrumb-navxt/breadcrumb-navxt-doc/. Обычно нужно вставить эту функцию в шаблон файла single.php. Этот файл отвечает за вывод отдельной записи на вордпресс.

Обнаружил, что если просто вывести ХБ этой функцией, то эта микроразметка не обнаруживается сервисом гугл https://search.google.com/structured-data/testing-tool.

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

При таком подходе проверка проходит нормально. Отображается элемент BreadcrumbList без ошибок.

Настройка Breadcrumb NavXT

Настройки плагина по умолчанию можно не менять. Сами настройки можно найти в меню Настройки – Breadcrumb NavXT. Обратить внимание следует на следующие моменты.

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

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

В поле Шаблон ссылки на главную: здесь в некоторых случаях меняю текст тега title. Вместо переменно htitle плагин выводит то, что у вас указано в Настройки – Общие – Название сайта. Если вас это не устраивает, то можно вместо %htitle% просто написать “Главная”.

Если главная страница сайта у вас продвигается по какому-то конкретному запросу (Например, Шкафы купе в Омске), имеет смысл указать его вместо переменной htitle либо напрямую, либо прописав в настройках Название сайта. Тогда вы получите внутренние ссылки с этим анкором, что должно улучшить позиции по этому запросу.

После добавления кода и настроек обязательно проверьте его валидность в сервисе, приведенном выше.

Хлебные крошки (Breadcrumbs) для WordPress

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

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

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

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

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

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

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

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

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

На известных блогах Breadcrumbs присутствует, значит и нам не противопоказано. Приступим.

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

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

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

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

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

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

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

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

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

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

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

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

Хлебные крошки от Yoast SEO

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

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

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

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

Идём, далее. Если вы используете другой SEO плагин, не Yoast SEO, то добавить в ВорДпресс хлебные крошки можно с помощью специальных плагинов.

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

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

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

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

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

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

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

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

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

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

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

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

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

Ориентируйтесь по обновлениям. Обратите внимание на plugin SEO Breadcrumbs:

SEO Breadcrumbs (хлебные крошки)

Плагин WordPress SEO Breadcrumbs

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

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

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

Этот хак (нашел за бугром) подойдет для тех, кто не пользуется плагином . Открываем файл “Функции темы” ( functions.php ) и перед закрывающим тегом (в самом низу) ?> вставляем такой длинный код (не забудьте сделать резервную копию файла):

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

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

Откройте файл “Таблица стилей” ( style.css ) и в конце кода вставьте:

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

В заключение

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

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

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

Хлебные крошки для WordPress без плагина и с помощью Breadcrumb NavXT

Доброго времени суток, уважаемые владельцы сайтов!

Сегодня затронем первую тему по поводу навигации сайта.

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

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

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

Зачем нужны хлебные крошки?

Что касается хлебных крошек, то существует множество мнений, от важности данной функции для перелинковки до необходимости установки при сложной структуре сайта.

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

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

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

В большинстве случаев мы не встретим обычных сайтов со сложной структурой. Как правило, это идут обычные ресурсы на движке WordPress, где структура контента идет таким образом: Главная – Рубрика – Статья.

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

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

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

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

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

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

Делаем без плагина

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

Пойдем с первого способа. Он достаточно прост и состоит их 2х шагов:

  1. Размещение кода в файле шаблона functions.php;
  2. Размещение кода вывода крошек в нужном месте.

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