Загрузка...

Уроки по созданию сайтов

Хлебные крошки для Wordpress без использования плагинов

Доброго времени суток! В последнее время мне довелось довольно часто работать с Вордпрессом, поэтому хочу поделиться с вами своими наработками на эту тему.

Любой плагин Wordpress, как и расширения в Joomla, создают дополнительную нагрузку на сервер и замедляют загрузку страниц. Более того, в обоих CMS нам необходимо следить за обновлениями плагинов (расширений), а особенно за обновлениями безопасности.

Поэтому, если вы знакомы с PHP и JS и в состоянии написать свою альтернативную версию того или иного расширения, то настоятельно рекомендую это делать. При этом совсем необязательно оформлять ваше творение как полноценное расширение (плагин), вы можете просто поместить код в нужное место страницы.

Чтобы создать хлебные крошки (breadcrumbs) на своём Wordpress портале я решил установить популярный плагин Breadcrumb NavXT, но потом мне понадобилось ускорить загрузку страниц. В числе множества других мероприятий, я решил сделать самый простой и лаконичный вариант (максимально быстрый) breadcrumbs, без использования стилизации и лишнего кода. Им я и хочу с вами поделиться:

Хлебные крошки для Wordpress

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>';
}

{

Напишите нам

}