Красивые хлебные крошки WordPress: настройка, дизайн

Здравствуйте, уважаемые читатели блога SamSebeWebmaster.ru, в этой статье я подробно распишу, что такое хлебные крошки WordPress, как их сделать с помощью крутого SEO-плагина, настроить за пару минут и красиво оформить, вписав в любой дизайн.

Хлебные крошки — это важный элемент навигации сайта, который выполняет две основные функции: повышение юзабилити (удобство использования элементов и контента сайта) и создание правильной перелинковки сайта. Обычно хлебные «крохи» выполняются в виде строки, в которой указать путь по сайту от главной страницы до последнего раздела, в котором находится статья или товар. Посмотрим на примерах:

Примеры хлебных крошек с различных сайтов

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

Функции хлебных крошек

Разберем каждую функцию поподробнее.

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

Смотрим на еще один пример:

Примеры хлебных крошек популярного интернет-магазина

На фото показаны хлебные крошки одного популярного интернет-магазина одежды. Здесь мы видим, что оба товара джинсов находятся в 4 категориях:

1. Мужчинам (женщинам);
2. Мужская одежда (женская одежда);
3. Джинсы;
4. Прямые джинсы.

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

Во-вторых, создание правильной перелинковки. Перелинковка — это один из самых высокоэффективных и бесплатных методов продвижения сайта, который особенно важен для продвижения НЧ запросов.

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

Стоит ли устанавливать хлебные крошки на блог

Хлебные крошки хоть и считаются важным элементом навигации, их использование не всегда уместно. Допустим у вас блог на очень узкую тему, которую удалось разбить на 3, 4 или 5 рубрик. Структура сайта при этом очень проста и понятна. В таком случае использование хлебных крошек не обязательно.

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

Результатами эксперимента поделюсь в отдельной статье.

Также многие специалисты в поисковом продвижение рекомендуют

Хлебные крошки WordPress для сайта

В последнее время у меня стоят хлебные крошки созданные с помощью функционального SEO плагина WordPress SEO by Yoast. Данный плагин позволяет создавать довольно неплохие хлебные крошки. Вот несколько плюсов:

• если у вас стоит WordPress SEO by Yoast нет необходимости в сторонних плагинах и решениях;
• плагин вместе с рубриками выводит и подрубрики, отображая полную структуру сайта;
• возможно изменить текст ссылки на главную страницу;
• установка разделителя и префикса;
• установка формата таксономии (рубрики, метки и т.д.)
• выделение последней страницы жирным;
• с помощью CSS можно поэкспериментировать с оформлением хлебных крошек.

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

Настройка и создание хлебных крошек с помощью плагина WordPress SEO by Yoast

В этой статья я расскажу, как создать, настроить и оформить хлебные крошки с помощью плагина WP SEO by Yoast. Данный плагин я всем рекомендую использовать в качестве основного SEO плагина.

Начну с самого начала — установки плагина. Скачать плагин можно здесь страница на WP.org. Если не знаете, как устанавливаются плагины, вот подробная статья в помощь — как установить плагины WordPress. Настройка плагина я описал в статье WordPress SEO by Yoast.

Теперь можно приступать к непосредственному редактированию хлебных крошек WordPress сайта:

1. В Админке WordPress переходим в пункт SEO >> Дополнительно:
2. Загрузится страница дополнительных настроек плагина WordPress SEO by Yoast. Здесь нас интересует страница «Навигационная цепочка (breadcrumbs)»:

Пробежимся по настройкам:

1. Пункт Включить навигационную цепочку (breadcrumbs) — ставим галочку. Но для появления хлебных крошек на сайте необходимо установить в код сайта следующую php функцию, которая отвечает за вывод:

2. Устанавливаем разделитель, в данном поле можно вставить любой символ поддерживаемый HTML5. Вот парочка вариантов:
   • ➤
   • ►
   • ▷
   • ⇨
   • →
   • ☞
3. Текст ссылки на главную страницу — Можно установить домен или просто «Главная»;
4. Префикс (основной) — слово или символ перед всеми хлебными крошка. У меня, например, вот такая стрелочка ➥
5. Префикс навигационной цепочки для архивов — тоже что и выше только для страниц Архивов;
6. Префикс навигационной цепочки для страниц с результатами поиска — для результатов поиска;
7. Навигационная цепочка для страницы 404 — для страниц с кодом ответа 404
8. Выделить жирным шрифтом последнею страницу в навигационной цепочке — данный пункт можно назвать ненужным переспамом. Так как зачастую последняя страница в навигационной цепочке бывает идентична заголовку страницы;
9. Таксономия, которая будет показана в навигационной цепочке для типов Записей — выбираем между рубриками (рекомендовано), метками и форматами.
10. Сохраняем изменения.

После того, как функции вывода хлебных крошек полностью настроены, необходимо добавить PHP код плагина WP SEO by Yoast:

1
2

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