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

1. Функції хлібних крихт
2. Чи варто встановлювати хлібні крихти на блог
3. Налагодження та створення хлібних крихт за допомогою плагіна WordPress SEO by Yoast
4. Як прибрати назву статті в "хлібних крихтах"
5. Як змінити зовнішній вигляд "хлібних крихт" за допомогою CSS

Привіт, шановні читачі. У цій статті я детально розпишу, що таке хлібні крихти WordPress, як їх зробити за допомогою крутого SEO-плагіна, налаштувати за пару хвилин і красиво оформити, вписавши в будь-який дизайн.

Хлібні крихти - це важливий елемент навігації сайту, який виконує дві основні функції: підвищення юзабіліті (зручність використання елементів і контенту сайту) і створення правильної перелинковки сайту. Зазвичай хлібні «крихти» виконуються у вигляді рядка, в якій вказати шлях по сайту від головної сторінки до останнього розділу, в якому знаходиться стаття або товар. Подивимося на прикладах:

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

Функції хлібних крихт

Розберемо кожну функцію детальніше.

По-перше, підвищення юзабіліті сайту. Основна функція хлібних крихт - це вказати користувачеві, де він знаходиться, в якому розділі, підрозділі і так далі знаходиться стаття або товар, яку він читає в даний момент.

Дивимося на ще один приклад:

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

1. Чоловікам (жінкам);
2. Чоловічий одяг (жіночий одяг);
3. джинси;
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 сайту:

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

2. Завантажиться сторінка додаткових налаштувань плагіна WordPress SEO by Yoast. Тут нас цікавить сторінка «Навігаційна ланцюжок (breadcrumbs)»:

Пробіжимося з налагодження:

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">

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

<? 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

1. На скріншоті вище блок вийшов досить симпатичним, але на деяких сайтах за замовчуванням виходить вкрай некрасиво. Що ми робимо? Просто присвоюємо будь 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

Схожі статті: