Главная » WordPress

Хлебные крошки на сайте WordPress: как создать и настроить

WordPress
На чтение 12 мин. Просмотров 9.2k. Опубликовано
Содержание

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

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

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

Настройка через плагин YoastSEO

Один из самых простых способов создать крошки на сайте — использовать плагин YoastSEO. Его легко настраивать, при этом плагин умеет оптимизировать для SEO весь сайт — например, задавать шаблоны метатегов, настраивать ЧПУ, редактировать robots.txt и многое другое.

Чтобы создать и настроить хлебные крошки с помощью плагина YoastSEO, понадобится выполнить следующие шаги.

  1. Перейдите в раздел Плагины → Добавить новый в консоли WordPress.
  2. Введите в поиск название плагина Yoast SEO. Нажмите «Установить».
  3. После установки плагина нажмите «Активировать».
  4. Перейдите в раздел Yoast SEO → Отображение в поисковых системах в консоли WordPress. Выберите вкладку «Цепочки навигации». Настройте отображение хлебных крошек.
  5. После выбора всех настроек нажмите на кнопку «Сохранить изменения».
  6. Перейдите в раздел Внешний вид → Редактор тем.
  7. Вставьте следующий код в шаблон header.php между <?php и >
if ( function_exists(‘yoast_breadcrumb’) ) { yoast_breadcrumb( ‘<p id=”breadcrumbs”>’,'</p>’ ); }
  1. Нажмите на кнопку «Обновить файл».

Если вы хотите, чтобы хлебные крошки отображались только на страницах определенных типов, например, только в постах, вместо header.php код можно вставить в конкретный шаблон. page.php обычно отвечает за статические страницы сайта, а single.php — за посты.

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

С помощью плагина Breadcrumb NavXT

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

  1. Установите и активируйте плагин Breadcrumb NavXT по аналогии с пунктами 1-3 выше.
  2. Расположите через редактор тем следующий код в header.php между <?php и >: 
if(function_exists('bcn_display')) {
        bcn_display();

Чтобы настроить внешний вид хлебных крошек, перейдите в раздел Плагины → Установленные, найдите Breadcrumb NavXT и нажмите «Настройки». Здесь вы сможете настроить разделители, отображение страниц в постраничной навигации, шаблоны ссылок и многое другое.

Настроить плагином Breadcrumb

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

Чтобы настроить вывод крошек через этот плагин, установите его по аналогии с предыдущими пунктами и вставьте следующий код через редактор тем в шаблон header.php:

echo do_shortcode ("[breadcrumb]");

После этого вы сможете настроить внешний вид крошек в разделе Breadcrumb в главном меню консоли WordPress.

Некоторые стили доступны только на Pro-аккаунте

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

Хлебные крошки через bbPress

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

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

Создание хлебных крошек без плагина

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

Чтобы отредактировать functions.php, перейдите в раздел Внешний вид → Редактор тем и найдите его в списке файлов. Вставьте код функции и обновите файл.

Вот пример кода для вывода хлебных крошек от dimox.name:

/*
 * "Хлебные крошки" для WordPress
 * автор: Dimox
 * версия: 2019.03.03
 * лицензия: MIT
*/
function dimox_breadcrumbs() {

	/* === ОПЦИИ === */
	$text['home']     = 'Главная'; // текст ссылки "Главная"
	$text['category'] = '%s'; // текст для страницы рубрики
	$text['search']   = 'Результаты поиска по запросу "%s"'; // текст для страницы с результатами поиска
	$text['tag']      = 'Записи с тегом "%s"'; // текст для страницы тега
	$text['author']   = 'Статьи автора %s'; // текст для страницы автора
	$text['404']      = 'Ошибка 404'; // текст для страницы 404
	$text['page']     = 'Страница %s'; // текст 'Страница N'
	$text['cpage']    = 'Страница комментариев %s'; // текст 'Страница комментариев N'

	$wrap_before    = '<div class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">'; // открывающий тег обертки
	$wrap_after     = '</div><!-- .breadcrumbs -->'; // закрывающий тег обертки
	$sep            = '<span class="breadcrumbs__separator"> › </span>'; // разделитель между "крошками"
	$before         = '<span class="breadcrumbs__current">'; // тег перед текущей "крошкой"
	$after          = '</span>'; // тег после текущей "крошки"

	$show_on_home   = 0; // 1 - показывать "хлебные крошки" на главной странице, 0 - не показывать
	$show_home_link = 1; // 1 - показывать ссылку "Главная", 0 - не показывать
	$show_current   = 1; // 1 - показывать название текущей страницы, 0 - не показывать
	$show_last_sep  = 1; // 1 - показывать последний разделитель, когда название текущей страницы не отображается, 0 - не показывать
	/* === КОНЕЦ ОПЦИЙ === */

	global $post;
	$home_url       = home_url('/');
	$link           = '<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">';
	$link          .= '<a class="breadcrumbs__link" href="%1$s" itemprop="item"><span itemprop="name">%2$s</span></a>';
	$link          .= '<meta itemprop="position" content="%3$s" />';
	$link          .= '</span>';
	$parent_id      = ( $post ) ? $post->post_parent : '';
	$home_link      = sprintf( $link, $home_url, $text['home'], 1 );

	if ( is_home() || is_front_page() ) {

		if ( $show_on_home ) echo $wrap_before . $home_link . $wrap_after;

	} else {

		$position = 0;

		echo $wrap_before;

		if ( $show_home_link ) {
			$position += 1;
			echo $home_link;
		}

		if ( is_category() ) {
			$parents = get_ancestors( get_query_var('cat'), 'category' );
			foreach ( array_reverse( $parents ) as $cat ) {
				$position += 1;
				if ( $position > 1 ) echo $sep;
				echo sprintf( $link, get_category_link( $cat ), get_cat_name( $cat ), $position );
			}
			if ( get_query_var( 'paged' ) ) {
				$position += 1;
				$cat = get_query_var('cat');
				echo $sep . sprintf( $link, get_category_link( $cat ), get_cat_name( $cat ), $position );
				echo $sep . $before . sprintf( $text['page'], get_query_var( 'paged' ) ) . $after;
			} else {
				if ( $show_current ) {
					if ( $position >= 1 ) echo $sep;
					echo $before . sprintf( $text['category'], single_cat_title( '', false ) ) . $after;
				} elseif ( $show_last_sep ) echo $sep;
			}

		} elseif ( is_search() ) {
			if ( get_query_var( 'paged' ) ) {
				$position += 1;
				if ( $show_home_link ) echo $sep;
				echo sprintf( $link, $home_url . '?s=' . get_search_query(), sprintf( $text['search'], get_search_query() ), $position );
				echo $sep . $before . sprintf( $text['page'], get_query_var( 'paged' ) ) . $after;
			} else {
				if ( $show_current ) {
					if ( $position >= 1 ) echo $sep;
					echo $before . sprintf( $text['search'], get_search_query() ) . $after;
				} elseif ( $show_last_sep ) echo $sep;
			}

		} elseif ( is_year() ) {
			if ( $show_home_link && $show_current ) echo $sep;
			if ( $show_current ) echo $before . get_the_time('Y') . $after;
			elseif ( $show_home_link && $show_last_sep ) echo $sep;

		} elseif ( is_month() ) {
			if ( $show_home_link ) echo $sep;
			$position += 1;
			echo sprintf( $link, get_year_link( get_the_time('Y') ), get_the_time('Y'), $position );
			if ( $show_current ) echo $sep . $before . get_the_time('F') . $after;
			elseif ( $show_last_sep ) echo $sep;

		} elseif ( is_day() ) {
			if ( $show_home_link ) echo $sep;
			$position += 1;
			echo sprintf( $link, get_year_link( get_the_time('Y') ), get_the_time('Y'), $position ) . $sep;
			$position += 1;
			echo sprintf( $link, get_month_link( get_the_time('Y'), get_the_time('m') ), get_the_time('F'), $position );
			if ( $show_current ) echo $sep . $before . get_the_time('d') . $after;
			elseif ( $show_last_sep ) echo $sep;

		} elseif ( is_single() && ! is_attachment() ) {
			if ( get_post_type() != 'post' ) {
				$position += 1;
				$post_type = get_post_type_object( get_post_type() );
				if ( $position > 1 ) echo $sep;
				echo sprintf( $link, get_post_type_archive_link( $post_type->name ), $post_type->labels->name, $position );
				if ( $show_current ) echo $sep . $before . get_the_title() . $after;
				elseif ( $show_last_sep ) echo $sep;
			} else {
				$cat = get_the_category(); $catID = $cat[0]->cat_ID;
				$parents = get_ancestors( $catID, 'category' );
				$parents = array_reverse( $parents );
				$parents[] = $catID;
				foreach ( $parents as $cat ) {
					$position += 1;
					if ( $position > 1 ) echo $sep;
					echo sprintf( $link, get_category_link( $cat ), get_cat_name( $cat ), $position );
				}
				if ( get_query_var( 'cpage' ) ) {
					$position += 1;
					echo $sep . sprintf( $link, get_permalink(), get_the_title(), $position );
					echo $sep . $before . sprintf( $text['cpage'], get_query_var( 'cpage' ) ) . $after;
				} else {
					if ( $show_current ) echo $sep . $before . get_the_title() . $after;
					elseif ( $show_last_sep ) echo $sep;
				}
			}

		} elseif ( is_post_type_archive() ) {
			$post_type = get_post_type_object( get_post_type() );
			if ( get_query_var( 'paged' ) ) {
				$position += 1;
				if ( $position > 1 ) echo $sep;
				echo sprintf( $link, get_post_type_archive_link( $post_type->name ), $post_type->label, $position );
				echo $sep . $before . sprintf( $text['page'], get_query_var( 'paged' ) ) . $after;
			} else {
				if ( $show_home_link && $show_current ) echo $sep;
				if ( $show_current ) echo $before . $post_type->label . $after;
				elseif ( $show_home_link && $show_last_sep ) echo $sep;
			}

		} elseif ( is_attachment() ) {
			$parent = get_post( $parent_id );
			$cat = get_the_category( $parent->ID ); $catID = $cat[0]->cat_ID;
			$parents = get_ancestors( $catID, 'category' );
			$parents = array_reverse( $parents );
			$parents[] = $catID;
			foreach ( $parents as $cat ) {
				$position += 1;
				if ( $position > 1 ) echo $sep;
				echo sprintf( $link, get_category_link( $cat ), get_cat_name( $cat ), $position );
			}
			$position += 1;
			echo $sep . sprintf( $link, get_permalink( $parent ), $parent->post_title, $position );
			if ( $show_current ) echo $sep . $before . get_the_title() . $after;
			elseif ( $show_last_sep ) echo $sep;

		} elseif ( is_page() && ! $parent_id ) {
			if ( $show_home_link && $show_current ) echo $sep;
			if ( $show_current ) echo $before . get_the_title() . $after;
			elseif ( $show_home_link && $show_last_sep ) echo $sep;

		} elseif ( is_page() && $parent_id ) {
			$parents = get_post_ancestors( get_the_ID() );
			foreach ( array_reverse( $parents ) as $pageID ) {
				$position += 1;
				if ( $position > 1 ) echo $sep;
				echo sprintf( $link, get_page_link( $pageID ), get_the_title( $pageID ), $position );
			}
			if ( $show_current ) echo $sep . $before . get_the_title() . $after;
			elseif ( $show_last_sep ) echo $sep;

		} elseif ( is_tag() ) {
			if ( get_query_var( 'paged' ) ) {
				$position += 1;
				$tagID = get_query_var( 'tag_id' );
				echo $sep . sprintf( $link, get_tag_link( $tagID ), single_tag_title( '', false ), $position );
				echo $sep . $before . sprintf( $text['page'], get_query_var( 'paged' ) ) . $after;
			} else {
				if ( $show_home_link && $show_current ) echo $sep;
				if ( $show_current ) echo $before . sprintf( $text['tag'], single_tag_title( '', false ) ) . $after;
				elseif ( $show_home_link && $show_last_sep ) echo $sep;
			}

		} elseif ( is_author() ) {
			$author = get_userdata( get_query_var( 'author' ) );
			if ( get_query_var( 'paged' ) ) {
				$position += 1;
				echo $sep . sprintf( $link, get_author_posts_url( $author->ID ), sprintf( $text['author'], $author->display_name ), $position );
				echo $sep . $before . sprintf( $text['page'], get_query_var( 'paged' ) ) . $after;
			} else {
				if ( $show_home_link && $show_current ) echo $sep;
				if ( $show_current ) echo $before . sprintf( $text['author'], $author->display_name ) . $after;
				elseif ( $show_home_link && $show_last_sep ) echo $sep;
			}

		} elseif ( is_404() ) {
			if ( $show_home_link && $show_current ) echo $sep;
			if ( $show_current ) echo $before . $text['404'] . $after;
			elseif ( $show_last_sep ) echo $sep;

		} elseif ( has_post_format() && ! is_singular() ) {
			if ( $show_home_link && $show_current ) echo $sep;
			echo get_post_format_string( get_post_format() );
		}

		echo $wrap_after;

	}
} // end of dimox_breadcrumbs()

После того, как вы сохраните изменения, добавьте следующий код в файл header.php:

if ( function_exists( 'dimox_breadcrumbs' ) ) dimox_breadcrumbs();

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

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

HESTIA

Тема отлично подходит для блогов и интернет-магазинов. Быстрая, минималистичная, современная тема.

Демо
Купить

Reboot

Быстрая и хорошо оптимизированная для SEO тема с удобным конструктором главной страницы.

Демо
Купить

Astra

В теме больше 100 шаблонов для разных типов сайтов. Отлично оптимизирована для поисковых систем.

Демо
Купить

Root

Качественно проработанная тема российских разработчиков. Большой упор на SEO-оптимизацию и кастомизацию.

Демо
Купить

Резюме

  1. Хлебными крошками (breadcrumbs) называют элемент навигации сайта в форме цепочки ссылок от главной страницы до текущей.
  2. Хлебные крошки помогают улучшить навигацию по сайту и индексацию поисковыми системами.
  3. По умолчанию WordPress не создает хлебные крошки.
  4. Чтобы создать хлебные крошки на сайте WordPress, можно воспользоваться специальными плагинами — Breadcrumbs, Breadcrumbs NavXT, Yoast SEO.
  5. Или использовать готовый код для вывода крошек без плагинов.
  6. Во многих SEO-оптимизированных темах для WordPress хлебные крошки выводятся без дополнительных настроек.
Анита Арико
Автор, копирайтер, интернет-маркетолог. За 6 лет в сфере побывала по обе стороны баррикад — работала со сторон и подрядчиков, и заказчиков. Пишу об интернет-маркетинге на языке предпринимателей.
Оцените автора
( 3 оценки, среднее 3.67 из 5 )
Добавить комментарий

Вам также может понравиться
Создание резервной копии сайта на WordPress: вручную, на хостинге и с помощью плагинов
Резервная копия сайта (ее еще называют бэкапом) защищает
04.7k.
Как добавить счетчик Яндекс Метрики на сайт WordPress: 4 способа установки
Рассказываем, как установить Яндекс.Метрику на любой
08.1k.
Установка WordPress на хостинг: пошаговая инструкция
Рассказываем, как установить WordPress автоматически
06.1k.
20+ лучших шаблонов для блога WordPress в 2021 году
Мы уже рассказывали о том, как создать свой блог на
07.9k.
Как создать интернет-магазин на WordPress с нуля: пошаговая инструкция
Или как сэкономить время, деньги и нервные клетки на
08.8k.
Как создать блог на WordPress
Пошаговая инструкция от А до Я: выбираем тему, настраиваем
06.5k.
Файл robots.txt для WordPress: правильный и рабочий вариант для всех сайтов
Чтобы нужные страницы сайта попадали в индекс поисковых
26.8k.
Как настроить 301 редирект в WordPress
Редирект помогает перенаправить пользователей с одной
09.3k.
© 2024 SeoForge
Работает не теме: Reboot
Этот сайт использует cookie для хранения данных. Продолжая использовать сайт, Вы даете свое согласие на работу с этими файлами.