Хлебные крошки на вордпресс без плагина

Устанавливаем на WordPress блог «хлебные крошки» без плагинов

Хлебные крошки на вордпресс без плагинаКак и обещал в прошлой статье, сегодня мы поговорим о способах улучшения внутренней перелинковки страниц на сайте. В частности рассмотрим вариант дополнительной навигации на блоге, который называется breadcrumbs или «хлебные крошки». Что из себя представляет эта «штуковина», вы можете видеть, например над заголовком этой статьи. Это ссылки в формате:

Главная » Раздел или категория » Название статьи или страницы

Как организовать такую навигацию на своём блоге без плагинов мы подробно разберём в этой заметке.

На своём блоге я применяю функцию seorubl_breadcrumbs(), написана она мною пару минут назад. В основу легла известная в Интернете функция dimox_breadcrumbs(), но я её немного переработал и переименовал соответственно.Что изменено? Убрал некоторые громоздкие, но редко используемые конструкции в самой функции. Также изменил способ и стиль вызова и задания аргументов и настроек. Теперь функция написана в стиле стандартных функций WordPress. Она стала более гибкая в плане настроек внешнего вида, может применяться в разных блоках на блоге, также возможен одновременный бесконфликтный вызов нескольких функций на одной странице.

Как заставить работать функцию seorubl_breadcrumbs() на своём блоге?

Довольно просто и стандартно. Добавляем код функции в файл functions.php вашего шаблона.

function seorubl_breadcrumbs($args_crumbs = array()) {

// Для вывода хлебных крошек в нужном месте вызовите функцию:
// $args_crumbs = array('id_block' => 'breadcrumbs', 'home' => 'Главная', 'delimiter' => '&raquo;', 'before' => '<span>', 'after' =>'</span>');
// seorubl_breadcrumbs($args_crumbs);
// $home = 'Главная'; // анкор ссылки «Главная»
// $delimiter = '&raquo;'; // разделитель между ссылками
// $before = '<span>'; // теги до и после
// $after = '</span>'; //  названия текущей страницы
// для настройки стиля всего контейнера: #breadcrumbs

$defaults = array(  
        'home' => 'Главная',
	'id_block' => 'breadcrumbs',
	'delimiter' => '&raquo;',
	'before' => '<span>',
	'after' => '</span>'    
    );  

    $args = wp_parse_args( $args_crumbs, $defaults );  
    extract( $args, EXTR_SKIP );

echo '<!-- start seorubl_breadcrumbs() -->';
if ( !is_home() && !is_front_page() || is_paged() ) {

echo '<div id="'.$id_block.'">';

global $post;
$home_link = get_option('home');
echo '<a href="'.$home_link.'" title="'.$home.'">'.$home.'</a> '.$delimiter.' ';

if (is_category()) {
global $wp_query;
$cat_obj = $wp_query->get_queried_object();
$thisCat = $cat_obj->term_id;
$thisCat = get_category($thisCat);
$parentCat = get_category($thisCat->parent);
if ($thisCat->parent != 0) 
	echo(get_category_parents($parentCat, TRUE, ' '.$delimiter.' '));
echo $before.'Архив рубрики: '.single_cat_title('', false).$after;

} elseif (is_day()) {
echo '<a href="'.get_year_link(get_the_time('Y')).'">'.get_the_time('Y').'</a> '.$delimiter.' ';
echo '<a href="'.get_month_link(get_the_time('Y').get_the_time('m')).'">'.get_the_time('F').'</a>'.$delimiter.' ';
echo $before.get_the_time('d').$after;

} elseif (is_month()) {
echo '<a href="'.get_year_link(get_the_time('Y')).'">'.get_the_time('Y').'</a>'.$delimiter.' ';
echo get_the_time('F');
} elseif (is_year()) {
echo $before.get_the_time('Y').$after;

} elseif (is_single() && !is_attachment()) {
$cat = get_the_category(); $cat = $cat[0];
echo get_category_parents($cat, TRUE, ' '.$delimiter.' ');
echo $before.get_the_title().$after;

} elseif (is_attachment()) {
$parent = get_post($post->post_parent);
$cat = get_the_category($parent->ID); $cat = $cat[0];
echo get_category_parents($cat, TRUE, ' '.$delimiter.' ');
echo '<a href="'.get_permalink($parent).'">'.$parent->post_title .'</a>'. $delimiter.' ';
echo $before.get_the_title().$after;

} elseif (is_page()) {
echo $before.get_the_title().$after;

} elseif ( is_search() ) {
echo $before.'Результаты поиска по запросу «'.get_search_query(). '»'.$after;

} elseif (is_tag()) {
echo $before . 'Записи с тегом:'.single_tag_title('', false).'»'.$after;

} elseif (is_author()) {
echo $before.'Статьи автора'. $after;

} elseif (is_404()) {
echo $before.'Error 404'.$after;

} elseif (isset($_GET['paged']) && !empty($_GET['paged'])) 
echo "Архивы блога";
}
echo '</div>';
echo '<!-- end seorubl_breadcrumbs() -->';

} // end seorubl_breadcrumbs()

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

<?php if (function_exists('seorubl_breadcrumbs')) : seorubl_breadcrumbs(); endif; ?>

Этот код выведет «хлебные крошки» со стандартными настройками:

  •  Анкор ссылки на домашнюю страницу — «Главная»
  • Разделитель между ссылками — «»»
  • Тег до названия текущей страницы — «<span>» и после — «</span>»
  • id главного контейнера <div> — «breadcrumbs», соответственно для настроек стилей можно использовать селектор «#breadcrumbs»

Пример настройки стилей отображения «хлебных крошек» в файле styles.css:

/* breadcrumbs */
#breadcrumbs {
	font-size:12px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;	
}
#breadcrumbs a {
	text-decoration:none;
	color: rgb(25, 130, 209);
}
#breadcrumbs a:hover {
	color: rgb(0, 0, 0);
}
#breadcrumbs span {
	font-weight:bold;	
}

Если вы хотите задать свои параметры в seorubl_breadcrumbs(), то воспользуйтесь следующим кодом вызова функции:

<?php if (function_exists('seorubl_breadcrumbs')) :
	$args_crumbs = array(	'id_block' => 'breadcrumbs', 
			'home' => 'Главная', 
			'delimiter' => '&raquo;',
			'before' => '<span>',
			'after' =>'</span>');
	seorubl_breadcrumbs($args_crumbs);
endif; 
?>

Значения элементов в массиве можно задавать на своё усмотрение. Часть элементов можно пропустить, тогда они примут стандартные значения, которые описаны выше.

В какие файлы вставлять код вызова функции отображения «хлебных крошек»? Это зависит от шаблона WordPress, установленного на вашем блоге. У меня в теме за вывод отдельных постов отвечает файл content-single.php, я как раз в него вставил код перед выводом заголовка статьи. Также будет полезным вставить подобный код на страницы: category.php, search.php, author.php, archive.php, single.php и т.п.

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

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

Кроме «хлебных крошек» полезным будет настроить на блоге вывод виджетов: «Последние статьи», «Популярные статьи», «Похожие статьи» и т.п.

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

2 thoughts on “Устанавливаем на WordPress блог «хлебные крошки» без плагинов”
  1. Мне кажется, с плагином Breadcrumb NavXT менее хлопотно. Во всяком случае для неопытных пользователей, дабы не на(б)редить в файле functions.php:)

    1. Кому как удобно. Я не люблю ставить лишние плагины. Также с помощью своей функции я могу задать более гибкие настройки. С functions.php, конечно, надо быть аккуратным и держать рабочий файл в запасе, чтобы отменить неаккуратно сделанные изменения.

Добавить комментарий

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