Site icon Vavik96

Как сделать хлебные крошки на WordPress без плагина

admin

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

Но почему навигацию назвали хлебными крошками?  Все очень просто. Прослеживается аналогия с немецкой детской сказкой «Гензель и Гретель», в которой главные герои раскидывали хлебные крошки, чтобы запомнить обратную дорогу в темном лесу.

Хлебные крошки показывают степень вложенности страницы, что упрощает пользователю ориентирование по ресурсу, показывая ему точные координаты текущего местонахождения.
function the_breadcrumb() {
    echo '<div id="breadcrumb"><ul><li><a href="/">Home</a></li><li>></li>';

    if ( is_category() || is_single() ) {
        $cats = get_the_category();
        $cat = $cats[0];
        echo '<li><a href="'.get_category_link($cat->term_id).'">'.$cat->name.'</a></li><li>></li>';
    }

    if(is_single()){
        echo '<li>';
        the_title();
        echo '</li>';
    }

    if(is_page()){
        echo '<li>';
        the_title();
        echo '</li>';
    }

    echo '</ul><div class="clear"></div></div>';
}

Этот код нужно добавить в файл functions.php вашей темы оформления. Куда именно его копировать, значения не имеет, главное – не нужно эту функцию вставлять внутрь другой :)

Чтобы вызвать хлебные крошки, поместите этот код туда, где хотите их показывать:

<?php the_breadcrumb(); ?>

В созданной мной теме WordPress макет главной страницы находится в одном файле .php, а макет внутренних страниц в другом. Поэтому данный код я поместил только на внутренние страницы, так как на главной навигация не нужна.

А вот и CSS:

#breadcrumb li{list-style:none;display:inline-block;margin-right:5px;}

Коротко и лаконично, особенно по сравнению с установкой плагина, что даёт нам максимум производительности.

Также, у меня была проблема, что в breadcrumbs ссылка на категории была вида:
http://домен/category/имя-категории

Если у вас такая же проблема, то вместо предыдущего кода, скопируйте в functions.php этот:

function the_breadcrumb() {
    echo '<div id="breadcrumb"><ul><li><a href="/">Home</a></li><li>></li>';
    if (is_category() || is_single()){
        $cats = get_the_category();
        $cat = $cats[0];
        echo '<li><a href="'.str_replace('/category','',get_category_link($cat->term_id)).'">'.$cat->name.'</a></li><li>></li>';
    }

    if(is_single()){
        echo '<li>';
        the_title();
        echo '</li>';
    }

    if(is_page()){
        echo '<li>';
        the_title();
        echo '</li>';
    }

    echo '</ul><div class="clear"></div></div>';
}

На этом всё, спасибо за внимание!

Сергей Рудь

Exit mobile version