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

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

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

<?php the_breadcrumb() ?>

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

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

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

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

function the_breadcrumb(){
 
	// получаем номер текущей страницы
	$pageNum = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
 
	$separator = ' &raquo; '; //  »
 
	// если главная страница сайта
	if( is_front_page() ){
 
		if( $pageNum > 1 ) {
			echo '<a href="' . site_url() . '">Главная</a>' . $separator . $pageNum . '-я страница';
		} 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 ( $pageNum > 1 ) { // номер текущей страницы
			echo ' (' . $pageNum . '-я страница)';
		}
 
	}
 
}
  • 4 – при помощи get_query_var() мы определяем, находимся ли мы на странице постраничной навигации, знаю, что это можно сделать при помощи is_paged(), но нам же ведь ещё и номер страницы понадобится.
  • 6 – разделитесь между ссылками в хлебных я решил записать в переменную, вы можете использовать что угодно, например стрелки → , запись его в переменную позволит нам быстро его поменять, если захотим.
  • 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-й строчке ничего не удаляя из первоначального кода.

Как отображать родительские рубрики?

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

Тут ситуация похожа на ситуацию со страницами, но проще, так как существует функция 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->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

Комментирование этого поста более не доступно.