Всем привет! Решил у себя на сайте оформить хлебные крошки в микроформат, начал в нете искать актуальную информацию, но ничего толкового я не обнаружил. Много постов с разными вариантами и своими доработками, но при проверке все было не актуально, и много статей только для версий 1.5 или 2.5.
Решил более глубже капнуть — и наконец-то обнаружил толковый результат. Есть 2 варианта решения этой задачи, Вы выбирайте тот который Вам нравиться больше
Вариант 1
В первом варианте мы изменим код стандартных хлебных крошек
И так, как же осуществить замену старого кода Joomla 3, на новый? Нам нужно в директории template/ваш шаблон/html/mod_breadcrumbs/default.php
Открываем файл default.php и заменяем следующим кодом:
get("showHere", 1))
{
echo "
" .JText::_("MOD_BREADCRUMBS_HERE")."";
}
for ($i = 0; $i < $count; $i ++)
{
if ($i == 1 && !empty($list[$i]->link) && !empty($list[$i-1]->link) && $list[$i]->link == $list[$i-1]->link)
{
unset($list[$i]);
}
}
end($list);
$last_item_key = key($list);
prev($list);
$penult_item_key = key($list);
foreach ($list as $key=>$item) :
$show_last = $params->get("showLast", 1);
if ($key != $last_item_key)
{
if (!empty($item->link))
{
echo "
link . "" class="pathway" rel="v:url" property="v:title">" . $item->name . "";
}
else
{
echo "" . $item->name . "";
}
if (($key != $penult_item_key) || $show_last)
{
echo " ".$separator." ";
}
}
elseif ($show_last)
{
echo "
" . $item->name . "";
}
endforeach; ?>
После этого можем сразу проверить работоспособность микроразметки хлебных крошек Joomla 3, переходим на гугловскую проверку по этой ссылке и нажимаем на ссылку «Получить данные по URL» вписываем ссылку с 2-3 уровнем вложенности и должен получиться вот такой результат:
Как видите все работает. Но Вас наверное насторожили 2 ошибки, я сейчас все объясню почему так. Нужно этого для того- что бы последняя крошка не была ссылкой, и не ссылалась сама на себя, так как это актуально. Прогнав через гугл бот, я сразу же увидел как это работает в поисковой выдаче:
Вариант 2
Второй вариант заключается в установке модуля для хлебных крошек Joomla 3, Microdata Google Breadcrumbs — это офф сайт источника где можно скачать, устанавливается он как простой модуль. Все что нужно сделать, это:
- Скачать модуль;
- Установить;
- Выключить старый;
- Новый модуль включить и указать позицию старого модуля.
Какой из этих вариантов Вам нравиться- такой и используйте. Я изначально первый метод использовал, но потом все-таки поставил модуль.
Всем спасибо за внимание, надеюсь статья была для Вас полезной!
Для хорошего ранжирования сайта на Joomla необходимо не только иметь понятную для самого себя структуру ресурса, но правильно её преподнести роботам систем поиска и посетителям, для чего неплохо использовать хлебные крошки
. За счёт навигационных хлебных крошек в Joomla также упрощается поиск необходимых материалов пользователями, так что получается хороший коктейль из сытых волков и целых овец.
Мой блог стоит на Joomla 1.5, поэтому я не буду нарушать покой сайтов заказчиков, находящихся на более новых движках, тем более что версия 1.5 при грамотных настройках надёжна, как автомат Калашникова и её функционала вполне достаточно для нормальной работы и блога и сайта.
Что дают навигационные крошки
Коротенько так расскажу о преимуществах наличия хлебных крошек на проекте. Они не только упрощают навигацию, хотя и этого не мало, но стимулируют и пользователя к путешествиям по сайту и ботов к прогулкам по структуре ресурса. С одной стороны это улучшает юзабилити и поведенческий фактор, о котором говорят даже в базарный день на Рязанском рынке, но многие оптимизаторы не доходят далее его накрутки.
С другого бока хлебные крошки дают ПС чёткое представление о структуре проекта, что улучшает его ранжирование и индексацию при отсутствии серьёзных проблем в оптимизации страниц и всего сайта в целом.
Настраиваем навигацию
Настройка навигационных крошек займёт буквально несколько минут и не потребует наличия семи пядей во лбу. Заходим в админку Joomla 1.5 и идём по пути Расширение – Менеджер модулей, где при наличии отсутствия готового модуля нажимаем зелёненькую кнопочку «Создать» в правом верхнем углу. В представшем перед нами списке модулей ищем «Навигатор сайта», он же Breadcrumbs,
и приступаем к его настройкам.
Основные правила настройки навигатора:
- Главная страница должны быть главной, не надо ставить типа "купить трактора" - это спам,
- Не включайте отображение последней страницы,
- Корректируйте отображение крошек в CSS, дабы они не портили дизайн.
Заголовок хлебных крошек необходим по той простой причине, что иначе модуль не будет создан, поэтому пишем ему любое желаемое имя (можно матерное), нажимаем кнопочку «Включён» и отключаем одновременно заголовок от показа пользователям, чтобы не травмировать их хрупкие нервы своим умение дарить названия кому и чему угодно. Остаётся в левой части модуля выбрать для его вывода позицию, и указать на каких страницах крошки будут отображаться.
Правая часть настроек не менее важна. Так главную страницу лучше указывать, при этом тут не надо проявлять такую же фантазию, как при именовании самого модуля, ибо название будет видно на сайте. Лучше всего дать «морде» название сайта – так будет удобнее всем. Следующий важный пункт «Показать последний», в котором лучше поставить галочку в поле «нет», так при таком раскладе последняя страница навигации отображаться не будет, то есть не будет ссылки со страницы на саму себя. Разделитель текста – это дело вкуса, у меня стоит |.
Микроразметка (Microdata) является стандартом семантической оптимизации и широко внедряется на сайты, поскольку позволяет увеличить CTR показатели страниц и положительно влияет на поисковую оптимизацию в целом. В данной статье мы рассмотрим пример внедрения микроразметки в стандартный модуль mod_breadcbrumbs
, который в русском пакете локализации Joomla называется "Навигатор сайта". Внедрение микро-раметки размечает хлебные крошки и в поисковой выдаче визуально это выглядит так:
Добавление микро-раметки позволяет пользователю видеть в поисковой выдаче иерархическую структуру страницы и перейти на другие уровни из цепочки навигации. Например, структура размеченной статьи в выдаче будет такой: “What We Do” > “Joomla”
. Соответственно, это позволит юзеру по клику вернуться на уровень категории “Joomla” или в категорию “What We Do”.
Для того, чтобы добавить микроразметку в модуль хлебных крошек, нам потребуется изменить всего 4 строчки кода. Прибегнем к излюбленному методу - переопределению разметки модуля на уровне шаблона сайта.
Ниже статьи прилагается файл с переопределением. Скачайте его и положите в папку:
Внимание! В вашем шаблоне уже может быть переопределен модуль mod_breadcrumb, если это так, то необходимо работать именно с ним
/templates/<название_вашего_шаблона>/html/
Файл default.php
должен находится в папке mod_breadcrumbs
, если таковой в директории html шаблона нет, следует ее создать.
В результате, должна получиться такая цепочка:
/templates/<название_вашего_шаблона>/html/mod_breadcrumbs/default.php
Для тех, кому интересно, можете внести изменения вручную:
В оригинальном файле default.php
модуля mod_breadcrumbs
найдите строчку:
Echo "
" . JText::_("MOD_BREADCRUMBS_HERE") . " ";
И замените ее на:
Echo "
";
найдите строки:
";
if (!empty($item->link))
{
echo "link . "">" . $item->name . "";
}
else
{
echo "" . $item->name . "";
} if (($key != $penult_item_key) || $show_last)
{
echo "" . $separator . "";
} echo "";
и замените их на:
// Render all but last item - along with separator
echo "
";
if (!empty($item->link))
{
echo "link . "">" . $item->name . "
";
}
else
{
echo "" . $item->name . "";
} 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 ;
get("showHere" , 1))
echo "" .JText::_("MOD_BREADCRUMBS_HERE"). "" ;
for ($i = 0; $i < $count ; $i ++)
if ($i == 1 && ! empty ($list [ $i ]->link) && ! empty ($list [ $i -1]->link) && $list [ $i ]->link == $list [ $i -1]->link)
unset($list [ $i ]);
$last_item_key = key($list);
$penult_item_key = key($list);
foreach ($list as $key => $item) :
$show_last = $params ->get("showLast" , 1);
if ($key != $last_item_key)
if (! empty ($item ->link))
echo "link . "" class="pathway" rel="v:url" property="v:title">" . $item ->name . "" ;
echo "" . $item ->name . "" ;
if (($key != $penult_item_key) || $show_last)
echo " " . $separator . " " ;
elseif ($show_last)
echo "" . $item ->name . "" ;
endforeach ; ?>
|
После этого можем сразу проверить работоспособность микроразметки хлебных крошек Joomla 3, переходим на гугловскую проверку по этой ссылке и нажимаем на ссылку "Получить данные по URL" вписываем ссылку с 2-3 уровнем вложенности и должен получиться вот такой результат:
Как видите все работает. Но Вас наверное насторожили 2 ошибки, я сейчас все объясню почему так. Нужно этого для того- что бы последняя крошка не была ссылкой, и не ссылалась сама на себя, так как это актуально. Прогнав через гугл бот, я сразу же увидел как это работает в поисковой выдаче:
Скачать модуль;
Установить;
Выключить старый;
Новый модуль включить и указать позицию старого модуля.
Какой из этих вариантов Вам нравиться- такой и используйте. Я изначально первый метод использовал, но потом все-таки поставил модуль.
Всем спасибо за внимание, надеюсь статья была для Вас полезной!