8

Плагин хлебные крошки wordpress

Здравствуйте, друзья. Сегодня познакомимся с плагином хлебные крошки wordpress  “Breadcrumb NavXT”. Рассмотрим его назначение, как установить и настроить на сайте.

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

Хлебные крошки (в переводе на английский breadcrumbs, дублирующее навигационное меню) — это навигационная цепочка, которая показывает путь с  главной страницы, до текущей,

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

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

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

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

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

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

Установить плагин можно скачав с официального сайта по ссылке https://wordpress.org/plugins/breadcrumb-navxt/ . И загрузить его в папку с плагинами сайта  /wp-content/plugins,  через FTP-соединение.

Или в панели управления сайтом, переходим Плагины –>Добавить новый. В поисковой строке вводим название плагина “Breadcrumb NavXT(1). Выбираем плагин из списка предложенных, нажимаем Установить –>Активировать (2)

поиск-плагина-хлебные-крошки

Плагин установлен. Теперь необходимо разместить код вызова  крошек на страницах сайта. Обычно код устанавливают на все страницы сайта, кроме главной. Это страницы (single.php)-отвечающие за вывод записей  (archive.php и category.php)- вывод архивов и рубрик, и (page.php) – вывод страниц.

В зависимости от используемой вами темы сайта название страниц может отличаться.

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

На моем шаблоне, место вставки кода на странице single.php  выглядит так:

место-вставки-кода-плагина

Для отображения цепочки крошек после названия статьи вставьте код сюда

хлебные крошки после оглавления

Посмотрите что получится.

крошки после оглавления

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

установка крошек перед оглавлением

Получится примерно так

кровки перед оглавлением

Основные настройки плагина.

В панели управления, переходим Настройки (1) —>Breadcrumb NavXT (2)

настройка-плагина-хлебные-крошки

В открывшемся окне мы увидим несколько разделов. Начнем с вкладки Основные.

основные настройки плагина крошек

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

разделитель хлебные крошки 3

разделитель хлебные крошки 2

разделитель хлебные крошки 1

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

Иногда название главной страницы сайта слишком длинное и строка хлебных крошек выглядит не очень красиво

плагин хлебные крошки главная

Можно сделать чтобы вместо полного названия главной страницы выводилась ссылка “Главная”. Для этого в поле “Шаблон ссылки на главную” необходимо заменить в конце кода %htitle% на слово “Главная”.

замена ссылки главная

Так выглядит код после редактирования.

Не забудьте сохранить изменения.

код после редактирования крошек

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

крошки после редактирования

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

Популярные спецсимволы HTML

1. Полезные знаки и символы

Вид HTML-код CSS-код Описание
☃ \2603 Снеговик
☦ \2626 Православный крест
⚓ \2693 Якорь
➳ \27B3 Стрела направо
✆ \2706 Знак телефона
☕ \2615 Горячие напитки
✎ \270E Карандаш, направленный вправо-вниз
✏ \270F Карандаш
✐ \2710 Карандаш, направленный вправо-вверх
✑ \2711 Незакрашенное острие пера
✒ \2712 Закрашенное острие пера
⚜ \269C Геральдическая лилия
⛑ \26D1 Шлем с белым крестом
⚝ \269D Начерченная белая звезда
❄ \2744 Снежинка
❤ \2764 Закрашенное жирное сердце
❅ \2745 Зажатая трилистниками снежинка
❆ \2746 Жирная остроугольная снежинка
★ \2605 Закрашенная звезда
☆ \2606 Незакрашенная звезда
✪ \272A Незакрашенная звезда в закрашенном круге
✫ \272B Закрашенная звезда с незакрашенным кругом внутри
✯ \272F Вращающаяся звезда
❉ \2749 Звёздочка с шарообразными окончаниями
❋ \274B Жирная восьмиконечная каплеобразная звёздочка-пропеллер
✲ \2732 Звёздочка с незакрашенным центром
⍟ \235F Apl функциональный символ звезда в круге
⊛ \229B Оператор звездочки в круге
☀ \2600 Закрашенное солнце с лучами
☁ \2601 Облака
☂ \2602 Зонтик
☑ \2611 Галочка в квадрате
☒ \2612 Крестик в квадрате
☹ \2639 Нахмуренный смайлик
☺ \263A Улыбающийся смайлик
☻ \263B Закрашенный улыбающийся смайлик
☭ \262D Серп и молот
☰ \2630 Триграмма
✿ \273f Закрашенный цветок
❀ \2740 Незакрашенный цветок
✾ \273E Цветок с шестью лепестками
❁ \2741 Закрашенный обведённый цветок
❂ \2742 Цветок из точек
✉ \2709 Конверт
❦ \2766 Сердце в виде цветка
❶ \2776 Номер 1
❷ \2777 Номер 2
❸ \2778 Номер 3
❹ \2779 Номер 4
❺ \277A Номер 5
❻ \277B Номер 6
❼ \277C Номер 7
❽ \277D Номер 8
➒ \2792 Номер 9
➓ \2793 Номер 10
➠ \27A0 Летящая стрела
➤ \27A4 Наконечник стрелы
➥ \27A5 Изогнутая стрела, указывающая вниз и вправо
➦ \27A6 Изогнутая стрела, указывающая вверх и вправо
❜ \275C Жирная одинарная верхняя запятая
❛ \275B Жирная одинарная повёрнутая верхняя запятая
✖ \2716 Жирный знак умножения
✘ \2718 Жирный крестик
✔ \2714 Жирная отметка галочкой
✚ \271A Жирный крест
↺ \21BA Круглая стрелка с наконечником против часовой стрелки
↻ \21BB Круглая стрелка с наконечником против часовой стрелки

2. Знаки пунктуации

Вид HTML-код CSS-код Описание
    \00A0 Неразрывный пробел
­ ­ \00AD Место возможного переноса
< &lt; \003C Знак “меньше чем” (начало тега)
> &gt; \003E Знак “больше чем” (конец тега)
« &laquo; \00AB Левая двойная угловая скобка
» &raquo; \00BB Правая двойная угловая скобка
&lsaquo; \2039 Левая угловая одиночная кавычка
&rsaquo; \203A Правая угловая одиночная кавычка
&quot; \0022 Двойная кавычка
&prime; \2032 Одиночный штрих
&Prime; \2033 Двойной штрих
&lsquo; \2018 Левая одиночная кавычка
&rsquo; \2019 Правая одиночная кавычка
&sbquo; \201A Нижняя одиночная кавычка
&ldquo; \201C Левая двойная кавычка
&rdquo; \201D Правая двойная кавычка
&bdquo; \201E Нижняя двойная кавычка
& &amp; \0026 Амперсанд
&apos; \0027 Апостроф (одинарная кавычка)
§ &sect; \00A7 Параграф
© &copy; \00A9 Знак copyright
¬ &not; \00AC Знак отрицания
® &reg; \00AE Знак зарегистрированной торговой марки
¯ &macr; \00AF Знак долготы над гласным
° &deg; \00B0 Градус
± &plusmn; \00B1 Плюс-минус
¹ &sup1; \00B9 Верхний индекс “1”
² &sup2; \00B2 Верхний индекс “2”
³ &sup3; \00B3 Верхний индекс “3”
¼ &frac14; \00BC Одна четверть
½ &frac12; \00BD Одна вторая
¾ &frac34; \00BE Три четверти
´ &acute; \00B4 Знак ударения
µ &micro; \00B5 Микро
&para; \00B6 Знак абзаца
· &middot; \00B7 Знак умножения
¿ &iquest; \00BF Перевернутый вопросительный знак
ƒ &fnof; \0192 Знак флорина
&trade; \2122 Знак торговой марки
&bull; \2022 Маркер списка
&hellip; \2026 Многоточие
&oline; \203E Надчеркивание
&ndash; \2013 Среднее тире
&mdash; \2014 Длинное тире
&permil; \2030 Промилле
} &#125; \007D Правая фигурная скобка
{ &#123; \007B Левая фигурная скобка
= &#61; \003D Знак равенства
&ne; \2260 Знак неравенства
&cong; \2245 Конгруэнтность (геометрическое равенство)
&asymp; \2248 Почти равно
&le; \2264 Меньше чем или равно
&ge; \2265 Больше чем или равно
&ang; \2220 Угол
&perp; \22A5 Перпендикулярно (кнопка вверх)
&radic; \221A Квадратный корень
&sum; \2211 N-ичное суммирование
&int; \222B Интеграл

3. Стрелки

Вид HTML-код CSS-код Описание
&larr; \2190 Стрелка влево
&uarr; \2191 Стрелка вверх
&rarr; \2192 Стрелка вправо
&darr; \2193 Стрелка вниз
&harr; \2194 Стрелка влево-вправо
&crarr; \21B5 Стрелка вниз и влево – знак возврата каретки
&lArr; \21D0 Двойная стрелка налево
&uArr; \21D1 Двойная стрелка вверх
&rArr; \21D2 Двойная стрелка направо
&dArr; \21D3 Двойная стрелка вниз
&hArr; \21D4 Двойная стрелка влево-вправо

4. Карточные масти

Вид HTML-код CSS-код Описание
&spades; \2660 “Пики”
&clubs; \2663 “Трефы”
&hearts; \2665 “Червы”
&diams; \2666 “Бубны”
&#9825; \2661 Контур “Червы”
&#9826; \2662 Контур “Бубны”
&#9828; \2664 Контур “Пики”
&#9831; \2667 Контур “Трефы”

5. Деньги

Вид HTML-код CSS-код Описание
¢ &cent; \FFE0 Цент
£ &pound; \FFE1 Фунт стерлингов
&#8381; \20BD Российский рубль
¥ &yen; \00A5 Йена или юань
&euro; \20AC Евро
$ &#36; \0024 Доллар
&#8372; \20B4 Знак гривны
&#8377; \20B9 Индийская рупия
&#22291; \5713 Китайский юань
&#8376; \20B8 Казахстанский тенге

6. Знаки зодиака

Вид HTML-код CSS-код Описание
&#9800; \2648 Овен
&#9801; \2649 Телец
&#9802; \264A Близнецы
&#9803; \264B Рак
&#9804; \264C Лев
&#9805; \264D Дева
&#9806; \264E Весы
&#9807; \264F Скорпион
&#9808; \2650 Стрелец
&#9809; \2651 Козерог
&#9810; \2652 Водолей
&#9811; \2653 Рыбы
комментариев 8
  1. admin
    25.01.2017 в 09:12

    Да, все верно, Ирина.

  2. Кошевая Ирина
    25.01.2017 в 01:41

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

  3. admin
    24.01.2017 в 11:25

    Николай, рад быть полезным. Руководство по плагину SEO by Yoast в планах, пока руки не дошли!

  4. admin
    24.01.2017 в 11:23

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

  5. admin
    24.01.2017 в 10:55

    Людмила, плагин все сделает сам. Вам необходимо выполнить настройки которые описаны в статье. Удачи!

  6. Алла
    24.01.2017 в 00:10

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

  7. Николай
    23.01.2017 в 17:44

    Сергей большое вам спасибо за статью, настолько подробного руководства по Breadcrumb NavXT в интернете наверное нет! Вы как всегда своим читателям даете все самое лучшее! Этот плагин считается самым продвинутым и популярным плагином “хлебных крошек” для блога на WordPress. Я очень рад что вы написали статью по настройке этого монстра навигации! Если бы вы еще дали нам руководство по плагину WordPress SEO by Yoast! Было бы очень здорово!

  8. Людмила Андрейкина
    23.01.2017 в 17:26

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

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.