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

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

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

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

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

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

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

Преимущества добавления хлебных крошек

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

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

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

Вы можете добавить хлебные крошки на свой сайт WordPress двумя способами. Самый простой способ — использовать плагин WordPress, но вы также можете добавить «хлебные крошки» в файл header.php вашего сайта. Прежде чем использовать какой-либо метод, вы должны создать резервную копию своего веб-сайта на случай, если что-то пойдет не так.

Способ 1: использование плагина

Самый простой способ добавить хлебные крошки в WordPress — использовать плагин для хлебных крошек. Вы можете использовать множество плагинов, включая Breadcrumb NavXT и Yoast SEO:

Yoast SEO часто является лучшим вариантом, потому что, скорее всего, это плагин, который уже используется на вашем сайте.

Шаг 1: Загрузите плагин Yoast SEO

Поскольку Yoast — это SEO-плагин, он предлагает широкий спектр функций. Это включает в себя создание и стилизацию навигационной цепочки.

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

Шаг 2: Добавьте функцию в файл header.php

После активации плагина вы должны добавить функцию в файл header.php вашего сайта. Чтобы получить доступ к этому файлу, перейдите в «Внешний вид» > «Редактор тем» и выберите файл, чтобы открыть его.

Затем добавьте следующий код везде, где вы хотите, чтобы отображалось меню настроек хлебных крошек:

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

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

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

Шаг 3. Активируйте поддержку хлебных крошек

Наконец, вам нужно будет активировать поддержку хлебных крошек. В Yoast SEO это означает переход к SEO > Внешний вид в поиске > Хлебные крошки :

Просто переключите переключатель в положение «Включено», и все готово! Ваше меню хлебных крошек WordPress будет настроено и готово к использованию.

Метод 2: Кодирование собственных хлебных крошек

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

Шаг 1: Создайте скелетную функцию

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

function my_breadcrumbs() {
/* Breadcrumbs code will go here */
}

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

Шаг 2: Добавьте основные правила

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

/* Change according to your needs */
$show_on_homepage = 0;
$show_current = 1;
$delimiter = '»';
$home_url = 'Home';
$before_wrap = '<span clas="current">';
$after_wrap = '</span>';

/* Don't change values below */
global $post;
$home_url = get_bloginfo( 'url' );

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

Шаг 3: Добавьте оператор if else

Ниже переменных вам нужно добавить оператор if else. Этот оператор проверяет, находится ли пользователь на домашней странице вашего веб-сайта или нет. На основе этой информации оператор определит, отображаются ли хлебные крошки или нет:

/* Check for homepage first! */
if ( is_home() || is_front_page() ) {
$on_homepage = 1;
}
if ( 0 === $show_on_homepage && 1 === $on_homepage ) return;

/* Proceed with showing the breadcrumbs */
$breadcrumbs = '<ol itemscope itemtype="http://schema.org/BreadcrumbList">';

$breadcrumbs .= '<li itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a target="_blank" href="' . $home_url . '">' . $home_url . '</a></li>';

/* Build breadcrumbs here */

$breadcrumbs .= '</ol>';
echo $breadcrumbs;

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

Шаг 4: Добавьте функцию в заголовок темы

Как только ваша функция хлебных крошек будет завершена, вы можете добавить ее в файл header.php вашего веб-сайта. Перейдите в «Внешний вид» > «Редактор тем» , чтобы открыть файл, и добавьте функцию в самый конец.

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

Настройте свой сайт с помощью движка WP

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

Использование правильного веб-хостинга может помочь гарантировать производительность вашего веб-сайта, оставляя вам время, чтобы сосредоточиться на разработке и UX. WP Engine может предложить вам лучшие управляемые планы хостинга WordPress и лучшие ресурсы для создания невероятного веб-сайта!