Разумеется, в вопросе создания «хлебных крошек», помимо всевозможных способов, нельзя обойти стороной применение плагинов.
В предыдущем материале я уже попытался рассказать, как можно сделать данный элемент без применения плагинов или при помощи php-скрипта. А в этой статье речь пойдет о плагинах.
Одним из наиболее распространенных и удачных плагинов является Breadcrumb NavXT.
Если Вы уже определились и считаете установку плагина на свой блог верным решением, добро пожаловать к прочтению и изучению материала.
Установка плагина
Установка стандартная, сложностей практически никаких. Установить можно как из админ-панели, так и скачать с официального сайта WordPress.
Для осуществления первого варианта, в вертикальном меню админки пройдите по пути: Плагины → Добавить новый. На открывшейся странице с названием Добавить плагины введите название плагина (Breadcrumb NavXT) в поисковое поле Поиск плагинов. Плагин будет найден и Вам нужно только установить и активировать его:
Применение второго варианта связано с переходом на официальный сайт WordPress. Введите соответствующий поисковый запрос (WordPress официальный сайт), на открывшейся странице сайта выберите в верхнем меню пункт Плагины и найдите нужный, используя поиск. Установите и активируйте.
Но и после активации плагина «крошки» сами по себе не появятся на странице сайта. Для включения их в полноценную работу необходимы дополнительные действия. Вот это уже слегка настораживает и напрягает, особенно новичков. Обычно бывает как — установил плагин и всё, более никаких действий производить не нужно, кроме настроек. Но, в случае с этим плагином, немножко иная история.
Вызов плагина и настройки внешнего вида «крошек»
Основная задача состоит в том, чтобы определить файлы из папки с вашей темой, в которые мы будем вставлять код вызова «крошек». Здесь все решаете Вы сами. Я, к примеру, ограничился только лишь файлом single.php.
Код вызова «крошек» выглядит следующим образом:
<div class="breadcrumb" typeof="BreadcrumbList" vocab="http://schema.org/">
<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>
А сейчас нужно определиться, в какое именно место будем вставлять этот код. Обычное расположение навигационной цепочки — вверху, перед названием страницы. В своей теме я вставил код в самом начале файла single.php, сразу после строки:
<?php get_header(); ?>
После этой операции, «крошки» появятся на странице. Можно ограничиться сделанным, но цепочка будет иметь не очень презентабельный вид:
Для того, чтобы этот элемент слегка видоизменить и приукрасить, в файл стилей style.css можно добавить примерно такой код со стилями «крошек»:
/* хлебные крошки */
.breadcrumb {
width: auto; /* Общая ширина страницы */
font-size: 13px; /* Размер шрифта */
color: #000000; /* Цвет текста, который не является ссылкой */
text-shadow: #000000 0px 0px 0px; /* Тени для текста */
text-align: left; /* Прижимаем текст к левому краю страницы */
margin: 3px 30px 20px 30px; /* Внешние отступы */
padding-bottom: 5px; /* Внутренние отступы */
border-bottom: 1px solid #20B2AA; /* Добавляем разделительную черту снизу */
}
/* цвета ссылок*/
.breadcrumb a{ color: #1B7499; }
.breadcrumb a:hover { color: #EF0E0E; }
Эти свойства задают внешний вид «хлебных крошек» в WordPress: размер и тип шрифта (font-size), тени для текста (text-shadow), выравнивание по краю (text-align), внешние и внутренние отступы (margin и padding), разделительную черту (border-bottom). Так же определяют цвет ссылок (.breadcrumb a) и цвет ссылок при наведении на них курсора мыши (.breadcrumb a:hover).
Настройки плагина Breadcrumb NavXT
Для настроек плагина заходим в админку WordPress и выбираем в левом меню: Настройки → Breadcrumb NavXT. В открывшемся окне видим несколько вкладок. Нам нужна вкладка Основные:
На этой вкладке можно задавать параметры, которые будут применены для всех страниц вашего блога.
В поле Разделитель нужно задать символ, который будет служить разделителем в хлебных крошках. Символы можно вставить любые. Наберите в адресной строке браузера Мнемоники в HTML и выберите код понравившегося символа.
Разделитель устанавливается между ссылками. Я попробовал в строку Разделитель вставить код изображения стрелочки. Например, такой:
<img src="/images/arrow.png" width="20" height="20" alt="стрелка">
В данном случае файл изображения (arrow.png) загружается из папки images, расположенной в корневой папке сайта. Чтобы стрелочка не была близко к тексту ссылки, можно сделать пробел
Кроме выбора типа разделителя, можно включить показ текущей страницы в виде ссылки (смотри на скриншоте вверху). Но, мне кажется, что этого делать не следует.
По умолчанию плагин выводит на место главной страницы название вашего сайта. Если есть желание заменить это название на слово Главная, нужно сделать следующее: выделить, скопировать и вставить в используемый вами текстовой редактор код из строки Шаблон ссылки на главную. (Просто, в текстовом редакторе это делать удобнее.)
Далее, в этом коде нужно сделать небольшую замену. Найдите участок кода
<span property="name">%htitle%</span>
и замените %htitle% на слово Главная.
Остальные настройки я бы оставил по умолчанию.
Как ограничить длину заголовка хлебных крошек?
Это интересный момент. Если Вы хотите ограничить длину заголовка «хлебных крошек», сделать это можно с помощью CSS. Дополнительно к установленным стилям «крошек» нужно добавить такой код (при условии использования плагина Breadcrumb NavXT версии 5.3.0 и выше):
.breadcrumb span[property="name"] {
display: inline-block;
padding: 0;
margin-top: -3px;
vertical-align: middle;
max-width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
А для устаревших версий (ниже 5.3.0), вставляйте такой код:
.breadcrumb span[typeof="v:Breadcrumb"]:last-child span[property="v:title"],
.breadcrumbs a[property="v:title"] {
display: inline-block;
padding: 0;
margin-top: -3px;
vertical-align: middle;
max-width: 260px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Регулирование максимальной длины заголовка происходит с помощью параметра max-width.
