Создаем на WordPress хлебные крошки в стиле Google

Хотите оформить хлебные крошки WordPress в стиле гугла без плагина? Пожалуйста! 15 минут — и вы получите желаемое.
Была использована простая и симпатичная кнопка поиска Google для вырисовывания схожего стиля хлебных крошек как на изображении ниже.

1. Подготовка меню навигации для хлебных крошек

Скачайте картинку для «хлебного меню» на ваш сайт и залейте ее в папку img темы (или поправьте путь в css background-image : url(../img/bg-crumbs.png);).

2. Добавляем код Add PHP для навигации

В файл functions.php в папке вашей темы добавляем код, который, в свою очередь, добавит html-код для хлебных крошек. Учтите, код поддерживает только is_category и is_single, т.е. будет отображаться в постах, страницах и категориях (в зависимости от того, куда вы его вставите).

 //Breadcrumb как у Google
function the_breadcrumb() {
if ( !is_home() ) {
echo '<div id="breadcrumb"> <ul class="crumbs"><li class="first"><a href="';
echo get_option('home');
echo '" style="z-index:9;"><span></span>';
echo ''. bloginfo('name') . '';
echo "</a></li>";
}
 
if ( is_category() || is_single() ) {
$cats = get_the_category();
$cat = $cats[0];
$output .= '<a href="'.get_category_link($cat->term_id).'" style="z-index:8;">
'.$cat->name.'</a>';
echo '<li>'.$output.'</li>';
}
 
if(is_single())
{
echo '<li><a href="'.get_permalink().'" style="z-index:7;">';the_title();echo '</a></li>';
}
if(is_page())
{
echo '<li><a href="'.get_permalink().'" style="z-index:8;">';the_title();echo '</a></li>';
}
 
echo "</ul></div><div class=\"clear\"></div>";
}

3. Добавляем CSS код

Блок кода css необходимо добавить в ваш основной файл стилей в папке темы (обычно называется style.css). Также можно использовать css-компрессор для уменьшения размера кода.

/*Breadcumbs*/
#breadcrumb {
display : block;
float : none;
margin-left : 15px;
font-weight : 600;
}
#breadcrumb ul {
font-family : Helvetica, sans-serif;
list-style : none;
}
.crumbs {
display : block;
}
.crumbs li.first {
padding-left : 8px;
}
.crumbs li a, .crumbs li a:link, .crumbs li a:visited {
color : #616d7e;
display : block;
float : left;
font-size : 11px;
margin-left : -13px;
padding : 7px 17px 11px 25px;
position : relative;
text-decoration : none;
}
.crumbs li a {
background-image : url(../img/bg-crumbs.png);
background-position : 100% 0%;
background-repeat : no-repeat;
position : relative;
}
.crumbs li a:hover {
background-position : 100% -48px;
color : #333;
cursor : pointer;
}
.crumbs li a:active {
background-position : 100% -96px;
color : #333;
}
.crumbs li.first a span {
border-left : 1px solid #d9d9d9;
height : 29px;
left : 0;
position : absolute;
top : 0;
width : 3px;
}
/*Breadcumbs*/

4. Выводим гугловские хлебные крошки на страницу

В итоге, добавляем следующий код в в файлы вашей темы single.php, page.php и archive.php (можно во все сразу, можно в какой-то один, по желанию).
Очистите кеш браузера на всякий случай, и увидите хлебные крошки. Вуаля!

<?php the_breadcrumb(); ?>
VN:F [1.9.22_1171]
Rating: 3.9/5 (8 votes cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
  • Дмитрий

    Хорошая функция только для удобства использования необходимо заменить символы html типа 
    &lt;  на на готовые стрелки и кавычки, чтобы пользователи не мучались с этим сами. А в целом спасибо.

    • ADv

      Мой недочет, парсер скушал символы. Сейчас поправлю, спасибо.

    • ADv

      Теперь все красиво = )

  • Дмитрий

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

    В файлы темы вставляемый код выглядит так 
     

    Вот такой получился код для файла functions.php 

     //Breadcrumb как у Googlefunction the_breadcrumb() {if ( !is_home() ) {echo ‘ ‘;echo ». bloginfo(‘name’) . »;echo ««;} if ( is_category() || is_single() ) {$cats = get_the_category();$cat = $cats[0];$output .= ‘term_id).'» style=»z-index:8;»>’.$cat->name.’‘;echo ».$output.»;} if(is_single()){echo ‘‘;the_title();echo ‘‘;}if(is_page()){echo ‘‘;the_title();echo ‘‘;} echo «»;}

    Всем спасибо.

    • ADv

      Спасибо, но я уже переделал, о чем отписался выше ниже 😉

  • Дмитрий

    Самый клевый блог о WordPress! Респект автору

  • И еще стоит подправить, чтобы последняя ссылка, которая указывает на саму страницу на которой находится, была неактивной

  • Давид

    Вы бы для начала объяснили что такое Хлебные Крошки, показали картинки, сказали пару слов о том, зачем они нужны…. А то вы сразу в места в карьер.
    Я вот про них слышал но понятия не имею зачем они.

    • ADv

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

  • Пупсик

    Хлебные крошки без микроразметки мало интереса представляют. А вот добавить RDFa разметку, как в плагине RDFa Breadcrumbs — было бы другое дело. Так получается красивый сниппет в гугле и толку от крошек будет намного больше

  • big_jacky

    Честно говоря не понял в чём «красота» заключается. Либо что-то не так установил. Фоновой картинки этой не наблюдаю. При наведении крошки чуть перемещаются вниз. А как должно быть?

  • urbanstylej

    красиво, но…
    есть баг.. и я не могу понять где…
    при отображении крошек после home->category -> появляется не ссылка на конкретную статью, а левая ссылка на одну из существующих статей на сайте. Причем везде одна и та же… Проверял на четырех разных компах…
    А на страницах вообще не отображается…

    Грешу на тему, но может и нет…

  • Сергей Чичеров

    поддерживаю, последняя надпись должна быть кликабельной

Scroll To Top