Ты на кого батон крошишь?! или «Хлебные крошки» на блоге WordPress

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

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

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

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

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

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

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

Breadcrumb NavXT

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

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

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

<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.

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

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

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

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

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

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

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

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

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

1. Вот этот код копируем и вставляем в файл 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()

    

2. Теперь осталось только прописать вызов этой функции в пресловутом «нужном месте» 🙂 ! К счастью, мы знаем уже, куда, а кто читает статью не сначала, может вернуться немножко назад — в описание установки плагина для хлебных крошек. Вставляем вызов функции в файлы single.php и page.php:

   <?php if (function_exists('breadcrumbs')) breadcrumbs(); ?>

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

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

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

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

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

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

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

#breadcrumbs {font-size: 11px;}

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

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

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

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

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

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