Шаблоны Joomla 5 и 6: как устроены, стили, overrides и child templates

Что такое шаблон и для чего он нужен

Шаблон Joomla определяет представление сайта: общую HTML-структуру, позиции модулей, стили, подключение ресурсов и часть параметров оформления. При этом шаблон не заменяет компоненты и плагины — он отвечает прежде всего за то, как их вывод выглядит на странице.

В Joomla 5 и 6 стандартный шаблон сайта — Cassiopeia, административной части — Atum. Современная работа с шаблонами также включает стили шаблона, overrides и дочерние шаблоны, поэтому старое представление «index.php + один style.css» уже слишком упрощённое.

Что такое шаблон Joomla

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

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

Шаблон сайта и шаблон администратора

В Joomla используются два типа шаблонов:

  • Site template — оформление публичной части сайта, которую видят посетители;
  • Administrator template — оформление панели управления Joomla.

Они решают разные задачи и хранятся отдельно. Поэтому изменение дизайна сайта не означает, что нужно редактировать административный шаблон.

Из чего состоит современный шаблон

Набор файлов зависит от разработчика, но в шаблоне обычно присутствуют:

  • templateDetails.xml — файл с описанием шаблона и его параметров;
  • PHP-файлы, отвечающие за формирование разметки;
  • CSS и JavaScript;
  • изображения, шрифты и другие ресурсы;
  • папка html с переопределениями, если они используются;
  • языковые файлы;
  • дополнительные файлы template framework, если шаблон построен на таком фреймворке.

Файл templateDetails.xml особенно важен. Это manifest-файл, то есть файл описания расширения. В нём Joomla получает информацию о шаблоне, его файлах, позициях модулей и доступных параметрах.

Что такое позиции модулей

Позиция модуля — это именованная область шаблона, куда можно назначить один или несколько модулей.

Например, разработчик может предусмотреть позиции с названиями sidebar-right, footer, menu или другими. Эти названия не являются универсальными: каждый шаблон может иметь собственный набор позиций.

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

Что такое стиль шаблона

Один установленный шаблон может иметь несколько стилей шаблона (Template Styles) с разными параметрами.

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

Что такое template override

Template override позволяет изменить HTML-вывод компонента или модуля, не редактируя исходные файлы самого расширения.

Например, если вас не устраивает стандартное расположение элементов статьи, можно создать собственную версию файла разметки внутри шаблона. Joomla увидит такой override и будет использовать его вместо стандартного файла.

Это важно при обновлениях: если изменить исходный файл компонента или модуля напрямую, при следующем обновлении Joomla или расширения эти изменения могут быть перезаписаны.

Когда override действительно нужен

Override имеет смысл использовать, когда нужно изменить именно разметку вывода:

  • переставить элементы местами;
  • изменить HTML-классы;
  • убрать ненужный блок;
  • добавить собственную разметку;
  • адаптировать вывод компонента или модуля под дизайн сайта.

Но не стоит создавать override ради настройки, которая уже предусмотрена самой Joomla. Отображение заголовка, категории, автора и многих других элементов обычно можно изменить через параметры материала, категории или пункта меню.

Что такое child template

Child template (дочерний шаблон) использует файлы родительского шаблона, но позволяет хранить собственные изменения отдельно.

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

Такой подход особенно удобен при обновлениях: разработчик может обновлять родительский шаблон, а ваши собственные доработки остаются отдельно.

Как создать дочерний шаблон в Joomla

Рассмотрим создание child template на примере стандартного шаблона Cassiopeia.

Сначала в админ-панели Joomla откройте Система. В блоке Шаблоны выберите Шаблоны сайта.

Система Joomla 5 — раздел Шаблоны сайта

Откроется список установленных шаблонов сайта. Найдите родительский шаблон, для которого хотите создать дочерний вариант. В нашем примере это Cassiopeia. Нажмите Редактировать Cassiopeia.

Выбор шаблона Cassiopeia для редактирования в Joomla 5

В редакторе шаблона нажмите кнопку Создать дочерний шаблон.

Кнопка Создать дочерний шаблон в редакторе Cassiopeia Joomla 5

Появится окно создания. В поле Имя дочернего шаблона укажите собственное название, например cassiopeia_child.

Поле Дополнительные стили в простом случае можно оставить без изменений. После этого нажмите Создать дочерний шаблон.

Создание дочернего шаблона Cassiopeia в Joomla 5

Как включить созданный дочерний шаблон

После создания child template сайт не обязательно начнёт использовать его автоматически. Нужно проверить стиль нового шаблона.

Откройте Система → Стили сайта. Здесь созданный дочерний шаблон можно:

  • назначить по умолчанию, если он должен использоваться на всём сайте;
  • назначить отдельным пунктам меню, если он нужен только для определённых страниц.

После назначения откройте сайт и убедитесь, что используется нужный стиль шаблона.

Где редактировать созданный child template

Вернитесь в Система → Шаблоны сайта и откройте созданный дочерний шаблон.

Обычно в child template добавляют только те файлы, которые нужно изменить или дополнить. Остальные файлы продолжают наследоваться от родительского шаблона.

Если нужно изменить HTML-вывод компонента или модуля, откройте вкладку Создание переопределений. Joomla создаст необходимые файлы в папке html шаблона, после чего их можно редактировать отдельно от исходных файлов расширения.

Где хранятся CSS и JavaScript

В старых инструкциях по Joomla часто фигурирует один файл style.css. В современных шаблонах всё может быть устроено значительно сложнее.

Шаблон может использовать несколько CSS- и JavaScript-файлов, собственный template framework и систему управления ресурсами Joomla. Статические файлы также могут находиться не только в /templates/, но и в /media/templates/.

Поэтому перед редактированием не стоит угадывать имя файла. Сначала нужно определить, какой стиль или скрипт действительно отвечает за нужный элемент страницы.

Как понять, что именно менять

Не каждое изменение дизайна требует правки файлов шаблона. Удобнее двигаться от самого простого варианта к более сложному.

  1. Сначала проверьте настройки Joomla. Возможно, нужный параметр уже есть в материале, категории, пункте меню или настройках шаблона.
  2. Если нужно изменить только внешний вид — цвет, размер шрифта, отступы или границы — чаще всего достаточно собственного CSS.
  3. Если нужно изменить расположение или HTML-разметку элементов, может понадобиться template override.
  4. Если требуется более широкая доработка самого шаблона, которую нужно сохранить отдельно от обновлений, удобнее использовать child template.

Если непонятно, откуда берётся конкретный элемент или стиль, можно воспользоваться инструментами разработчика браузера — DevTools. Они позволяют выбрать элемент страницы и посмотреть, какие CSS-классы и стили к нему применяются.

Открыть DevTools в большинстве браузеров можно клавишей F12 или сочетанием Ctrl + Shift + I. Но изменять файлы сразу после этого не нужно: сначала определите источник элемента и проверьте доступные настройки Joomla.

Как установить сторонний шаблон

Используйте шаблон, который явно поддерживает установленную у вас версию Joomla.

Подробная инструкция: «Как установить шаблон на Joomla».

Перед установкой проверьте разработчика, документацию, историю обновлений и условия лицензии. Не стоит скачивать платные шаблоны из неофициальных «бесплатных» архивов: вместе с изменённым шаблоном можно получить вредоносный код или скрытые ссылки.

Нужно ли удалять копирайты и внешние ссылки шаблона

Если в шаблоне есть ссылка на разработчика, сначала выясните, откуда она выводится и что разрешает лицензия конкретного продукта.

Обычная открытая ссылка на разработчика сама по себе не означает заражение сайта или SEO-проблему. Совсем другая ситуация — неизвестные, скрытые или неожиданно появившиеся ссылки.

Техническая проверка подробно рассмотрена в материале «Как найти и удалить внешние ссылки из шаблона Joomla 5 и 6».

Итоги

Шаблон Joomla — это не просто «картинка сайта». Он связывает структуру страницы, позиции модулей, стили, ресурсы и способы вывода отдельных элементов.

В Joomla 5 и 6 безопасная кастомизация строится по принципу: сначала использовать штатные настройки, затем собственный CSS, при необходимости — overrides и child templates.

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

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

Нашли ошибку или неточность?

Выделите фрагмент текста и нажмите Ctrl + Enter. Также можно воспользоваться кнопкой ниже.

Нашли ошибку или неточность?

Выделенный фрагмент будет добавлен в сообщение автоматически. При необходимости добавьте пояснение.

Форма защищена от автоматических отправок

Данные используются только для проверки и исправления материала.