Хотите оформить хлебные крошки 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(); ?>
