«Хлебные крошки» — элемент навигации, навигационная цепочка, благодаря которой посетитель может легко ориентироваться в структуре сайта, начиная с корневого каталога и заканчивая отдельной статьей.
Просматривая эту цепочку, человек посетивший ваш сайт, четко понимает в какой структуре он находится, может легко переходить к любому пункту цепи. В дополнение к этому данный элемент выполняет роль внутренней перелинковки, что оказывает влияние на процесс оптимизации сайта.
В этой статье мы рассмотрим установку хлебных крошек без использования плагинов. Почему? Потому, что простой установкой плагина в этот раз не обойтись и даже используя плагины, вам все равно придется вставлять участки кода в некоторые файлы. Так не лучше ли пойти по пути игнора плагинов и поработать исключительно с кодом. Установленный элемент на вашем сайте будет выглядеть примерно так:
Процесс установки навигационной цепочки
1. К процессу создания «крошек» приобщены изображения, выполняющие роль подложек под названия.
Скачайте архив с подложками шести цветов, распакуйте в отдельную папку на компьютере и загрузите изображения в папку images вашей темы WordPress (/wp-content/themes/папка темы/images). Из шести изображений Вы сможете выбрать то, которое наиболее соответствует цветовой гамме вашего сайта.
Далее следует работа со вставкой кода. Эту операцию можно осуществлять двумя способами. Можно использовать встроенный редактор WordPress, а можно это делать при помощи любого файлового менеджера, типа TotalCommander, соединившись с FTP-сервером.
2. Теперь необходимо добавить стили. Это можно сделать в админ-панели (внешний вид → темы → настроить → дополнительные CSS) или открыть файл со стилями style.css из папки с вашей темой оформления и добавить следующий код:
/* Хлебные крошки */
#breadcrumb {display:block; float:none; margin:0 0 70px 0; font-weight: 600;}
#breadcrumb ul {font-family: Helvetica, sans-serif; list-style: none;}
.crumbs {display: block;}
.crumbs li.first {padding-left: 8px;}
.crumbs li a, .crumbs li a:link,
.crumbs li a:visited {color: #616d7e; display:
block; float: left; font-size: 11px; margin-left: -13px; padding: 7px 17px 11px
25px; position: relative; text-decoration: none;}
.crumbs li a {background-image: url(images/bg-crumbs-blue.png); background-
position: 100% 0%; background-repeat: no-repeat; position: relative;}
.crumbs li a:hover {background-position: 100% -48px; color: #333; cursor: pointer;}
.crumbs li a:active {background-position: 100% -96px; color: #333;}
.crumbs li.first a span {border-left: 1px solid #d9d9d9; height: 29px; left: 0;
position: absolute; top: 0; width: 3px;}
В строке background-image: url (images/bg-crumbs-blue.png) измените название графического файла фона на тот, чей цвет больше всего подходит дизайну вашего блога.
3. На следующем шаге нам понадобится файл functions.php. Находится он в папке темы (/wp-content/themes/название темы/functions.php). Добавляем в этот файл следующую функцию:
//Breadcrumb
function the_breadcrumb() {
if ( !is_home() ) {
echo '<div id="breadcrumb"> <ul class="crumbs"><li class="first"><a href="';
echo get_option('home');
echo '" style="z-index:9;"><span></span>';
echo ''. bloginfo('name') . '';
echo "</a></li>";
}
if ( is_category() || is_single() ) {
$cats = get_the_category();
$cat = $cats[0];
$output .= '<a href="'.get_category_link($cat->term_id).'" style="z-index:8;">
'.$cat->name.'</a>';
echo '<li>'.$output.'</li>';
}
if(is_single())
{
echo '<li><a href="'.get_permalink().'" style="z-index:7;">';the_title();echo '</a></li>';
}
if(is_page())
{
echo '<li><a href="'.get_permalink().'" style="z-index:8;">';the_title();echo '</a></li>';
}
echo "</ul></div><div class=\"clear\"></div>";
}
Здесь нужно стараться не совершать ошибки, особенно если Вы впервые сталкиваетесь с такого рода задачей. Если умудритесь вставить код неправильно, сайт попросту перестанет работать. Поэтому, лучшим вариантом будет использование FTP-соединения и не забывайте делать копии файлов перед изменением, чтобы в критических ситуациях можно было все вернуть в исходное состояние.
Поэтому, во избежание ошибок, я вставил этот код в самый конец файла functions.php. Такой вариант оказался работоспособным.
4. Но, это ещё не всё. Далее следует шаг вывода «крошек» для показа на сайте. Есть несколько вариантов: можно разместить их в записях (статьях), архивах, категориях и на страницах. Но, самым оптимальным я считаю вывод только в статьях. Если Вы согласны со мной, то ограничимся вставкой кода только лишь в файл single.php. Он так же находится в папке вашей темы. Открываем его и вставляем следующий код:
<?php the_breadcrumb(); ?>
Чтобы крошки располагались в нужном месте, а обычно это — ниже горизонтального меню и перед основным контентом, код нужно вставить в самом начале файла, после участка кода get_header(); ?>
Все получилось? Крошки появились в предполагаемом месте. На этом можно закончить, но, есть один нюанс, который может омрачить ваше торжество. Сейчас его коснемся.
Что делать, если не хватает ширины графической подложки?
При слишком длинных заголовках статей может получиться такой пассаж:
Как Вы видите, название статьи слишком длинное и не помещается в поле подложки. Устранить этот неприятный глазу момент можно двумя способами:
- При помощи графического редактора, например PaintNet, увеличить ширину изображений полосок. Это хороший и действенный способ, но слишком длинные «крошки» могут выглядеть не симпатично.
- Второй способ более продвинутый. Он заключается в замене небольшого участка кода в файле functions.php. Найдите там в двух местах код the_title () и замените его на trim_title_chars (30, ‘…’). Цифра 30 означает количество отображаемых символов. Вы можете указать своё значение.
Но, для того чтобы после замены участка кода всё заработало, нужно в файл functions.php вставить ещё такую функцию:
function trim_title_chars($count, $after) {
$title = get_the_title();
if (mb_strlen($title) > $count) $title = mb_substr($title,0,$count);
else $after = '';
echo $title . $after;
}
А если Вы пожелаете ограничить длину названия не по количеству символов, а по количеству слов, тогда в двух местах код the_title () меняйте на trim_title_words (5, ‘…’), где число 5 — это количество слов, а в файл functions.php вставляйте уже другую функцию:
function trim_title_words($count, $after) {
$title = get_the_title();
$words = split(' ', $title);
if (count($words) > $count) {
array_splice($words, $count);
$title = implode(' ', $words);
}
else $after = '';
echo $title . $after;
}
