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

Приветствую всех читателей блога seversantana.ru. Хлебные крошки или breadcrumbs используются на многих сайтах как Рунета, так и буржуйнета. Так как мой блог работает на WordPress в этой статье я расскажу о способах их создания именно на этом движке, с использованием плагинов или без них.

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

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

к оглавлению ↑

Хлебные крошки на сайте для чего они нужны?

Что такое хлебные крошки для сайта? Это отображение структуры сайта. Применимо к этой статье на моем блоге, работающем на WordPress, breadcrumbs выглядели следующим образом:

Вид хлебных крошек в купленной мной теме

В моем случае навигационная цепочка отображается ниже названия статьи. Другой вариант реализации сначала breadcrumbs, далее название публикации. Какой вариант выбирать — дело вкуса. Я лично ничего не выбирал. В купленной мной теме так было реализовано по умолчанию. Но для своего блога я все переделаю, так как мне по душе больше вариант, когда навигация находится выше названия статьи, и не дублируется непосредственно тайтл публикации.

Как видите, благодаря breadcrumbs прослеживается структура сайта, видно к какой рубрике (категории, разделу) относится статья. При желании посетитель сайта может кликнуть на название рубрики к которой относится читаемая им статья, и просмотреть другие публикации входящие в нее. Соответственно использование хлебных крошек улучшает юзабилити сайта, появляется удобная навигация. Посетителю показывается путь начиная с главной страницы сайта проходящий через рубрику к открытой странице.

Хлебные крошки улучшают (ускоряют) индексацию сайта так, как появляются дополнительные внутренние ссылки. Соответственно усиливается внутренняя перелинковка сайта. Их наличие на сайте несет с собой только одни плюсы, и никаких минусов. Поэтому если на вашем сайте их нет, не сомневайтесь в их пользе и отсутствии вреда, приступайте к реализации.

к оглавлению ↑

Создание хлебных крошек с плагином Yoast WordPress SEO

Хлебные крошки в WordPress с помощью плагина SEO BY YOAST

Если на вашем вордпрессовском движке установлен лучший на сегодняшний день SEO — комбайн SEO BY YOAST, считайте ваша задача уже решена.

У меня на блоге стоит именно этот плагин. Рассмотрим все действия пошагово.

В админ панели WordPress во вкладке SEO, где находятся настройки плагина Yoast WordPress SEO выбираем пункт «Расширенный», и кликаем на него. В открывшейся вкладке включаем breadcrumbs поставив галочку в чекбокс напротив надписи — Включить «хлебные крошки». После этого откроется окно в котором нужно произвести настройки.

Я заполнил их следующим образом:

Настройки breadcrumbs в Yoast WordPress SEO

Разделитель оставил по умолчанию. В качестве текста ссылки на главную выбрал наименование домена своего блога — seversantana.ru. Следующие поля оставил пустыми. В пункте таксономии для записи выбрал «Рубрика». Вот и все настройки. Жмем на «Сохранить изменения».

Здесь же, перед кнопкой сохранения отображается код, который нужно разместить в файлах движка WordPress.

Для того чтобы хлебные крошки отображались в статьях блога редактируем файл одиночной записи. Обычно в темах это single.php. Открываем этот файл на редактирование, находим в верхней части строку, отвечающую за вывод заголовка и вставляем перед ней или после нее следующий код:
Вставка кода в single.phpЯ разместил код перед заголовком статьи, получилось так:

Дублирование тайтла в навигаци

Замечательно и красиво. Можно оставить и так, а можно убрать дубль, выделенный мной на скриншоте красной чертой (решение подсмотрел на http://mojwp.ru/). Получится так:

Внешний вид без дублирования

Для того чтобы удалить дубль названия статьи в файле functions.php используемой темы прописываем следующий код:

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

Для отображения хлебных крошек на статичных страницах сайта, таких как «Карта сайта», «О блоге» и др., редактируем файл используемой темы page.php. Я, как и в случае с записями блога, вставил предлагаемый код плагина отвечающий за вывод выше строки выводящей заголовок, т. е. выше этой строки:

<h1 class=”post-title”><?php the_title() ?></h1>

Но это так для интереса, breadcrumbs в окончательном варианте я реализовал только в статьях.

Не во всех темах WordPress все будет сладко и гладко. Я в своей теме правил стили CSS для того, чтобы все отображалось так, как мне хочется. Для этого открыл свой сайт в браузере Мозилла, и при помощи расширения Firebug где и, что можно сделать. После этого подправил стили CSS используемой темы, в основном изменив отступы между элементами.
Давайте рассмотрим варианты для тех, кто не использует плагин Yoast WordPress SEO.

к оглавлению ↑

Настройка хлебных крошек с плагином Really Simple Breadcrumb

Одно из наиболее легких решений для Вордпресс. Все делается быстро и без проблем. Работает корректно и без багов, отображается согласно CSS используемой темы.

Устанавливаем и активируем плагин Really Simple Breadcrumb удобным для себя способом. Я обычно это делаю через админ панель своего блога. Во вкладке «Плагины» кликаю на «Добавить новый», и в строке поиска набираю название плагина, жму на Enter.
Далее, устанавливаю, и активирую нужный мне плагин.

Установка и активация Really Simple Breadcrumb

Для отображения хлебных крошек в файле single.php (статьи) и page.php (статические страницы), прописываем в нужном месте следующий код:

Я это делаю выше строки отвечающей за вывод заголовка. В моем случае она выглядит так:

<h1 class=»post-title»><?php the_title() ?></h1>,

где <?php the_title() ?>— выводит заголовок.

Вот и все. Плагин работает красиво и корректно.

breadcrumbs с Really Simple Breadcrumb

Если хотите убрать дубли заголовков публикаций и статических страниц блога в навигационной строке, нужно будет закомментировать пару строчек в файле breadcrumb.php установленного плагина.

Тридцатая строка выглядит так the_title();,
после комментирования так /*the_title();*/

В наших статьях дублей теперь нет.

навигационная цепочка с Really Simple Breadcrumb

И сорок пятая строка выглядит так echo the_title();,
после комментирования так /*echo the_title();*/ .

Теперь на статических страницах дублей тоже нет.

Также в файле breadcrumb.php в 17 строке можно изменить внешний вид разделителя на свой.

Все хорошо, но в этом варианте отсутствует микроразметка. Для чего она нужна? С микроразметкой хлебные крошки в сниппете выдачи Гугл будут отображаться вместо URL. А это внешне намного привлекательнее и повышает CTR (кликабельность).

Хлебные крошки в поисковой выдаче Google

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

к оглавлению ↑

Хлебные крошки в WordPress — DP RDFa Breadcrumb Generator

Плагин DP RDFa Breadcrumb Generator специально заточен создателем под SEO. За микроразметку беспокоиться не придется, впрочем, как и в случае с первым вариантом — SEO BY YOAST.

После установки и активации плагина DP RDFa Breadcrumb Generator, в админпанели Вордпресс, во вкладке «Настройки» жмем на DP RDFa Breadcrumb.

В первом окне создатель Danilo Petrozzi расхваливает свой плагин, рассказывая о том, насколько его разметка для Google идеальна. О том, что сподвигло его на создание DP RDFa Breadcrumb Generator отсутствие достойной альтернативы.

Следом идет PHP код для вставки в файлы WordPress :

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

Далее, приступаем к настройкам плагина.Я настроил его следующим образом. В этих настройках оставил все по умолчанию:
Настройка плагина DP RDFa Breadcrumb Generator
Выбрал разделитель.
Разделитель в цепочке навигации
Далее, производим следующие настройки.
Настройка название главной страницы
Напротив текста — Text before the breadcrumb trail: прописываем текст отображаемый перед хлебными крошками, если вам это надо.
Что-то типа — Вы здесь:
Просто так пустым это поле оставить не получится. Как вариант можно поставить какой-нибудь из разделителей. Допустим, этот — | . Или придется редактировать файл установленного плагина dp-rdfa-breadcrumb-generator-opt.php. А именно удалить текст — You are here: . Находится он в 15 строке файла.

Напротив текста — Homepage anchor text: прописываем название главной.
Варианты:
-Главная;
-Домой;
— (название своего сайта).

Остальные настройки я выставил следующим образом:
Удаление дубля в настройках продвинутого плагина
Настройку — Always show the last child if it’s a post — отключил. Убрал дублирование заголовка статьи в хлебных крошках.

к оглавлению ↑

Хлебные крошки в Вордпресс без плагина

Интересный вариант реализации представлен небезызвестным Тимуром Камаевым на блоге WP-Kama. Все сделано с учетом разметки. Автор утверждает, что его функция не хуже, а в некоторых моментах даже лучше, чем самый используемый для этого дела плагин WordPress — Breadcrumb NavXT. Не хотите использовать плагины попробуйте breabcrumbs от Тимура.


Оцените статью:
Очень плохоПлохоСреднеХорошоОтлично (голосов: 6, в среднем: 3,67 из 5)
Загрузка...


Рекомендую почитать:

            

Подпишись на обновления блога!

Введите ваш email:


Мой канал о трейдинге в Телеграме
Новые комментарии на блоге
Вверх
© 2017    seversantana.ru | Все права защищены                   Измененная Тема Web Factory от Goodwin