Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

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

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

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

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

Но микро-плагинов которые выводили-бы на сайте хлебные крошки я ещё не встречал а устанавливать плагин типа: «Breadcrumbs XT» не имеет смысла при существовании альтернативы в виде специального кода который прекрасно справляется с выводом хлебных крошек на сайте под управлением CMS WordPress.

Что такое хлебные крошки на блоге

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

Наверняка у многих возникнет вопрос и почему-же навигация по блогу имеет такое странное название, как хлебные крошки?

Но ответ этому довольно прост, наверняка каждый в детстве читал сказку известных немецких писателей братьев Гримм — «Гензель и Гретель», где дети рассыпали хлебные крошки в тёмном лесу, чтобы по ним найти обратную дорогу домой, и хотя именно по хлебным крошкам им не удалось выбраться из леса, наша навигация всё же получила название хлебных крошек.

На WordPress страницы со статьями могут использоваться с различными степенями вложенности в зависимости от настроек вашего блога и хлебные крошки показывают всю их глубину, упрощая ориентировку по блогу вашим посетителям.

Вот так например будут выглядеть хлебные крошки со вложенностью страниц в 2 степени:

  • Главная страница » Категория » Название статьи.

А это пример хлебных крошек с использованием 3 ступенчатой структуры блога:

  • Главная страница » Категория » Под категория » Название статьи.

Думаю, что здесь всем всё понятно.

Установка хлебных крошек на WordPress без использования плагина

Для установки хлебных крошек на блог под управлением WordPress нам необходимо найти среди файлов темы (одна запись) single.php и открыть его для редактирования, лучше всего для этой цели использовать бесплатный текстовый редактор Notepad++.

Итак находим в данном файле такую или похожую на неё строчку:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

И сразу-же после неё нам необходимо установить код:

<div id="breadcrumbs">
   <?php if (is_home()) { ?>

  <?php } elseif (is_single()) { ?>
      <a href="<?php echo get_option('home'); ?>">Главная</a> »
      <?php foreach((get_the_category()) as $cat) {
      $cat=$cat->cat_ID;
      echo(get_category_parents($cat, TRUE, ' » ')); } the_title(); ?>

     <?php } ?>
</div>

После того, как вы вставили данный код сохраняем внесённые изменения и после всей проделанной работы хлебные крошки уже должны появиться на вашем блоге.

Но я предлагаю немного усовершенствовать их внешний вид путём внесения изменений в файл вашей темы style.css прописав специально созданные стили для хлебных крошек идентификатор которых «(id=«breadcrumbs»)» уже прописан в коде установленном нами ранее в single.php.

Настройка хлебных крошек, улучшаем внешний вид

Итак открываем уже упомянутый файл стилей: style.css и в самом низу вставляем:

/* Стили хлебных крошек */

#breadcrumbs {
  width: auto; /* Ширина страниц */
  font-size: 13px; /* Размер шрифта */
  color: #215B9B; /* Цвет текста, не являющегося ссылкой */
  text-shadow: #48BF2B 0px 1px 1px; /* Тени текста (по желанию) */
  text-align: left; /* Прижатие текст к краю страницы слева */
  margin: 2px 29px 0px 29px; /* Отступы внешние */
  padding-bottom: 4px; /*  Отступы внутренние */
  border-bottom: 1px solid #D3D3D3; /* Разделительная черта снизу */
}

/* цвета ссылок */

#breadcrumbs a, #breadcrumbs a:visited {
  color: #389621; /* Главный цвет ссылки */
  text-decoration: none; /* Отмена подчеркивания ссылок */
}

/* цвет ссылки при наведении на неё курсора */

#breadcrumbs a:hover, #breadcrumbs a:active {
  color: #00107F; /* цвет ссылки при наведении на неё курсора */
  text-decoration: none; /* Отменяем подчеркивание ссылок при наведении на неё курсора */
}

Дальше вам будет необходимо изменить некоторые параметры данных стилей под свою тему думаю, что с этим проблем возникнуть не должно так, как все значения стилей сопровождаются комментариями.

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

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

С уважением, автор блога!
© progress-project
★Обновлено:2016-05-20

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:

Комментарии к статье

3 комментарияна “Как сделать хлебные крошки на блоге WordPress без плагина”
  1. Евгений:

    Всегда оставляю комментарий, когда объясняют толково и все получается. Установил себе тоже крошки, но пока только в статьях) Благодарочка!

    Ответить
    • Administrator:

      Здравствуйте Евгений! Рад, что статья вам была полезна.

      Ответить
  2. Сергей:

    Благодарю за профессиональное и доступное объяснение темы, сразу все получилось!

    Ответить

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly.ru(4)
Иван(3)
Олег(3)
Николай(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

При использовании материалов сайта гиперссылка на обязательна!



seo-блог