Хлібні крихти на блозі WordPress з плагіном і без - покрокова інструкція для новачків! Хлібні крихти у WordPress засобами плагіна Breadcrumb NavXT (підсилюємо перелінковку) Як вставити хлібні крихти у wordpress

Здрастуйте, шановні читачі! Сьогодні йтиметься про те, що таке хлібні крихти, які функції вони виконують на блозі, а найголовніше — як встановити та налаштувати плагін Breadcrumb NavXT, що дозволяє створити хлібні крихти WordPress.

Що таке хлібні крихти

"Хлібні крихти" показують шлях на блозі, яким необхідно пройти від головної до поточної сторінки. Це свого роду навігаційний ланцюжок, кожна ланка якого є посиланням на сторінку вищого рівня. Найвищий рівень – це головна блогу. В ідеалі шлях до будь-якої сторінки блогу від головної повинен займати максимум 3 кліки миші. Фактично це головна - категорія - записабо головна - категорія - категорія - записале ніяк не довше. Це необхідне зручності як користувачів, а й пошукових систем. Пости з більш глибоким закладенням пошукові системи можуть індексувати з деякою затримкою. До того ж їх важливість в очах пошукових систем зменшується зі збільшенням рівня вкладеності. Як наслідок — посилання на найважливіші та найцікавіші статті на блозі намагайтеся проставляти на головній.

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

Крім зручності та навігації вони виконують ще одну важливу функцію – покращує внутрішню перелінковку сторінок блогу. Раніше я вже розповідав про три важливі та цікаві плагіни, для внутрішньої перелінковки — , які настійно рекомендую встановити кожному на свій блог. Breadcrumb NavXT можна сміливо зарахувати до цього списку.

Коли пошукові системи індексують якусь статтю блогу, вони відразу бачать до якої рубрики вона відносяться і повний шлях до головної, що допомагає їм визначити структуру блогу. Тільки не забудьте ще додати на блог як для пошукових систем, так і для користувачів.

Встановлення та налаштування плагіна Breadcrumb NavXT

Установка Breadcrumb NavXT дещо відрізняється від , тому розглянемо її докладно:

2. Розпакуйте архів та завантажте папку з файлами плагіна на сервер у каталог wp-content/plugins. Для цього скористайтеся FileZilla.

3. Активуйте плагін через розділ «Плагіни» панелі адміністратора WordPress.

4. Тепер необхідно вставити наступний код:

Друге за популярністю місце – це шапка сайту. Для цього код необхідно вставити тільки в один шаблон header.php . Точного місця я не можу сказати, все залежить від теми. Тут підійде спосіб наукового тику - вставляєте код, зберігаєте, дивіться результат, не подобається - змінюєте розташування коду в шаблоні.

Деякі просунуті теми за промовчанням виводять хлібні крихти на блозі, але я б порадив все-таки використовувати плагін Breadcrumb NavXT, тому що він має більш гнучкі налаштування. У таких випадках слід замінити стандартний код у шаблонах теми, який відповідає за виведення хлібних крихт, на код плагіна, вказаний вище. Стандартний код багато в чому повинен бути схожий на наведений код плагіна, тому знайти його не важко (зазвичай він укладений в тег div, ID або class якого має назву - breadcrumb).

Після додавання коду можна змінити зовнішній вигляд хлібних крихт WordPress. Для цього слід додати стилі до класу breadcrumb у файл style.css теми, що використовується. Звичайно, для цього необхідно знати основи CSS, тому раджу ознайомитися з безкоштовним самовчителем з CSS від Влада Мержевича, який ви можете завантажити з мого блогу.

Налаштування плагіна розташовуються в розділі "Параметри" - "Breadcrumb NavXT". В інтернеті можна знайти русифікатор до нього, але, на жаль, на останні версії плагіна він встає дуже криво - більшість налаштувань так і залишається англійською мовою. Тому я розглядатиму налаштування саме англійською, даючи переклад і свої коментарі по найважливіших пунктах.

Перша закладка називається "General" - Загальні.

Breadcrumb Separator - символ, який буде використовуватися як роздільники між ланками навігаційного ланцюжка.

Breadcrumb Max Title Length - як ланка навігаційного ланцюжка використовується заголовок сторінки, ця опція задає максимальну довжину заголовка, 0 - використовується заголовок повністю, не обрізаючи його.

Home Breadcrumb - вказувати чи ні в хлібних крихтах головну блогу. Раджу включити та задати їй ім'я відповідно до назви вашого блогу.

— текст, який буде видно на головній блозі, якщо це не посилання.

Переходимо на вкладку Current Item , що означає «Поточний пункт» або «Поточне розташування».

Link Current Item — виводити назву поточної сторінки як посилання на неї чи ні.

Paged Breadcrumb - підтримка посторінкової навігації. Після включення відображатимуться номери в хлібних крихтах.

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

Наступний розділ називається Post & Pages — Записи та сторінки.

Post Taxonomy Display — показувати всі варіанти шляхів запису.

Post Taxonomy — у варіантах шляхів запису можна відображати. Для свого блогу вибрав стандартний варіант – Рубрики.

Page Template та Page Template (Unlinked)— аналогічні розглянутим вище Post Template та Post Template (Unlinked), тільки виводяться будуть для опублікованих статей.

На черзі розділ "Categories & Tags".

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

У розділі можна задати шаблони для сторінки автора (Author), дати/архіву (Date), результатів пошуку (Search) та помилки 404 .

Інші опції я не використовую, тому розуміти про їх призначення не буду.

Ну от у всьому й розібралися! Вітаю! На цьому свою розповідь закінчую і прощаюся з вами, але не надовго, бо скоро на моєму блозі вийде ще одна цікава стаття!

Цей плагін генерує Хлібні Крихітки для вашого WordPress блогу/сайту, підтримує ПідКатегорії для виведення та Автоматичною установкою!

Автоматичне встановлення!

SEO Доброзичливий!Створений на основі SEO Доброзичливого «Schema.org Microdata Breаdсrumbs», який так любить усі пошукові системи (Google, Bing, Yandex тощо).

Прості Налаштування!Налаштування може зробити навіть найдосвідченіший користувач. Зручний адміністративний інтерфейс робить налаштування дуже простими.

Супер Легкий!Плагін не використовує JavaScript та jQuery, тільки чистий та простий CSS, файли містять мінімум PHP коду.

Відмінно працює з AMP (Accelerated Mobile Pages)!

Відмінно працює з Таксономіями!

Підтримка підказок! Чистий CSS.

Скріншоти

Встановлення

Автоматичне встановлення!Більше не потрібно вставляти жодних кодів у файли, просто встановіть плагін і активуйте його, от і все.

для Ручної установки: перейдіть на Установки >

Відкрийте відповідний файл для вашої теми (зазвичай header.php). Це можна зробити за допомогою панелі адміністрування WordPress Зовнішній вигляд > Редактор або через ваш улюблений текстовий редактор. Помістіть наступний код, де ви хочете, щоб виводилися Хлібні Крихітки:

і додайте цей код до сторінок AMP (Accelerated Mobile Pages) шаблонів:

або Ручна установка через.zip:

  1. Завантажте `yummi-breadcrumb` у папку `/wp-content/plugins/`
  2. Активуйте плагін у вкладці 'Плагіни' вашого сайту/блогу
  3. Перейдіть до Установки > Yummi Breadcrumbs і перейдіть до пункту Тип установки до позиції Ручна
  4. Place this code to your templates:

Поширені запитання

  1. SEO доброзичливий?

  2. Чи підтримує RDFa?

    Так, повністю

  3. Чи є підтримка мікророзмітки Schema.org?

    Так, повна підтримка

  4. Чи підтримує Підкатегорії?

  5. Чи підтримує виведення ПідКатегорій у лінію?

  6. Чи підтримує висновок ПідКатегорій у вигляді списку, що випадає?

  7. Чи підтримує Підказки?

    Так, на чистому CSS

  8. Чи підтримує виключення Категорії?

    Так, повністю

  9. Чи підтримує виняток Таксономії?

    Так, повністю

  10. Чи зрозуміла панель керування?

  11. Чи підтримує RDFa?

    Так, повністю

  12. Як щодо ваги плагіна?

    Дуже легкий! Плагін Не використовує JavaScript та jQuery, тільки чистий та простий CSS, файли містять мінімум PHP коду.

  13. Як ним користуватися?

    Автоматичне встановлення!Тепер вам не потрібно вставляти ні рядки коду у ваші файли, просто завантажити плагін і активувати його, ось і все.

  14. Як його встановити у ручному режимі?

    Перейти до Options > Yummi Breadcrumbs and switch the Installation to Manual, then open template files in Appearance > Editor або через ваш favorit editor editor (типово header.php). Натисніть на following code, де ви збираєтеся кинути рейок до appear.

    and this code to your AMP (Accelerated Mobile Pages) templates:

  15. Які мови підтримуються?

    Англійська та Російська повністю та багато інших з часом 🙂

Відгуки

Учасники та розробники

"Yummi Хлібні крихти (З підтримкою ПідКатегорій)" - проект з відкритим вихідним кодом. У розвиток плагіна зробили свій внесок такі учасники:

Учасники

Журнал змін

2.0.1

  • Fix url when it show "1" (CPT UI taxonomy)

2.0.0

  • Багато fixes
  • Add support Wordpres 5

1.9.19

  • Fix for archive pages

1.9.18

  • Array fix for old WP

1.9.17

  • Tab home bags

1.9.16

  • Tab CSS fix

1.9.15

  • AMP Fix

1.9.14

  • Fix post type object 'post' in short post links

1.9.13

  • Fix subcat delimer & taxonomy категорії

1.9.12

  • Кілька fixes в admin option page and alot of changes in code (була fixed multicategory in archive pages too)

1.9.9

  • Added some improvements

1.9.8

  • Added Yummi Plugins page

1.9.7

  • Remove «Page 1» з першої архівної сторінки та fixed delimiter on paged archive

1.9.6

  • Fixed dropdown and trim last children's категорія separator

1.9.5

  • Fixed for second level Hierarchy

1.9.4

  • Custom Post Type UI Fix

1.9.2

  • yummi.club now support secure connection and move to https://yummi.club/

1.9.1

  • Fixed errors validator.w3.org

1.9

  • Додана підтримка AMP (Accelerated Mobile Pages) та Користувальницьких CSS

1.8.7

  • Змінено стандартний текст Home на іконку Будиночка.

1.8.6

  • Виправлена ​​помилка з показом категорії «Без категорії»
  • Повернув rdf.data-vocabulary.org

1.8.5

  • Виправлено кілька помилок

1.8.2

  • Виправлено одну помилку

1.8.1

  • Додано тінь для випадаючого списку та налаштування для неї в адмін панелі

1.8

  • Виправлено кілька помилок
  • Виправлені переклади

1.7

  • Замінено застарілі мікророзмітки rdf.data-vocabulary.org на schema.org/BreadcrumbList
  • Перевірено за допомогою Google Structured Data Testing Tool, все добре, посилання на сайт з тестом https://developers.google.com/structured-data/testing-tool/
  • Виправлені переклади
  • Виправлені підказки

1.6

  • Додано висновок лише першої категорії. Додано посилання на HTML Символи

1.5.9

  • Виправлено помилку з висновком на сторінках

1.5.7

  • Виправлено кілька помилок

1.5.6

  • Додано списки Категорії та Таксономії які можна виключити

1.5.5

  • Виправлено кілька помилок. Замінено роздільники

1.5.4

  • Виправлено кілька помилок. Додано виведення підкатегорій у вигляді списку, що випадає

1.5.1

  • Виправлено кілька помилок

1.5.0

  • Було переписано і скорочено весь код -> вище швидкість роботи. Виправлено багато помилок. Було додано автоматичне встановлення та багато нових фішок

1.0.2

  • Зменшено кількість коду -> вище швидкість роботи. Виправлено кілька помилок

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

По-перше, він полегшує навігацію, а по-друге, вирішує дуже важливу проблему — створення правильної внутрішньої перелінкування. Щоб не затягувати інтригу відразу скажу, що йтиметься про плагін Breadcrumb NavXT. Але все по порядку.

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

Навіщо потрібні хлібні крихти у WordPress

Просування НЧ має ряд переваг, головна з яких (особливо важлива для некомерційних проектів) — не потрібно вкладення коштів, необхідних для купівлі зовнішніх посилань. Пов'язано це з тим, що НЧ можна просуватися лише за рахунок однієї внутрішньої сайту і за рахунок створення правильної перелінковки, як було описано .

До речі, для комерційних проектів розкрутка по НЧ теж має цілу низку переваг, основною з яких знову ж таки є менша вартість, але крім цього відвідувачі, які прийшли з видачі за такими запитами, набагато частіше конвертуватимуться в грошові знаки, ніж відвідувачі, які прийшли за запитами середньо. та високочастотним (у зв'язку з неконкретністю останніх).

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

Але ідеальна кругова схема, описана в наведеній статті, важко здійснити в реальних умовах, тому хорошим варіантом буде сферична схема лінківки. Грубо кажучи, таку схему можна перебільшувати до того, що чим більше буде внутрішніх посилань, тим краще буде розподілятися статична вага. Це схоже на розгалужену кровоносну систему, що дозволяє крові донести кисень до всіх, навіть найвіддаленіших від легень, внутрішніх органів.

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

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

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

Для реалізації хлібних крихт ми будемо використовувати плагін Breadcrumb NavXT. В принципі, ви можете використовувати для цих цілей інші плагіни WordPress, але мені більше сподобалися саме ці. Можна навіть.

Установка плагіна Breadcrumb NavXT в Вордпрес

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

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

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

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

Для початку вам потрібно завантажити Breadcrumb NavXT звідси. Встановлення плагіна на WordPress стандартне. Підключіться до свого блогу за протоколом FTP (робота з клієнтом FileZilla докладно описана) і відкрийте на сервері папку:

/wp-content/plugins

Розпакуйте архів з Breadcrumb NavXT і скопіюйте папку на сервер хостингу в директорію (/wp-content/plugins). Тепер потрібно буде зайти в адмінку Вордпреса, вибрати з лівого меню пункт «Плагіни», а у вікні, що відкрилося, перейти на вкладку «Неактивно». Знайдіть рядок з потрібним і клацніть на розташованому трохи нижче напису «Активувати».

Виклик Breadcrumb NavXT та налаштування зовнішнього вигляду крихт

Ось, власне, і все. Тепер залишилася ще одна істотна деталь: вибрати місце у шаблоні (темі) WordPress, де виводитиметься рядок з хлібними крихтами, і вставити в це місце код функції плагіна Breadcrumb NavXT. Завдання не зовсім тривіальна для веб-майстра-початківця, мало знайомого зі структурою двигуна і роботою його тем.

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

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

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

По-перше, вам потрібно підключитися до вашого блогу FTP і відкрити папку з темою, яку ви в даний момент використовуєте:

Wp-content/themes/назва теми WordPress

А тепер давайте вам розповім, як зробив висновок хлібних крихт я сам, а ви зможете повторити все за мною, або використати свій варіант вставки.

Якщо спробувати наочно представити призначення шаблонів із теми, то вийде приблизно такий макет:

З цього макету ми можемо зробити висновок, що код виклику Breadcrumb NavXT нам потрібно буде вставляти в ті шаблони, які відповідають за виведення контенту в центральній частині блогу: INDEX, SINGLE, ARCHIVE, PAGE або SEARCH.

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

Я вставив його в: SINGLE (відповідає за формування сторінок зі статтями), ARCHIVE (формує сторінки рубрик, тимчасових архівів, архівів тегів), PAGE (формує статичні сторінки, наприклад, «Про блог»).

Код виклику Breadcrumb NavXT в ці шаблони я вставляв в одне й те саме місце - на самому початку, відразу після першого рядка:

щоб вийшло так:

У файл таблиці каскадних стилів STYLE.CSS з папки з темою я додав кілька CSS властивостей для класу BREADCRUMB:

Breadcrumb ( font:bolder 12px "Trebuchet MS", Verdana, Arial; padding-bottom: 10px; ) .breadcrumb a( color: #1B7499; ) .breadcrumb a:hover ( color: #EF0E0E; )

Ці властивості задають зовнішній вигляд для хлібних крихт у WordPress: , а . Також визначають колір посилань з хлібних крихт (.breadcrumb a) і колір посилань при наведенні ними курсора миші (.breadcrumb a:hover). Взагалі раджу ознайомитись сторінці.

Можливості та налаштування плагіна Breadcrumb

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

Для цього заходьте в адмінку WordPress і вибираєте з лівого меню в області "Налаштування" пункт "Breadcrumb NavXT". У вікні побачите кілька вкладок:

На вкладці «Загальні» можна задати параметри, які будуть використані для всіх сторінок вашого блогу. У полі «Розділювач» — задати символ, який служитиме роздільником у хлібних крихтах. У моєму випадку це символ ">", який задається спеціальним кодом, т.к. символ «>» проставлений у явному вигляді, буде інтерпретований Вордпрес, як знак HTML тега, що відкривається.

Взагалі існує (мнемонік), які, наприклад, не можна вставити безпосередньо. Ось деякі з них:

Мнемокод Символ " " & &< < > > ¤ ¤ ¦ ¦ § § © ª ? « « ® ® ° ° ± ± µ µ ¶ ¶ · ¹ ? € €

Вибирайте будь-який символ, що вам сподобався, як роздільник для хлібних крихт.

У полі «Максимальна довжина» можна задати довжину анкору (тексту посилання) у символах. Я задав обмеження довжини 60 символів, виходячи не з міркувань дизайну, а з міркувань оптимізації контенту.

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

У полях «Префікс» та «Суфікс» можете ввести текст, який передуватиме або слідуватиме після посилання на головну в хлібних крихтах.

Зверніть увагу, що цей текст буде поміщений в атрибут TITLE тега A і, можливо, буде врахований пошуковими системами як альтернативний анкор. Це я до того, що в ньому слід використати ключові слова, які стосуються головної сторінки вашого блогу.

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

На наступній вкладці «Записи / Сторінки» можна налаштувати відображення посилань на сторінки зі статтями та статичні сторінки вашого блогу:

Для статей я поставив попередній напис «Поточна стаття» і уклав текст у лапки за допомогою мнемокоду (список мнемокодів див. вище):

Переходимо на наступну вкладку "Рубрики". В принципі, тут повторюються ті самі налаштування, що й на попередніх. Я не став ставити обрамлення (префікс та суфікс) для посилань на рубрики, але задав обрамлення для сторінок архівів:

В результаті на вебсторінках архіву хлібні крихти виглядають так:

Удачі вам! До швидких зустрічей на сторінках блогу сайт

Вам може бути цікаво

Створення списку схожих матеріалів у WordPress (з мініатюрами) за допомогою плагіна Related Posts для внутрішнього лінкування
Створення в WordPress картки блогу для відвідувачів (плагіни Sitemap Generator та WP DS Blog Map)
Comment Toolbar - додаємо у коментарі WordPress можливість відповіді та цитування
Simple Counters і Category and Page Icons - красиві лічильники RSS та Twitter, а також іконки для категорій та сторінок у WordPress Як у плагіні Yet Another Related Posts прибрати прозорий піксель http://yarpp.org/pixels та змінити напис Схожі матеріали
Підсвічування коду та кнопки форматування коментарів у WordPress - SyntaxHighlighter та Comment Form
Google XML Sitemaps - створення картки сайту для WordPress
Calendarize it! - Календар заходів для WordPress
WP-PageNavi - посторінкова навігація для блогу на WordPress - встановлення, налаштування та зміна зовнішнього вигляду пагінації
Better Feed для WordPress - як не віддавати в RSS повні тексти постів та захиститися від крадіжки контенту через канал новин
All in One SEO Pack та внутрішня пошукова оптимізація блогу на WordPress (метатеги Canonical, Description та Title)

Сьогодні я розповім про плагін для WordPress під народною назвою "Хлібні крихти", офіційну назву Breadcrumb NavXT. Це мабуть найпопулярніший і найпопулярніший плагін серед веб майстрів. Його популярність пов'язана із двома причинами.

Перша причина популярності плагіна "Хлібні крихти"

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

Друга причина затребуваності цього плагіна

Додаткове перелінування сторінок, і як наслідок + у ранжируванні пошукових систем. (Власне, прізвисько "Хлібні крихти" походить від казки братів Грімм під назвою Гензель і Гретель за сюжетом якої діти, щоб не заблукати в лісі, кидали хлібні крихти... Але це так, ліричний відступ.) Повернемося все ж таки до нашого плагіна.

Завантажуємо та встановлюємо плагін Breadcrumb NavXT.

Завантажити плагін Breadcrumb NavXT найкраще, знайшовши його через свою панель управління, ввівши в рядку пошуку " Breadcrumb NavXT"

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

Переходимо по вкладці "Параметри"...

… і потрапляємо до панелі налаштувань плагіна Breadcrumb NavXT. У цьому випадку нас цікавить лише вкладка "Основні", всі інші вкладки налаштувань: "Записи та сторінки", "Таксономії", "Інше", можна залишити поки що без змін. Можливо вам колись доведеться до них повернутися щоб більш просунуто налаштувати Хлібні крихти, але поки залишаємо все як є. Ну а налаштування вкладки "Основні" змінюємо як показано на малюнку нижче:

Зберігаємо зміни налаштувань, і тут все.

Тепер приступаємо до найцікавішого.

Потрібно відредагувати шаблон вашої теми.

На жаль, без цього ніяк не можна. Плагін Breadcrumb NavXT, "просто так" не працюватиме.

Переходимо в консоль і вибираємо «Зовнішній вигляд» → «Редактор»:

В результаті переходимо до розділу редагування тем. У цьому розділі для редагування необхідно вибрати саме ту тему, яку ви зараз використовуєте. Як правило, багато адміністраторів сайтів встановлюють декілька шаблонів сайтів, але використовується всього один. Тому слід редагувати той, який використовується.

Редагувати необхідно такі шаблони: single.php, index.php і page.php (якщо є спеціально створена сторінка, наприклад, category.php, то і цей теж)

Виглядає це так:

Спочатку вибираємо необхідний шаблон. (На даному прикладі показані шаблони, які є в моїй темі, у вас їх може бути більше або менше. Редагувати необхідно все що є згідно зі списком: single.php, index.php та page.php, category.phpЯкщо якийсь із перерахованих шаблонів у вашому списку не відображено, значить просто пропускаємо.)

Потім беремо код:

І вставляємо його в кожному з перерахованих шаблонів приблизно в те саме місце, після заголовка ( header):

Звичайно зберігаємо кожен змінений файл. Після цього плагін Breadcrumb NavXT почне працювати.

Ну ось і все, майже ... Майже, тому що зазвичай цих налаштувань цілком достатньо.

Але бувають випадки коли дизайн вашої теми сайту не збігається з дизайном рядка Хлібних крихт, що відображається.

У цьому випадку доведеться підганяти Хлібні крихти під дизайн сайту окремо.

Робиться це так. Беремо цей код:

.breadcrumb (

font:bolder 12px "Trebuchet MS", Verdana, Arial;

padding-bottom: 10px;

}

.breadcrumb a(

color: #1B7499;

} .breadcrumb a:hover (

color: #EF0E0E;

}

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

… і вставляємо код у самому низу редактора

… зберігаємось, натиснувши "Оновити файл"Звичайно, для отримання задовільного результату доведеться трохи поекспериментувати.

Ну ось тепер мабуть все.

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

Хлібні крихти – зручний спосіб перелінкування блогу

Один із простих способів одночасно спростити навігацію по сайту та його перелінковку, це Хлібні крихти (breadcrumbs). Свою назву він отримав на честь того способу, завдяки якому герої німецької казки «Гензель та Гретель» намагалися знайти дорогу із лісу.

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

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

Головна сторінка> Рубрика > Підрубрика > Поточна сторінка

Причому всі «ланки», крім останнього, — це внутрішні посилання.

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

Яку користь несуть хлібні крихти для сайту та блогу

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

Ви ненав'язливо запрошуєте читача перейти на посилання, тобто даєте йому ще одну причину затриматися на вашому сайті. Це, у свою чергу, покращує поведінкові фактори, то за що пошукові роботи насамперед відрізняють блоги та сайти.

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

Друге завдання цього елемента, тісно пов'язане з першим – внутрішня оптимізація сайту, точніше ще один спосіб зв'язати посиланнями якомога більше статей. Причому на відміну від ручної перелінковки тут все відбувається автоматично. Над кожною опублікованою статтею відразу з'являється потрібний навігаційний ланцюжок.

Цю функцію можна додавати на сайти та блоги різними способами. Розглянемо два найпростіші варіанти для WordPress – встановлення за допомогою плагіна та за допомогою внесення невеликих змін до коду.

Як додати хлібні крихти на блог плагіном

Найпростіший спосіб встановити хлібні крихти на блог – встановити спеціальний плагін. Для WordPress зазвичай використовують Breadcrumb NavXT.

Спосіб його встановлення стандартний: заходимо в адмінку блогу -> Плагіни -> Додати новий. У вікно, що з'явилося, вставляємо назву плагіну і натискаємо «Знайти плагіни».

Ось він, наш плагін, натискаємо "Встановити зараз", потім "Активувати".

і над цим рядком вставляємо наступний шматочок коду:

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

Після цього переходимо в "Налаштування" -> "Налаштування Breadcrumb NavXT" і в графі "Назва посилання" змінюємо назву на свою і зберігаємо зміни.

Залишилося перейти на блог та помилуватися результатом.

Як додати хлібні крихти на блог без плагіна

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

Заходимо в адмінку -> "Зовнішній вигляд" -> "Редактор" -> functions.php. Тут у будь-якому місці (головне не всередину іншої функції) вставляємо наступний код:

Function the_breadcrumb() ( echo "You are here: "; if (!is_front_page()) ( echo "Home"; echo " » "; if (is_category() || is_single()) ( the_category(" "); if (is_single()) ( echo " » "; the_title(); ) ) elseif (is_page()) ( echo the_title(); ) ) else ( echo "Home"; ) )

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

Тепер потрібний ось цей код:

розмістити там, де ви хочете бачити навігаційний ланцюжок, наприклад, знову ж таки над заголовком статті. Для цього йдемо в single.php, шукаємо рядок з the_title і над нею вставляємо цей код та зберігаємо зміни.

Можете перейти на сайт та подивитися, що вийшло. Як бачите, You are here і Home тут явно не доречно і їх потрібно змінити на щось більш підходяще, наприклад, на Шлях та Головна (або назва блогу).

Крім того, потрібно переконатися, що зміни однаково добре виглядають на різних браузерах - не напливають на інші частини теми і водночас добре помітні.

Все, «Хлібні крихти» допомагають вашим читачам, а ви можете пишатися тим, що самостійно розібралися в їхньому встановленні. Всім дякую за увагу!

P.S. На закінчення статті відео про те, як поставити хлібні крихти на свій блог: