Хлебные крошки для WordPress без плагина

Хлебные крошки (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 за 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, каждый работает и сделает ресурс удобнее.

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

Вы наверняка уже знакомы с понятием «Хлебные крошки» в веб-разработке и возможно даже приходилось реализовывать эти самые «крошки» на WordPress.

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

Если этот код работает не так как нужно, есть платная версия в виде плагина. Этот код я больше не поддерживаю.

Выглядят «хлебные крошки» так:

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

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

Функция будет показывать «хлебные крошки» для страниц следующих типов:

• Главная страница;
• Постоянная страница;
• Страница любого древовидного типа записи;
• Страница поста;
• Страница вложения (учитывается прикреплено вложение к записи или нет);
• Любой не древовидный тип записи (прикрепленный к любой таксономии, например, к стандартным «рубрикам»);
• Страница рубрики;
• Страница меток;
• Страница таксономии (как древовидной, так и одноуровневой (метки));
• Страницы архивов по датам, авторам;
• Страница пагинации для всех типов где предусмотрена пагинация
  (отображается как: Главная » Рубрика » Страница 2,3,4).
• Поддерживает микроразметку. Инструменты для проверки: для Яндекса и для Google.

Из особенностей, которые я не встретил в аналогичных функциях представленных в сети, стоит отметить правильный показ «хлебных крошек» для произвольных типов записей и произвольных таксономий, также в аналогах страница пагинации отображалась как, например, «Рубрика (страница 2)», а не «Рубрика > Страница 2», что, на мой взгляд, неправильно.

Для визуального восприятия, взгляните как выглядят «хлебные крошки» разных типов:

Также, я старался написать как можно менее прожорливый вариант функции.

Что касается плагина Breadcrumb NavXT, который повсеместно рекомендуется для вывода «хлебных крошек» — он мне не понравился из-за своей громоздкости. Моя функция не хуже, а в чем-то даже лучше: за счет функциональности, компактности и местами быстродействия!

Также функция поддерживает микроразметки: schema.org или RDF, смотрите параметр ‘markup’.

Функция «хлебных крошек» для WordPress

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

Вызывать функцию нужно в шаблоне, в том месте, где должны выводится крошки, так:

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

Примеры использование фильтров

#1 Установка параметров через фильтр

Измени дефолтные параметры через фильтр

Если установить параметры при вызове функции в третьем аргументе функции, то они перебьют параметры указанные в фильтре.

#3 Пример перевода крошек на английский

Эти примеры показывают как перевести крошки на нужный язык или просто изменить дефолтные значения:

Вариант 1

При вызове функции нужно указать строки локализации так:

Вариант 2

C версии 1.9. Можно использовать хук kama_breadcrumbs_default_loc , чтобы для каждого вызова одно и тоже не указывать. Для этого рядом с исходным кодом крошек добавьте такой хук:

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

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

#3 Добавление произвольной ссылки в начало крошек

Допустим нам нужно добавить после пункта «Главная» ссылку на страницу 7, если в текущий момент мы находимся в категории 5 или в её дочерней категории (учитывается один уровень вложенности).

Для этого добавьте такой хук рядом с кодом крошек:

#4 Добавление еще таксономий в крошки

По умолчанию в крошках обрабатывается только одна таксономи. Но иногда нужно несколько, для этого в версии 3.3 я вставил хуки: ‘attachment_tax_crumbs’ , ‘post_tax_crumbs’ , ‘term_tax_crumbs’ .

Допустим, у нас есть тип записи realty и 3 таксы для него: country , type_deal , type_realty . Нужно, чтобы у страницы записи в крошках отображались все таксы в указанном порядке. Также нужно, чтобы на каждой странице таксы указывались все предыдущие таксы и текущая в указанном порядке: country > type_deal > type_realty .

Другой вариант крошек

Этот вариант я стянул по ссылке, которую в комментариях дал Master. Весьма занимательное решение, потому и не удержался.

Условно, этот код подойдет не только к WordPress, а вообще к любому движку. Для WordPress он подойдет:

• во-первых, если включены ЧПУ;
• во-вторых, если в ссылках присутствуют названия категории;
• в-третьих, если названия статей и категорий в УРЛ пишутся в кириллице или это вообще англ. блог.

В других случаях будет работать, но, думаю, как-то не круто получится. Такие условия, потому что этот вариант разбирает ссылку на страницу (УРЛ) и по её элементам создает хлебные крошки. Ссылка разбивается разделителем / .

Допустим у нас УРЛ на статью имеет вид:
http://wptest.ru/рецепты/торт/готовим наполеон
тогда, мы получим цепочку крошек вида:
Главная » Рецепты » Торт » Готовим наполеон

Используется аналогично моей функции, только на экран выводить надо через echo:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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