«

»

Июл 24 2012

Распечатать Запись

Хлебные крошки – дизайн при помощи CSS

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

Ранее я уже писал, что для многих SEO задач в блоге на WordPress я использую Yoast WordPress SEO. В том числе этим плагином реализуются и “хлебные крошки” (кстати, для разметки используется популярный нынче стандарт Schema.org).

Поискав  в интернете возможные варианты оформления “хлебных крошек” остановился на чистом CSS без картинок – легкий и вполне смотрибельный вариант. Однако, во всех примерах, которые нашлись гуглом, “хлебные крошки” реализуются списком из <li>, а у меня они сделаны при помощи span‘ов. Из-за этого тупо скопировать и вставить CSS из примеров не получилось, пришлось адаптировать. В этом процессе мне очень помогает гугл хром и его “Просмотр кода элемента” – можно сразу же смотреть на код необходимого куска без поиска его в полном исходном коде страницы. Ну да меньше слов – больше фактов… вот такие стили CSS в итоге получились:

После этого, чтобы вставить эти крошки в мою тему Graphene я в файл functions.php добавляю следующий код:

Обращаю внимание, что я не вывожу хлебные крошки на главной!

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

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

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

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