Как поменять логику кнопок «Вперёд» и «Назад» в блоге Joomla (Helix Ultimate)
🧠 Почему Joomla ведёт себя «нелогично»?
Я давно заметил, что в блоге Joomla кнопка «Вперёд» ведёт к более старым материалам, а «Назад» — к более новым. И это ломало мозг. Оказалось, это не баг, а особенность, заложенная разработчиками.
По умолчанию сортировка материалов в блоге идёт «от новых к старым» (сначала самые свежие). При такой сортировке:
- Кнопка «Вперёд» (Next) понимается как «следующая страница» в общем списке, где находятся более старые записи.
- Кнопка «Назад» (Prev) ведёт на предыдущую страницу, то есть к более новым.
С точки зрения логики «перелистывания страниц» это правильно. Но с точки зрения интуитивного восприятия пользователя — полный бред и ощущение дискомфорта (для меня — настоящая заноза в ..., уж простите за откровенность). Человек читает статью, видит внизу справа «Вперёд» и ожидает, что попадёт на более свежий материал, а не в архив. Это нарушает ожидания и раздражает перфекционистов (особенно меня).
✅ Решение: меняем логику кнопок местами
Мы не будем переписывать ядро Joomla или шаблон. Вместо этого добавим небольшой JavaScript-код, который при загрузке страницы меняет ссылки кнопок местами. Левая кнопка («Назад») будет вести туда, куда раньше вела правая, и наоборот.
📝 Инструкция для Helix Ultimate (и большинства шаблонов)
Надо зайти в админку Joomla → Система → Стили шаблонов сайта (System → Site Template Styles).
Нажать на название активного шаблона Helix Ultimate.
Перейти на вкладку «Пользовательский код» (Custom Code).
В поле «Пользовательский JavaScript» (Custom JavaScript) вставь код, приведённый ниже.
Нажать Сохранить.
Очистить кэш Joomla (Система → Очистить кэш) и кэш браузера (Ctrl+F5).
/*** Begin of the button's order changing code ***/
document.addEventListener('DOMContentLoaded', function() {
// Находим кнопки по атрибутам rel="next" и rel="prev"
var nextLink = document.querySelector('a[rel="next"]');
var prevLink = document.querySelector('a[rel="prev"]');
if (nextLink && prevLink) {
// Меняем ссылки местами
var nextHref = nextLink.getAttribute('href');
var prevHref = prevLink.getAttribute('href');
nextLink.setAttribute('href', prevHref);
prevLink.setAttribute('href', nextHref);
}
});
/*** End of the button's order changing code ***/
🧪 Результат
Теперь любая страницу блога с пагинацией:
- Кнопка «Вперёд» (справа) ведёт к более новым материалам.
- Кнопка «Назад» (слева) — к более старым.
⚠️ Примечание
Код работает независимо от шаблона, если кнопки имеют атрибуты rel="next" и rel="prev". В Helix Ultimate это именно так.
При обновлении шаблона или Joomla код не сломается, так как он добавлен в пользовательскую секцию.
Если на сайте другой шаблон, просто проверь инспектором браузера, есть ли у кнопок эти атрибуты. В большинстве современных шаблонов они есть.
📌 Заключение
Теперь навигация в блоге работает так, как и должна — интуитивно и логично. А моя душа перфекциониста ликует — решена ещё одна задачка, дофаминовые рецепторы работают на полную катушку. Из таких моментов и складывается настоящая Beautiful Sober Life. 🤣