Сегодня я расскажу о плагине для WordPress под народным названием "Хлебные крошки", официальное название Breadcrumb NavXT. Это пожалуй самый востребованный и популярный плагин среди веб мастеров. Его популярность связана с двумя причинами.

Первая причина популярности плагина "Хлебные крошки"

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

Вторая причина востребованности этого плагина

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

Скачиваем и устанавливаем плагин Breadcrumb NavXT.

Скачать плагин Breadcrumb NavXT лучше всего, найдя его через свою панель управления введя в строке поиска "Breadcrumb NavXT "

Установка обычная ничем не отличается от установки остальных плагинов. А вот с настройками придётся повозиться.

Переходим по вкладке "Параметры"…

… и попадаем в панель настроек плагина Breadcrumb NavXT. В данном случае нас интересует только вкладка"Основные" , все остальные вкладки настроек: "Записи и страницы", "Таксономии", "Другое" , можно оставить пока без изменений. Возможно вам когда то придётся к ним вернуться чтобы более продвинуто настроить Хлебные крошки, но а пока оставляем всё как есть. Ну а настройки вкладки "Основные" изменяем как показано на картинке ниже:

Сохраняем изменения настроек, и на этом здесь все.

Теперь приступаем к самому интересному.

Необходимо отредактировать шаблон вашей темы.

К сожалению без этого никак нельзя. Плагин Breadcrumb NavXT, "просто так" работать не будет.

Переходим в консоль и выбираем «Внешний вид»→«Редактор»:

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

Редактировать необходимо такие шаблоны: single.php, index.php и page.php (если есть специально созданная страница, например, category.php, то и этот тоже)

Выглядит это так:

Сначала выбираем необходимый шаблон. (На данном примере показаны шаблоны имеющиеся в моей теме, у вас их может быть больше или меньше. Редактировать необходимо все что имеются согласно списка: single.php, index.php и page.php, category.php Если какой то из перечисленных шаблонов в вашем списке не отображён, значит просто пропускаем.)

Затем берём код:

И вставляем его в каждом из перечисленных шаблонов примерно в одно и тоже место, после заголовка (header ):

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

Ну вот и всё, почти… Почти, потому что как правило этих настроек вполне достаточно.

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

В этом случае придётся подгонять Хлебные крошки под дизайн сайта отдельно.

Делается это так. Берём этот код:

.breadcrumb {

font:bolder 12px "Trebuchet MS", Verdana, Arial;

padding-bottom: 10px;

}

.breadcrumb a{

color: #1B7499;

} .breadcrumb a:hover {

color: #EF0E0E;

}

Изменяем в нём параметры отображения размера текста, шрифта и цвета на необходимые. Затем копируем изменённый код, идём по вкладке "Таблица стилей" вашей темы

… и вставляем код в самом низу редактора

… сохраняемся, нажав "Обновить файл" Конечно, для получения удовлетворительного результата придётся немного поэкспериментировать.

Ну вот, теперь пожалуй всё.

Flector 5

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

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

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

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

Главная

%htitle%

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

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

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

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

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

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

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

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

Для поисковых систем плагин Breadcrumb NavXT предоставляет информацию о структуре сайта, он говорит, Вы находитесь на страничке поста, вот ссылка на страницу категории, а вот главная страница. Как видите сайт не использует какую-то запутанную иерархию страниц, где конечная страница, на которой размещен полезный материал, находиться в 5 — 6 кликах от главной. Это хороший сайт, проиндексируй его быстрее.

Установка плагина Breadcrumb NavXT и вывод хлебных крошек на блоге.

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

Я плагин Breadcrumb NavXT впервые установил на один из блогов 3 года назад, и вот в конце 2013 года повторно с ним познакомился. Скажу честно — он стал удобнее в настройке, опций меньше, работает также. Новички могут без страха устанавливать его на свои блоги, и польза и первые навыки по

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

Что такое хлебные крошки

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

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

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

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

Установка и настройка плагина Breadcrumb NavXT

Установка Breadcrumb NavXT несколько отличается от , поэтому рассмотрим ее подробно:

2. Распакуйте архив и загрузите папку с файлами плагина на сервер в директорию wp-content/plugins. Для этого воспользуйтесь — FileZilla.

3. Активируйте плагин через раздел «Плагины» панели администратора WordPress.

4. Теперь необходимо вставить следующий код:

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

Некоторые продвинутые темы по умолчанию выводят хлебные крошки на блоге, но я бы посоветовал все-таки использовать плагин Breadcrumb NavXT, потому что он имеет более гибкие настройки. В таких случаях следует заменить стандартный код в шаблонах темы, отвечающий за вывод хлебных крошек, на код плагина, указанный выше. Стандартный код во многом должен быть похож на приведенный код плагина, поэтому найти его не составит труда (обычно он заключен в тег div, ID или class которого имеет тоже название — breadcrumb).

После добавления кода, можно изменить внешний вид хлебных крошек WordPress. Для этого следует добавить стили к классу breadcrumb в файл style.css используемой темы. Конечно, для этого необходимо знать основы CSS, поэтому советую ознакомиться с бесплатным самоучителем по CSS от Влада Мержевича, который вы можете скачать с моего блога.

Настройки плагина располагаются в разделе «Параметры» — «Breadcrumb NavXT». В интернете можно найти русификатор к нему, но, к сожалению, на последние версии плагина он встает очень криво — большая часть настроек так и остается на английском языке. Поэтому я рассматривать буду настройки именно на английском, давая перевод и свои комментария по самым важным пунктам.

Первая закладка называется «General» — Общие.

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

Breadcrumb Max Title Length — в качестве звена навигационной цепочки используется заголовок страницы, эта опция задает максимальную длину заголовка, 0 — используется заголовок целиком, не обрезая его.

Home Breadcrumb — указывать или нет в хлебных крошках главную блога. Советую включить и задать ей имя в соответствии с названием вашего блога.

— текст, который будет виден на главной блога, если это не ссылка.

Переходим на вкладку Current Item , что означает «Текущей пункт» или «Текущее местоположение».

Link Current Item — выводить название текущей страницы в качестве ссылки на нее же или нет.

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

— шаблон, определяющий название текущей позиции при включенной поддержки постраничной навигации.

Следующий раздел называется «Post & Pages» — Записи и страницы.

Post Taxonomy Display — показывать все варианты путей, ведущих к записи.

Post Taxonomy — в вариантах путей к записи можно отображать. Для своего блога выбрал стандартный вариант — Рубрики.

Page Template и Page Template (Unlinked) — аналогичны рассмотренным выше Post Template и Post Template (Unlinked), только выводится будут для опубликованных статей.

На очереди раздел «Categories & Tags» .

В этом разделе задаются шаблоны для формирования хлебных крошек рубрик и тэгов. Просто действуйте по аналогии с рассмотренными выше шаблонами для записей.

В разделе можно задать шаблоны для страницы автора (Author ), даты/архива (Date ), результатов поиска (Search ) и ошибки 404 .

Остальные опции я не использую, поэтому умничать о их назначении не буду.

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

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

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

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

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

Breadcrumb полезны в таких случаях:

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

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

1. Location. Данный тип определяет путь, и он является постоянным, т.е. он не будет меняться по мере передвижения пользователя по ресурсу;
2. Path. Этот тип показывает посетителю тот путь, который он уже прошел. Главным минусом таких крошек является то, что если пользователь придет из поисковой машины, то крошки не будут показываться;
3. Attribute. Такие крошки показываются в виде меток на конкретных страницах и позволяют определить рубрику на сайте. Данный вариант наиболее удобен и работает практически на всех ресурсах.

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

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

Вариант без установки плагина

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

Способ состоит из пары шагов:

• вписывание кода в файл functions.php;
• вписывание кода крошек в нужное место.

Итак, берем первый код и вставляем его в файл functions.php вашего активного шаблона:

function the_breadcrumb() {
if (!is_front_page()) {
echo "Главная";
echo " » ";
if (is_category() || is_single()) {
the_category(" ");
if (is_single()) {
echo " » ";
the_title();
}
} elseif (is_page()) {
echo the_title();
}
}
else {
echo "Home";
}
}

Его можно разместить в самом конце документа перед символами «?>» (без кавычек). Если в конце тега нет, то код можно закинуть в самое начало перед открывающимся тегом. При размещении кода смотрите, чтобы кодировка была UTF-8, или в противном случае некоторые русские буквы и слова будут отображаться неправильно. Задать кодировку можно при помощи редактора Notepad при помощи пункта «Кодировка – Кодировать в UTF-8 (без ВОМ).

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

the_breadcrumb ();
?>

Считается, что крошки должны размещаться везде, кроме главной страницы. То есть необходимо разместить этот код в файлах single.php, archive.php, page.php и category.php. Где конкретно размещать его – дело ваше, но по дефолту он вставляется перед выводом основного контента. Если есть возможность размещать код в главном блоке, то сделайте это, ведь потом не придется играться со стилями, чтобы крошки отображались как полагается.

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

Плагин SEO by Yoast

В качестве альтернативы вышеописанному способу можно использовать плагин SEO by Yaost, который способен создавать очень привлекательные крошки. Его основные достоинства:

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

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

Начнем с загрузки и инсталляции. Получить плагин можно по ссылке : https://wordpress.org/plugins/wordpress-seo/. Установка стандартна – заливаем содержимое в папку wp-content/plugins и активируем его в админке. Теперь можно переходить и к настройке:

1. В админ панели переходим в раздел «SEO – Дополнительно»;
2. Произойдет загрузка дополнительных настроек плагина (он создан не только для отображения крошек), но конкретно нас интересует раздел «Навигационная цепочка»;
3. Активируем крошки, но для их появления на площадке необходимо будет разместить специальный код (найти его сможете в конце этого списка);
4. Выбираем один из разделителей, который поддерживается HTML5;
5. Далее выбираем текст главной страницы сайта (например, «Главная», «Домой» и т.д.);
6. Префикс – это символ или слово, которое будет отображаться перед всеми крошками на ресурсе (обычно ставят стрелочку);
7. Далее можно выбрать префиксы конкретно для архивов, страниц результатов поиска, страницы 404;
8. Выделять последний пункт жирным может и кому-то покажется полезным, но последняя страница часто идентична заголовку, поэтому тут решайте сами, как поступить;
9. Последний пункт настроек – таксономия (можно выбрать между рубриками, форматами, метками);
10. Сохраняем внесенные изменения.

После выполнения настройки необходимо добавить код в шаблон:

{yoast_breadcrumb("");} ?>

Вот и все, во всех остальных моментах работы с плагином разобраться не составит особого труда.

Плагин Breadcrumb NavXT

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

Загрузить плагин можно на странице : http://wordpress.org/extend/plugins/breadcrumb-navxt/ ( не ниже 3.0 и PHP 5). После скачивания заливаем плагин в папку wp-content/plugins и активируем его в админ панели. Заметим, что если у вас уже стояла старая версия модуля, то ее необходимо отключить, или же плагин может немного глючить (не сохраняются настройки). Если выключить все же забыли и ничего не работает, то после установки выключаем его и ставим по-новому. Теперь все будет корректно запускаться.

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

Итак, заходим админку ресурса, смотрим на левую панель и выбираем там пункт «Breadcrumb NavXT». Тут будет показано несколько вкладок по типу «Общие», «Текущая позиция» и т.п. На главной вкладке «Общие» расположены параметры, которые будут затрагивать все страницы сайта. Поле «Разделитель» позволяет указать символ, который будет как разделитель хлебных крошек (на наш взгляд, наиболее удачный символ – «>» – простой и понятный каждому).

Поле «Максимальная длинна» указывает длину анкора в символах. Мы рекомендуем указать ограничение в 60 символов, что полезно в плане оптимизации. Выше мы уже упоминали о пользе крошек для SEO; то есть крошки будут индексироваться поисковыми машинами, и использоваться они будут не только для передачи пустого веса. Оговоримся, что поисковые машины могут непредсказуемо относиться к ссылкам с идентичными анкорами, поэтому рекомендуем их укорачивать (это необязательно, но все же можно немного потратить времени на это).

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

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

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

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

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