Красивые хлебные крошки WordPress: настройка, дизайн
Опубликовано: 01.09.2018
Здравствуйте, уважаемые читатели. В этой статье я подробно распишу, что такое хлебные крошки WordPress, как их сделать с помощью крутого SEO-плагина, настроить за пару минут и красиво оформить, вписав в любой дизайн.
Хлебные крошки — это важный элемент навигации сайта, который выполняет две основные функции: повышение юзабилити (удобство использования элементов и контента сайта) и создание правильной перелинковки сайта. Обычно хлебные «крохи» выполняются в виде строки, в которой указать путь по сайту от главной страницы до последнего раздела, в котором находится статья или товар. Посмотрим на примерах:
Как видно на рисунке хлебные крошки это цепочка вложенных в друг друга ссылок, обозначающих положение пользователя в структуре сайта.
Функции хлебных крошек
Разберем каждую функцию поподробнее.
Во-первых, повышение юзабилити сайта . Основная функция хлебных крошек — это указать пользователю, где он находится, в каком разделе, подразделе и так далее находится статья или товар, которую он читает в данный момент.
Смотрим на еще один пример:
На фото показаны хлебные крошки одного популярного интернет-магазина одежды. Здесь мы видим, что оба товара джинсов находятся в 4 категориях:
Мужчинам (женщинам); Мужская одежда (женская одежда); Джинсы; Прямые джинсы.Пользователь в любой момент может вернуться в необходимую категория не используя более сложные элементы навигации.
Во-вторых, создание правильной перелинковки . Перелинковка — это один из самых высокоэффективных и бесплатных методов продвижения сайта, который особенно важен для продвижения НЧ запросов.
Хлебные крошки же, являясь одним из самых простых способов перелинковки, отлично помогают распределять ссылочный вес главной страницы, категорий и статей между собой.
Стоит ли устанавливать хлебные крошки на блог
Хлебные крошки хоть и считаются важным элементом навигации, их использование не всегда уместно. Допустим у вас блог на очень узкую тему, которую удалось разбить на 3, 4 или 5 рубрик. Структура сайта при этом очень проста и понятна. В таком случае использование хлебных крошек не обязательно.
Многие SEOшники рекомендуют использовать хлебные крошки, только если блог имеет рубрики, разбитые на подрубрики, или более сложную структуру. Я не согласен с таким мнением, поэтому провожу ряд экспериментов в этом направление.
Результатами эксперимента поделюсь в отдельной статье.
Также многие специалисты в поисковом продвижение рекомендуют
В последнее время у меня стоят хлебные крошки созданные с помощью функционального SEO плагина WordPress SEO by Yoast. Данный плагин позволяет создавать довольно неплохие хлебные крошки. Вот несколько плюсов:
если у вас стоит WordPress SEO by Yoast нет необходимости в сторонних плагинах и решениях; плагин вместе с рубриками выводит и подрубрики, отображая полную структуру сайта; возможно изменить текст ссылки на главную страницу; установка разделителя и префикса; установка формата таксономии (рубрики, метки и т.д.) выделение последней страницы жирным; с помощью CSS можно поэкспериментировать с оформлением хлебных крошек.Хотя этот плагин реализует данную функцию далеко не идеально, в скором времени с ближайшими обновлениями, думаю, разработчики добавят недостающие возможности.
Настройка и создание хлебных крошек с помощью плагина WordPress SEO by Yoast
В этой статья я расскажу, как создать, настроить и оформить хлебные крошки с помощью плагина WP SEO by Yoast. Данный плагин я всем рекомендую использовать в качестве основного SEO плагина.
Начну с самого начала — установки плагина. Скачать плагин можно здесь страница на WP.org . Устанавливить плагин.
Теперь можно приступать к непосредственному редактированию хлебных крошек WordPress сайта:
В Админке WordPress переходим в пункт SEO >> Дополнительно:
2. Загрузится страница дополнительных настроек плагина WordPress SEO by Yoast. Здесь нас интересует страница «Навигационная цепочка (breadcrumbs)»:
Пробежимся по настройкам:
Пункт Включить навигационную цепочку (breadcrumbs) — ставим галочку. Но для появления хлебных крошек на сайте необходимо установить в код сайта следующую php функцию, которая отвечает за вывод: Устанавливаем разделитель , в данном поле можно вставить любой символ поддерживаемый HTML5. Вот парочка вариантов: Текст ссылки на главную страницу — Можно установить домен или просто «Главная»; Префикс (основной) — слово или символ перед всеми хлебными крошка. У меня, например, вот такая стрелочка ➥ Префикс навигационной цепочки для архивов — тоже что и выше только для страниц Архивов; Префикс навигационной цепочки для страниц с результатами поиска — для результатов поиска; Навигационная цепочка для страницы 404 — для страниц с кодом ответа 404 Выделить жирным шрифтом последнею страницу в навигационной цепочке — данный пункт можно назвать ненужным переспамом. Так как зачастую последняя страница в навигационной цепочке бывает идентична заголовку страницы; Таксономия, которая будет показана в навигационной цепочке для типов Записей — выбираем между рубриками (рекомендовано), метками и форматами. Сохраняем изменения.После того, как функции вывода хлебных крошек полностью настроены, необходимо добавить PHP код плагина WP SEO by Yoast:
В файл: single.php
после строки: get_header(); ?>
до строки: <div id=”primary” class=”content-area”>
Вставляем код:
|
<?php if ( function_exists ( 'yoast_breadcrumb' ) ) { yoast_breadcrumb ( ' <p id="breadcrumbs">' , '</p> ' ) ; } ?> |
Как убрать название статьи в “хлебных крошках”
Дальше нужно понять необходимо вам убрать “последнюю ветку”, то есть название статьи, или ненужно!!! Если необходимо убрать, то копируем и вставляем код в файл темы functions.php :
Открываем файл темы functions.php и в самом начале после октрывающегося php вставляем:
|
<?php if ( function_exists ( 'yoast_breadcrumb' ) ) { yoast_breadcrumb ( '<p id="breadcrumbs">' , '</p>' ) ; } ?> |
Как изменить внешний вид “хлебных крошек” с помощью CSS
На скриншоте выше блок получился довольно симпатичным, но на некоторых сайтах по умолчанию получается крайне некрасиво. Что мы делаем? Просто присваиваем любой CSS класс “хлебным крошкам”:
2. И уже в style.css своей темы прописываем те стили, которые нам нужны, в моем случае это выглядит так:
Напомню, вы можете с легкостью скопировать стиль любого понравившегося элемента на любом сайте, просто использовав Firebug (дополнение для Firefox), да и прямо в нем можете “поиграться” со шрифтами и прочее, чтобы понять, как лучше будет для Вашего сайта. С моими стилями получилось вот что (оформление, по-моему, очень даже симпатичное):
Статья взята из открытых источников:
1. http://samsebewebmaster.ru/samouchitel-wordpress/xlebnye-kroshki-wordpress.html
2. http://wpnew.ru/raskrutka-bloga/seo_optimizaciya/hlebnye-kroshki.html
Похожие статьи:
