Хлебные крошки на WordPress без плагинов и с ними

E-Planet

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

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


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

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

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

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

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

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

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

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

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

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

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

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

function the_breadcrumb() {
if (!is_front_page()) {
echo '<a href="';
echo get_option('home');
echo '">Главная';
echo "</a> » ";
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 (без ВОМ).

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

<?php
the_breadcrumb ();
?>

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

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

Плагин SEO by Yoast

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

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

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

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

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

<?php if ( function_exists('yoast_breadcrumb') ) 
{yoast_breadcrumb('<p id="breadcrumbs">','</p>');} ?>

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

Плагин Breadcrumb NavXT

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

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

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

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

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

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

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

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

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

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

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

comments powered by HyperComments