<
  • Главная
Статьи

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



Новости
    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Топ 10 WordPress плагинов за июль 2013
    Всем приветы, уважаемые читатели. Новые WordPress плагины продолжают прибывать и прибывать. И сегодня, очередная подборка замечательных и  разумеется, полезных плагинов от Криса Евера. Как всегда,

    Как сделать кнопку "наверх" на WordPress блоге без плагина и с помощью плагина Scroll to Top
    Привет, Друзья! По просьбам читателей сегодня я расскажу как сделать кнопку “наверх” на WordPress блоге. Я думаю, нет необходимости объяснять для чего нужда такая кнопка? Все итак понимают, что при нажатии

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью

rss