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

23 комментария

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

Сегодня у нас с вами очередной урок 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="%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. На обновления блога подписались? Нет? Зря, друзья, очень зря… Почему? А не скажу!

23 коммент.
  1. Одни говорят, что хлебные крошки улучшают внутреннюю перелинковку ,другие что это лишняя опция от которой толку мало=) Я думаю все это надо тестировать на собственном опыте.Себе пока не решился ставить.

    • Web-Кошка

      Привет! Ну в любом случае на блогах со сложной структурой полезно, особенно если переходишь из поиска на какую-то внутреннюю страницу — помогает сориентироваться, если блог интересный и сразу уходить не хочется. Сама пользуюсь время от времени.
      А с точки зрения оптимизации — да, сколько людей, столько и мнений. Я лично думаю, что если и влияет, то незначительно…

      • Да, все зависит от структуры блога. На твоем блоге — актуально, на моем — абсолютно нет, т.к. я не использую категории в записях. А статья хорошая. исчерпывающая.

        • Web-Кошка

          Что значит — категории не используешь? Подкатегории?

  2. В который раз пытаюсь понять для чего нужны эти «хлебные крошки» и всё напрасно.

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

      • Спасибо! Теперь понятней. Я то смотрел с точки зрения своего блога, где только категории, записи и не глубже. Виноват-с.

        • Да, на блогах, где, как у Вас, более простая и понятная структура, без хлебных крошек можно легко обходиться.

          • Это уж не по этой теме, а об Akismet. Как и раньше было у меня там денежки просят заплатить. Минимум $36. Сейчас для меня это невозможно. Жил же я с таким Akismet’ом почти 2 года. Проживу и дальше.

          • Сергей, после регистрации на wordpress.com Вас должно было перебросить на страничку с выбором тарифного плана. Там есть три варианта, Ваш — Personal. Нажимаете под ним на «Sign in», а на сдедующей странице, где видите $36, тяните ползунок влево до $0, вводите имя и все. Персональные сайты и блоги могут использовать Акисмет бесплатно.

  3. Ах вот как! А я и не догадался подвинуть движок, хотя видел, что тариф начинается с 0. Спасибо! буду ещё пробовать.

  4. Дмитрий

    Непонятно почему функция breadcrumbs(); не выводит родительскую страницу.
    Так понимаю, что нужно создать категорию страниц…

    • Не выводит, сама столкнулась с этим недавно… А категорию страниц создать нельзя… Если решу проблему, напишу.

  5. Милана

    Добрый день!
    Извините, что не в тему, может сталкивались?
    есть на блоге виджет рубрики там все основные рубрики.
    Ставлю в другой сайдбар еще один виджет рубрики(называю спортивное питание по теме блога)
    В этом виджете дублируются все уже имеющиеся рубрики, а хочется установить там только тематические.
    Не подскажите как? Плиз…

    • Милана, очень просто) Возьмите стандартный виджет «Произвольное меню», а для него в разделе «Меню» в консоли создайте новое с нужными рубриками.

  6. Юрий

    Спасибо за статью!!!! Заулыбался ,когда вставим код. Я как раз на этом уровне . В css хоть как то. А в php = 0! Спасибо !!!!!!

    • Да не за что, Юрий 🙂 Я в PHP дошла сейчас до уровня собаки — все понимаю, но ничего сказать не могу)))

  7. Спасибо! Получилось. Не знал, что кроме плагина еще код надо добавлять:)

  8. Анна

    Огромное спасибо! Много инфы перешерстила, но толmrо ваш пост помог))

  9. Спасибо вам большое что помогли)))Пользовался вашей статьёй и всё получилось)))На других форумах смотрел как делать,но там ничего не говорили про page.php и как что именно делать)

  10. Den

    У меня проблема в следующем. Каталог сайтов.
    Главная-вторая страница-рубрика-подрубрика
    Не отображается вторая страница. Как решить эту проблему? За ранее спасибо.

  11. Ann

    Здравствуйте. Не могли бы вы подсказать, у меня не получается переименовать английскую ссылку «HOME». Она находится сразу под шапкой под верхним меню на некоторых страницах, к примеру, на этой http://grafstudia.ru/vizitki/
    Это что-то вроде меню «хлебных крошек». Я думала что нужно просто открыть файл темы functions.php или может быть single.php и там просто найти слово «HOME» и вместо него написать «Главная». На сайте стоит премиум тема Circles. Но, там я не обнаружила ничего подобного. И не только там, я искала везде, где по моему мнению это могло быть (и где не могло тоже). Сил моих уже просто нет, подскажите, пожалуйста, как это исправить.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *