Меню

Как настроить breadcrumb wordpress

Как добавить «хлебные крошки» на свой сайт WordPress

Сегодня я бы хотел рассказать вам о «хлебных крошках» (breadcrumbs) — где их взять, как их использовать и как настроить.

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

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

Вы могли бы подумать, что добавить такую интегрированную систему нативности на ваш сайт будет сложно, но на самом деле это довольно просто с использованием плагина. Фактически, если вы используете плагин Yoast SEO, у вас есть преимущество, потому что функциональность хлебных крошек уже встроена в Yoast! И добавление «хлебных крошек» через Yoast, безусловно, является одним из предпочтительных методов. Помимо Yoast SEO, плагин Breadcrumb NavXT является еще одним отличным вариантом, который легко настраивается и также хорошо работает.

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

Чтобы добавить «хлебные крошки» на ваш сайт WordPress с помощью Yoast SEO, вам нужно выполнить три простых шага:

  • Установите и активируйте плагин Yoast SEO
  • Добавьте фрагмент кода «breadcrumbs» (хлебные крошки) в вашу тему WordPress
  • Включите/Настройте «хлебные крошки» в настройках плагина

Установите и активируйте плагин Yoast SEO

Чтобы установить плагин Yoast SEO, перейдите на панель управления WordPress и выберите «Плагины — Добавить новый». Затем найдите в WordPress-репозитории с помощью поиска «yoast». Когда вы увидите плагин «Yoast SEO», нажмите, чтобы установить и активировать плагин.

Добавьте фрагмент кода «хлебных крошек» в свою или дочернюю тему WordPress

Далее нам нужно добавить небольшой фрагмент кода в файлы вашей темы WordPress. Поэтому, если вы этого еще не сделали, рекомендуется создать дочернюю тему. В этом примере я собираюсь показать вам, как добавить фрагмент кода «хлебные крошки» в стандартную тему WordPress «TwentyNineteen». Вы можете добавить код в любой файл/шаблон темы, но по большей части вы захотите добавить его в файл «single.php» (для отображения на всех сообщениях), файл «page.php» (для отображения на всех страницах) или в ваш файл «header.php» (чтобы показать везде).

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

Затем в самом низу файла «header.php» добавьте следующий фрагмент php, предоставленный Yoast для активации функции Breadcrumbs:

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

Включить и настроить «Yoast Breadcrumbs» в настройках плагина

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

Теперь давайте посмотрим, как выглядят «хлебные крошки» в одном из постов, которые я создал в теме «TwentyNineteen».

Вот как выглядит этот пост перед включением «хлебных крошек».

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

Возможно, вам придется настроить стиль ваших хлебных крошек, используя некоторые внешние CSS. Для этого вы можете использовать CSS ID «хлебных крошек», который был включен в код php. Откройте файл style.css вашей дочерней темы (или вы можете добавить его в настройщике тем в разделе «Дополнительные CSS») и добавить следующее:

Для темы «TwentyNineteen» я могу захотеть сопоставить поля моего текста заголовка, добавив следующий пользовательский CSS:

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

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

Если по какой-то причине вы не хотите устанавливать «Yoast SEO» или ищете другой простой вариант, плагин «Breadcrumb NavXT» является отличным выбором.

Чтобы установить плагин, перейдите на панель управления WordPress и выберите «Плагины — Добавить новый». Затем найдите в хранилище WordPress «Breadcrumb NavXT». Когда вы увидите плагин, нажмите, чтобы установить и активировать его.

Читайте также:  Как настроить oracle odbc driver

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

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

Как и в примере с «Yoast Breadcrumb», вы также можете вызвать цепочку хлебных крошек на свой сайт, добавив необходимый код в свою дочернюю тему. Вот код, который они предоставляют, который совместим с «schema.org breadcrumblist»:

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

Вот как выглядит сообщение после добавления кода.

Настройка «хлебных крошек» с помощью настроек плагина

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

Стили «хлебных крошек»

Если вы хотите стилизовать хлебные крошки, вы можете выбрать класс «breadcrumbs», который включен в код.

Просто добавьте следующий CSS в файл style.css вашей дочерней темы или в дополнительный настройщик CSS:

Добавление хлебных крошек на ваш сайт без плагина

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

Это обновленный код, который исправляет несколько ошибок, делает хлебные крошки более универсальными и добавлены комментарии, объясняющие, что делает код, и некоторые общие сведения.

Теперь тут есть поддержка для:

  • родительские и дочерние страницы
  • архивы
  • пользовательские типы сообщений
  • таксономии

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

Затем, чтобы вызвать хлебные крошки на свою страницу (обычно в файле header.php), просто используйте следующий код:

Стилизуем «хлебные крошки»

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

И напоследок

«Хлебные крошки» являются важной частью сайта как для удобства использования, так и для СЕО. Поэтому, если вы планируете добавить крошки на свой сайт WordPress, я бы посоветовал вам начать с методов, предоставляемых плагинами, упомянутыми в этой статье (Yoast SEO и Breadcrumb NavXT). Лучше всего использовать хлебные крошки Yoast, если вы уже используете их плагин СЕО, так как он уже в вашем распоряжении. Тем не менее, Breadcrumb NavXT также очень настраиваемый вариант. Конечно, вам, возможно, придется получить доступ к файлам вашей темы, но в целом процесс прост. Во всяком случае, я надеюсь, что это поможет облегчить страдания от получения «хлебных крошек» на вашем собственном сайте WordPress.

Я с нетерпением жду ответа от вас в комментариях.

Источник



Хлебные крошки WordPress — как вывести их на сайте

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

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

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

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

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

Поисковые системы, такие как Google , начали выводить « хлебные крошки » сайта в результатах поиска. Это увеличивает видимость сайта в результатах поиска и улучшает показатель переходов:

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

Это гибкий и простой в использовании «хлебные крошки» WordPress плагин. Он имеет больше разнообразных функций, чем вы можете себе представить. Первое, что нужно сделать, это установить и активировать плагин Breadcrumb NavXT . После его активации необходимо перейти на страницу настроек плагина: Настройки — Breadcrumb NavXT :

Читайте также:  Как настроить один вид для всех папок

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

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

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

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

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

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

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

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

Установите и активируйте Yoast SEO Plugin . После активации плагина нужно перейти на страницу SEO > Дополнительно и установите флажок для опции « Включить хлебные крошки »:

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

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

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

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

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

Источник

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

Просмотров: 5 523

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

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

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

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

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

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

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

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

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

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

И так, Приступим.

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

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

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

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

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

Читайте также:  Видеорегистратор 70mai dash cam pro plus a500 как настроить время

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В заключение

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

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

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

Источник