Что такое хлебные крошки в вордпресс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вставка кода хлебных крошек также как написано выше, для Yoast SEO.

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

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

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

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

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

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

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

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

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

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

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

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

Плагин WordPress SEO Breadcrumbs

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

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

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

Выбор Breadcrumbs Style

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

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

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

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

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

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

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

В заключение

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

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

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Код для WooCommerce

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

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

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

Этот код я больше не поддерживаю, местами он работает не так как нужно. За стабильной и расширенной версией этого кода переходите по ссылке:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вариант 1

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

Вариант 2

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

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

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

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

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

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

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

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

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

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

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

Источник

« Хлебные крошки » WordPress — это многоуровневая система навигации, которая сообщает пользователям, где на сайте они находятся в данный момент по отношению к главной странице. В этой статье мы покажем, как вывести хлебные крошки WordPress :

Что такое «хлебные крошки» WordPress и для чего они нужны?

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

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

Как добавить хлебные крошки WordPress с помощью Breadcrumb NavXT Plugin

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

Страница настроек разделена на несколько разделов. На вкладке « Общие » вы можете определить, каким образом плагин будет вести себя на сайте.

Здесь можно изменить шаблон ссылок. Эти шаблоны используют параметры Schema.org в теге ссылки.

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

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

Отображение Breadcrumb NavXT на вашем сайте

Для использования этого WordPress плагина « хлебные крошки » вы должны отредактировать файлы темы. Нужно добавить следующий код в файл header.php темы в том месте, где будут отображаться « хлебные крошки »:

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

Как добавить хлебные крошки WordPress с помощью Yoast SEO Plugin

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

После того, как вы закончите, нажмите на кнопку « Сохранить изменения ».

Вывод хлебных крошек с помощью плагина Yoast SEO

Вставьте этот код в header.php своей темы в конце файла:

Вот и все, теперь вы можете перейти на свой сайт, там уже будут отображаться « хлебные крошки ».

Источник

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

Всем привет!

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

Значение и пример хлебных крошек

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

Хлебные крошки выделены оранжевой рамочкой. Их также называют навигационной цепочкой.

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

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

Хлебные крошки: как сделать на своем блоге?

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

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

Вот образец кода, который нужно вставить в файл functions.php:

Русские названия в коде можно заменить на свои. Например, вместо «Главная» подставить название сайта.

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

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

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

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

Наиболее распространенные плагины для вывода хлебных крошек: Yoast WordPress Seo, BreadCrumb NavXT. Плагин WordPress SEO by Yoast является многофункциональным и хлебные крошки в его арсенале – лишь малая часть. Поэтому, если данный плагин у вас уже установлен, то вы можете использовать и эту его функцию.

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

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

Внести изменения в стили можно по аналогии с тем, как это было описано выше.

Микроразметка хлебных крошек

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

Такой вид более понятен и приятен для пользователя, нежели просто url страницы.

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

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

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

itemprop=»url» – определяет значение url, его нужно добавить в каждый тег a

itemprop=»title – определяет значение заголовка элемента цепочки

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

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

Напоследок предлагаю посмотреть видео о внутренней перелинковке.

Источник