Разобравшись, как подключить HTML-заголовки шаблона сайта в Joomla с помощью <jdoc:include type="head"/>, возникает вопрос: «Как подключить собственные CSS стили в шаблон сайта?» Для этого нужно воспользоваться классом JHtml, который в том числе может помочь решить и этот вопрос. Ниже в этой статье рассмотрим то, как включить собственные CSS стили в шаблон сайта так, чтобы они попали в заголовок HTML-документа в контейнер <head>.
Подключение собственных стилей CSS из папки шаблона сайта в Joomla
Самым очевидным способом будет вручную прописать путь до сайта в контейнер <head> файла index.php шаблона:
<link href="/templates/template_name/css/template.css" rel="stylesheet" type="text/css" />Подключив таким образом CSS стили шаблона, всё начнёт работать и стили подключатся, однако если сервер выставляет время хранения кэша в браузере пользователя, при обновлении стилей, придётся менять название файла или связываться с пользователем для того, чтобы он почистил кэш браузера. Морока ещё та, и есть решение, которое позволяет решить эту задачу средствами Joomla.
Для этого нужно подключать собственные CSS-стили шаблона используя класс JHtml и выглядит это следующим образом:
<?php Html::_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => 'true')); ?>Использование класса JHtml Joomla для подключения собственных стилей CSS из папки шаблона сайта
Рассмотрим подробнее, какие именно аргументы передаются классу JHtml и что в итоге получается.
Вставлять конструкцию подключения собственных стилей CSS можно в любом месте шаблона в файле
index.php, но лучше это делать до или сразу после использования конструкции<jdoc:include type="head"/>, так как это наиболее логичное место, где в первую очередь придёт в голову искать данное подключение.
Итак, после вставки приведённого выше кода на выходе в HTML-документе получим такой результат, который позволит использовать собственные стили шаблона:
<link href="/templates/template_name/css/template.css?38a386ff1fe6ccae1ae2b154acd60f1a" rel="stylesheet" type="text/css" />Соотнеся результат с введённым в шаблон кодом, можно выявить следующие закономерности:
- аргумент
'stylesheet'преобразуется в аргумент HTML-тега<link>— rel="stylesheet" - аргумент
'template.css'преобразуется в аргумент HTML-тега<link>—href="..."с правильным относительным путём до файла - аргументы массива:
'version' => 'auto'преобразуется в случайное число, которое служит меткой для определения версии css-файла, и при обновлении шаблона, браузер запросит новую версию стилей у сервера автоматически'relative' => 'true'особо не на что не влияет
Выводы
Таким образом, воспользовавшись встроенным в Joomla классом JHtml можно без труда вставлять собственные CSS-файлы со стилями шаблона. Они автоматически подключаются в шаблон и встают в правильное место в вёрстке HTML-документа. При этом, если использовать расширение Joomla для того, чтобы убрать лишние пробельные символы из CSS файлов, наверняка эта операция применится и к собственным файлам с CSS-стилями.
