WordPress — Хлебные крошки.

WordPressПомните сказку про Ганзель и Гретель и какую хитрость они использовали что бы вернуться домой и не заблудится в лесу? Правильно, хлебные крошки. То же самое необходимо для сайта, что бы пользователи находили дорогу к нужным им страницам. В данной статье я расскажу как реализовать навигацию по сайту при помощи плагина «Breadcrumb NavXT».

WordPress и хлебные крошки.

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

WordPress хлебные крошки

WordPress хлебные крошки

И так, приступим.

    1. Необходимо установить и активировать плагин, вбиваем в поиск «Breadcrumb NavXT», устанавливаем.
    2. В панели администратора появится новая вкладка, переходим в «Настройки» -> «Breadcrumb NavXT».
      WordPress «Breadcrumb NavXT»

      WordPress «Breadcrumb NavXT»

       

    3. Далее можете произвести настройки плагина, там всего 4 вкладки, все вроде понятно. Вносим необходимые Вам правки и сохраняем.WordPress-Breadcrumb-NavXT1
    4. Дальше нам необходимо вставить следующий код в нужный нам файл шаблона:

    5. Например, добавим наши хлебные крошки на страницах записей, в этом случае размещаем наш код в файле «single.php» (файл может называться по другому, всё зависит от темы). Заходим во вкладку «Внешний вид» -> «Редактор», выбираем наш файл.

      WordPress редактируем файл

      WordPress редактируем файл

    6. Вставляем код после строки

      Должно получится так:

      Сохраняем, в итоге на сайте выглядеть будет так:

      WordPress Breadcrumb NavXT вид на сайте

      WordPress Breadcrumb NavXT вид на сайте

Собственно дальше добавляйте код куда Вам необходимо, остаётся только ещё поработать над CSS стилями, что бы всё выглядело хорошо. Для этого необходимо в файл  «style.css» добавить описание стиля. К примеру сделаем текст посередине, фон жёлтым, текст красным, для этого вставляем следующий код:

Получим это:

WordPress Breadcrumb NavXT добавляе

WordPress Breadcrumb NavXT добавляем стиль CSS

На этом всё, надеюсь данная статья Вам пригодилась, не забывайте подписываться на наш Канал и группу в ВК. Всем гору печенек и удачи!

Поделиться в соц. сетях:

Понравилась статья? Поблагодари автора, накорми печеньками! :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *