Хлебные крошки WordPress. Инструкция по настройке.

хлебные крошки Wordpress

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

Что это такое?

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

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

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

или

Главная » Статьи » wordpress » Установка и настройка темы

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

Наличие хлебных крошек на сайте позволяет:

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

Для их реализации можно воспользоваться специальным плагином или создать хлебные крошки wordpress без использования плагина.

Вывод «хлебных крошек» с использованием плагина.

Для создания этих элементов существует плагин Breadcrumb NavXT.

Устанавливается он также как и все остальные:

Плагины » Добавить новый » в поле поиска вводим название плагин » нажимаем «Установить», а затем «Активировать»

плагин хлебных крошек для wordpress
Для его настройки переходим в меню «Настройки» => «Breadcrumb NavXT»
bc2
После этого у меня он попросил обновить настройки
bc3

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

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

При этом указатель должен задаваться в специальной кодировке.

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

Вот примеры некоторых указателей в закодированном виде:

> >
⁄
→
⇒
►

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

Для того чтобы они появились нужно добавить в шаблон вашей темы специальный код.

А вот и он:

Его нужно поместить либо в самом конце шаблона header.php, либо в начале шаблонов page.php и single.php. Здесь всё зависит от особенностей вашего шаблона и того места в котором вы хотите чтобы они отображались.

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

В конце этой статьи я дам вам несколько готовых решений оформления.

Обратите внимание, то для корректной работы плагина у вас на сайте должны быть настроены ЧПУ (человеку понятные УРЛ).

Настраиваются они так:

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

При этом если вы где то настраивали ссылки вручную, то после включения ЧПУ они могут сбиться.

Создание «хлебных крошек» без плагина

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

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

Код функции необходимо вставлять в файл шаблона functions.php в самом конце. Так как он достаточно большой, я вынесла его в отдельный файл. Скачать его можно здесь:

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

В самом коде вы можете задать:

  • Текст ссылок для отдельных страниц.
  • Название класса для блока, в котором находятся хлебные крошки
  • Разделитель между хлебными крошками
  • Показывать или нет главную страницу и т.д.

Для вывода используем такой код:

Вставляем его как и в случае с плагином Breadcrumb NavXT либо в шаблон header.php либо в single.php и page.php

Оформление «хлебных крошек»

Для того чтобы задать стили для нашей навигационной цепочки можно дописать в файл style.css вашей темы свои стили.
Я подготовила для вас несколько готовых вариантов, которые вы можете переделать под себя. Они подойдут независимо от того какой способ создания хлебных крошек вы выберите: с плагином или без.

Первый вариант

оформление хлебных крошек
Вот код:

Второй вариант
оформление хлебных крошек
Код:

Третий вариант
оформление хлебных крошек
Код:

Какой вариант выбрать?

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

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

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

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif