Сен 19th, 2015

Комментариев нет

Доброго дня!

При нынешней жизни информация о том, где можно купить запчасти на китайские авто, становится все более и более актуальной. Запчасти для Чери, например, можно посмотреть в интернет-магазине AsiaCentr. Ну а для тех, у кого нет китайской машины, зато есть сайт на WordPress, я сегодня покажу одну интересную штучку.

Выпадающие хлебные крошки WordPress

Вообще о создании обычных хлебных крошек я писала еще на заре своей вялотекущей блогерской карьеры (2,5 года назад, ничего себе…).  Но не так давно пришлось решать довольно нестандартные задачу: добавить к хлебным крошкам в интернет-магазине выпадение: при наведении на любое звено цепочки появляются блок с параллельными ему разделами сайта. Ну на скрине понятнее:

Зачем нужно? Для более удобной и быстрой навигации по сайту, само собой. Кстати, при всей своей кажущейся надуманности вещь действительно удобная, потом сама того не замечая, часто пользовалась, когда бродила по фронтенду.

Как сделать выпадающие хлебные крошки?

Вообще для решения этой задачи написан jQuery-плагин xBreadcrumbs, который можно прикрутить к любому движку. Но на уже установленные на сайте крошки от Yoast он не ложился в силу различий в разметке, а делать все вручную с нуля я поленилась, честно говоря. И не зря, потому что тут же нашла решение: связка плагинов Breadcrumb NavXT и Breadcrumb NavXT Multidimension Extensions (оба находятся поиском из админки). Собственно, первый — это сами хлебные крошки, а второй — расширение функционала, в частности, желанное мною выпадение.

Итак, скачиваем, устанавливаем, активируем. Сами хлебные крошки настраиваем как нам надо в настройках Breadcrumb NavXT, затем в single.php вашей темы оформления вставляем код:

<ul class="breadcrumbs">
    <?php if(function_exists('bcn_display_list_multidim') ) )
    {
        bcn_display_list_multidim();
    }?>
</ul>

Не знаете, куда его воткнуть — экспериментируйте. Поставили, обновили, посмотрели, переставили ? Где-то в начале нужно…

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

Я вам покажу свой css, а уж на его основе можно стилизовать все как угодно:

 .breadcrumbs
{
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
}
.breadcrumbs a
{
color: #7C7C7B;
font-size: 15px;
font-family: Tahoma;
}
.breadcrumbs > li > a
{
    height: 30px;
    display: block;
    padding-right: 15px;
}
.breadcrumbs a:hover
{
    text-decoration:none;;
}
.breadcrumbs li
{
    list-style: none;
    margin: 0;
}
.breadcrumbs > li
{    
    float: left;
    
}
.breadcrumbs > li > span > a {background: transparent url("/wordpress/plaginy-wordpress/images/drop.png") no-repeat scroll 4px 8px;padding-left: 20px;}
.breadcrumbs > li::after {content:"˃";color: #7C7C7B; margin-left:10px;}
.breadcrumbs > li:last-child::after {content:'';}
.breadcrumbs > li.home a{padding-left:0; background:none;}
.breadcrumbs > li:nth-child(3) a {padding-left:4px; background:none;}
.breadcrumbs > li:nth-child(2) {display:none;}
.breadcrumbs li ul
{
    display: none;
    margin: 0 0 0 17px;
    padding: 0;
    
}
.breadcrumbs .home ul
{
    display: none !important;
}
.breadcrumbs li:hover ul
{
    display: block;
    position: absolute;
    border: solid 1px #cacaca;
    background: #fff;
    z-index:9999;
}
.breadcrumbs li ul li
{
    padding: 7px;
}

Картинка drop.png — это иконка выпадения, у меня сиреневый треугольник. Подберите себе нужную  и положите в папку images шаблона.

В качестве разделителя у меня используется «>». Хотите другой, замените здесь:

.breadcrumbs > li::after

значение свойства «content».

Удачных выходн