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

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

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

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

true_breadcrumbs();

Понятно, что не спешите сохранять файл (особенно не на тестовом сайте), ведь этой функции у вас сейчас нет и вы столкнётесь с ошибкой 500.

Функция хлебных крошек

Теперь распишем саму функцию, сразу говорю, готовьтесь, что будет много кода.

Дело в том, что я выкладываю полностью законченный и 100% рабочий вариант. Здесь учтены все типы страниц, которые только могут быть на WordPress: посты, страницы, вложенные страницы(поддерживается любое количество уровней вложенности), рубрики, подрубрики (неограниченное количество вложений), теги, архивы, страницы поиска, страницы с записями какого-либо одного автора.

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

Давайте сначала начнём с относительно несложного варианта хлебных крошек, и чуть ниже в этом же уроке я вам расскажу, как их модифицировать под какую-то свою определённую задачу. Для начала добавьте этот код functions.php:

function true_breadcrumbs(){
 
	// получаем номер текущей страницы
	$page_num = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
 
	$separator = ' / '; //  разделяем обычным слэшем, но можете чем угодно другим
 
	// если главная страница сайта
	if( is_front_page() ){
 
		if( $page_num > 1 ) {
			echo '<a href="' . site_url() . '">Главная</a>' . $separator . $page_num . '-я страница';
		} else {
			echo 'Вы находитесь на главной странице';
		}
 
	} else { // не главная
 
		echo '<a href="' . site_url() . '">Главная</a>' . $separator;
 
 
		if( is_single() ){ // записи
 
			the_category( ', ' ); echo $separator; the_title();
 
		} elseif ( is_page() ){ // страницы WordPress 
 
			the_title();
 
		} elseif ( is_category() ) {
 
			single_cat_title();
 
		} elseif( is_tag() ) {
 
			single_tag_title();
 
		} elseif ( is_day() ) { // архивы (по дням)
 
			echo '<a href="' . get_year_link( get_the_time( 'Y' ) ) . '">' . get_the_time( 'Y' ) . '</a>' . $separator;
			echo '<a href="' . get_month_link( get_the_time( 'Y' ), get_the_time( 'm' ) ) . '">' . get_the_time( 'F' ) . '</a>' . $separator;
			echo get_the_time('d');
 
		} elseif ( is_month() ) { // архивы (по месяцам)
 
			echo '<a href="' . get_year_link( get_the_time( 'Y' ) ) . '">' . get_the_time( 'Y' ) . '</a>' . $separator;
			echo get_the_time('F');
 
		} elseif ( is_year() ) { // архивы (по годам)
 
			echo get_the_time( 'Y' );
 
		} elseif ( is_author() ) { // архивы по авторам
 
			global $author;
			$userdata = get_userdata( $author );
			echo 'Опубликовал(а) ' . $userdata->display_name;
 
		} elseif ( is_404() ) { // если страницы не существует
 
			echo 'Ошибка 404';
 
		}
 
		if ( $page_num > 1 ) { // номер текущей страницы
			echo ' (' . $page_num . '-я страница)';
		}
 
	}
 
}

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

Возможно вы заметили, что Страницы WordPress – это иерархичный тип записи, другими словами – Страница может иметь дочерние страницы, причем несколько штук и нескольких уровней.

Это можно хорошо наблюдать в метабоксе Атрибуты страницы:

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

global $post;
// если у текущей страницы существует родительская
if ( $post->post_parent ) {
 
	$parent_id  = $post->post_parent; // присвоим в переменную
	$breadcrumbs = array(); 
 
	while ( $parent_id ) {
		$page = get_page( $parent_id );
		$breadcrumbs[] = '<a href="' . get_permalink( $page->ID ) . '">' . get_the_title( $page->ID ) . '</a>';
		$parent_id = $page->post_parent;
	}
 
	echo join( $separator, array_reverse( $breadcrumbs ) ) . $separator;
 
}

То есть вставляете этот код на 27-й строчке ничего не удаляя из первоначального кода.

Как в хлебных крошках вывести родительские рубрики WordPress с учётом иерархии?

В архивах рубрик

Тут ситуация похожа на ситуацию со страницами, но проще, так как существует функция get_category_parents().

$current_cat = get_queried_object();
// если родительская рубрика существует
if( $current_cat->parent ) {
	echo get_category_parents( $current_cat->parent, true, $separator ) . $separator;
}

На страницах записей

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

Тут есть некоторые тонкости, но смотрите, есть очень классный способ, как можно это всё разрулить!

Прежде всего, обратите внимание, как вы добавляете пост в категории. Нам подходит:

Не подходит:

После этого можно спокойно использовать функцию get_category_parents():

$post_categories = get_the_category();
 
// это и будет наша единственная рубрика, присвоенная к посту
if( ! empty( $post_categories[0]->cat_ID ) ) {
	echo get_category_parents( $post_categories[0]->cat_ID, true, $separator ) . $separator;
}
the_title();

Произвольными типы постов и их таксономии в хлебных крошках с учётом иерархии

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

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

Если без иерархии:

if( is_tax( $taxonomy_name ) ) {
	single_term_title(); // название текущего элемента таксономии
}

С иерархией:

if( is_tax( $taxonomy_name ) ) {
	$current_term = get_queried_object();
	// если родительский элемент таксономии существует
	if( $current_term->parent ) {
		echo get_term_parents_list( $current_term->parent, $taxonomy_name, array( 'separator' => $separator ) ) . $separator;
	}
	single_term_title();
}

Хлебные крошки для произвольных типов постов

Если мы вообще не хотим отображать никаких таксономий, то наш пример становится очень похож на пример с обычными Страницами:

if( is_singular( $post_type_name ) ) {
	the_title();
}

В случае, если нам нужно также добавить какую-то произвольную таксономию:

if( is_singular( $post_type_name ) ) {
	$post_terms = get_the_terms( get_the_ID(), $taxonomy_name );
 
	if( ! empty( $post_terms[0]->term_id ) ) {
		echo get_term_parents_list( $post_terms[0]->term_id, $taxonomy_name, array( 'separator' => $separator ) ) . $separator;
	}
	the_title();
}

Кстати, видел на других блогах функцию хлебных крошек длиной в 5-10 строк 🙂 Люди копипастят даже не задумываясь, понятно, что у них очень урезанные варианты.