Супер быстро сделать хлебные крошки для 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. Ну что, как вам эта интересная функция? Понравилось, в любом случае отпишитесь в комментариях. до встречи в следующих статьях.

 

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(1 голос, в среднем: 5 из 5)

С уважением к читателям Лифанов Валентин.

Нажмите на кнопку социальных сетей, вам не сложно, а мне приятно.

Комментарии к этой супер статье.

  • Всё о зубах

    Спасибо! Всё понятно.

    • Лифанов Валентин

      Не за что буду рад помочь.

      • MaskoVa

        Ура!!! Спасибо, получилось! :-)

        • Лифанов Валентин

          Ура, пожалуйста.

  • Денис Тумилович

    а я кодом от камы пользовался когда-то.

    • Лифанов Валентин

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

  • Валерий

    А вот когда пишешь статью в WordPress там есть Метки, это не хлебные крошки?

    • Лифанов Валентин

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

      • Валерий

        Значит метки не нужно использовать имея рубрики?

        • Лифанов Валентин

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

  • Alfa-Stroy64

    Но к сожалению они не работают на галерее nextgen gallery, у меня много картинок и несколько альбомов с вложениями, подскажите если знаете, как можно сделать так чтобы хлебные крошки также работали и в галлерее, спасибо!

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

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

*

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Лифанов Валентин. ©2014 Все права защищены. Полное или частичное копирование запрещено.