Wordpress, "хлебные крошки": обзор плагинов. «Хлебные крошки» для WordPress без использования плагина Хлебные крошки для wp

Привет! Я продолжаю освещать супер полезные плагины для системы wordpress. Сегодня я расскажу и покажу как очень просто и быстро установить на свой сайт wordpress хлебные крошки. Что такое Хлебные крошки? В хлебных крошках показывается путь проделанный вами на сайте, от первой страницы до текущей. Например, вы зашли на сайт на Главную страницу, затем перешлю в рубрику “Хозтовары”, затем открыли запись “Как подоить корову” и т.д.

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

Добавить на свой сайт Хлебные крошки вы сможете с помощью простого плагина – Yummi Хлебные Крошки . Установить данный плагин на свой сайт вы сможете прямо из админ-панели wordpress. Перейдите на страницу: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

После установки и активации плагина, перейдите на страницу: Настройки – Yummi Хлебные крошки . Здесь вы сможете настроить плагин. Плагин имеет очень простые настройки, с которыми справится да же самый заядлый чайник .

– Тип установки, выберите тип установки. Выберите тип Авто , чтобы хлебные крошки автоматически появились на вашем сайте. Если выберите тип – Ручная , то придётся вставлять код хлебных крошек на сайт вручную.

Вид Хлебных Крошек, выберите вид хлебных крошек. Можете поэкспериментировать с внешним видом хлебных крошек.

– Имя текущей, выберите показывать ли в ХК имя текущей страницы или записи.

На Главной странице, показывать или нет ХК на главной странице.

Подсказки всплывающие, включить или отключить всплывающие подсказки.

“title=” для ссылок, включить атрибут title для ссылок.

– Текущий шрифт, указан текущий шрифт для ХК.

Изменить вид Заглавных категорий, можно изменить стиль шрифта для категорий.

Ваша благодарность, выберите – Спрятать , чтобы ссылка на сайт автора плагина не отображалась на вашем сайте.

Нажмите на кнопку Сохранить изменения .

(Последнее обновление: 19.05.2019)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Хлебные крошки от Yoast 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 ) и перед закрывающим тегом (в самом низу) ?> вставляем такой длинный код (не забудьте сделать резервную файла):

Function dimox_breadcrumbs() { /* === OPTIONS === */ $text["home"] = "Главная"; // текст ссылки "Главная" $text["category"] = "Архив рубрики "%s""; // текст для страницы рубрики $text["search"] = "Результаты поиска по запросу "%s""; // текст для страницы с результатами поиска $text["tag"] = "Записи с тегом "%s""; // текст для страницы тега $text["author"] = "Статьи автора %s"; // текст для страницы автора $text["404"] = "Ошибка 404"; // текст для страницы 404 $show_current = 1; // 1 - показывать название текущей статьи/страницы/рубрики, 0 - не показывать $show_on_home = 0; // 1 - показывать "хлебные крошки" на главной странице, 0 - не показывать $show_home_link = 1; // 1 - показывать ссылку "Главная", 0 - не показывать $show_title = 1; // 1 - показывать подсказку (title) для ссылок, 0 - не показывать $delimiter = " » "; // разделить между "крошками" $before = ""; // тег перед текущей "крошкой" $after = ""; // тег после текущей "крошки" /* === END OF OPTIONS === */ global $post; $home_link = home_url("/"); $link_before = ""; $link_after = ""; $link_attr = " rel="v:url" property="v:title""; $link = $link_before . "%2$s" . $link_after; $parent_id = $parent_id_2 = $post->post_parent; $frontpage_id = get_option("page_on_front"); if (is_home() || is_front_page()) { if ($show_on_home == 1) echo "

" . $text["home"] . "
"; } else { echo ""; } } // end dimox_breadcrumbs()

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

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

строчка вызова

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

Crumbs { border-bottom: 1px dotted #999999; font-family: "Georgia", "Times New Roman", "Times", serif; font-size: 9px; font-weight: 600; line-height: 15px; color: #ccc; } .crumbs a{ font-family: "Georgia", "Times New Roman", "Times", serif; font-size: 9px; font-weight: 600; line-height: 15px; color: #ccc; text-decoration: none; }

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

В заключение

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

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

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

(function(w, d, n, s, t) { w[n] = w[n] || ; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-292864-4", renderTo: "yandex_rtb_R-A-292864-4", async: true }); }); t = d.getElementsByTagName("script"); s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks");

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

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

Хлебные крошки (breadcrumbs) – это элемент навигации по сайту. Их еще называют навигационной цепочкой, дублирующей навигацией, навигационным меню и т.д. В англоязычной литературе также можно встретить название: «крошки печенья » (cookie crumb). Также иногда хлебные крошки могут называться навигационным путем (navigation path). Собственно, все эти синонимы описывают один и тот же объект, который мы и разберем далее.

Хлебные крошки визуально отображают путь от главной (корневой) страницы сайта до той страницы, на которой в данный момент находится пользователь. Почему эта навигация получила такое странное название? Если вы читали сказку Братьев Гримм «Гензель и Гретель», то вы знаете, что в ней дети, подслушав разговоры родителей о том, что их оставят в лесу, попытались заранее запастись небольшими камушками, которые они кидали на дорогу, дабы выбраться. В первый раз это сработало, а во второй раз камней набрать не получилось, поэтому дети кидали на дорогу крошки хлеба. Однако они не предусмотрели того, что эти крошки склевали птицы. В итоге дети заблудились и набрели на дом ведьмы. Пересказывать весь сюжет сказки нет смысла, вы, скорее всего, и так ее читали. Собственно, к этому событию и отсылает нас название навигации.

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

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

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

Перед тем как перейти непосредственно к обзору модулей, пару слов скажу о том, как и зачем применятся данное решение:

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

Однако такая функциональность эффективна в каждом веб-проекте. Если у вас имеется простая визитка на 10-20 страниц без вложенной иерархии, то нет смысла добавлять хлебные крошки в WP. Элемент не будет нести абсолютно никакой пользы, а лишь занимать свободное место на экране. В случае корпоративных порталов с многоуровневыми категориями / разделами — совсем другое дело. Плюс в он тоже отлично смотрится.

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

Глупо получится, когда сразу же под цепочкой «Главная» — «Категория» — «Заголовок поста» вы видите тот же тайтл + указание текущей категории. Подобное отображение рубрик, кстати, часто встречается в стандартных WP шаблонах, поэтому после интеграции соответствующего решения желательно этот нюанс подправить.

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

Модули под данную задачу легко находятся по англоязычному названию функции Breadcrumbs — в WordPress репозитории или через поисковики. Разных вариантов реализации хватает, но бОльшая их часть не обновлялись несколько лет.

Возможно, авторам надоело конкурировать с бессменными лидерами Breadcrumb NavXT с 600тыс. загрузок и SEO by Yoast. К тому же достаточно сложно придумать что-то сверх оригинальное в данном вопросе, т.к. он максимально прост и даже можно реализовать хлебные крошки в WordPress без плагина. Как бы там ни было, подобрал 4 наиболее интересных решения:

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

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

Breadcrumb

В принципе, сложно найти решения, которые были бы интереснее предыдущих двух, хотя есть неплохие попытки. Так, например, в модуле Breadcrumb для WordPress внедрена поддержка шорткодов, плюс сама цепочка ссылок имеет оригинальное оформление (смотрите по ссылке Live Demo!»). Непонятно только поддерживаются ли дизайны в бесплатной версии. Также вы можете настраивать тип разделителя и добавлять текст в начале элемента. По словам разработчиков скрипт максимально простой и легкий.

Еще один вариант, имеющий плюс-минус достойное число загрузок, не смотря на то, что обновлялся около года назад. Авторы обещают гибкую настройку хлебных крошек в WordPress: встроенные хуки, параметры отображения и поддержку стилей (в описании есть пример CSS Sample). Модуль показался достаточно неплохим и простым решением с хорошими оценками.

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

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

После активации появится целый новый раздел SEO, где вам нужно выбрать пункт «Дополнительно». Далее переместите выключатель в пункте со странным названием «Включить Мякиш» в позицию «Включено»:

Разных опций здесь, в принципе не так уж и много. Вы определяете символ разделителя, название главной, префикс, текс для архивов и 404 страницы. Чуть ниже выбираете вариант таксономии, отображаемой в записи (рубрика — наиболее логична).

Затем переходите в файл шаблона, где собираетесь выводить навигационный блок и добавляете строки:

" , "

" ) ; } ?>

Самые популярные места вставки кода — в постах (single.php) и страницах (page.php) перед отображением заголовка. Иногда его могут размещать в конце макета шапки (header.php). Код выше имеет условный оператор и проверяет наличие плагина, а затем уже показывает результат. С такой конструкцией можно будет легко отключить хлебные крошки в настройках. Во многие профессиональные темы, кстати, данный код добавлен изначально, т.к. модуль является весьма популярным.

Еще одно преимущество Yoast SEO — хлебные крошки могут задаваться в дополнительных параметрах постов блога:

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

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

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

Через админку либо скачиваете с официального репозитория . Важно! Для версии Breadcrumb NavXT от 5.2 вам потребуется PHP5.3, более ранние релизы требуют PHP5.2. Затем активируете, и в WP появится соответствующий раздел.

Здесь есть 4 закладки параметров:

  • В «Основных» можно выбрать тип разделителя, убрать линк на главную и настроить показ текущей страницы. Формат строки задается через шаблоны.
  • «Записи» — содержит опции для постов.
  • «Таксономии» — отвечают за метки / категории.
  • «Другое» — форматы страниц автора, архивов, 404 ошибки.

Советую пройтись по каждой вкладке, посмотреть все фишки. Формат отображения позволяет вносить любые изменения в данную навигацию — добавлять свой текст/символы, менять стили и т.п.

После указания параметров хлебных крошек Breadcrumbs в WordPress плагине нужно задать вывод информации в шаблоне — открываете соответствующий файл макета (как правило, header.php) и размещаете в нужном месте строки:

Аналогично работе с Yoast SEO выбор места размещения кода зависит от установленной темы. Если предполагается вывод блока в шапке, тогда используете header.php. Учитывая то, что этот файл общий для всех страниц макета, увидите цепочку ссылок на каждой из них. Также можно показывать элемент только в избранных разделах — в таком случае вставляете код в single.php, page.php, archive.php и т.п. В целом, Breadcrumb NavXT — неплохой инструмент.

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

Допускается реализация функции Breadcrumbs в WordPress без плагинов. Однако перед тем как перейти к описанию разных вариантов, я выскажу свое субъективное мнение почему это не лучшая идея:

  • Интеграция наверняка вызовет сложности у начинающих пользователей.
  • Редактирование параметров непосредственно в коде не особо наглядно — задание шаблонов отображения через админку куда удобнее нежели правка напрямую.
  • Модули имеют больше возможностей — взять хотя бы локализацию, поддержку Schema.org, виджеты.
  • Не все коды, найденные в сети, актуальны, корректны и регулярно обновляются, в то время когда, как минимум, Yoast SEO и Breadcrumb NavXT в WordPress стабильно работают.

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

Одно из самых компактных и плюс-минус актуальных решений . Первым делом вы добавляете новую пользовательскую функцию get_breadcrumb() в файл functions.php:

/** * Generate breadcrumbs * @author CodexWorld * @authorURL www.codexworld.com */ function get_breadcrumb() { echo "Home" ; if (is_category() || is_single() ) { echo " » " ; the_category(" . " ) ; if (is_single() ) { echo " » " ; the_title() ; } } elseif (is_page() ) { echo " » " ; echo the_title() ; } elseif (is_search() ) { echo " » Search Results for... " ; echo """ ; echo the_search_query() ; echo """ ; } }

/** * Generate breadcrumbs * @author CodexWorld * @authorURL www.codexworld.com */ function get_breadcrumb() { echo "Home"; if (is_category() || is_single()) { echo " » "; the_category(" . "); if (is_single()) { echo " » "; the_title(); } } elseif (is_page()) { echo " » "; echo the_title(); } elseif (is_search()) { echo " » Search Results for... "; echo """; echo the_search_query(); echo """; } }

Затем в макете отображения постов single.php или любом другом вызываете ее:

breadcrumb { padding : 8px 15px ; margin-bottom : 20px ; list-style : none ; background-color : #f5f5f5 ; border-radius : 4px ; } .breadcrumb a { color : #428bca ; text-decoration : none ; }

breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px; } .breadcrumb a { color: #428bca; text-decoration: none; }

В итоге получите что-то вроде:

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

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

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

  1. Смотрим есть ли плагин хлебных крошек для Вордпресс сайта. Если да, то пробуем скрыть отображение цепочки ссылок в настройках и/или деактивируем его.
  2. Если разработчик грамотно выполнил интеграцию, то удаление модуля не приведет к ошибкам. В противном случае ищем в файлах шаблона код вывода навигации (WinGrep в помощь). Это могут быть, например, функции yoast_breadcrumb(), bcn_display(), bread_crumb() и т.п. Избавляемся от лишних строк.
  3. Еще раз проверяем отображение страниц проекта в браузере.

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

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

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

P.S. Постовой. В наше время нужно использовать современные трубопроводные системы — газовые трубы представлены ТД «Евротрубпласт» отвечают всем стандартам качества.

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

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

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

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

Главная страница » Раздел » Подраздел » Текущая страница

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

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

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

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

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

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

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

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

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

get_crumbs($sep, $l10n, $args); } class Kama_Breadcrumbs { public $arg; // Локализация static $l10n = array("home" => "Главная", "paged" => "Страница %d", "_404" => "Ошибка 404", "search" => "Результаты поиска по запросу - %s", "author" => "Архив автора: %s", "year" => "Архив за %d год", "month" => "Архив за: %s", "day" => "", "attachment" => "Медиа: %s", "tag" => "Записи по метке: %s", "tax_tag" => "%1$s из "%2$s" по тегу: %3$s", // tax_tag выведет: "тип_записи из "название_таксы" по тегу: имя_термина". // Если нужны отдельные холдеры, например только имя термина, пишем так: "записи по тегу: %3$s"); // Параметры по умолчанию static $args = array("on_front_page" => true, // выводить крошки на главной странице "show_post_title" => true, // показывать ли название записи в конце (последний элемент). Для записей, страниц, вложений "show_term_title" => true, // показывать ли название элемента таксономии в конце (последний элемент). Для меток, рубрик и других такс "title_patt" => "%s", // шаблон для последнего заголовка. Если включено: show_post_title или show_term_title "last_sep" => true, // показывать последний разделитель, когда заголовок в конце не отображается "markup" => "schema.org", // "markup" - микроразметка. Может быть: "rdf.data-vocabulary.org", "schema.org", "" - без микроразметки // или можно указать свой массив разметки: // array("wrappatt"=>"
%s
", "linkpatt"=>"%s", "sep_after"=>"",) "priority_tax" => array("category"), // приоритетные таксономии, нужно когда запись в нескольких таксах "priority_terms" => array(), // "priority_terms" - приоритетные элементы таксономий, когда запись находится в нескольких элементах одной таксы одновременно. // Например: array("category"=>array(45,"term_name"), "tax_name"=>array(1,2,"name")) // "category" - такса для которой указываются приор. элементы: 45 - ID термина и "term_name" - ярлык. // порядок 45 и "term_name" имеет значение: чем раньше тем важнее. Все указанные термины важнее неуказанных... "nofollow" => false, // добавлять rel=nofollow к ссылкам? // служебные "sep" => "", "linkpatt" => "", "pg_end" => "",); function get_crumbs($sep, $l10n, $args){ global $post, $wp_query, $wp_post_types; self::$args["sep"] = $sep; // Фильтрует дефолты и сливает $loc = (object) array_merge(apply_filters("kama_breadcrumbs_default_loc", self::$l10n), $l10n); $arg = (object) array_merge(apply_filters("kama_breadcrumbs_default_args", self::$args), $args); $arg->sep = "". $arg->sep .""; // дополним // упростим $sep = & $arg->sep; $this->arg = & $arg; // микроразметка --- if(1){ $mark = & $arg->markup; // Разметка по умолчанию if(! $mark) $mark = array("wrappatt" => "
%s
", "linkpatt" => "%s", "sep_after" => "",); // rdf elseif($mark === "rdf.data-vocabulary.org") $mark = array("wrappatt" => "
%s
", "linkpatt" => "%s", "sep_after" => "", // закрываем span после разделителя!); // schema.org elseif($mark === "schema.org") $mark = array("wrappatt" => "
%s
", "linkpatt" => "%s", "sep_after" => "",); elseif(! is_array($mark)) die(__CLASS__ .": "markup" parameter must be array..."); $wrappatt = $mark["wrappatt"]; $arg->linkpatt = $arg->nofollow ? str_replace("sep .= $mark["sep_after"]."\n"; } $linkpatt = $arg->linkpatt; // упростим $q_obj = get_queried_object(); // может это архив пустой таксы? $ptype = null; if(empty($post)){ if(isset($q_obj->taxonomy)) $ptype = & $wp_post_types[ get_taxonomy($q_obj->taxonomy)->object_type ]; } else $ptype = & $wp_post_types[ $post->post_type ]; // paged $arg->pg_end = ""; if(($paged_num = get_query_var("paged")) || ($paged_num = get_query_var("page"))) $arg->pg_end = $sep . sprintf($loc->paged, (int) $paged_num); $pg_end = $arg->pg_end; // упростим $out = ""; if(is_front_page()){ return $arg->on_front_page ? sprintf($wrappatt, ($paged_num ? sprintf($linkpatt, get_home_url(), $loc->home) . $pg_end: $loc->home)) : ""; } // страница записей, когда для главной установлена отдельная страница. elseif(is_home()) { $out = $paged_num ? (sprintf($linkpatt, get_permalink($q_obj), esc_html($q_obj->post_title)) . $pg_end) : esc_html($q_obj->post_title); } elseif(is_404()){ $out = $loc->_404; } elseif(is_search()){ $out = sprintf($loc->search, esc_html($GLOBALS["s"])); } elseif(is_author()){ $tit = sprintf($loc->author, esc_html($q_obj->display_name)); $out = ($paged_num ? sprintf($linkpatt, get_author_posts_url($q_obj->ID, $q_obj->user_nicename) . $pg_end, $tit) : $tit); } elseif(is_year() || is_month() || is_day()){ $y_url = get_year_link($year = get_the_time("Y")); if(is_year()){ $tit = sprintf($loc->year, $year); $out = ($paged_num ? sprintf($linkpatt, $y_url, $tit) . $pg_end: $tit); } // month day else { $y_link = sprintf($linkpatt, $y_url, $year); $m_url = get_month_link($year, get_the_time("m")); if(is_month()){ $tit = sprintf($loc->month, get_the_time("F")); $out = $y_link . $sep . ($paged_num ? sprintf($linkpatt, $m_url, $tit) . $pg_end: $tit); } elseif(is_day()){ $m_link = sprintf($linkpatt, $m_url, get_the_time("F")); $out = $y_link . $sep . $m_link . $sep . get_the_time("l"); } } } // Древовидные записи elseif(is_singular() && $ptype->hierarchical){ $out = $this->_add_title($this->_page_crumbs($post), $post); } // Таксы, плоские записи и вложения else { $term = $q_obj; // таксономии // определяем термин для записей (включая вложения attachments) if(is_singular()){ // изменим $post, чтобы определить термин родителя вложения if(is_attachment() && $post->post_parent){ $save_post = $post; // сохраним $post = get_post($post->post_parent); } // учитывает если вложения прикрепляются к таксам древовидным - все бывает:) $taxonomies = get_object_taxonomies($post->post_type); // оставим только древовидные и публичные, мало ли... $taxonomies = array_intersect($taxonomies, get_taxonomies(array("hierarchical" => true, "public" => true))); if($taxonomies){ // сортируем по приоритету if(! empty($arg->priority_tax)){ usort($taxonomies, function($a,$b)use($arg){ $a_index = array_search($a, $arg->priority_tax); if($a_index === false) $a_index = 9999999; $b_index = array_search($b, $arg->priority_tax); if($b_index === false) $b_index = 9999999; return ($b_index === $a_index) ? 0: ($b_index < $a_index ? 1: -1); // меньше индекс - выше }); } // пробуем получить термины, в порядке приоритета такс foreach($taxonomies as $taxname){ if($terms = get_the_terms($post->ID, $taxname)){ // проверим приоритетные термины для таксы $prior_terms = & $arg->priority_terms[ $taxname ]; if($prior_terms && count($terms) > 2){ foreach((array) $prior_terms as $term_id){ $filter_field = is_numeric($term_id) ? "term_id" : "slug"; $_terms = wp_list_filter($terms, array($filter_field=>$term_id)); if($_terms){ $term = array_shift($_terms); break; } } } else $term = array_shift($terms); break; } } } if(isset($save_post)) $post = $save_post; // вернем обратно (для вложений) } // вывод // все виды записей с терминами или термины if($term && isset($term->term_id)){ $term = apply_filters("kama_breadcrumbs_term", $term); // attachment if(is_attachment()){ if(! $post->post_parent) $out = sprintf($loc->attachment, esc_html($post->post_title)); else { if(! $out = apply_filters("attachment_tax_crumbs", "", $term, $this)){ $_crumbs = $this->_tax_crumbs($term, "self"); $parent_tit = sprintf($linkpatt, get_permalink($post->post_parent), get_the_title($post->post_parent)); $_out = implode($sep, array($_crumbs, $parent_tit)); $out = $this->_add_title($_out, $post); } } } // single elseif(is_single()){ if(! $out = apply_filters("post_tax_crumbs", "", $term, $this)){ $_crumbs = $this->_tax_crumbs($term, "self"); $out = $this->_add_title($_crumbs, $post); } } // не древовидная такса (метки) elseif(! is_taxonomy_hierarchical($term->taxonomy)){ // метка if(is_tag()) $out = $this->_add_title("", $term, sprintf($loc->tag, esc_html($term->name))); // такса elseif(is_tax()){ $post_label = $ptype->labels->name; $tax_label = $GLOBALS["wp_taxonomies"][ $term->taxonomy ]->labels->name; $out = $this->_add_title("", $term, sprintf($loc->tax_tag, $post_label, $tax_label, esc_html($term->name))); } } // древовидная такса (рибрики) else { if(! $out = apply_filters("term_tax_crumbs", "", $term, $this)){ $_crumbs = $this->_tax_crumbs($term, "parent"); $out = $this->_add_title($_crumbs, $term, esc_html($term->name)); } } } // влоежния от записи без терминов elseif(is_attachment()){ $parent = get_post($post->post_parent); $parent_link = sprintf($linkpatt, get_permalink($parent), esc_html($parent->post_title)); $_out = $parent_link; // вложение от записи древовидного типа записи if(is_post_type_hierarchical($parent->post_type)){ $parent_crumbs = $this->_page_crumbs($parent); $_out = implode($sep, array($parent_crumbs, $parent_link)); } $out = $this->_add_title($_out, $post); } // записи без терминов elseif(is_singular()){ $out = $this->_add_title("", $post); } } // замена ссылки на архивную страницу для типа записи $home_after = apply_filters("kama_breadcrumbs_home_after", "", $linkpatt, $sep, $ptype); if("" === $home_after){ // Ссылка на архивную страницу типа записи для: отдельных страниц этого типа; архивов этого типа; таксономий связанных с этим типом. if($ptype && $ptype->has_archive && ! in_array($ptype->name, array("post","page","attachment")) && (is_post_type_archive() || is_singular() || (is_tax() && in_array($term->taxonomy, $ptype->taxonomies)))){ $pt_title = $ptype->labels->name; // первая страница архива типа записи if(is_post_type_archive() && ! $paged_num) $home_after = sprintf($this->arg->title_patt, $pt_title); // singular, paged post_type_archive, tax else{ $home_after = sprintf($linkpatt, get_post_type_archive_link($ptype->name), $pt_title); $home_after .= (($paged_num && ! is_tax()) ? $pg_end: $sep); // пагинация } } } $before_out = sprintf($linkpatt, home_url(), $loc->home) . ($home_after ? $sep.$home_after: ($out ? $sep: "")); $out = apply_filters("kama_breadcrumbs_pre_out", $out, $sep, $loc, $arg); $out = sprintf($wrappatt, $before_out . $out); return apply_filters("kama_breadcrumbs", $out, $sep, $loc, $arg); } function _page_crumbs($post){ $parent = $post->post_parent; $crumbs = array(); while($parent){ $page = get_post($parent); $crumbs = sprintf($this->arg->linkpatt, get_permalink($page), esc_html($page->post_title)); $parent = $page->post_parent; } return implode($this->arg->sep, array_reverse($crumbs)); } function _tax_crumbs($term, $start_from = "self"){ $termlinks = array(); $term_id = ($start_from === "parent") ? $term->parent: $term->term_id; while($term_id){ $term = get_term($term_id, $term->taxonomy); $termlinks = sprintf($this->arg->linkpatt, get_term_link($term), esc_html($term->name)); $term_id = $term->parent; } if($termlinks) return implode($this->arg->sep, array_reverse($termlinks)) /*. $this->arg->sep*/; return ""; } // добалвяет заголовок к переданному тексту, с учетом всех опций. Добавляет разделитель в начало, если надо. function _add_title($add_to, $obj, $term_title = ""){ $arg = & $this->arg; // упростим... $title = $term_title ? $term_title: esc_html($obj->post_title); // $term_title чиститься отдельно, теги моугт быть... $show_title = $term_title ? $arg->show_term_title: $arg->show_post_title; // пагинация if($arg->pg_end){ $link = $term_title ? get_term_link($obj) : get_permalink($obj); $add_to .= ($add_to ? $arg->sep: "") . sprintf($arg->linkpatt, $link, $title) . $arg->pg_end; } // дополняем - ставим sep elseif($add_to){ if($show_title) $add_to .= $arg->sep . sprintf($arg->title_patt, $title); elseif($arg->last_sep) $add_to .= $arg->sep; } // sep будет потом... elseif($show_title) $add_to = sprintf($arg->title_patt, $title); return $add_to; } } /** * Изменения: * 3.3 - новые хуки: attachment_tax_crumbs, post_tax_crumbs, term_tax_crumbs. Позволяют дополнить крошки таксономий. * 3.2 - баг с разделителем, с отключенным "show_term_title". Стабилизировал логику. * 3.1 - баг с esc_html() для заголовка терминов - с тегами получалось криво... * 3.0 - Обернул в класс. Добавил опции: "title_patt", "last_sep". Доработал код. Добавил пагинацию для постов. * 2.5 - ADD: Опция "show_term_title" * 2.4 - Мелкие правки кода * 2.3 - ADD: Страница записей, когда для главной установлена отделенная страница. * 2.2 - ADD: Link to post type archive on taxonomies page * 2.1 - ADD: $sep, $loc, $args params to hooks * 2.0 - ADD: в фильтр "kama_breadcrumbs_home_after" добавлен четвертый аргумент $ptype * 1.9 - ADD: фильтр "kama_breadcrumbs_default_loc" для изменения локализации по умолчанию * 1.8 - FIX: заметки, когда в рубрике нет записей * 1.7 - Улучшена работа с приоритетными таксономиями. */

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

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

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

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

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

Add_filter("kama_breadcrumbs_default_args", function($args){ $args["on_front_page"] = 0; $args["show_post_title"] = ""; $args["priority_tax"] = array("mytax"); return $args; });

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

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

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

Вариант 1

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

// Локализация if(function_exists("kama_breadcrumbs")){ $myl10n = array("home" => "Front page", "paged" => "Page %d", "_404" => "Error 404", "search" => "Search results by query - %s", "author" => "Author archve: %s", "year" => "Archive by %d год", "month" => "Archive by: %s", "day" => "", "attachment" => "Media: %s", "tag" => "Posts by tag: %s", "tax_tag" => "%1$s from "%2$s" by tag: %3$s", // tax_tag выведет: "тип_записи из "название_таксы" по тегу: имя_термина". // Если нужны отдельные холдеры, например только имя термина, пишем так: "записи по тегу: %3$s"); kama_breadcrumbs(" » ", $myl10n); }

Вариант 2

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

Add_filter("kama_breadcrumbs_default_loc", function($l10n){ // Локализация return array("home" => "Front page", "paged" => "Page %d", "_404" => "Error 404", "search" => "Search results by query - %s", "author" => "Author archve: %s", "year" => "Archive by %d год", "month" => "Archive by: %s", "day" => "", "attachment" => "Media: %s", "tag" => "Posts by tag: %s", "tax_tag" => "%1$s from "%2$s" by tag: %3$s", // tax_tag выведет: "тип_записи из "название_таксы" по тегу: имя_термина". // Если нужны отдельные холдеры, например только имя термина, пишем так: "записи по тегу: %3$s"); });

Function_exists("kama_breadcrumbs") && kama_breadcrumbs();

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

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

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

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

Add_action("kama_breadcrumbs_home_after", "my_breadcrumbs_home_after", 10, 4); function my_breadcrumbs_home_after($false, $linkpatt, $sep, $ptype){ // если мы в рубрике с ID 5 или в дочерней рубрике, // то дополним начало крошек ссылкой на страницу с ID 7 $qo = get_queried_object(); if(is_category() && ($qo->term_id == 5 || $qo->parent == 5)){ $page = get_post(7); return sprintf($linkpatt, get_permalink($page), $page->post_title) . $sep; } return $false; }

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

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

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

// apply_filters("term_tax_crumbs", "", $term, $that); add_filter("term_tax_crumbs", "more_tax_crumbs", 10, 3); add_filter("post_tax_crumbs", "more_tax_crumbs", 10, 3); function more_tax_crumbs($empty, $term, $that){ $is_post_filter = doing_filter("post_tax_crumbs"); // else "term_tax_crumbs" if(($is_post_filter && is_singular("realty")) || is_tax("country")){ global $post; $out = ""; $out = $that->_tax_crumbs($term, "self") . $that->arg->sep; // базовая такса - country // тип сделки $term = get_query_var("type_deal"); if($term && ($term = get_term_by("slug", $term, "type_deal"))) $out .= $that->_tax_crumbs($term, "self") . $that->arg->sep; // тип сделки // тип недвижимости $term = get_query_var("type_realty"); if($term && ($term = get_term_by("slug", $term, "type_realty"))){ // запись if($is_post_filter){ $_crumbs = $that->_tax_crumbs($term, "self"); $out .= $that->_add_title($_crumbs, $post); } // такса else { $_crumbs = $that->_tax_crumbs($term, "parent"); $out .= $that->_add_title($_crumbs, $term, esc_html($term->name)); } } return $out; } return $empty; }

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

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

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

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

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

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

Function breadcrumbs($separator = " » ", $home = "Главная") { $path = array_filter(explode("/", parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH))); $base_url = ($_SERVER["HTTPS"] ? "https" : "http") . "://" . $_SERVER["HTTP_HOST"] . "/"; $breadcrumbs = array("$home"); $last = end(array_keys($path)); foreach($path as $x => $crumb){ $title = ucwords(str_replace(array(".php", "_"), Array("", " "), $crumb)); if($x != $last){ $breadcrumbs = "".$title.""; } else { $breadcrumbs = $title; } } return implode($separator, $breadcrumbs); }

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