Joomla - микроразметка хлебных крошек. Добавляем Microdata в модуль хлебных крошек (mod_breadcrumbs) Joomla хлебные крошки

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

Решил более глубже капнуть — и наконец-то обнаружил толковый результат. Есть 2 варианта решения этой задачи, Вы выбирайте тот который Вам нравиться больше

Вариант 1

В первом варианте мы изменим код стандартных хлебных крошек

И так, как же осуществить замену старого кода Joomla 3, на новый? Нам нужно в директории template/ваш шаблон/html/mod_breadcrumbs/default.php

Открываем файл default.php и заменяем следующим кодом:

"; } if (($key != $penult_item_key) || $show_last) { echo "" . $separator . ""; } echo "";

найдите строки:

  • "; echo "" . $item->name . ""; echo "
  • ";

    и замените их на строки:

    // Render last item if reqd. echo "

  • "; echo "" . $item->name . ""; echo "
  • ";

    Готово. Сохраняйте переопределение и после переиндексации страниц поисковой системой увидите результат.

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

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

    Вот как выглядят хлебные крошки по умолчанию в Joomla 2.5.

    А вот к какому ввиду можно привести путь на сайте после некоторых манипуляций с шаблоном хлебных крошек и стилями css.

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

    Первое, что нам необходимо будет сделать это подправить файл шаблона хлебных крошек — default.php. Лежит он по следующему адресу — /modules/mod_breadcrumbs/tmpl/default.php. Но вносить изменения прямо в данный файл будет не совсем правильно, т.к. при первом же обновлении все наши изменения затрутся. Поэтому мы будем переопределять вывод. Как это делается? Мы поместим файл default.php в наш шаблон, чтобы все сделанные изменения сохранились. Путь выглядеть будет так — /templates/ваш шаблон/html/mod_breadcrumbs/default.php. Т.е. в вашем шаблоне вы создаете каталог «html», внутри него создаете каталог «mod_breadcrumbs» и в данный каталог помещаете файл default.php. Вот такой вот подход позволяет сохранить нам все правки в файлах при обновлениях, а joomla ведь обновляется часто.

    Зачем вообще вносить правки в файл шаблона?

    Это необходимо для создания определенных классов блокам для придания нужных им стилей. Вот, например, первому пункту «Главная» нам необходимо добавить класс «first», а последнему класс «last». Промежуточному пункту класс не присваивается. По умолчанию в хлебных крошках практически никаких классов нет. Мы же добавим не только классы, но и выведем наши хлебные крошки в виде ненумерованного списка. Чем то напоминает горизонтальное меню . Ну а далее дело обстоит за стилями css.

    В исходниках я прикладываю файл default.php, уже измененный мной. Его просто необходимо залить в данную директорию — /templates/ваш шаблон/html/mod_breadcrumbs/. Все картинки добавляем в папку «images» вашего шаблона — /templates/ваш шаблон/images/. Следующее, что необходимо сделать это добавить в ваш файл стилей следующий код ниже. Обратите внимание — пути картинок должны быть правильными. У меня файл стилей лежит в каталоге «css», поэтому пути до картинок имеют такой вот адрес.

    /**************************** Хлебные крошки */ .breadcrumbs { background: none repeat scroll 0 0 #F5F6F1; border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; margin:10px 0; height: 22px; line-height: 22px; overflow: hidden; } .breadcrumbs ul { margin:0; padding:0; list-style:none; } .breadcrumbs ul li { background: url("../images/bc-bgt.png") repeat-x scroll 0 0 transparent; display: block; float: left; list-style: none outside none; margin: 0; padding: 0; } .breadcrumbs ul li a { background: url("../images/bcbg.png") no-repeat scroll 0 0 transparent; color: #565656; display: block; margin: 0; padding: 0 10px 0 20px; } .breadcrumbs ul li.first a { background:none; padding: 0 0 0 10px; } .breadcrumbs ul li.first a.pathway {padding:0 8px 0 10px} .breadcrumbs ul li.first a span.first { display:block; background:url(../images/bcbg-first.png) right center no-repeat #CECBBA; padding:0 15px 0 0 } .breadcrumbs ul li a { background: url("../images/bcbg.png") no-repeat scroll 0 0 transparent; color: #565656; display: block; margin: 0; padding: 0 8px 0 20px; } .breadcrumbs ul li.last { background: url("../images/bc-bgta.png") repeat-x scroll 0 0 transparent; } .breadcrumbs ul li { background: url("../images/bc-bgt.png") repeat-x scroll 0 0 transparent; display: block; float: left; list-style: none outside none; margin: 0; padding: 0; } .breadcrumbs ul li.last .inner { background: url("../images/bc-bgla.png") no-repeat scroll 0 0 transparent; display: block; } .breadcrumbs ul li.last .inner span { background: url("../images/bc-bgra.png") no-repeat scroll right 0 transparent; color: #FFFFFF; display: block; padding: 0 10px 0 20px; }

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

    Ну а на этом все. Если что непонятно спрашивайте в комментариях. Всем пока!!!

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

    Решил более глубже капнуть - и наконец-то обнаружил толковый результат. Есть 2 варианта решения этой задачи, Вы выбирайте тот который Вам нравиться больше

    Вариант 1

    В первом варианте мы изменим код стандартных хлебных крошек

    И так, как же осуществить замену старого кода Joomla 3, на новый? Нам нужно в директории template/ваш шаблон/html/mod_breadcrumbs/default.php

    Открываем файл default.php и заменяем следующим кодом:

    defined("_JEXEC") or die ;

    После этого можем сразу проверить работоспособность микроразметки хлебных крошек Joomla 3, переходим на гугловскую проверку по этой ссылке и нажимаем на ссылку "Получить данные по URL" вписываем ссылку с 2-3 уровнем вложенности и должен получиться вот такой результат:

    Как видите все работает. Но Вас наверное насторожили 2 ошибки, я сейчас все объясню почему так. Нужно этого для того- что бы последняя крошка не была ссылкой, и не ссылалась сама на себя, так как это актуально. Прогнав через гугл бот, я сразу же увидел как это работает в поисковой выдаче:

    Скачать модуль;

  • Установить;
  • Выключить старый;
  • Новый модуль включить и указать позицию старого модуля.
  • Какой из этих вариантов Вам нравиться- такой и используйте. Я изначально первый метод использовал, но потом все-таки поставил модуль.

    Всем спасибо за внимание, надеюсь статья была для Вас полезной!