Как добавить панировочные сухари на свой сайт WordPress

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

Страница продукта Home Depot с панировочными сухарями

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

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

Подпишитесь на наш канал Youtube

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

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

• Установите и активируйте плагин Yoast SEO
• Добавление фрагмента кода хлебных крошек в вашу тему WordPress
• Включите / настройте Breadcrumbs the Yoast Breadcrumbs в настройках плагина

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

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

Добавьте фрагмент кода панировочных сухарей в свою дочернюю тему WordPress

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

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

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

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

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

Включите и настройте хлебные крошки Yoast в настройках плагина

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

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

Вот как выглядит сообщение до включения панировочных сухарей.

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

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

#breadcrumbs {

/*Add breadcrumb styling here*/

}

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

#breadcrumbs {

margin: 0 calc(10% + 60px);

}

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

[wpseo_breadcrumb]

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

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

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

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

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

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

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php
    if(function_exists('bcn_display'))
    {
            bcn_display();
    }?>
</div>

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

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

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

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

Укладка панировочных сухарей

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

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

.breadcrumbs {

/*add css to style breadcrumbs here*/

}

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

Последние мысли

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

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

Ваше здоровье!