Flector 5

Breadcrumb NavXT это самый продвинутый и популярный плагин "хлебных крошек " для блога на WordPress . У него всего один недостаток – нет никаких встроенных стилей оформления. Этот недостаток плагина вы можете исправить, взяв готовые к использованию стили из этой статьи. В плагине достаточно много тонких настроек, так что я перевел его на русский язык, чтобы в настройках могли разобраться даже новички. Также читайте как оформить панель "хлебных крошек " в разметке RDFa , которая поможет поисковикам найти и использовать эту панель при формировании сниппета.

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

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

Как это сделать? Первым делом, поменяйте код вызова панели на:

Главная

%htitle%

И так для каждой ссылки в панели навигации. Я не буду заставлять вас вручную менять каждую ссылку в настройках плагина - вот вам готовый настроек (правая кнопка мышки и "Сохранить объект как "). Нажмите "Помощь ", затем кликните на "Импорт/Экспорт/Сброс " и выберите скаченный файл для загрузки и импорта. В данном файле экспорта использованы настройки плагина по умолчанию плюс RDFa разметка и ничего больше. При желании вы можете настроить плагин под себя, но не трогайте в настройках все, что относится к RDFa .

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

Главная страница в этом превью не отображается, но в реальном поиске она, конечно, будет присутствовать.

Кстати, формально плагин поддерживает разметку для "хлебных крошек ". Но почему-то только в виджете и только разметку "schema.org ". Однако поддерживает он ее криво - валидацию у гугла такая разметка не проходит:

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

К сожалению, на данный момент "хлебные крошки " не поддерживаются яндексом . Причем ни в каком виде – что в размеченном, что нет. Жаль, конечно, но тут ничего не поделаешь.Скачать плагин версии 6.2.1 (всего скачено 6 988 695 раз)

Понравился пост? Подпишись на обновления по или

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

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

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

Термин «Хлебные крошки» (по-английски Breadcrumbs) был взят из немецкой сказки братьев Гримм. В этой сказке дети отмечали свой путь в лес, оставляя после себя на своем пути хлебные крошки, чтобы ориентируясь по оставленным хлебным крошкам, у них оставалась возможность вернуться домой.

На своем блоге я уже описывал установку хлебных крошек с помощью плагина .

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

Внимание! Перед установкой кода сделайте резервные копии файлов, в которые вы будете вставлять коды, чтобы в случае неполадок восстановить работоспособность вашей темы WordPress.

Для установки хлебных крошек вам необходимо будет вставить несколько кодов в соответствующие файлы вашей темы.

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

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

Установка хлебных крошек на сайт

Два варианта кода потребуется вставить в следующие файлы темы: «Функции темы (functions.php)», «Одна запись (single.php)», «Шаблон страницы (page.php)», «Архивы (arhvie.php)», «Результаты поиска (search.php)».

Первый код нужно будет вставить в файл «Функции темы (functions.php)», установленной на вашем блоге темы WordPress.

// хлебные крошки function dimox_breadcrumbs() { $showOnHome = 0; // 1 - показывать "хлебные крошки" на главной странице, 0 - не показывать $delimiter = "»"; // разделить между "крошками" $home = "Главная"; // текст ссылка "Главная" $showCurrent = 1; // 1 - показывать название текущей статьи/страницы, 0 - не показывать $before = ""; // тег перед текущей "крошкой" $after = " "; // тег после текущей "крошки" global $post; $homeLink = get_bloginfo("url"); if (is_home() || is_front_page()) { if ($showOnHome == 1) echo "

Для вставки этого кода в файл установленной на вашем сайте темы, нужно войти в «Админ-панель WordPress» => «Внешний вид» => «Редактор => «Шаблоны», и там нажать на пункт «Функции темы (functions.php)».

В окне «Редактировать темы», в файл «Функции темы ((functions.php)» потребуется вставить первый код в самом верху файла, после

Название записи домашней страницы - «Главная», можно изменить по вашему желанию на название вашего сайта. Для этого в соответствующей строке кода нужно заменить слово «Главная» на название вашего сайта.

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

После вставки кода и сделанных в нем по вашему желанию изменений, нажимаете на кнопку «Обновить файл».

Следующий код нужно будет вставить в несколько файлов установленной у вас темы: «Одна запись (single.php)», «Шаблон страницы (page.php)», «Архивы (arhvie.php)», «Результаты поиска (search.php)».

В файл «Одна запись (single.php)», отвечающий за страницам со статьями, код вставляется в место, показанное на изображении.

После вставки этого кода нужно нажать на кнопку «Обновить файл».

В файл «Архивы (arhvie.php)», вставляете этот код, в место, которое выделено в рамке на изображении.

Потом нажимаете на кнопку «Обновить файл».

В файл «Результаты поиска (search.php)», отвечающий за поиск по сайту, вставляете код в место, указанное на изображении.

После того, как вы вставили код, нажимаете на кнопку «Обновить файл».

В файл «Шаблон страницы (page.php)», отвечающий за статические страницы, вставляете код, как это показано на изображении.

После установки кода нажимаете на кнопку «Обновить файл».

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

Можно еще добавить такой код в файл «Таблица стилей (style.ccs)»:

/* Хлебные крошки */ #crumbs { padding:10px 10px 0 15px; max-height:20px; overflow:hidden; line-height: 180%; border-radius:0 0 8px 8px; -moz- border-radius:0 0 8px 8px; -webkit- border-radius:0 0 8px 8px;}

Этот код вставляется в самом конце файла «Таблица стилей (style.ccs)» для изменения внешнего вида установленной навигации хлебные крошки. Код для вставки в файл «Таблица стилей (style.php)» может иметь и другие характеристики (размеры, отступы и т. д.). Вставлять такой или подобный код на свой блог совсем не обязательно.

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

Выводы статьи

Теперь на вашем блоге установлены Хлебные крошки без использования плагина. Создателем этой функции является известный блогер Dimox (Дмитрий).

Добрый день уважаемые читатели! Я продолжаю вам рассказывать об основных плагинах для WordPress, которые желательно установить сразу. Сегодня хочу вас познакомить с плагином Breadcrumb NavXT, который решает несколько важных задач. Во-первых, создаст дополнительную навигацию на блоге. Благодаря которой посетитель сможет проследить путь от корня сайта до той страницы на которой он находится. Во- вторых, является дополнительным инструментом в создании внутренней перелинковке страниц . В третьих, некоторое время назад поисковая система Google начала выдавать “хлебные крошки ” в выдаче, что позволить привлечь дополнительный трафик на проект. И в четвертых, благодаря плагину Breadcrumb NavXT статический вес равномерно распределяется по всем страницам. Но наверно стоит уже перейти к установке «хлебных крошек».

Итак, для начала необходимо скачать плагин Breadcrumb NavXTсо страницы http://wordpress.org/extend/plugins/breadcrumb-navxt . Полученный архив распаковать и с помощью ftp — клиента закинуть в директорию /wp-content/plugins. И в завершении активировать в административной панели. После того, как плагин был успешно активирован в консоли Настройки появляется строка Breadcrumb NavXT.

Но для полной активации плагина Breadcrumb NavXT необходимо в определенные файлы шаблона вставить код вывода функции «хлебных крошек». Код имеет вот такой вид:

Данный код необходимо будет установить в следующие файлы шаблона: single.php (выводит статьи), archive.php (статьи, находящиеся в архиве, рубрики), search.php(статьи, найденные посредством поиска на блоге), page.php(выводит страницы). Для этого в административной панели заходим в Дизайн и выбираем пункт Редактирование, а дальше активируем нужный файл, предположим single.php Код функции плагина Breadcrumb NavXT вставляем сразу же после строчки

И нажимаем Сохранить изменения. Далее необходимо создать для нашей дополнительной навигации стиль. Поэтому открываем файл style.css и прописываем несколько свойств стилей для класса BREADCRUMB:

Breadcrumb { font:bolder 12px Georgia; padding-bottom: 1px; padding: 4px 8px; color: #FFffff!important; background:#9C1718 ; border: 0 !important; } .breadcrumb a{ color: #ffffff;!important; } .breadcrumb a:hover { color: #ffffff; background:#C9CACB !important; }

Этим я задала свойства отражения для хлебных крошек.

Font:bolder 12px Georgia; - это размер и тип шрифта
- padding-bottom: 1px; - отступы
— color: цвет текста
— padding: отступы текста
-background: цвет фона, на котором расположатся хлебные крошки
- .breadcrumb a - цвет ссылок
- .breadcrumb a:hover - цвет ссылок при наведение курсора мышки
— background: цвет фона при наведении

Этот код можно установить в самом низу файла style.css

Сохраняем изменения.

На этом работа по редактированию кода заканчивается и остается только провести настройки отражения плагина в административной панели. Для этого нам и понадобится пункт Breadcrumb NavXT в Настройках. Окно настроек плагина состоит из нескольких вкладочек.

Начнем с Общие
Данная вкладка позволяет установить параметры, применимые для всех страниц
В строке «Разделитель» указываем мнемокод, позволяющий разделить хлебные крошки.Можно использовать для помощи вот такую небольшую мою подборку мнемокодов

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

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

Функции

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

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

Поисковая система Google уже начала отображать вспомогательную навигацию под названиями сайтов в результатах выдачи. Это предоставляет веб-ресурсу возможность переместиться на верхние позиции. Подробное описание процесса дано в официальной справке компании Google. Не все так легко, как кажется. Поисковая система не всегда может понять, нужно ли отображать «хлебные крошки» Wordpress в выдаче.

Стоит ли добавлять вспомогательную навигацию на сайт

Если пользователю удается разбить тему блога на 3-4 рубрики, то устанавливать блок со ссылками необязательно. Структура веб-ресурса останется простой и понятной. В этом случае не рекомендуется использовать «хлебные крошки» Wordpress. Вспомогательную навигацию нужно добавлять, только если сайт имеет сложную структуру.

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

Breadcrumb NavXT

Этот программный продукт является самым популярным и мощным плагином, позволяющим создавать в Wordpress «хлебные крошки». С его помощью можно генерировать вспомогательное меню, которое будет широко настраиваемым. Плагин подойдет как новичкам, так и специалистам в сфере Wordpress. Он обладает большим количеством функций. Пользователь может задавать уникальные классы и идентификаторы для продвинутой стилизации вспомогательного меню.

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

При необходимости можно включить функцию генерирования кода в соответствии с принятым Google стандартом RDFa. Подобная разметка панели вспомогательного меню не будет гарантией того, что система применит «хлебные крошки» при создании поискового сниппета, однако шансы на это существенно возрастут. Ссылки отображаются только в виджете. Добавить вспомогательное меню в начало страницы не удастся. Стоит учитывать, что «хлебные крошки» не поддерживаются поисковой системой «Яндекс».

Yoast Wordpress SEO

Создание вспомогательного меню - это одна из функций данного программного продукта. Большое количество инструментов позволяет выполнять расширенную SEO-оптимизацию. Этот плагин используют люди, настроенные на качественное продвижение блога. Редактирование блока со ссылками у некоторых владельцев сайтов может вызвать затруднения. Чтобы выполнить эту задачу, нужно открыть административную панель Wordpress, перейти в раздел «SEO» и выбрать строку «дополнительно».

Будет загружена страница с дополнительными настройками плагина. Здесь необходимо перейти на вкладку «навигационная цепочка». Пункт «включить» следует отметить галочкой. Для появления вспомогательного меню на сайте требуется добавить в код блога PHP-функцию, отвечающую за вывод. В поле «разделитель» можно ввести любой символ, который поддерживается HTML5.

В качестве текста ссылки на основную страницу сайта следует указать домен или просто слово «Главная». В поле «основной префикс» нужно вписать несколько букв или символов. Они будут отображаться перед всеми ссылками вспомогательного меню. Таким же образом заполняются поля префиксов навигационных цепочек для архивов и страниц с результатами поисковой выдачи. В подразделе «таксономия» необходимо выбрать пункт «рубрики», «метки» или «форматы».

Breadcrumb Trail

С помощью плагина от Джастина Тэдлока можно быстро создавать в Wordpress «хлебные крошки». Начинавшееся с небольшого скрипта, это программное обеспечение переросло в продвинутую систему.

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

Yummi «хлебные крошки»

Этот программный продукт можно установить прямо из панели администратора в Wordpress. Для этого следует перейти на страницу «плагины». Затем нужно кликнуть по кнопке «добавить новый», ввести название в строку поиска, нажать Enter и установить ПО. После активации необходимо настроить плагин. С этой задачей справится даже начинающий пользователь.

Сначала нужно указать тип установки блока со ссылками. Чтобы «хлебные крошки» Wordpress плагин вывел автоматически, следует выбрать соответствующий пункт. Если пользователь укажет тип «ручная установка», то он должен будет вставить код на сайт самостоятельно. Затем требуется выбрать внешний вид блока со ссылками. Далее следует указать, на каких страницах будут отображаться «хлебные крошки».

При желании можно включить показ всплывающих подсказок и ссылки Home. Пользователю также следует выбрать стиль шрифта для «хлебных крошек» и основных категорий. Здесь же находится опция включения атрибута title для ссылок. Чтобы удалить со страниц сайта информацию об авторе плагина, необходимо указать пункт «спрятать» рядом с графой «ваша благодарность» и сохранить результат. Можно заметить, что настройки плагина достаточно просты и понятны.

Really Simple Breadcrumb

Этот программный продукт - еще одно простое решение для Wordpress. Плагин работает корректно и без ошибок, отображается согласно коду используемой темы. Установить программное обеспечение можно через панель администратора. Для того чтобы «хлебные крошки» отображались на статических страницах, необходимо прописать над строкой вывода заголовка соответствующий код. Если пользователю нужно изменить тип разделителя, то он может редактировать 17 строчку файла breadcrumb.php.

В этом варианте добавления вспомогательного меню отсутствует микроразметка. С нею «хлебные крошки» будут отображаться в сниппете поисковой выдачи Google вместо URL. Это повысит кликабельность. Поэтому пользователю необходимо добавить микроразметку или использовать другой вариант.

DP RDFa Breadcrumb Generator

Плагин был создан для поисковой оптимизации сайта. Как и в случае с Yoast Wordpress SEO, «хлебные крошки» отображаются в сниппете выдачи автоматически.

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

Всем привет друзья. В сегодняшней статье я расскажу вам о том, что такое хлебные крошки, для чего они нужны и как добавить их на свой wordpress блог при помощи плагина и без него. Начнем!

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

Один из простых способов одновременно упростить навигацию по сайту и его перелинковку, это Хлебные крошки (breadcrumbs). Свое название он получил в честь того способа, благодаря которому герои немецкой сказки «Гензель и Гретель» пытались найти дорогу из леса.

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

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

Главная страница > Рубрика > Подрубрика > Текущая страница

Причем все «звенья», кроме последнего — это внутренние ссылки.

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

Какую пользу несут хлебные крошки для сайта и блога

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

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

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

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

Данную функцию можно добавлять на сайты и блоги разными способами. Рассмотрим два самых простых варианта для WordPress – установку с помощью плагина и с помощью внесения небольших изменений в код.

Как добавить хлебные крошки на блог плагином

Самый простой способ установить хлебные крошки на блог – установить специальный плагин. Для WordPress обычно используют Breadcrumb NavXT.

Способ его установки стандартный: заходим в админку блога -> Плагины -> Добавить новый. В появившееся окно вставляем название плагина и нажимаем «Найти плагины».

Вот он, наш плагин, нажимаем «Установить сейчас», затем «Активировать».

и над этой строчкой вставляем следующий кусочек кода:

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

После этого переходим в «Настройки» — > «Настройки Breadcrumb NavXT» и в графе «Название ссылки» меняем название на свое и сохраняем изменения.

Осталось перейти на блог и полюбоваться на результат.

Как добавить хлебные крошки на блог без плагина

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

Заходим в админку –> «Внешний вид» -> «Редактор» -> functions.php. Здесь в любом месте (главное не внутрь другой функции) вставляем следующий код:

Function the_breadcrumb() { echo "You are here: "; if (!is_front_page()) { echo "Home"; echo " » "; if (is_category() || is_single()) { the_category(" "); if (is_single()) { echo " » "; the_title(); } } elseif (is_page()) { echo the_title(); } } else { echo "Home"; } }

и сохраняем. Если боитесь запутаться, просто вставьте его в самом конце над последней скобкой.

Теперь нужно вот этот код:

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

Можете перейти на сайт и посмотреть, что получилось. Как видите, You are here и Home тут явно не к месту и их нужно изменить на что-то более подходящее, например, на Путь и Главная (или название блога).

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

Все, «Хлебные крошки» помогают вашим читателям, а вы можете гордиться тем, что самостоятельно разобрались в их установке. Всем спасибо за внимание!

P.S. В заключение статьи видео о том как поставить хлебные крошки на свой блог: