Как добавить Yoast Breadcrumb в тему GeneratePress?

GeneratePress – одна из популярных легких тем для сайта WordPress. Однако в нем отсутствуют многие базовые функции для уменьшения размера CSS и JavaScript. Если вы используете плагин Yoast SEO на GeneratePress, то вот как добавить функцию хлебных крошек.

Связанный: Как добавить панировочные сухари Yoast в другие темы?

Зачем добавлять панировочные сухари?

В настоящее время ранжирование в Google – это не что иное, как освоение использования различных типов расширенных сниппетов (схем) на вашем сайте. Раньше обзоры – это основной вариант расширенного описания веб-страниц. В настоящее время у вас есть несколько вариантов, таких как часто задаваемые вопросы, инструкции и навигационная цепочка. К счастью, в WordPress есть множество возможностей для добавления структурированных данных. Навигационная крошка Yoast – это простой способ добавить хлебные крошки или навигационные ссылки. Вы найдете хлебные крошки, включенные в результаты поиска Google, как показано ниже:

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

Кроме того, Google Search Console покажет вам действительные данные хлебных крошек для каждой вашей страницы, чтобы проверить схему.

Хлебные крошки в результатах поиска Google

Включение Breadcrumb в плагине Yoast SEO

После установки и активации плагина Yoast SEO перейдите в раздел «SEO> Search Appearance». Нажмите на вкладку «Панировочные сухари» и выберите опцию «Включено».

Включить Yoast Breadcrumb
Включить Yoast Breadcrumb

Вы можете выбрать отображение страницы индекса «Блог» в строке навигации и выделить заголовок страницы жирным шрифтом.

Выберите параметры для Yoast Breadcrumb
Выберите параметры для Yoast Breadcrumb

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

К сожалению, этого недостаточно для отображения навигационных ссылок на вашем сайте. Вы должны вставить фрагмент PHP-кода в шаблон сообщения блога (файл single.php), чтобы отобразить хлебную крошку. Ниже приведен PHP-код хлебных крошек Yoast SEO, который вы можете скопировать и вставить на свой сайт GeneratePress.

<!-- BEGIN Yoast Breadcrumb -->
<?php if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>
<!-- END Yoast Breadcrumb -->

Вставка Yoast Breadcrumb в тему GeneratePress

Если вы используете GP Premium, то есть простой способ вставлять коды PHP с помощью Elements. Если вы используете бесплатную версию, вам нужно либо использовать дополнительный плагин, либо вставить код в файл single.php вашей дочерней или родительской темы.

Вставка с элементами для GP Premium

Во-первых, убедитесь, что у вас установлен и активирован плагин GP Premium.

  • Перейдите в «Внешний вид> GeneratePress» и активируйте «Элементы». Помните, что «Отключить элементы» – это другой вариант. Поэтому проверьте и убедитесь, что у вас активирована опция «Элементы».
Активировать опцию Elements
Активировать опцию Elements
  • Перейдите в раздел «Внешний вид> Элементы» и нажмите кнопку «Добавить».
Добавить новый элемент
Добавить новый элемент
  • Щелкните раскрывающийся список и выберите тип элемента «Крючок».
Создать крючок
Создать крючок
  • Введите имя вашего элемента как «Yoast Breadcrumb» или что-нибудь подобное.
  • Вставьте код Yoast Breadcrumb, скопированный на предыдущем шаге, в текстовое поле.
Вставьте код хлебной крошки Yoast SEO
Вставьте код хлебной крошки Yoast SEO
  • Щелкните вкладку «Настройки», а затем щелкните раскрывающееся меню напротив «Привязки». Вы увидите большое количество доступных позиций крючка и выберите опцию «before_content». Это добавит хлебную крошку перед заголовком сообщения, как показано на рисунке ниже.
Yoast Breadcrumb в теме GeneratePress
Yoast Breadcrumb в теме GeneratePress
  • Вы можете сослаться на список положений крючка в этом визуальная диаграмма и выберите крючок, необходимый для вашего сайта.
  • Установите флажок «Выполнить PHP» и оставьте значение приоритета пустым. Если у вас есть несколько хуков для одной и той же позиции «before_content», введите 10 или 20, чтобы определить приоритет выполнения. Если у вас есть только одна ловушка для «before_content», оставьте это поле пустым.
Включить крючок и другие настройки
Включить крючок и другие настройки
  • На вкладке «Правила отображения» вы можете выбрать, где вы хотите демонстрировать хлебные крошки.
  • Нажмите на раскрывающийся список и выберите «Сообщения», он автоматически выберет вариант «Все сообщения» для следующего поля.
Настройка правил расположения
Настройка правил расположения
  • Нажмите кнопку «Опубликовать», чтобы запустить PHP-код на вашем сайте. Вы можете увидеть, как хлебные крошки отображаются перед заголовком во всех сообщениях вашего блога.

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

Связанный: Как настроить магазин WooCommerce в WordPress?

Вставка в файл Single.php для бесплатной версии

Если у вас нет GP Premium, есть два варианта. Вы можете вставить PHP-код в файл single.php родительской или дочерней темы. Мы объясняем здесь с прямым добавлением в файл родительской темы. Ознакомьтесь с этой статьей о том, как создать ребенка и добавить код.

  • Перейдите в «Внешний вид> Редактор тем».
  • В GeneratePress файл single.php использует файл content-single.php для извлечения содержимого. Итак, вам нужно вставить код Yoast Breadcrumb в файл content-single.php.
  • На боковой панели «Файлы темы» найдите файл content-single.php.
  • Вставьте код навигации перед строкой
    . Как видите, на самом деле здесь находится хук generate_before_content.
  • Нажмите кнопку «Обновить файл», чтобы сохранить изменения.
Добавить код PHP в файл темы
Добавить код PHP в файл темы

Укладка панировочной крошки

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

  • Перейдите в раздел «Внешний вид> Настроить».
  • Вставьте приведенный ниже код CSS в раздел «Дополнительные CSS».
  • Щелкните по кнопке «Опубликовать».
#breadcrumbs {
box-shadow: 1px 1px #d5d4d4;
background: #eeeded;
border: 1px solid #eeeded;
border-radius: 5px;
padding: 0 5px 0 10px;
font-size: 14px;
}
Добавить собственный CSS Breadcrumb
Добавить собственный CSS Breadcrumb

Отрегулируйте отступ, цвет границы, радиус границы и фон в соответствии с вашими потребностями.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *