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

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

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

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

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

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

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

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

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

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

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

На фото показаны хлебные крошки одного популярного интернет-магазина одежды. Здесь мы видим, что оба товара джинсов находятся в 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 сайта:

  1. В Админке WordPress переходим в пункт SEO >> Дополнительно:

Красивые хлебные крошки WordPress: настройка, дизайн2. Загрузится страница дополнительных настроек плагина WordPress SEO by Yoast. Здесь нас интересует страница «Навигационная цепочка (breadcrumbs)»:


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

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

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

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

В файл: single.php

после строки: get_header(); ?>

до строки: <div id=»primary» class=»content-area»>

Вставляем код:

Как убрать название статьи в «хлебных крошках»

Дальше нужно понять необходимо вам убрать «последнюю ветку», то есть название статьи, или ненужно!!! Если необходимо убрать, то копируем и вставляем код в файл темы functions.php:

Открываем файл темы functions.php и в самом начале после октрывающегося php вставляем:

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

Как изменить внешний вид «хлебных крошек» с помощью CSS

  1. На скриншоте выше блок получился довольно симпатичным, но на некоторых сайтах по умолчанию получается крайне некрасиво. Что мы делаем? Просто присваиваем любой CSS класс «хлебным крошкам»:

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

2. И уже в style.css своей темы прописываем те стили, которые нам нужны, в моем случае это выглядит так:

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

Напомню, вы можете с легкостью скопировать стиль любого понравившегося элемента на любом сайте, просто использовав Firebug (дополнение для Firefox), да и прямо в нем можете «поиграться» со шрифтами и прочее, чтобы понять, как лучше будет для Вашего сайта. С моими стилями получилось вот что (оформление, по-моему, очень даже симпатичное):

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

Статья взята из открытых источников:

1. http://samsebewebmaster.ru/samouchitel-wordpress/xlebnye-kroshki-wordpress.html

2. http://wpnew.ru/raskrutka-bloga/seo_optimizaciya/hlebnye-kroshki.html

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