"Хлебные крошки" для вашего сайта на WordPress | "Дневник кодера"

«Хлебные крошки» для сайта на WordPress

В этой статье мы с вами разберем как добавить на сайт элемент навигации «хлебные крошки». Можно было бы конечно это реализовать с помощью стороннего плагина, например такого как Yoast SEO, но делать мы этого не будем. Мы не будем лишний раз нагружать наш сайт плагинами, ведь мы можем добавить небольшие куски кода туда, куда нужно. И так, поехали…

Вот так собственно говоря и выглядят хлебные крошки:

 

Навигация начинается с главной страницы, затем раздел и уже сама страница. Собственно говоря, все это ссылки.

Пишем код на PHP

Лично вам писать ничего не придется, остается только воспользоваться готовым кодом. Для начала создаем файл с расширением php и называем его breadcrumbs. Вот так будет выглядеть ваш файл breadcrumbs.php и заносим в него следующее:

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

Затем закидываем этот файл в wp-content/themes/название_вашей_темы/. Половина работы сделана.

Теперь заходим в админ.консоль Внешний вид — Редактор — Отдельная запись(single.php) и перед началом статьи, у меня она выглядит так:

<section class="content-wrap clearfix" role="main">

добавляем вот этот кусок:

<?php include (TEMPLATEPATH. '/breadcrumbs.php'); ?>

Вот в принципе и все, наш элемент навигации готов. Вы можете оставить так как есть, если вас все устраивает. Лично я добавил немного css стилей:

#breadcrumbs {
color:#777; // цвет символов, сделал тускло-серым, чтоб не бросалось в глаза
border-bottom:1px solid #eee; // нижняя граница, отделяющая крошки от статью, чтоб не выглядело слипшемся
padding:10px 0px; // добавил отступы сверху и снизу по 10px и 0px по краям
font-size:14px; // размер символов
}

 

Для того чтоб добавить стили, переходим Внешний вид — Редактор — Таблица стилей(style.css) и в самый конец вставляем этот отрезок кода.

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

1

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