Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. WordPress является, несомненно, самым функциональным движком, который позволяет реализовать практически любую задачу, в том числе с помощью многочисленных плагинов. Сегодня мы разберем работу одного из таких расширений, а именно Breadcrumb NavXT, дающего возможность реализовать хлебные крошки, которые представляют из себя не что иное как навигационную цепочку.

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

Плагин Breadcrumb NavXT удобен и несложен для использования, не нагружает особенно сервер, так что новичкам подойдет в самый раз. Тем более, ниже я постараюсь все разжевать до мелочей, включая то, откуда его скачать, как установить и произвести необходимые вам настройки.

Установка плагина Breadcrumb в WordPress

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

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

При установке через админ-панель перед загрузкой плагина вам будут предоставлены основные актуальные данные, куда включена дата обновления, его популярность среди пользователей, выраженная в числе установок, а также информация о совместимости с вашей версией движка:

Всё это вы сможете сразу проанализировать и принять решение о целесообразности использования любого выбранного вами плагина. Это тоже надо иметь ввиду.

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

<div class="breadcrumb">
<?php
if(function_exists('bcn_display'))
{
    bcn_display();
}
?>
</div>

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

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

Итак, вывод страничек записей (примером может служить данная статья) осуществляется обычно посредством файла single.php, а статических страниц — page.php (правда, в современных темах чаще всего используются сразу несколько шаблонов для отображения содержимого, например, content.php, content-page.php и т.д., так что нужно разбираться в каждом конкретном случае). В каждый из этих шаблонов следует вставить приведенный выше фрагмент. Для этого вам следует отыскать строчку с функцией вызова хидера (шапки) сайта:

<?php get_header(); ?>

И вставить код сразу под ней. Получится примерно так:

<?php get_header(); ?>
<div class="breadcrumb">
<?php
if(function_exists('bcn_display'))
{
	bcn_display();
}
?>
</div>

Конечно, если вы желаете разместить крошки еще и в рубриках, то этот же код вам нужно будет поместить в шаблоне category.php (либо в archive.php в зависимости от темы).

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

Для коррекции внешнего вида хлебных крошек можно добавить некоторые свойства каскадных таблиц стилей CSS для класса «breadcrumb» в файл style.css темы, например, такие:

.breadcrumb {font:15px  "Trebuchet MS", Verdana, Arial; тpadding-bottom: 10px; line-height:1.5}
.breadcrumb a {color: #1B7499;}
.breadcrumb a:hover {color: #EF0E0E}

Здесь цвет ссылки (.breadcrumb a) и ее окраска при наведении курсора (.breadcrumb a:hover) определяется параметром свойства color. После применения этих правил навигационная цепочка будет выглядеть вот таким образом:

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

Как уменьшить длину навигационной цепочки средствами CSS

Чтобы укоротить хлебные крошки, можно применить весьма изысканное решение с привлечением стилей, которые нужно прописать в том же файле style.css вашей темы WordPress:

.breadcrumb span[property="name"] {display: inline-block; padding: 0; margin-top: -3px; vertical-align: middle; max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

Надо сказать, что в самых последних версиях плагина Breadcrumb учтены уже все современные требования, в том числе касающиеся SEO продвижения. Поэтому в коде крошек внедрена микроразметка Schema.org (о ней я упомянул чуть выше), наличие которой, возможно, уже в недалеком будущем будет положительно влиять на ранжирование страниц сайтов.

К слову, наличие корректно составленной микроразметки практически гарантирует появление навигационной цепочки в сниппетах страниц сайта, попавших в результаты поиска Гугла, что дает дополнительный стимул к переходу пользователей.

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

Но можно пойти еще дальше. Например, чтобы отобразить полностью текст ссылки в цепочке навигации при наведении на него курсора, снимем с него ограничение длины с помощью свойства max-width: none (это правило тоже нужно внедрить в style.css):

.breadcrumb span[property="name"]:hover {max-width: none}

Теперь, если вы наведете курсор мышки на содержание любой ссылки, ее текст отобразится полностью во всей своей красе:

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

Как настроить Breadcrumb NavXT

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

Сначала рассмотрим основной блок:

Разделитель по умолчанию имеет вид угловой скобки «>». Однако этот спецсимвол HTML закодирован с помощью обозначения «>». Вы можете выбрать какой нибудь другой, например, значок стрелки «→», который в HTML коде обозначается «→». Но мне кажется, дефолтный вариант наиболее оптимален.

Также возможно отметить ссылкой текущую позицию, тогда и название страницы, на которой находится пользователь, будет также представлено в виде гиперссылки. Мне показалось лишним, если страничка ссылается на саму себя, но повторяю, вы можете посчитать по-другому. Следующие пара настроек связана с постраничной навигацией:

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

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

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

Я уже обмолвился, что после того, как вы пропишите соответствующие свойства CSS, оформление хлебных крошек уже можно считать сносным. Но все-таки каждый ищет наилучший вариант. Мне, например, не понравилось длинное название главной страницы, которое выводится на основании прописанного мною в шаблоне блога.

Потому настало время выполнить данное мною выше обещание и показать, как редактировать представленные в настройках Breadcrumb NavXT шаблоны на примере кода ссылки на главную (скриншот выше). Вместо тега анкора ссылки «%htitle%» я прописал просто доменное имя «Goldbusinessnet.com», а значение атрибута title «Go to %title%» (который генерирует появление всплывающей подсказки) я заменил на «Переход на главную страницу сайта Goldbusinessnet.com — создание сайтов и заработок в сети»:

После этого шага не только сократился текст ссылки на главную, но и содержание атрибута title, которое появляется на экране при подводе курсора:

В этой же вкладке основных настроек Breadcrumb NavXT чуть ниже аналогичные дополнительные действия можете произвести в отношении страницы блога (если главная является статической), а также в отношении страницы главного проекта, если вы вдруг используете режим мультисайта (в этой статье познакомьтесь с понятием Multisite в WordPress).

Во вкладке «Записи и страницы» по аналогии с описанным уже способом можно произвести редактирование шаблонов для статических вебстраниц и статей:

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

Вывод иерархии (чекбокс заполнен по умолчанию) — активирует в настройках выбор раздела (таксономии), которому принадлежит текущая страница, а также присутствие вебстраницы самой таксономии в хлебных крошках. Какого типа будет этот раздел, необходимо отметить напротив пункта «Иерархия записи». В нашем примере это рубрика. Ежели галочкой эту опцию не отмечать, то крошки будут выглядеть следующим образом:

Post Hierarchy Referer Influence — ежели активировать данную опцию, заполнив чекбокс, то ссылающаяся страница будет влиять на таксономию, выбранную для иерархии.

Во вкладке «Записи и страницы» также можно настроить шаблоны (как с кликабельными, так и некликабельными вариантами) для статических вебстраниц и страниц вложения (примером может служить attachment, на которой присутствует изображение к посту).

Если выбрать некликабельный шаблон для статической страницы, то можно дописать какой-то постоянный текст к ее заголовку, который будет присутствовать в навигации:

Например, вместо «%htitle%» вставьте что-то типа «Вы находитесь на странице %htitle%» или «страница %htitle%». В общем, как-то так.

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

При настройке, отображенной на картинке выше, хлебные крошки WordPress примут такой вид (в случае подвода курсора к названию категории):

В последней вкладке «Другое» представлены шаблоны для различных архивов (по дате, по автору), на результаты пользовательского поиска, на вебстраницу с 404 ошибкой page not found (страница не найдена). В общем, присутствуют практически все возможные варианты, ну а настройка всех этих шаблонов уже не должна вызывать у вас вопросов.

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

Это должно действовать, по крайней мере, в моей теме WordPress такая настройка при проверке сработала. Однако, даже разработчики плагина предупреждают, что такой подход устарел, то есть присутствие в коде синтаксиса такого варианта делает его неликвидным.

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

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. С тем, чтобы оптимизировать свой сайт по максимуму и добиться успеха в его продвижении, важно учесть самые разнообразные нюансы, например, использовать возможность реализации хлебных крошек на своем проекте.

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

Кроме этого, правильное внедрение дополнительной микроразметки способно обеспечить вывод хлебных крошек в сниппете веб-страницы, находящейся в результатах выдачи поисковых систем (Yandex и Google), что является дополнительным ориентиром для посетителей.

ЧИТАТЬ ДАЛЬШЕ