< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Joomla » Стильные хлебные крошки на сайте под управлением Joomla

Стильные хлебные крошки на сайте под управлением Joomla

Стильные хлебные крошки на сайте под управлением Joomla

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

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

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

Хлебные крошки на сайте Joomla

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

Стильные хлебные крошки на сайте под управлением Joomla

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

Для начала скачайте исходники файлов.

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

Читайте также:  Дополнительные поля в Joomla 3.7.+

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

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

[ad#728x90-middle]

В исходниках я прикладываю файл 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;
}

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

Читайте также:  Компонент Xmap - карта сайта для joomla 2.5, joomla 3.0

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

Заур Магомедов
Заур Магомедов

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (6 оценок, среднее: 4,17 из 5)
Загрузка...

Проверка орфографии

Система Orphus

41 комментариев к статье "Стильные хлебные крошки на сайте под управлением Joomla"

  • Nasiba Янв 09, 2018 в 15:36

    Извините, может не по тему… но незнаю что делать. Помогите. Я создала модуль-Навигатор сайта, а на сайте кроме Главная, не чего не отображется. В меню и подменю перехожу, там только “главная” стоит.

    • Заур Магомедов
      Заур Магомедов Янв 09, 2018 в 16:07

      Может у вас в модуле крошек выставлено Показывать последний – нет

      • Nasiba Янв 10, 2018 в 7:16

        стоить-да. Я гуглила, и из шаблона удалил все папку com_content, потом появились крошек, только дизайн сайта не норм стала.
        Незнаю поможет ил нет, раньше было норм работала, но после переустановки Joomla, так получается, может нужно установить еще какие то компоненти или модули???

  • Роман Сен 26, 2015 в 0:28

    Извиняюсь за флуд, проблема решена. Люди что-бы не было ошибок с данным модулем breadcrumps, отключайте кэширование во вкладке “дополнительные опции”

    • Заур Магомедов
      Заур Магомедов Сен 26, 2015 в 1:20

      Да, такое случается, если включено кеширование в общих настройках сайта.

  • Роман Сен 25, 2015 в 23:32

    Забыл сказать что у меня отредактированный файл router.php который убирает id из ссылок, может в этом причина…

  • Роман Сен 25, 2015 в 23:23

    Здравствуйте Заур. Частенько к Вам заглядываю за советом и что-то поискать. Залил файлы хлебные крошки согласно инструкции на хост, все отображается и работает. Но происходит маленькая беда, порядок действий:
    Жму Главная > Микрозаймы > 24 Финанс (24 финанас начинает отображатся лишь после чистки кэша в джумле) Далее после чистки кэша перехожу просто Главная > Микрозаймы ( Но теперь уже на странице “Микрозаймы” отображается “24 Финанс” чего не должно быть).

    P.S. – В общем в целом отображение происходит после чистки кэша и с ошибками. Что делать?

  • Владимир Сен 16, 2015 в 12:49

    Здравствуйте!
    Заур, спасибо, очень толковая статья!
    Крошки в J3 какие-то не внятные. Хорошо, что есть люди разбирающиеся в вопросе и желающие делиться, спасибо!
    Подскажете?
    Джумла 3.4.3, Beez_20. Крошки в столбик.
    в шаблоне в папке css есть файл template.css но в нём очень мало букав))

    body
    {
            background: #fff;
            color: #000000;
            font-size: 100.1%;
            padding: 0px;
            text-align: center;
    }
    
    body.contentpane {
    		width:auto;
    		margin:10px;
    		text-align: left;
    }
    img { border: 0 none; }
    

    и всё.
    Вставил, пропустив одну строку Ваш код из комента – Заур Магомедов 07/11/2013 в 21:56, ни чего не изменилось.
    В настройках модуля “путь на сайте” пробовал ставить: no, well и другие указанные там стили, не помогло.
    Хотя чуть раньше следуя другим советам уже создал папку mod_breadcrumbs (так как не было такой)
    мой сайт/templates/beez_20/html/mod_breadcrumbs
    и скопировал/перенёс туда файлы default.php и index.html из
    мой сайт/modules/mod_breadcrumbs без добавлений и исправлений, крошки всё так же в столбик.

    • Заур Магомедов
      Заур Магомедов Сен 16, 2015 в 12:53

      Значит не в тот файл стилей вставили. Нужен рабочий файл стилей. Проинспектируйте Firebug’ом или встроенным инспектором кода и определите главный файл css. Вообще зачем вы стандартную тему используете, после первого обновления у вас все файлы затрутся.

      • Владимир Сен 16, 2015 в 13:35

        Вроде нашёл, layout.css в этот файл вставил и поиск стал в линию, только пока просто текст… Со стилями попробую разобраться.
        На счёт стандартной темы не понял, создать копию этого шаблона и переименовать его, чтоб не затирался??

        • Заур Магомедов
          Заур Магомедов Сен 16, 2015 в 14:28

          На счёт стандартной темы не понял, создать копию этого шаблона и переименовать его, чтоб не затирался??

          Совершенно верно.

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

Войти с помощью: 

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

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]