Хлебные крошки WordPress - установка, настройка и оформление | Сам Себе Вебмастер

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

xlebnye-kroshki-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 >> Дополнительно:Пункт меню Дополнительно Хлебные крошки WordPress SEO by Yoast
  2. Загрузится страница дополнительных настроек плагина WordPress SEO by Yoast. Здесь нас интересует страница «Навигационная цепочка (breadcrumbs)»:

Страница "Навигационная цепочка (breadcrumbs)"

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

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

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

1
2
<?php if ( function_exists('yoast_breadcrumb') ) 
{yoast_breadcrumb('<p id="breadcrumbs">','</p>');} ?>
Дата обновления: 01.05.2016 — 01:03

2 комментария

Добавить комментарий
  1. Спасибо!

  2. Еще один плюс крошек от этого плагина — наличие микроразметки.

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

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

SamSebeWebmaster.ru © 2016, все права защищены.