Создание сайта/блога на WordPress — что может быть проще!
Улучшаем Юзабилити - хлебные крошки на wordpress!
Рубрика: Создание сайта WordPress

Улучшаем навигацию — хлебные крошки на WordPress!

37 комментариев   

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



Рекомендую к прочтению:

Начну, пожалуй, эту статью с очередной порцией свежих новостей из моей жизни! Многие из Вас ждут новых интересных конкурсов, правда? Ждать осталось не долго, в ближайшее время опубликую в одной из своих статей! Я про Вас не забыл :arrow:

На данный момент работаю над своим авторским видео-курсом! Что за курс? Пока секрет! Не хочу говорить заранее, лучше покажу потом готовый вариант!khlebnye-kroshki-na-wordpress-004Могу сказать лишь одно: он не совсем относится к моей тематике (не про создание блогов и сайтов)! Мои друзья и знакомые навели меня на мысль о создании этого курса, постоянно атакуя вопросами как/зачем/почему/помоги! :shock: В общем, работа кипит — уже записал пару уроков...

Еще, наконец-то, заказал у дизайнера свой авторский логотип — цена вопроса 1200 руб.! В этом моя ошибка... Нужно было изначально решить этот вопрос... Теперь придется переделывать все картинки, или может забить?! Как считаете?

Хотел изначально сам нарисовать что-нибудь, да что-то муза не пришла :razz: Пусть работает профи! Когда работа будет закончена — хочу услышать Ваше мнение (гуд или не гуд)!khlebnye-kroshki-na-wordpress-001Все нарадоваться не могу декрету моей дорогой супруге — блинчики, фаршированные перцы, пельмешки — ммм... Жена в декрете — это Здорово! Так что, отправляйте своих жен в декрет :razz: А потом, вернемся к теме статьи, а именно к хлебным крошкам...

Что же такое — Хлебные крошки?

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

Многие вебмастера называют их навигационной цепочкой. Находится такая цепочка над заголовком статьи. Благодаря «хлебным крошкам» пользователь может быстро сориентироваться, в какой рубрике и в каком разделе находится данный пост.54564121145-111Например, если ваш сайт имеет сложную структуру, и на нем есть не только разделы, но и подразделы, то при обычной навигации одно звено цепочки будет потеряно и будет выглядеть так: «Главная — Подраздел — Статья». А вот если на вашем сайте установлены «хлебные крошки», то читатель увидит полную картинку, т.е. «Главная — Раздел — Подраздел — Статья».

Постраничная навигация WordPress не только удобна для посетителей, она также играет немаловажную роль в продвижении сайта (блога). «Хлебные крошки» улучшают перелинковку — поисковые роботы будут проще и быстрее индексировать страницы сайта.

Как сделать хлебные крошки на WordPress?

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

Если вы решили воспользоваться плагином, то можете скачать специально разработанный для этой цели компонент BreadCrumb XT.khlebnye-kroshki-na-wordpress-002Чтобы установить плагин BreadCrumb XT, откройте свою административную панель, выберите пункт «Плагины», далее перейдите в подпункт «Добавить новый». Скопируйте название плагина, вставьте его в поисковую строку и нажмите Enter. Увидели, установили и активировали. Все просто!

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

Следующим шагом будет установка специального кода, который найдете в плагине — в файл header.php или single.php. Смотря где хотите разместить элемент навигации.khlebnye-kroshki-na-wordpress-003

Кстати, хлебные крошки присутствуют и в плагине WordPress SEO by Yoast, который я недавно установил и настроил. Скоро напишу на него обзор! Подпишись и не пропустишь...

Хлебные крошки без плагина — кодом!

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

Чтобы вывести навигационную цепочку на страницы вашего сайта (блога), добавьте в файлы вашей темы следующий код:

<div class="navibreadsavme"><?php navibreadsavme(); ?></div>

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

Для этого, перейдем на вкладку «внешний вид» --> «редактор» и вставьте предложенный код. Если разбираетесь, то можете изменить — размер шрифта, цвет ссылок и прочее.

.navibreadsavme{float:left;margin:0;overflow:hidden;}
.navibreadsavme a{font-size:12px;color:#6699cc;text-decoration:none;}
.navibreadsavme > span{color:#555;}

Если все сделали правильно, то хлебные крошки на WordPress должны уже присутствовать и функционировать! Данный код проверил на своем блоге — все работает, как часы! Хотя, темы у всех разные, может у кого и не сработает... тогда используйте плагины!

А я Вам говорю — До свидания! До встречи в новой статье!


Савельев Владимир Александрович
С уважением, Владимир Савельев

Премиум курсы от webformyself

Премиум-уроки от клуба webformyself

Это новый революционный продукт в области обучения сайтостроительству! Все лучшие видео-уроки собраны в одном месте и разделены на категории: WordPress, Joomla, PHP, HTML, CSS и JavaScript... База постоянно пополняется и уже сейчас в ней более 200 уроков! Всего за один год - Вы сможете стать опытным веб-мастером "с полного нуля"!
Подробнее
Продвижение в социальных сетях - сервис SocLike.ru
Прочтите еще:
Обсуждение статьи: 37 комментариев


  1. Саня Сабегатулин 2015-07-17 в 15:19 

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

    Ответить
    • Владимир Савельев 2015-07-17 в 17:57 

      Саня привет! Как я написал в статье то Хлебные крошки в основном требуются для сайтов со сложной структурой — рубрики, подрубрики и так далее... А если структура простая, как у меня например, то и не надо! :oops:

      Ответить
    • Владимир Савельев 2015-07-17 в 17:58 

      У тебя получилась мобильная версия? Расскажи как сделал? С помощью плагина или кодом?

      Ответить
      • Саня Сабегатулин 2015-07-18 в 08:48 

        С мобильной версией все оказалось проще. Как я и подозревал тема то адаптивной и была. А вот гугл не хотел ее распознавать. Говорил, что вообще не удобна для моби. В итоге начал шарится по вэбмастеру гугл и выяснять в чем причина. Оказалось, гугл хочет лезть в wp-includes и в wp-content. Убрал с роботса строки Disallow: /wp-includes/ и Disallow: /wp-content/. И все стало гуд. Удобство на мобильных устройствах 99%.

      • Владимир Савельев 2015-07-18 в 12:37 

        Ну да Саня я писал статью на эту тему — тут :roll:

      • Саня Сабегатулин 2015-07-18 в 22:39 

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

      • Игорь 2015-07-23 в 21:37 

        Я с помощью плагина WordPress Mobile Pack адаптировал блог.

        Я об адаптации под мобильники,не давно статью на блоге написал.

      • Саня Сабегатулин 2015-08-31 в 23:51 

        Игорь, я пробовал данный плагин, но он у меня неадекватно работал.

      • Игорь 2015-09-12 в 18:08 

        Саня,может конфликт с темой был.

        В чем не адекват ты выражаешь.

    • Денис 2015-07-18 в 00:22 

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

      Поэтому хлебные крошки должны быть обязательны! :mrgreen:

      Ответить
      • Рашид 2015-07-27 в 10:58 

        Можно же поставить и через метрику посмотреть их эффективность

    • Екатерина 2015-07-18 в 22:17 

      Вот видите, Саня, если бы Вы чаще заходили на блог Владимира, то у вас бы не возникли проблемы с мобильной версией. ;-)

      Ответить
      • Саня Сабегатулин 2015-07-18 в 22:41 

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

      • Владимир Савельев 2015-07-18 в 22:46 

        Друзья на днях изменю дизайн шапки и кое какие элементы сайта! Хочу услышать Ваше мнение! :razz: В письме напишу когда произойдет это событие ;-) А то запарили некоторые люди говоря — «Дизайн Аля Борисов!» :razz:

      • Саня Сабегатулин 2015-07-21 в 21:09 

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

      • Владимир Савельев 2015-07-21 в 21:25 

        Не говори Саня, как будто он запатентовал рисованную графику :lol:

        Видимо чем то Бориска обидел их, этих критиков, либо денег у них нет, на такую же графику — вот и бесятся :razz:

      • Игорь 2015-07-23 в 21:06 

        Мужики,да просто Борисов ауру грамотно во круг себя создал,вот о нем и говорят по чем зря.А так же сравнивают.

      • Игорь 2015-07-23 в 21:07 

        Катюш,так ваш то блог тоже под мобильники и планшеты не адаптирован. ;-)

      • Игорь 2015-07-28 в 21:36 

        Так рисованный шаблон не у Борисова первого появился.

        Значит это не его идея.

      • Саня Сабегатулин 2015-08-31 в 23:50 

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

      • Игорь 2015-09-12 в 18:12 

        Ну молодец мужик.

        Правильно делает.

        Но в виду его знаменитости,ему еще и чужое достижение приписывают.

  2. Дмитрий 2015-07-18 в 12:10 

    Я вообще не понял — что такое хлебные крошки. Честно! Да и не к чему мне это наверное, есть техники, вот они пусть все это дело и настраивают...

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

    Зачем что то менять? В общем мое мнение по этому вопросу — нет не стоит менять. У тебя итак все хорошо.

    А там конечно тебе решать... Мы тебя любого воспримем :grin:

    Ответить
    • Владимир Савельев 2015-07-18 в 12:44 

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

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

      Ответить
  3. Людмила Лао 2015-07-20 в 15:03 

    Хлебные крошки вещь хорошая.

    Кстати, поздравляю с декретом вашей супруги:-)

    Ответить
    • Владимир Савельев 2015-07-20 в 15:05 

      Привет Люда! Хорошо я ей передам поздравление :oops:

      Ответить
  4. Игорь 2015-07-23 в 21:13 

    Хлебные крошки пробовал устанавливать и с помощью кода,а также плагина.

    А сейчас у меня встроены в шаблоне.

    Ответить
  5. Виталий Охрименко 2015-07-28 в 16:04 

    Долго определялся нужны они мне или нет (крошки имеются ввиду)

    Пока решил что не нужны

    Ответить
    • Игорь 2015-07-28 в 21:41 

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

      Хотя как знать.

      Ответить
      • Виталий Охрименко 2015-08-06 в 09:06 

        Мое решение пришло из суждения людей по себе. Лично я не припомню не одного случая когда я бы клацал по хлебным крошкам.

      • Виталий Охрименко 2015-08-06 в 09:07 

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

      • Игорь 2015-09-12 в 18:14 

        Виталь,зря хочешь менять шаблон.

        У тебя и этот отличный.

      • Игорь 2015-09-22 в 21:23 

        Ну каждый человек поступает как ему нравится,по этому он индивидуален ;-)

        А вот лично я по крошкам не не,да клацкну,вдруг что нового в данном разделе увижу.

  6. Дмитрий 2015-09-16 в 23:29 

    а курс под «совершенно секретно» — это твой новый курс по Али — Экспресс, который вот-вот выйдет в свет. Правильно я понимаю? Или я что-то пропустил?

    Ответить
    • Владимир Савельев 2015-09-17 в 08:30 

      Совершенно верно :razz:

      Ответить
  7. Bahus 2015-12-08 в 08:28 

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

    Ответить
    • Владимир Савельев 2015-12-08 в 17:57 

      Да есть такая фишка там полностью согласен...

      Ответить
    • Игорь 2015-12-20 в 19:14 

      А у меня при установке плагина Yoast SEO,начались проблемы с микраразметкой.

      Пришлось отказаться.

      Ответить

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

Прочитать Соглашение и Правила блога

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?:

Приветствую Вас друзья!
Савельев Владимир АлександровичМеня зовут Владимир Савельев, я являюсь автором блога savme.ru! Моя миссия - научить Вас создавать сайты, блоги и зарабатывать на них также, как это делаю я! Уже через год ведения блога я вышел на пассивный доход в 30.000 руб в месяц и это не предел! Еще я частенько пишу о своей жизни и устраиваю конкурсы с крутыми призами! Подпишитесь на мои новости, чтобы не пропустить что-то важное!
Готовые шаблоны для WordPress