Хлебные крошки для вордпресс — зачем они нужны и как их вывести

Рубрика: Блогинг
хлебные крошки для wordpress
Автор:
Дата:

Всем привет! Хлеб любите? А крошки со стола сразу убираете? Меня с детства приучили убирать, как только порезал булку. Да и вообще, родители быстро заставили полюбить чистоту и порядок — во время вымытую посуду, убранные вещи и так далее. Честно сказать, я благодарен им за это.

Что-то забылся, не в те «степи» пошел, не о тех крошках заговорил, а посуда и порядок тут вообще не причём, наверное, просто детство вспомнил.

Итак, давайте поговорим о тех самых крошках, их происхождении. Если вы читали сказку Братьев Гримм про Гензеля и Гретель, то наверняка помните один момент – чтобы добраться домой (вернее найти обратную дорогу), Гензель крошил хлеб в кармане, затем останавливался и бросал крошки на землю.

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

Пример и значение крошек

Для тех, кто до сих пор не понял о чём идёт речь, специально показываю скриншот с примером крошек на моём блоге:

хлебные крошки на моём блоге

Я выделил их красной рамкой. Заметьте, в отличии от многих блогов и сайтов, навигационная цепочка (крошки) заканчивается на рубрике, в нашем случае – блогинг. Т.е. хлебные крошки имеют вид: Главная -> Рубрика и на этом всё. Не вижу смысла туда добавлять название статьи. Ведь это лишняя информация, которая не представляет никакой ценности для читателя – он и так знаeт какой пост сейчас изучает.

Более того, из-за вывода в навигационной цепочке названия поста, на одной странице, в небольшой области, увеличивается концентрация одинаковых ключевых фраз, причём происходит их полное копирование. Как бы это дело назвать? Наверное, переоптимизацией.

Тогда какую пользу дают «Главная -> Рубрика»? Улучшение поведенческих факторов, так как упрощение навигации по блогу – есть способ задержать посетителя и заставить его перейти в рубрику с похожими постами.

Читайте также:  Что такое мотивация у человека и как себя мощно мотивировать

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

сниппеты появляющиеся в выдаче благодаря крошкам

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

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

Как поставить крохи на своём блоге с помощью плагина?

Друзья, чаще всего я слышу, что оптимизаторы создают вывод крошек с помощью плагина Breadcrumb NavXT — неплохой вариант. Хотя, у меня они выводятся с помощью кода (верстальщики в своё время постарались), о нём мы ещё поговорим, позже. Но на одном из своих проектов, я работал с плагином Yoast SEO, который замечательно справляется с данной функцией.

Для начала необходимо его установить. Для чего переходим в поле поиска плагинов (в админке) и находим его:

поиск и установка yoast seo

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

выбираем дополнительно для включения функции крошек

Перед нами появятся три вкладки: навигационная цепочка (breadcrumbs), постоянные ссылки и rss. Чтобы активировать цепочку (именно она нам и нужна), нажимаем кнопочку Enabled:

активация breadcrumbs

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

заполняем поля настройки yoast крошек

И не забывайте про таксономию, которая находится в самом низу.

Теперь, перед нами стоит задача по добавлению специального кода в один из файлов нашего блога. По идее, его можно добавить в single.php или page.php, но я всё-таки предпочел первый вариант.

Читайте также:  Что такое блог и зачем он нужен обычным людям

Ссылку на этот код можно найти там же, где мы настраивали наш плагин. Сам он выглядит следующим образом:

<?php if ( function_exists ('yoast_breadcrumb') )

{yoast_breadcrumb ('<p id="breadcrumbs">','</p>');} ?>

Чтобы вставить этот код в single.php, мне потребовалось открыть редактор (или файл на хостинге) и найти следующую строчку:

вставляем код в single.php

Именно над ней нам и потребуется вставить этот код. Хотя нет, пожалуй, я вставлю ещё выше, как на скриншоте:

вставили код для вывода постраничной навигации

Вот такой получилась навигационная цепочка у меня:

навигационная цепочка у меня

К сожалению, вид появившихся крошек может оставлять желать лучшего, поэтому нам потребуется их немного подправить с помощью стилей css. Для чего добавляем (присваиваем) CSS класс, как у меня:

добавляем класс к breadcrumb

А уже потом, в файле style.css (в редакторе админки или на хостинге) присваеваем те стили, которые вам нужны. У меня на скриншоте, в плане кода, всё правильно, но с настройками цветов, отступов и т.д., поиграйтесь сами.

стили для breadcrumb

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

  • .breadcrumbs {font-size: 13px; color: #666; line-height: 1.8; margin-bottom: 0px;}
  • .breadcrumbs a {color: #3677dd; border-bottom: 1px solid #c0e4fc;}
  • .breadcrumbs a:hover {color: #68c098; border-bottom-color: #c0e66;}

Как убрать название статьи в крошках?

Чтобы убрать крайнюю «ветку», нам потребуется следующий код:

  • function adjust_single_breadcrumb ( $link_output) {
  • if (strpos ( $link_output, 'breadcrumb_last' ) !== false ) {
  • $link_output = '';
  • }
  • return $link_output;
  • }
  • add_filter ('wpseo_breadcrumb_single_link', 'adjust_single_breadcrumb' );

Его мы вставим в функции темы (functions.php), после открывающего тега PHP:

как убрать название статьи из крошек

Всё, сохраняем файл и проверяем любой из своих постов на наличие названия в хлебных крошках.

Как вывести крошки с помощью кода?

К счастью, для не любителей плагинов имеется возможность выводить навигационную цепочку с помощью специального кода. Я сразу его предоставлю с элементами микроразметки. Кстати, прошу заметить – крошки которые мы выводили с помощью плагина, не требуют дополнительных вмешательств для восприятия их поисковыми системами. В общем, у Yoast Seo всё впорядке с микроразметкой.

Читайте также:  Защита админки блога на wordpress от взлома за несколько шагов

Ладно, держите обещанный код:

  • function my_breadcrumb () {
  • echo '<div xmlns:v="http://rdf.data-vocabulary.org/#">
  • <div class="breadcrumb" itemscope itemtype="http://data-
  • vocabulary.org/Breadcrumb">
  • <a href="/" itemprop="url">
  • <span itemprop="title">Pro-wordpress</span></a>&nbsp;»&nbsp;</div>
  • <div class="breadcrumb" itemscope itemtype="http://data-
  • vocabulary.org/Breadcrumb">';
  • $categories = get_the_category ();
  • if ($categories[0]){
  • echo '<a href="' . get_category_link ($categories[0]->term_id ) . '"
  • itemprop="url">
  • <span itemprop="title">'. $categories[0]->name .
  • '</span></a>&nbsp;»&nbsp;';
  • }
  • echo '</div>
  • <div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  • <span itemprop="title">';
  • echo the_title ();
  • echo '</span></div>
  • </div>';
  • }

Для вывода хлебных крошек на страницах вашего сайта нужно добавить код в single.php:

  • <div class="breadcrumbs">
  • <?php
  • my_breadcrumb ();
  • ?>
  • </div>

И вот уже после этого, на вашем блоге должна появится навигационная цепочка. Правда, чтобы изменить стиль крошек, вам потребуется вставить в уже знакомый файл style.css, этот код:

  • .breadcrumbs{margin: -5px 0 5px 3px; /* отступы */
  • overflow: hidden;
  • }
  • .breadcrumbs a {color: #34a6d2; /* цвет ссылок */
  • text-decoration: underline;
  • }
  • .breadcrumb > span {color: #666; /* цвет конечного пункта */
  • }
  • .breadcrumb{  float:left;}

Ладно, пора бы на этом заканчивать, а то уже совсем голова опухла от всех этих плагинов и кодов. Очень надеюсь, что я смог ответить на вопрос о том, как сделать хлебные крошки на WordPress с плагином и без него.

Чуть не забыл, недавно написал интересный пост о том, как проверить позиции сайта в поисковых системах — очень рекомендую к прочтению!

Удачи и всего доброго, ребята!

С Уважением, Максим.

На мою рассылку подписались 9000 человек! Скорей подпишись и получи от меня подарок.

Комментариев к статье: 6

  • Хребтов Александр

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

    16.03.2016 в 12:25 Ответить
    • Максим Бойко

      Не за что)

      16.03.2016 в 12:28 Ответить
  • Дмитрий Рычков

    Спасибо, Максим. Пойду экспериментировать. 🙂 Сегодня в плотную займусь твоими рекомендациями с форума. 😉

    16.03.2016 в 14:41 Ответить
    • Максим Бойко

      Не за что, Дмитрий)

      17.03.2016 в 05:15 Ответить
  • Хребтов Александр

    Вроде бы, получилось) По ходу пьесы перешел с All in one seo pack на Yoast Seo. Правда непонятного пока много, но информации по настройке в сети полно.

    16.03.2016 в 15:28 Ответить
    • Максим Бойко

      Отличный плагин, я уже давно забросил All in one seo pack. Надо обязательно статью о нём написать)

      17.03.2016 в 05:10 Ответить

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

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