Хлебные крошки joomla 2 5. Хлебные крошки в Joomla. Зачем вообще вносить правки в файл шаблона

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

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

Что дают навигационные крошки

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

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

Настраиваем навигацию

Настройка навигационных крошек займёт буквально несколько минут и не потребует наличия семи пядей во лбу. Заходим в админку Joomla 1.5 и идём по пути Расширение – Менеджер модулей, где при наличии отсутствия готового модуля нажимаем зелёненькую кнопочку «Создать» в правом верхнем углу. В представшем перед нами списке модулей ищем «Навигатор сайта», он же Breadcrumbs, и приступаем к его настройкам.

Основные правила настройки навигатора:

  • Главная страница должны быть главной, не надо ставить типа "купить трактора" - это спам,
  • Не включайте отображение последней страницы,
  • Корректируйте отображение крошек в CSS, дабы они не портили дизайн.

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

Правая часть настроек не менее важна. Так главную страницу лучше указывать, при этом тут не надо проявлять такую же фантазию, как при именовании самого модуля, ибо название будет видно на сайте. Лучше всего дать «морде» название сайта – так будет удобнее всем. Следующий важный пункт «Показать последний», в котором лучше поставить галочку в поле «нет», так при таком раскладе последняя страница навигации отображаться не будет, то есть не будет ссылки со страницы на саму себя. Разделитель текста – это дело вкуса, у меня стоит |.

A breadcrumbs module can be really helpful if you have a site with a lot of information. For instance, if you have multiple menu items and sub menu items, a breadcrumbs module will display the location of each page as you browse through all the pages on the site.This article explains how create a Breadcrumbs Module. After logging into the administration area (the back end) of your site, go to Extensions > Module Manager.

Once inside the Module Manager, select the "New" button to create a new module.


Select "Breadcrumbs" from the list of module types that appears.


In the "Details" area of the module, add a title. For the purposes of the sample breadcrumbs that we"re creating for these screenshots, we"ll title our module "Breadcrumbs". Also, select a position for the module by selecting the "Select Position" button. For the purposes of this article, we"ve selected the "Breadcrumbs" position in the Protostar Template .


Be sure to save your work. Visit the front end of your site, hit refresh, and you"ll see your breadcrumbs module in the position that you selected.

Всем привет! Решил у себя на сайте оформить хлебные крошки в микроформат, начал в нете искать актуальную информацию, но ничего толкового я не обнаружил. Много постов с разными вариантами и своими доработками, но при проверке все было не актуально, и много статей только для версий 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 ошибки, я сейчас все объясню почему так. Нужно этого для того- что бы последняя крошка не была ссылкой, и не ссылалась сама на себя, так как это актуально. Прогнав через гугл бот, я сразу же увидел как это работает в поисковой выдаче:

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

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

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

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

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

    Вот как выглядят хлебные крошки по умолчанию в 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; }

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

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