Хлебные крошки вордпресс — что это и как их вывести

Рубрика: Блогинг
Автор:
Дата изменения статьи:



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

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

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

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

Хлебные крошки на сайте что это — их назначение

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

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

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

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

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

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

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

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

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

Плагин для вывода хлебных крошек на wordpress

Друзья, чаще всего я слышу, что оптимизаторы создают вывод крошек с помощью плагина 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 всё впорядке с микроразметкой.

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

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 с плагином и без него.

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

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

С Уважением, Максим Бойко

Приветствую! Что такое хлебные крошки вордпресс на вашем сайте и зачем они нужны? В моей статье, вы найдёте ответы на вопросы и узнаете, как их создать

Нажимая на кнопку "подписаться", я даю согласие на рассылку, обработку персональных данных и принимаю политику конфиденциальности (политика под комментариями)

Комментариев к статье: 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 не будет опубликован. Обязательные поля помечены *

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