Главная › Новости

Хлебные крошки на блоге WordPress - с плагином Breadcrumb NavXT и без него!

Опубликовано: 26.02.2018

Друзья, добрый вечер! Возможно, у вас другое время суток, однако уж простите мне эту маленькую слабость — привычку здороваться сообразно времени на часах моей микроволновки :)…

Сегодня у нас с вами очередной урок WordPress , но вначале небольшое лирическое отступление.

Кто-то, возможно, помнит, что я принимала участие в статейном конкурсе от Пьяного Блогера, так вот сегодня (, точнее, уже вчера) я узнала, что заняла в нем для меня неожиданно высокое шестое место и даже получила за это очень приятную сумму. Потрачу на Вискас.

Урок 11. Хлебные крошки в Jekyll

Ну а теперь к теме. Как понятно из названия (а может, и непонятно), сегодня мы с вами будем устанавливать на блог «хлебные крошки». Не знаете, что это такое?

Очень хочется в миллионный раз переврать старую сказку о том, как дети оставляли за собой в лесу след из хлебных крошек… Еще хочется написать умные слова вроде «дополнительная перелинковка», «навигационная цепочка»… Но просто посмотрите на скрин, и думаю, пояснений не требуется:

Так эти самые пресловутые «хлебные крошки» выглядят у меня на блоге. Думаю, встречали вы их часто, а изредка даже пользовались для быстрого перехода в раздел верхнего уровня, на главную страницу или просто чтобы определить, куда же вас занесло во время путешествия по сайту. Еще поговаривают, что и с точки зрения оптимизации это вещь довольно полезная, так что ставим обязательно!

К установке я предлагаю вам два варианта на выбор: при помощи плагина Breadcrumb NavXT и посредством добавления кода в файлы темы вашего блога. К слову сказать, не так уж принципиально эти способы отличаются, поскольку, даже установив плагин, кусочек кода в файлы темы вставлять вам все равно придется. Впрочем, обо всем по порядку.

Breadcrumb NavXT

Скачиваем плагин с оф.сайта WordPress Разархивируем и папку из архива копируем в папку с плагинами вашего блога \wp-content\plugins Активируем плагин в админке блога

А теперь начинается самое интересное:

Скопируйте вот этот код:

<div id="breadcrumb"> <?php if(function_exists('bcn_display')) { bcn_display(); } ?> </div>

и вставьте его в нужное место вашего шаблона.

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

Прежде всего давайте разберемся, на каких страницах блога нам нужны «хлебные крошки». Очевидно, что на главной не нужны. А где?

Логично их расположить на страницах записей и, по желанию, на статических страницах блога: «Об авторе», «Карта блога» и т.д.

За формирование страницы записи блога отвечает файл шаблона single.php , за вывод страниц — файл page.php . Правда, не всегда. Есть такие мудреные шаблоны, в которых все устроено немножко по-другому, но сейчас, чтобы не усложнять, мы не будем их касаться (тем более что все варианты я все равно не в силах охватить в рамках одного поста. Появятся вопросы — добро пожаловать в комментарии!).

Значит, нам нужно вставить код в эти два файла. Лежат они в папке вашей темы:

Открываем для начала файл single.php (не устаю напоминать — открываем файлы всегда Notepad++!) и где-то в начале ищем вот такую строчку:

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

Так вот приведенный мною код нужно вставить сразу после хедера перед началом вывода самой статьи. Вот смотрите, как получилось у меня:

Теперь главное не забыть сохранить изменения в файле: CTRL+S. Если вдруг что-то пошло не так, то всегда можно откатиться назад, нажав CTRL+Z.

Абсолютно то же самое нужно сделать с файлом page.php , после чего уже можно идти на блог и смотреть на результат:

Сразу отмечу, что мне не нравится: то, что нет отступа от левого края, и крупный шрифт — я бы предпочла поменьше в «хлебных крошках». К счастью, это все легко «лечится» простым добавлением стилей в файл style.css :

#breadcrumb { font-size: 11px; color: #1EE63C; margin: 0 0 10px 10px;

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

Пора, пора, я чувствую, отвлечься от текущих уроков и написать большой обзорный пост по основам языка стилей CSS . Вполне возможно, что следующая моя статья как раз и окажется посвящена этой теме, так что подписывайтесь на обновления блога, друзья!

Теперь обратимся к настройкам Breadcrumb NavXT .

Если честно, принципиально важными я считаю только следующие, отраженные на скрине:

Вид разделителя между элементами «хлебных крошек». Он задается в виде кода. А я для вас припасла таблицу соответствия знаков и их кодов: Длина заголовка страницы. Если поставить «0», то будет выводиться полностью. Я же ограничиваю количество выводимых знаков хотя бы потому, что у моих постов всегда очень длинные заголовки, и нет смысла их выводить целиком. Текущая позиция в виде ссылки — с точки зрения логики абсолютно не нужна, ибо зачем ссылаться на страницу, на которой итак находишься. А с точки зрения оптимизации — лучше ссылку оставить. Что ж, когда seo противоречит обычной логике, выбор за вами! Если отметить этот пункт, то в «хлебных крошках» будет выводиться номер страницы, если она его имеет. Например, ваша карта сайта может быть разбита на несколько страниц, или очень длинный пост вы разделили постранично — все это будет отражено в навигации. Удобно! Отмечаем!

Все остальные настройки отвечают за формирование шаблонов ссылок на различные элементы блога: страницы, архивы и т.д. Я их никогда не меняю, потому что руководствуюсь правилом: «Не нужно трогать то, что и так нормально работает!» А Breadcrumb NavXT и со стандартными установками шаблонов работает отлично. Интересно — покопайтесь!

А вот теперь мне интересно, а пришла ли вам в голову та же самая мысль, что и мне: если плагин все равно требует редактирования кода, то зачем он нужен вообще? Не проще ли просто вставить нужный код в шаблон и не грузить блог лишним плагином?

Пожалуй, единственным аргументом в пользу плагина для хлебных крошек является то, что у него много всяких-разных настроек. Их я показывала выше. Говорила и о том, что из всего этого настроечного многообразия сама реально использую лишь несколько опций. Да и ими готова поступиться, чтобы отказаться от еще одного плагина.

Если вы солидарны со мной в этом вопросе и не хотите использовать плагин Breadcrumb NavXT , то следующая часть сегодняшней статьи как раз для вас:

Хлебные крошки WordPress без плагина

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

Итак, алгоритм прост:

Вот этот код копируем и вставляем в файл functions.php прямо ПЕРЕД символами ?> , расположенными в самой последней строчке файла вашей темы оформления function breadcrumbs() { /* === ОПЦИИ === */ $text['home'] = 'Главная'; // текст ссылки "Главная" $text['category'] = 'Архив рубрики "%s"'; // текст для страницы рубрики $text['search'] = 'Результаты поиска по запросу "%s"'; // текст для страницы с результатами поиска $text['tag'] = 'Записи с тегом "%s"'; // текст для страницы тега $text['author'] = 'Статьи автора %s'; // текст для страницы автора $text['404'] = 'Ошибка 404'; // текст для страницы 404 $showCurrent = 1; // 1 - показывать название текущей статьи/страницы, 0 - не показывать $showOnHome = 0; // 1 - показывать "хлебные крошки" на главной странице, 0 - не показывать $delimiter = ' » '; // разделить между "крошками" $before = '<span>'; // тег перед текущей "крошкой" $after = '</span>'; // тег после текущей "крошки" /* === КОНЕЦ ОПЦИЙ === */ global $post; $homeLink = get_bloginfo('url') . '/'; $linkBefore = '<span typeof="v:Breadcrumb">'; $linkAfter = '</span>'; $linkAttr = ' rel="v:url" property="v:title"'; $link = $linkBefore . '<a' . $linkAttr . ' href="/wordpress/osnovy/%1$s">%2$s</a>' . $linkAfter; if (is_home() || is_front_page()) { if ($showOnHome == 1) echo '<div id="crumbs"><a href="' . $homeLink . '">' . $text['home'] . '</a></div>'; } else { echo '<div id="crumbs" xmlns:v="http://rdf.data-vocabulary.org/#">' . sprintf($link, $homeLink, $text['home']) . $delimiter; if ( is_category() ) { $thisCat = get_category(get_query_var('cat'), false); if ($thisCat->parent != 0) { $cats = get_category_parents($thisCat->parent, TRUE, $delimiter); $cats = str_replace('<a', $linkBefore . '<a' . $linkAttr, $cats); $cats = str_replace('</a>', '</a>' . $linkAfter, $cats); echo $cats; } echo $before . sprintf($text['category'], single_cat_title('', false)) . $after; } elseif ( is_search() ) { echo $before . sprintf($text['search'], get_search_query()) . $after; } elseif ( is_day() ) { echo sprintf($link, get_year_link(get_the_time('Y')), get_the_time('Y')) . $delimiter; echo sprintf($link, get_month_link(get_the_time('Y'),get_the_time('m')), get_the_time('F')) . $delimiter; echo $before . get_the_time('d') . $after; } elseif ( is_month() ) { echo sprintf($link, get_year_link(get_the_time('Y')), get_the_time('Y')) . $delimiter; echo $before . get_the_time('F') . $after; } elseif ( is_year() ) { echo $before . get_the_time('Y') . $after; } elseif ( is_single() && !is_attachment() ) { if ( get_post_type() != 'post' ) { $post_type = get_post_type_object(get_post_type()); $slug = $post_type->rewrite; printf($link, $homeLink . '/' . $slug['slug'] . '/', $post_type->labels->singular_name); if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after; } else { $cat = get_the_category(); $cat = $cat[0]; $cats = get_category_parents($cat, TRUE, $delimiter); if ($showCurrent == 0) $cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats); $cats = str_replace('<a', $linkBefore . '<a' . $linkAttr, $cats); $cats = str_replace('</a>', '</a>' . $linkAfter, $cats); echo $cats; if ($showCurrent == 1) echo $before . get_the_title() . $after; } } elseif ( !is_single() && !is_page() && get_post_type() != 'post' && !is_404() ) { $post_type = get_post_type_object(get_post_type()); echo $before . $post_type->labels->singular_name . $after; } elseif ( is_attachment() ) { $parent = get_post($post->post_parent); $cat = get_the_category($parent->ID); $cat = $cat[0]; $cats = get_category_parents($cat, TRUE, $delimiter); $cats = str_replace('<a', $linkBefore . '<a' . $linkAttr, $cats); $cats = str_replace('</a>', '</a>' . $linkAfter, $cats); echo $cats; printf($link, get_permalink($parent), $parent->post_title); if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after; } elseif ( is_page() && !$post->post_parent ) { if ($showCurrent == 1) echo $before . get_the_title() . $after; } elseif ( is_page() && $post->post_parent ) { $parent_id = $post->post_parent; $breadcrumbs = array(); while ($parent_id) { $page = get_page($parent_id); $breadcrumbs[] = sprintf($link, get_permalink($page->ID), get_the_title($page->ID)); $parent_id = $page->post_parent; } $breadcrumbs = array_reverse($breadcrumbs); for ($i = 0; $i < count($breadcrumbs); $i++) { echo $breadcrumbs[$i]; if ($i != count($breadcrumbs)-1) echo $delimiter; } if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after; } elseif ( is_tag() ) { echo $before . sprintf($text['tag'], single_tag_title('', false)) . $after; } elseif ( is_author() ) { global $author; $userdata = get_userdata($author); echo $before . sprintf($text['author'], $userdata->display_name) . $after; } elseif ( is_404() ) { echo $before . $text['404'] . $after; } if ( get_query_var('paged') ) { if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' ('; echo __('Page') . ' ' . get_query_var('paged'); if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')'; } echo '</div>'; } } // end breadcrumbs()

 

Теперь осталось только прописать вызов этой функции в пресловутом «нужном месте» ???? ! К счастью, мы знаем уже, куда, а кто читает статью не сначала, может вернуться немножко назад — в описание установки плагина для хлебных крошек. Вставляем вызов функции в файлы single.php и page.php : <?php if (function_exists('breadcrumbs')) breadcrumbs(); ?>

;По умолчанию оформление появившихся «хлебных крошек» должно, в принципе, соответствовать стилю вашей темы, но если нужно что-то подправить, то для всего навигационного блока предусмотрен идентификатор #crumbs , а для текущей позиции — класс .current .

Ну и напоследок. Не так давно я сменила свой seo-плагин All In One Seo Pack на WordPress Seo (в подробностях обзор процесса миграции и настроек этого прекрасного плагина, а заодно и двух других популярнейших seo-плагинов можно почитать здесь ). Среди прочего, он предоставляет и возможность установки на блог «хлебных крошек». И сейчас я покажу вам, как легко и удобно этой возможностью можно воспользоваться.

Установка «хлебных крошек» средствами WordPress Seo

Для начала зайдем на страницу настроек «хлебных крошек»:

Ну и по пунктам:

Для начала включим использование «хлебных крошек» Выберем разделитель для звеньев цепочки (таблицу помните?). Я оставила по умолчанию. Текст ссылки на главную страницу — если оставить пустым, то появится «Главное меню», как-то не логично, лучше ввести свое название А можно вообще удалить главную из навигации, хотя не думаю, что стоит — все же дополнительная ссылка на главную Выбор типа звеньев — рубрики, на мой взгляд, наиболее логичный вариант для записей, в страницах оставила «ничего» Ясно без слов А вот этот код просто копируем и вставляем в файлы темы И не забываем сохраниться!

В принципе, «хлебные крошки» уже готовы, да и выглядят неплохо, но я решила немножко уменьшить их шрифт, чтобы не так бросались в глаза:

#breadcrumbs {font-size: 11px;}

Вы можете прописать любые нужные вам стили.

Вот что у меня получилось:

Все? Наверное, да. Во всяком случае, основную свою задачу на сегодня я выполнила — познакомила вас со способами установки «хлебных крошек» на блог WordPress при помощи плагина и без него, а также с использованием функционала WordPress Seo by Yoast.

Посему с чувством выполненного долга изволю откланяться. С вами была всегда ваша пушистая Web-Кошка! До новой встречи на страницах моего Авторского блога !

p.s. Кто хочет воспользоваться моментом и покритиковать мой блог — добро пожаловать сюда !

p.p.s. На обновления блога подписались ? Нет? Зря, друзья, очень зря… Почему? А не скажу!