woocommerce_breadcrumb() –хлебные крошки в WooCommerce

Когда-то мы с вами создавали свою собственную функцию навигации хлебных крошек в WordPress и даже делали отдельные надстройки для работы с таксономиями. А вот в WooCommerce уже есть функция woocommerce_breadcrumb() по умолчанию.

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

Сама функция:

woocommerce_breadcrumb( $args = array() )

Параметры

Функция уже имеет некоторые параметры, которые возможно передать в необязательный массив $args.

• delimiter – символ, который будет разделять отдельные ссылки в хлебных крошках, по умолчанию это  / ,
• wrap_before – что добавить перед блоком хлебных крошек, по умолчанию – <nav class="woocommerce-breadcrumb">
• wrap_after – что добавить после, по умолчанию – </nav>
• before – HTML для вывода перед ссылкой навигации крошек,
• after – HTML для вывода после ссылки навигации крошек,
• home – текст ссылки на главную, по умолчанию – _x( 'Home', 'breadcrumb', 'woocommerce' ), если ничего не указать, то первая ссылка, ведущая на главную, отображаться не будет.

Пример использования

Этот код вставляется непосредственно в то место в коде, где вы хотите вывести хлебные крошки.

$args = array(
	'delimiter' => '→' // меняем разделитель
);
woocommerce_breadcrumb( $args );

Так, стоп, а где параметр типо echo? Что, если я не хочу выводить их, а нужно именно записать результат действия функции в переменную?

Легко:

ob_start(); // включаем буферизацию
 
$args = array(
	'delimiter' => '→' // меняем разделитель
);
woocommerce_breadcrumb( $args );
 
$breadcrumbs = ob_get_contents(); // всё, что вывели, записываем в переменную
 
ob_end_clean(); // очищаем буфер

woocommerce_breadcrumb_defaults

Каждый раз, говоря про хуки в WordPress, я не устаю напоминать, как их использовать. Если тема не обновляется – отправляем смело код в functions.php темы, если обновляется, то нужно создать либо дочернюю тему либо отдельный плагин для вашего кода.

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

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

А ниже – конкретные примеры.

Изменяем текст ссылки на главную, либо полностью удаляем её (ссылку)

Тут важное замечание, что если в массиве $defaults параметр home не присутствует, либо равен пустой строке, то ссылка на главную магическим образом исчезает из хлебных крошек.

add_filter( 'woocommerce_breadcrumb_defaults', 'true_woo_breadcrumbs_home' );
 
function true_woo_breadcrumbs_home( $defaults ) {
 
	$defaults[ 'home' ] = 'Супер интернет-магазин';
	// либо $defaults[ 'home' ] = '' и ссылка на главную выводиться не будет
	return $defaults;
 
}

Изменяем разделитель в хлебных крошках WooCommerce

Например на стрелку:

Тогда вам пригодится код:

add_filter( 'woocommerce_breadcrumb_defaults', 'true_woo_breadcrumbs_delimiter' );
 
function true_woo_breadcrumbs_delimiter( $defaults ) {
 
	$defaults[ 'delimiter' ] = ' → '; 
	// меняем на неразрывные пробелы со стрелкой
 
	return $defaults;
 
}

woocommerce_breadcrumb_home_url

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

add_filter( 'woocommerce_breadcrumb_home_url', 'true_woo_breadcrumbs_home_url' );
 
function true_woo_breadcrumbs_home_url() {
 
	return 'https://misha.agency';
 
}

Полностью отключаем хлебные крошки

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

Объясню, что это значит. Темы могут создаваться для разных сайтов и для разных целей:

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

Тогда код отключения хлебных крошек, не трогая файлы оригинальной темы, будет таким:

add_action( 'init', 'true_woo_no_breadcrumbs' );
function true_woo_no_breadcrumbs() {
 
	remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
 
}

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

Один из нестандартных вариантов – тема Storefront, но там это ещё можно сделать хуком:

add_action( 'init', 'true_woo_no_breadcrumbs_storefront' );
function true_woo_no_breadcrumbs_storefront() {
 
	remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
 
}

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!