Улучшаем навигацию — хлебные крошки на WordPress!

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

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

Начну, пожалуй, эту статью с очередной порцией свежих новостей из моей жизни! Многие из Вас ждут новых интересных конкурсов, правда? Ждать осталось не долго, в ближайшее время опубликую в одной из своих статей! Я про Вас не забыл :arrow:

На данный момент работаю над своим авторским видео-курсом! Что за курс? Пока секрет! Не хочу говорить заранее, лучше покажу потом готовый вариант!Могу сказать лишь одно: он не совсем относится к моей тематике (не про создание блогов и сайтов)! Мои друзья и знакомые навели меня на мысль о создании этого курса, постоянно атакуя вопросами как/зачем/почему/помоги! :shock: В общем, работа кипит - уже записал пару уроков...

Еще, наконец-то, заказал у дизайнера свой авторский логотип - цена вопроса 1200 руб.! В этом моя ошибка... Нужно было изначально решить этот вопрос... Теперь придется переделывать все картинки, или может забить?! Как считаете?

Хотел изначально сам нарисовать что-нибудь, да что-то муза не пришла :razz: Пусть работает профи! Когда работа будет закончена - хочу услышать Ваше мнение (гуд или не гуд)!Все нарадоваться не могу декрету моей дорогой супруге - блинчики, фаршированные перцы, пельмешки - ммм... Жена в декрете - это Здорово! Так что, отправляйте своих жен в декрет :razz: А потом, вернемся к теме статьи, а именно к хлебным крошкам...

Что же такое - Хлебные крошки?

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

Многие вебмастера называют их навигационной цепочкой. Находится такая цепочка над заголовком статьи. Благодаря «хлебным крошкам» пользователь может быстро сориентироваться, в какой рубрике и в каком разделе находится данный пост.Например, если ваш сайт имеет сложную структуру, и на нем есть не только разделы, но и подразделы, то при обычной навигации одно звено цепочки будет потеряно и будет выглядеть так: «Главная — Подраздел — Статья». А вот если на вашем сайте установлены «хлебные крошки», то читатель увидит полную картинку, т.е. «Главная — Раздел — Подраздел — Статья».

Постраничная навигация WordPress не только удобна для посетителей, она также играет немаловажную роль в продвижении сайта (блога). «Хлебные крошки» улучшают перелинковку - поисковые роботы будут проще и быстрее индексировать страницы сайта.

Как сделать хлебные крошки на WordPress?

Постраничную навигацию можно сделать двумя способами. Скачать и установить специальный плагин, который поможет вам это сделать. Либо, сделать эту функцию простым и надежным php-кодом. Рассмотрим подробнее каждый из этих способов.

Если вы решили воспользоваться плагином, то можете скачать специально разработанный для этой цели компонент BreadCrumb XT.Чтобы установить плагин BreadCrumb XT, откройте свою административную панель, выберите пункт «Плагины», далее перейдите в подпункт «Добавить новый». Скопируйте название плагина, вставьте его в поисковую строку и нажмите Enter. Увидели, установили и активировали. Все просто!

Переходим в меню «Настройки», опа, видим новый пункт Breadcrumb NavXT! Теперь можно настроить навигацию хлебных крошек - выбрать удобный для вас вариант пути, длину, ширину и так далее. Можно убрать из навигационной цепочки название статьи (записи), чтобы его не повторять.

Следующим шагом будет установка специального кода, который найдете в плагине - в файл header.php или single.php. Смотря где хотите разместить элемент навигации.

Кстати, хлебные крошки присутствуют и в плагине WordPress SEO by Yoast, который я недавно установил и настроил. Скоро напишу на него обзор! Подпишись и не пропустишь...

Хлебные крошки без плагина - кодом!

Для этого вам понадобится в файл functions.php своей вордпресс-темы внести такой код:

[sociallocker]

/* Хлебные крошки */
function navibreadsavme() {
echo '

Главная » 
';
$categories = get_the_category();
if($categories[0]){
echo '
'. $categories[0]->name . ' » ';
}
echo '
';
echo the_title();
echo '

';
}

[/sociallocker]

Чтобы вывести навигационную цепочку на страницы вашего сайта (блога), добавьте в файлы вашей темы следующий код:

После чего на страницах вашего веб-ресурса появятся «хлебные крошки». Но если вам необходимо придать навигационной цепочке более красивый вид, то потребуется прописать стили в файле css.

Для этого, перейдем на вкладку "внешний вид" --> "редактор" и вставьте предложенный код. Если разбираетесь, то можете изменить - размер шрифта, цвет ссылок и прочее.

.navibreadsavme{float:left;margin:0;overflow:hidden;}
.navibreadsavme a{font-size:12px;color:#6699cc;text-decoration:none;}
.navibreadsavme > span{color:#555;}

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

А я Вам говорю - До свидания! До встречи в новой статье!

Вверх