Как подключить хлебные крошки на сайте фото

Хлібні крихти на сайті – Навіщо? – Як підключити?

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

Як підключити хлібні крихти на сайті фото

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

Звідки пішла назва – хлібні крихти

Вам ймовірно, з самого початку хвилювало питання. Чому взяли таку дивну назву? З одного боку зовсім різні теми.
Є німецька казка про Гензеля і Гретель, які використовували “хлібні крихти” щоб на зворотному шляху вони могли повернутися додому, але на жаль, як ви знаєте (можливо), птиці скльовували крихти.

Звідки пішла назва "хлібні крихти" в SEO фото

На вашому сайті “хлібні крихти” ніхто не склюет і цей ланцюжок завжди зможе вас перенаправити на потрібну вам сторінку.

Як повинні виглядати “хлібні крихти”

Як повинні виглядати “хлібні крихти”:

Приклад хлібні крихти на сайті фото

  1. Створювати ланцюжок бажано підходить під дизайн веб-ресурсу. Тоді значно підвищаться поведінкові чинники. Виходить, що дана ланцюжок впливає на думку користувачів, а значить пошукові системи це врахують і підвищать рейтинг.
  2. Найчастіше хлібні крихти на сайті відображаються в горизонтальному вигляді, в верхній частині сторінки. Можна її поставити знизу сторінки або зробити її вертикальної, але це вже на ваш страх і ризик (не факт, що буде тільки позитивну думку).

Важливо! Кожне посилання “хлібних крихт” повинна бути активна і перенаправляти на потрібний рівень вкладеності, але посилання сторінки на якій ви перебуваєте – нет !!!

В іншому випадку у вас додатися циклічна посилання, а цього допускати не можна.

Модулі WordPress для хлібних крихт

Більшість полігонів вже не оновлюються. Причиною цього є очевидні лідери в даній темі – Breadcrumb NavXT і SEO by Yoast.

Я підібрав 4 плагіна, які добре справляються зі своїм завданням:

Yoast SEOПлагін для хлібних крихт Yoast SEO фото

Даний плагін цікавий тим, що його основною функцією є допомога в оптимізації seo тексту т.д., а вже додатковою функцією є навігаційна ланцюжок (“хлібні крихти”).

Breadcrumb NavXTПлагін для хлібних крихт Breadcrumb NavXT фото

Даний плагін дуже часто скачують на тлі інших (понад 700 тисяч завантажень).

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

Плагін підтримує bbPress і BuddyPress, фільтри, хукі і багато іншого.

BreadcrumbПлагін для хлібних крихт Breadcrumb фото

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

Є функція додавання тексту на початку елемента і настройка типу роздільник між рівнями сторінок.

Prime Strategy Bread CrumbПлагін для хлібних крихт prime strategy bread crumb фото

Непоганий варіант з гнучкими настройками навігаційної ланцюжка.

Плагін має підтримку css-стилів і багато іншого.

Як підключити хлібні крихти на сайті в Yoast SEO?

Можна дізнатися в огляді від Yoast з усіма подробицями. Я лише розповім вам про два етапи – налаштування плагіна і редагування в шаблоні теми.

Для початку вам потрібно буде перейти на під-сторінку yoast – додатково. Змініть перемикач з назвою “хлібні крихти” на “ВКЛЮЧЕНО”.

Як підключити хлібні крихти в Yoast SEO фото

Після цього ви можете переглянути настройки нижче і налаштувати під свій розсуд.

Не забудьте вибрати тип запису для таксономії (найчастіше використовується рубрика).

Якщо ви все зробили правильно – переходите в файл шаблону і визначитеся з місцем, де ви хочете його відобразити. Додаєте рядки:

<?php
	if ( function_exists('yoast_breadcrumb') ) {
		yoast_breadcrumb('<p id="breadcrumbs">','</p>');
	}
?>

Найбільш часто для вставки коду використовують в постах файл single.php і сторінках page.php перед заголовком.

Як підключити навігаційну ланцюжок в Breadcrumb NavXT?

Вище я вже описував наскільки функціональний даний плагін в своїй сфері.
Його ви можете встановити в WordPress. Зверніть увагу! Версія 5.2 і вище потрібно мати PHP 5.3. Тільки після цього можна активувати.

Як підключити хлібні крихти в Breadcrumb NavXT фото

Далі вам слід пройтися по всіляких функцій і налаштувати під свій розсуд.

Як і в Yoast SEO вам потрібно підключити це через шаблон за допомогою нижченаведеного коду:

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

Якщо потрібно в шапці – header.php. В інших випадках використовуєте файли page / single.php для обраних розділів.

Як підключити навігаційну ланцюжок без плагіна в WordPress?

Скажу відразу, створення breadcrumbs самому не кращий варіант, особливо новачкові.

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

Одне з таких рішень приведено нижче. Спочатку ви повинні створити функцію get_breadcrumb () у файлі functions.php:

/**
 * Generate breadcrumbs
 * @author CodexWorld
 * @authorURL www.codexworld.com
 */
function get_breadcrumb() {
    echo '<a href="'.home_url().'" rel="nofollow">Home</a>';
    if (is_category() || is_single()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        the_category(' &bull; ');
            if (is_single()) {
                echo " &nbsp;&nbsp;&#187;&nbsp;&nbsp; ";
                the_title();
            }
    } elseif (is_page()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        echo the_title();
    } elseif (is_search()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;Search Results for... ";
        echo '"<em>';
        echo the_search_query();
        echo '</em>"';
    }
}

Потім викликати її в одному з файлів single (якщо в постах хотіли відобразити) / page (якщо на сторінках) .php за допомогою нижченаведеного коду:

<div class="breadcrumb"><?php get_breadcrumb(); ?></div>

До даного коду можете підключити парочку стилів:

breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.breadcrumb a {
    color: #428bca;
    text-decoration: none;
}

Такий варіант буде досить продуктивний, якщо ви розбираєтеся в веб-розробці.

До того ж вам не доведеться завантажувати зайвий плагін який займе потрібні ресурси сайту.

Підведемо підсумок

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

Для цього потрібно подбати про те, щоб хлібні крихти на сайті виконували роботу вірно.

Хочете уточнити щось по темі статті? Допоможу в коментарях з виниклою проблемою.

Leave a Reply

Your email address will not be published. Required fields are marked *