Супер быстро сделать хлебные крошки для wordpress блога.

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

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

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

Создаем php файл.

Ничего сложного просто заходим в свой любимый редактор кода, я выберу natepad++, создаем новый файл и вставляем туда вот такой код.

<div class="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, ' » ')); } ?>
 
     <?php } ?>
</div>

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

На скриншоте ниже показано как это сделать. Заходим в “Файл”, далее “Новый”, у вас появиться пустая область, вот и вставляем в нее весь код. Далее опять идем в “файл” и нажимаем “сохранить”, и прописываем название “breadcrumbs”. В выпадающем списке выбираем расширение “php”, ну и сохраняем.

Не забываем сохранять в кодировке “UTF-8 без бом”

После загружаем на хостинг наши хлебные крошки вот сюда “wp-content > themes > активная тема вашего сайта”, для ясности скриншот.

Если не хотите создавать файл то можете взять его у меня, что избавит от возни со вставкой и сохранением.

Вывод на самом сайте.

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

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

Я поставил перед выводом статей в файл single.php, у меня это выглядит так, смотрите снимок.

Прописываем стили, чтобы было красиво.

И последнее осталось настроить внешний вид, для этого заходим в редакторе в style.css и прописываем там вот это.

.breadcrumbs{
font:14px Arial;
background:#E6E6E6;
padding:5px 10px;
border: solid 1px #fff;
border-radius:10px;}

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

Другие способы.

Если у вас стоит плагин WordPress Seo by Yoast, то там есть специальная функция, вывода этих самых крошек, но там будут сложности с настройкой внешнего вида. Да и вообще их очень много этих плагинов, например Breadcrumb NavXT, очень хороший, но это не нужно вообще, мой способ очень прост и не нагрузит ваш любимый блог.

P.S. Ну что, как вам эта интересная функция? Понравилось, в любом случае отпишитесь в комментариях. до встречи в следующих статьях.