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

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

В этом уроке расскажу, как сделать правильные хлебные крошки на сайте 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 . '-я страница)';
		}
 
	}
 
}
  • 4 – при помощи get_query_var() мы определяем, находимся ли мы на странице постраничной навигации, знаю, что это можно сделать при помощи is_paged(), но нам же ведь ещё и номер страницы понадобится.
  • 6 – разделитесь между ссылками в хлебных я решил записать в переменную, вы можете использовать что угодно, например стрелки → &rarr;, запись его в переменную позволит нам быстро его поменять, если захотим.
  • 9 – функция, а точнее условный тег is_front_page() возвращает true, если мы находимся на главной странице, вне зависимости от того, какую роль она выполняет.
  • 12, 19 – функция site_url() динамически возвращает ссылку на главную страницу сайта.
  • is_single(), is_page(), is_category(), is_tag(), is_day(), is_month(), is_year(), is_author(), is_404() – различные условные теги, позволяющие легко определить, на каком типе страницы мы в данный момент находимся.
  • 25 – я использовал функцию the_category() для вывода списка рубрик для текущей записи через запятую. Обратите внимание, что эта функция не распределяет рубрики в зависимости от их иерархии. О том, как вывести их с соблюдением порядка иерархии, читайте ниже.
  • 25, 29 – функция the_title() отлично подходит для того, чтобы вывести заголовок текущей записи, страницы или записи произвольного типа.
  • single_cat_title() и single_tag_title() – для вывода название текущей рубрики или метки соответственно.

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

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

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

Выбор родительской страницы в 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 строк 🙂 Люди копипастят даже не задумываясь, понятно, что у них очень урезанные варианты.

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

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

Комментарии — 43

Оставить комментарий

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код – меньше одной строчки, то можно и в <code></code>.