Сентябрь 8, 2009Хлебные крошки для WP – это ведь так просто!

Недавно нужно было организовать на одном из своих сайтов, сделанных на WordPress, хлебные крошки. Думал, что уже есть грамотное придуманное решение для этого. Сначала пошел в Google – он ничего мне не подсказал. Потом пошел на форумы, там то точно должно быть, нашел что-то корявенькое, с багами, недоработками, криво выводящее мои крошечки. В итоге подумал, а почему бы мне их самому не организовать?

Для начала, что такое хлебные крошки?

Хлебные крошки – иными словами навигационная цепочка, которая чаще всего встречается вверху сайта. Выглядит эта цепочка в виде блока внутренних ссылок, например Главная -> Раздел -> Статья. Какую же пользу из этого можно извлечь? Во-первых, самая прямая польза для посетителей вашего сайта, потому как хлебные крошки – это одна из важных составляющих юзабилити сайта (юзабили – это другими словами удобства сайта), т.е. человек, зашедший, допустим, из поисковой системы на ваш сайт прямо в статью – видел логическую цепочку и мог с легкостью перейти в раздел статей той же тематики. С другой стороны – это является элементом перелинковки сайта, т.е. помимо пользователей есть и поисковые системы и через хлебные крошки вы можете сообщить роботу дополнительно о ключевых фразах в анкорах ссылок.

Идею организации хлебных крошек именно этим способом подал мне Alex Volkov. На самом деле это простой php+html и держится это все на логических условиях “Если – То”. Все довольно просто. Вот сам код:

<ul id=”breadcrumb”>

<!– Выводит название и ссылку на главную страницу –>
<li><a href=”/” title=”Женский журнал Украины”>Женский журнал Украины</a></li>

<!– Выводит главную страницу >> название категории –>
<?php if (is_category()) { ?>
<li>&raquo</li>
<li><?php the_category(’, ‘) ?></li>
<?php } ?>

<!– Выводит главную страницу >> название категории >> название статьи –>
<?php if( (!is_home()) AND (!is_category()) AND (!is_tag()) ) { ?>
<li>&raquo</li>
<li><?php the_category(’, ‘) ?></li>
<li>&raquo</li>
<li><strong><?php the_title(); ?></strong></li>
<?php } ?>

<!– Выводит главную страницу >> название тега (метки) в кавычках –>
<?php if(is_tag()) { ?>
<li>&raquo<strong>”<?php single_tag_title(); ?>”</strong></li>
<?php } ?>

</ul>

И CSS от моего сайта для него:

#breadcrumb {
background: #F5CADA url(i/content-top.gif) 3px no-repeat;
font: 12px Verdana;
height:30px;
line-height:30px;
color:#696969;
width: 98.7%;
overflow:hidden;
margin:0px;
padding-left: 10px;
}
#breadcrumb li {
list-style-type:none;
float:left;
padding-left:10px;
}
#breadcrumb a {
height:30px;
display:block;
background-image:url('/images/bc_separator.png');
background-repeat:no-repeat;
background-position:right;
text-decoration: none;
outline: none;
color:#E9508D;
}
.home {
border:none;
margin: 8px 0px;
}
#breadcrumb a:hover {
text-decoration: underline;
}

Подписал комментариями, какая часть кода и за что отвечает. Можно просто перестроить и для других страниц, если вы используете что-то кроме категорий, статей, страниц и меток (тэгов).

P.s. я не программист, поэтому может быть что-то неграмотно написал с точки зрения php, но это точно грамотнее, чем я находил в сети.

P.s.s. только смотрите внимательно комментарии, потому что WP урезал одно “-” везде.

39 комментариев »

  1. Только недавно хотел знакомого программера просить, чтобы помог реализовать штуку с тегами (метками). В интернете, что-то тоже ничего не находил. Большое спасибо, выручил, а то я в php вообще ноль :(

    Комментарий от WebJunk — 8 Сентябрь 2009 @ 23:01

  2. О! Спасибки. То же были нужны крошки. И совершенно случайно наткнулся на ваш пост. Сейчас попробуем.

    Комментарий от Аромыч — 9 Сентябрь 2009 @ 7:55

  3. Это мне не совсем подходит. Кто еще, что может подсказать?

    Комментарий от DoomsDays — 11 Сентябрь 2009 @ 12:45

  4. оо. огромное спасибо за решение

    Комментарий от Metare — 11 Сентябрь 2009 @ 18:26

  5. так хлебные крошки это тематические теги что ли? если я правильно понял…

    Комментарий от Портал 0t4 — 12 Сентябрь 2009 @ 14:12

  6. Простите, а можно где-нубудь посмотреть, как это будет выглядеть?

    Комментарий от Дмитрий — 13 Сентябрь 2009 @ 0:27

  7. Ну вот пример – http://blonda.com.ua/avtomobil-v-bikini/avto-dlya-zhenshhin/ (вверху, сразу над статьей).
    Или же вот так – http://blonda.com.ua/tag/privlekatelnost/ для тегов выглядит.

    Комментарий от admin — 14 Сентябрь 2009 @ 9:43

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

    Комментарий от Виталий — 15 Сентябрь 2009 @ 14:46

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

    Комментарий от admin — 15 Сентябрь 2009 @ 17:23

  10. admin, спасибо(:

    Комментарий от Виталий — 16 Сентябрь 2009 @ 13:31

  11. хм.. Интересная штука.. Сначала не понял, что такое эти “хлебные крошки”…

    Комментарий от Iceman — 17 Сентябрь 2009 @ 18:29

  12. А разве для WP нет такого плагина? Насколько я в курсе – есть около 4 разных плагинов для вывода облака тегов. Один из них на Flash стоит здесь.

    Комментарий от Олег — 18 Сентябрь 2009 @ 18:36

  13. И все таки непонятно,зачем делать вывод ссылочного пути на сайте…Но все-равно спасибобольшое.

    Комментарий от Ewa — 19 Сентябрь 2009 @ 23:27

  14. Олег, да, этот плагин стоит у меня, но причем тут теги к хлебным крошкам? :)

    Комментарий от admin — 21 Сентябрь 2009 @ 12:58

  15. Скажите а где плагин можно взять? у меня не получается что то

    Комментарий от Дмитрий — 1 Октябрь 2009 @ 17:02

  16. Это как на форуме, удобно для посетителя. Понятно, откуда шёл, и при желании можно вернуться назад.

    Комментарий от MsMitay — 25 Октябрь 2009 @ 20:43

  17. Спасибо за решения,хлебные крошки действительно полезная тема в сео

    Комментарий от Руками — 28 Октябрь 2009 @ 9:37

  18. У меня на блоге такое есть, хотя пришлось немного покопаться в коде плагина чтобы перевести с English

    Комментарий от NetBlog — 29 Октябрь 2009 @ 14:04

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

    Комментарий от Иван — 7 Ноябрь 2009 @ 22:30

  20. …

    интересн…

    Трэкбэк от WebLogger — 27 Ноябрь 2009 @ 21:42

  21. …

    Интересно < /a…

    Трэкбэк от Alexander — 29 Ноябрь 2009 @ 22:11

  22. А не лучше ли с точки зрения SEO делать хлебные крошки в виде:
    заголовок статьи <- родительский раздел ?
    Причем по-моему более одного уровня родительских разделов выводить не стоит.

    Комментарий от Nayjest размышляет о SEO — 3 Декабрь 2009 @ 2:37

  23. Спасибо попробую ваш способ как один из вариантов.Нашел еще парочку способов “Хлебные крошки”

    Комментарий от tarkuts — 21 Январь 2010 @ 15:05

  24. Спасибо большое автору за блог!Сам попробовал-что-то не получатеся(видимо руки такие:)).Тут писали,что есть плагин на WP.Ссылочку никто не кинет?Или хотя бы просто название.Заранее спасибо!

    Комментарий от Everouge — 28 Январь 2010 @ 20:40

  25. Спасибо огромное попробую сделать на своем сайте

    Комментарий от Valera — 5 Февраль 2010 @ 13:51

  26. Присоединяюсь к everouge, у нас не те руки:)))Если кто знает плагин,выполняющий подобное превращение,напишите плиз:)

    Комментарий от Валерий — 7 Февраль 2010 @ 16:15

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

    Комментарий от Thai Ridgeback Dog — 26 Февраль 2010 @ 21:15

  28. Выглядит прикольно) пойду покрошу у себя на сайте)

    Комментарий от MTV — 10 Март 2010 @ 13:43

  29. Вот спасибо!
    И всего то в нескольких строчках.
    Кто то спрашивал про плагин. Есть например Breadcrumb NavXT, но против приведённого примера он огромен и лично у меня работать не стал. Выдаёт фатальную ошибку и дезактивируется. Намного проще вставить в шаблон приведённый код, чем разбираться.

    Комментарий от lonelywolf.ru — 9 Апрель 2010 @ 0:43

  30. Надо ппробовать ваш способ, благо у меня тоже WP.
    Правда, когда сайт небольшой глубины, то это не особенно эффективно.

    Комментарий от Павел — 30 Май 2010 @ 17:37

  31. Еще бы настроек через админ панель. Для тех кто в css не понимает

    Комментарий от MISHA — 31 Май 2010 @ 19:24

  32. Сегодня мне задали вопрос на засыпку, что такое хлебные крошки. Я думала шутят… А оказалось этот термин уже в ходу и давно в ходу))). Да, доходчиво объяснил. Буду иметь в виду

    Комментарий от astra — 31 Май 2010 @ 20:53

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

    Комментарий от Света — 14 Июнь 2010 @ 12:00

  34. Спасибо за инфо) Будем пользовать)))

    Комментарий от Анна — 17 Июнь 2010 @ 15:23

  35. Света обнадежила надо будет и себе поставить, а вдруг и поможет.

    Комментарий от Пенсия — 21 Июнь 2010 @ 14:33

  36. а как Вы считаете – следует ли хлебные крошки закрывать ноиндексом и ноуфоллоу? чтобы весь вес на главную не утекал – или это глупость?

    Комментарий от chii — 24 Июнь 2010 @ 15:30

  37. Воспользовался вашим советом и сделал себе тоже “Хлебные крошки” :) Точнее это даже напоминает навигацию в форуме! Очень удобно!
    Пример крошек можно посмотреть тут http://pavlyxa.ru :)

    Комментарий от Павел Уханов — 26 Июнь 2010 @ 0:26

  38. Павел Уханов, ну хлебные крошки советую в гугл рекомендациях, так что это не только красиво, но и полезно в SEO ;)

    Комментарий от SeoDelo — 27 Июнь 2010 @ 9:08

  39. Значит убил 2-ух зайцев одной пулей! ;)

    Комментарий от Павел Уханов — 28 Июль 2010 @ 23:39

RSS лента комментариев к этой записи. TrackBack URL

Оставить комментарий



Комментариев (39)


Get Adobe Flash player

seo блог на берегу моря - основы оптимизации и продвижения сайтов.